/* ── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; margin: 0; padding: 0; background: #0a0a0a; color: var(--text); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: 'Rajdhani', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; }

:root {
    --red:     #e31c1c;  /* brand accent */
    --dark:    #0a0a0a;  /* darkest bg — body, hero overlays */
    --mid:     #111;     /* standard section bg */
    --surface: #151515;  /* elevated surfaces — cards, inputs */
    --grey:    #1a1a1a;  /* subtle section bg */
    --lift:    #262626;  /* raised sections — CTA band, Why Choose */
    --band:    #2e2e2e;  /* info bands — phone band */
    --border:  #1e1e1e;  /* standard border */
    --text:    #999;     /* standard body text */
}

/* ── TOP INFO BAR ────────────────────────────────────── */
.top-bar { background: var(--grey); padding: 7px 0; font-size: 0.78rem; border-bottom: 1px solid #242424; }
.tb-item { display: inline-flex; align-items: center; gap: 6px; color: #777; margin-right: 22px; }
.tb-item i { color: var(--red); font-size: 0.75rem; }
.tb-item a { color: #999; text-decoration: none; transition: color 0.2s; }
.tb-item a:hover { color: #fff; }
.tb-right { text-align: right; }

/* ── NAVBAR ──────────────────────────────────────────── */
.site-nav { background: #fff; border-bottom: 3px solid var(--red); z-index: 1030; }
.site-nav .navbar-brand { padding: 6px 0; }
.site-nav .navbar-brand img { height: 76px; }
.site-nav .nav-link { font-family: 'Inter', sans-serif; color: #888 !important; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 1rem !important; transition: color 0.2s; }
.site-nav .nav-link:hover { color: #111 !important; }
.site-nav .nav-link.active { color: var(--red) !important; }
.site-nav .dropdown-menu { background: #fff; border: 1px solid #eee; border-top: 3px solid var(--red); border-radius: 0; padding: 4px 0; box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
.site-nav .dropdown-item { font-family: 'Inter', sans-serif; color: #666; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 20px; transition: all 0.15s; }
.site-nav .dropdown-item:hover { background: #f8f8f8; color: var(--red); padding-left: 28px; }
.site-nav .navbar-toggler { border: 1px solid #ddd !important; }
.nav-phone-badge { background: var(--red); color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; padding: 7px 18px; text-decoration: none; transition: background 0.2s; display: inline-block; }
.nav-phone-badge:hover { background: #b81414; color: #fff; }

/* ── HERO ────────────────────────────────────────────── */
/* Note: background-image set inline on the element so paths resolve from the page */
.hero { position: relative; min-height: 78vh; background: url('/assets/images/homepage_hero.jpeg') center 35% / cover no-repeat; display: flex; align-items: flex-start; }
.hero-dim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.63) 100%); }
.hero-inner { position: relative; z-index: 2; padding: 80px 0 40px; }
.hero-line { width: 60px; height: 4px; background: var(--red); margin-bottom: 16px; }
.hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.5rem); color: #fff; line-height: 0.9; margin-bottom: 20px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.hero h1 .accent { color: var(--red); }
.hero-sub { color: #bbb; font-family: 'Inter', sans-serif; font-size: 1rem; max-width: 480px; margin-bottom: 36px; }
.btn-race-solid { display: inline-block; background: var(--red); color: #fff; padding: 12px 32px; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background 0.2s; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); }
.btn-race-solid:hover { background: #b81414; color: #fff; }
.btn-race-outline { display: inline-block; background: transparent; color: #fff; padding: 10px 30px; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255,255,255,0.4); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); transition: all 0.2s; }
.btn-race-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

/* ── PHONE BAND ──────────────────────────────────────── */
.phone-band { background: var(--band); padding: 24px 0; border-top: 1px solid #383838; }
.phone-band .pnum { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--red); letter-spacing: 0.02em; text-decoration: none; transition: color 0.2s; display: block; }
.phone-band .pnum:hover { color: #ff4444; }
.phone-band .pemail { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: #bbb; text-decoration: none; transition: color 0.2s; display: block; margin-top: 6px; }
.phone-band .pemail:hover { color: #ccc; }
.phone-band .pemail i { color: var(--red); }
.phone-band .phours { color: #bbb; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.8; }
.phone-band .phours i { color: var(--red); }

/* ── SERVICES ────────────────────────────────────────── */
#services { background: var(--mid); padding: 80px 0 70px; }
.sec-line { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sec-line::before { content: ''; width: 36px; height: 3px; background: var(--red); }
.sec-line span { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.sec-hdg { font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 6px; }
.sec-sub { color: #777; font-size: 0.87rem; margin-bottom: 40px; }

/* Image-backed service cards */
.svc-img-link { display: block; text-decoration: none; color: inherit; }
.svc-img-card { position: relative; overflow: hidden; height: 280px; }
.svc-img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-img-dim { display: none; }
.svc-img-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--red); z-index: 3; }
.svc-img-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 22px; z-index: 2; background: rgba(0,0,0,0.72); }
.svc-img-header { display: flex; align-items: center; gap: 12px; }
.svc-img-icon { font-size: 1.4rem; color: var(--red); flex-shrink: 0; line-height: 1; }
.svc-img-card h4 { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 0; line-height: 1.15; }
.svc-img-desc { font-family: 'Inter', sans-serif; color: rgba(255,255,255,0); font-size: 0.82rem; line-height: 1.55; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, color 0.3s ease, margin-top 0.3s ease; margin-top: 0; }
.svc-img-card:hover .svc-img-desc { color: rgba(255,255,255,0.72); max-height: 90px; margin-top: 8px; }

/* ── DIAGONAL SECTION ────────────────────────────────── */
.diag-section { background: #0e0e0e; padding: 80px 0 100px; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); margin: -40px 0; position: relative; z-index: 1; }
.diag-img { width: 100%; height: 380px; object-fit: cover; }
.diag-section h2 { font-size: 2.6rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.diag-section h2 em { color: var(--red); font-style: normal; }
.diag-section p { color: var(--text); font-size: 0.9rem; }
.check-race { list-style: none; padding: 0; margin: 0 0 28px; }
.check-race li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-size: 0.88rem; margin-bottom: 8px; }
.check-race li::before { content: '\f101'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.castrol-badge { margin-bottom: 24px; } .castrol-badge img { width: 100%; height: auto; display: block; }
@media (min-width: 576px) { .castrol-badge img { height: 55px; width: auto; max-width: none; } }

/* ── REMAP SECTION ───────────────────────────────────── */
.remap-section { position: relative; min-height: 360px; background: url('/assets/images/remapping-bg.jpeg') center / cover no-repeat; display: flex; align-items: center; }
.remap-dim { position: absolute; inset: 0; background: rgba(227,28,28,0.82); }
.remap-inner { position: relative; z-index: 2; padding: 60px 0; }
.remap-section h2 { font-size: 2.4rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.remap-section p { color: rgba(255,255,255,0.8); max-width: 580px; font-size: 0.95rem; }
.remap-badge { display: inline-block; margin-bottom: 14px; } .remap-badge img { height: 45px; width: auto; display: block; filter: drop-shadow(0 0 12px rgba(0,0,0,1)) drop-shadow(0 0 24px rgba(0,0,0,0.8)); }
.footer-bf-badge { display: inline-block; margin-top: 0; margin-left: -6px; opacity: 0.85; transition: opacity 0.2s; } .footer-bf-badge img { height: 32px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(0,0,0,0.8)); } .footer-bf-badge:hover { opacity: 1; }
.footer-castrol-badge { display: block; margin-top: 10px; margin-left: -1px; opacity: 0.85; transition: opacity 0.2s; } .footer-castrol-badge img { width: 200px; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(0,0,0,0.8)); } .footer-castrol-badge:hover { opacity: 1; }
.footer-klarna-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; opacity: 0.85; transition: opacity 0.2s; text-decoration: none; } .footer-klarna-badge img { height: 24px; width: auto; display: block; } .footer-klarna-badge:hover { opacity: 1; }
.footer-klarna-badge__label { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1rem; color: #ccc; white-space: nowrap; }
.btn-race-white { display: inline-block; background: #fff; color: var(--red); padding: 12px 30px; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); transition: all 0.2s; }
.btn-race-white:hover { background: #111; color: #fff; }
.btn-race-white-outline { display: inline-block; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.55); padding: 10px 30px; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); transition: all 0.2s; }
.btn-race-white-outline:hover { background: #111; color: #fff; border-color: #111; }

/* ── CTA BAND ────────────────────────────────────────── */
.cta-band { background: var(--lift); border-top: 3px solid var(--red); padding: 50px 0 47px; }
.cta-band h2 { font-size: 2.2rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.cta-band .hours { display: flex; align-items: flex-start; color: #888; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cta-band .hours i { color: var(--red); flex-shrink: 0; margin-top: 0.15em; }
@media (max-width: 767.98px) { .hours-sep { display: none; } }

/* ── FOOTER ──────────────────────────────────────────── */
.footer-stripe { height: 22px; background: repeating-linear-gradient(-45deg, #dedede 0px, #dedede 16px, #e31c1c 16px, #e31c1c 20px, #111 20px, #111 36px); }
.site-footer { background: #060606; padding: 50px 0 0; }
.footer-about { color: #777; font-size: 0.84rem; }
.footer-hdg { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: block; }
.footer-hdg--link { text-decoration: none; transition: opacity 0.2s; } .footer-hdg--link:hover { opacity: 0.75; color: var(--red); }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { color: #777; font-size: 0.84rem; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--red); }
.footer-ci { display: flex; gap: 10px; color: #777; font-size: 0.84rem; margin-bottom: 8px; }
.footer-ci i { color: var(--red); margin-top: 3px; }
.footer-ci a { color: #777; text-decoration: none; }
.footer-ci a:hover { color: var(--red); }
.footer-logo img { height: 85px; margin-bottom: 14px; }
/* Stage 1 remapping page */
.remap-step { background: var(--grey); padding: 28px 24px; height: 100%; }
.remap-step-num { font-family: 'Rajdhani', sans-serif; font-size: 3.5rem; font-weight: 700; color: var(--red); line-height: 1; margin-bottom: 12px; }
.remap-step h4 { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; margin-bottom: 10px; }
.remap-step p { color: var(--text); font-size: 0.87rem; margin: 0; }
.bf-badge-feature { height: 60px; width: auto; filter: drop-shadow(0 0 8px rgba(0,0,0,0.8)); transition: opacity 0.2s; display: block; }
.bf-badge-feature:hover { opacity: 0.85; }

.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 36px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%); background: #1a1a1a; color: #777; font-size: 1rem; text-decoration: none; transition: background 0.2s, color 0.2s; }
.footer-social a:hover { background: var(--red); color: #fff; }
.footer-bottom { border-top: 1px solid #111; margin-top: 32px; padding: 18px 0; text-align: center; color: #444; font-size: 0.78rem; }
.footer-bottom a { color: #444; text-decoration: none; transition: color 0.2s; } .footer-bottom a:hover { color: #777; }

/* ── FAB ─────────────────────────────────────────────── */
.fab { position: fixed; bottom: 28px; right: 28px; width: 58px; height: 58px; background: var(--red); color: #fff; border: none; box-shadow: 0 4px 22px rgba(227,28,28,0.55); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; z-index: 1039; cursor: pointer; transition: transform 0.2s, background 0.2s; clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); border-radius: 0; }
.fab:hover { transform: scale(1.08); background: #b81414; }

/* ── OFFCANVAS ───────────────────────────────────────── */
#qmCanvas { background: #0d0d0d; max-width: 380px; width: 100%; }
#qmCanvas .offcanvas-header { background: var(--red); }
#qmCanvas .offcanvas-title { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
#qmCanvas .btn-close { filter: invert(1) brightness(2); }
#qmCanvas .offcanvas-body { padding: 22px; }
.qm-lbl { font-family: 'Inter', sans-serif; font-size: 0.72rem; color: #ddd; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; display: block; font-weight: 600; }
.qm-ctrl { background: var(--surface); border: 1px solid var(--border); color: #ccc; border-radius: 0; font-size: 0.9rem; font-family: 'Inter', sans-serif; }
.qm-ctrl:focus { background: var(--grey); border-color: var(--red); color: #fff; box-shadow: none; }
.qm-ctrl::placeholder { color: #555; }
.qm-submit { width: 100%; background: var(--red); color: #fff; border: none; padding: 12px; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; cursor: pointer; transition: background 0.2s; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%); }
.qm-submit:hover { background: #b81414; }
.qm-foot { color: #888; font-size: 0.75rem; text-align: center; margin-top: 14px; font-family: 'Inter', sans-serif; }
.qm-foot a { color: var(--red); text-decoration: none; }

/* ── PAGE HEADER (interior pages) ───────────────────────── */
.page-header { background: var(--dark); padding: 64px 0 56px; border-bottom: 1px solid var(--grey); }
.page-header-line { width: 48px; height: 3px; background: var(--red); margin-bottom: 18px; }
.page-header h1 { font-family: 'Rajdhani', sans-serif; font-size: 3rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.1; }
.page-header p { color: var(--text); font-size: 1rem; margin: 0; max-width: 560px; }

/* ── CONTACT PAGE ────────────────────────────────────────── */
.contact-section { background: var(--mid); padding: 28px 0; border-bottom: 1px solid var(--grey); }
.contact-panel-hdg { font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 0; }
.contact-info-item > i { color: var(--red); font-size: 1rem; margin-top: 3px; width: 18px; flex-shrink: 0; }
.contact-info-item a { color: #ccc; text-decoration: none; }
.contact-info-item a:hover { color: var(--red); }
.contact-info-item span { color: #ccc; }
.ci-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #666; font-weight: 600; margin-bottom: 2px; }
.ci-closed { color: #555; }
.ci-social { display: flex; flex-direction: column; gap: 4px; }
.cf-submit { background: var(--red); color: #fff; border: none; padding: 13px 32px; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); }
.cf-submit:hover { background: #b81414; }
.cf-success { padding: 40px 0; text-align: center; }
.cf-success-icon { font-size: 3rem; color: #5daa5d; margin-bottom: 16px; }
.cf-success h4 { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; color: #fff; margin-bottom: 10px; }
.cf-success p { color: #888; font-size: 0.95rem; }

/* ── COVERAGE MAP ────────────────────────────────────────── */
.map-section { background: var(--dark); padding: 52px 0 72px; }
#coverage-map { width: 100%; height: 100%; min-height: 380px; border: 1px solid var(--border); }
.postcode-checker-panel { background: var(--mid); padding: 36px 32px; height: 100%; display: flex; flex-direction: column; }
.postcode-panel-hdg { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.postcode-panel-sub { color: #888; font-size: 0.9rem; margin-bottom: 28px; }
.postcode-row { display: flex; gap: 10px; flex-wrap: wrap; }
.postcode-input { background: var(--mid); border: 1px solid var(--border); color: #ccc; font-family: 'Inter', sans-serif; font-size: 0.95rem; padding: 10px 14px; flex: 1; min-width: 180px; max-width: 260px; text-transform: uppercase; outline: none; }
.postcode-input:focus { border-color: var(--red); color: #fff; }
.postcode-input::placeholder { color: #555; text-transform: none; }
.postcode-btn { background: var(--red); color: #fff; border: none; padding: 10px 24px; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%); }
.postcode-btn:hover { background: #b81414; }
.postcode-result { min-height: 1.6em; font-size: 0.92rem; margin-top: 16px; font-family: 'Inter', sans-serif; }
.postcode-reset { background: none; border: 1px solid #333; color: #888; font-family: 'Inter', sans-serif; font-size: 0.78rem; padding: 6px 14px; margin-top: 14px; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.postcode-reset:hover { border-color: var(--red); color: #ccc; }
.postcode-result.error   { color: #c0392b; font-weight: 600; }
.postcode-result.neutral { color: #666; }
.postcode-success { display: flex; gap: 16px; align-items: flex-start; background: #0d1f0d; border: 1px solid #1a401a; padding: 20px; margin-top: 4px; }
.postcode-outside { display: flex; gap: 16px; align-items: flex-start; background: #1f0d0d; border: 1px solid #3a1a1a; padding: 20px; margin-top: 4px; }
.postcode-outside-icon { font-size: 2rem; color: #c0392b; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.postcode-notfound { display: flex; gap: 16px; align-items: flex-start; background: #131210; border: 1px solid #2e2a1e; padding: 20px; margin-top: 4px; }
.postcode-notfound-icon { font-size: 2rem; color: #8a7a50; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.postcode-notfound-hdg { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.postcode-notfound-hdg strong { color: #c8b878; }
.postcode-outside-hdg { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.postcode-outside-hdg strong { color: #e07070; }
.postcode-success-icon { font-size: 2rem; color: #5daa5d; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.postcode-success-hdg { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.postcode-success-sub { color: #aaa; font-size: 0.85rem; margin-bottom: 14px; }
.postcode-success-sub strong { color: #ddd; }
#enquiry { scroll-margin-top: 80px; }
.enquiry-section { background: var(--grey); padding: 52px 0 72px; }
.postcode-success-cta { display: inline-block; background: var(--red); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 8px 20px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 100%, 7px 100%); transition: background 0.2s; }
.postcode-success-cta:hover { background: #b81414; color: #fff; }

@media (min-width: 992px) {
    .hero-inner { padding-top: 140px; }
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .site-nav .navbar-collapse { background: #fff; padding: 12px 16px; border-top: 1px solid #eee; }
    .diag-section { clip-path: none; margin: 0; padding: 60px 0; }
}
@media (max-width: 767.98px) {
    .hero h1 { font-size: 2.6rem; }
    .diag-img { height: 240px; }
    .svc-img-card { height: 240px; }
    .svc-img-desc { color: rgba(255,255,255,0.65) !important; max-height: 80px !important; margin-top: 8px !important; }
    .fab { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 1.2rem; }
}

/* ── PAGE HEADER HERO VARIANT ────────────────────────── */
.page-header-hero { position: relative; background-size: cover; background-position: center; border-bottom: 3px solid var(--red); }
body.has-page-hero .site-nav { border-bottom-color: transparent; }
.page-header-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.54) 100%); }
.page-header-hero .container { position: relative; z-index: 1; }
.page-header-hero p { color: #ccc; }

/* ── SERVICING PAGE ──────────────────────────────────── */
.svc-included-section { background: var(--mid); padding: 60px 0; }
.svc-included-img { width: 100%; height: 420px; object-fit: cover; }
.svc-check-grid { columns: 2; column-gap: 20px; }
.svc-check-grid .check-race { break-inside: avoid; }
.castrol-credential { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 8px 18px 8px 12px; margin-bottom: 36px; }
.castrol-credential img { height: 36px; width: auto; display: block; }
.castrol-credential span { color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

.why-section { background: var(--lift); padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.why-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red); padding: 32px 24px; height: 100%; }
.why-card-icon { font-size: 2rem; color: var(--red); margin-bottom: 14px; line-height: 1; }
.why-card h4 { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.why-card p { color: var(--text); font-size: 0.87rem; margin: 0; }
.why-section-img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }

.egr-notice { background: #fff3cd; border-left: 4px solid #e6a817; padding: 28px 32px; }
.egr-notice-hdg { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1000; margin-bottom: 14px; }
.egr-notice p { color: #3a2e00; font-size: 0.88rem; line-height: 1.75; }

.faq-section { background: var(--dark); padding: 60px 0; }
.faq-section .accordion-item { background: var(--mid); border: 1px solid var(--border); border-radius: 0 !important; margin-bottom: 4px; }
.faq-section .accordion-button { background: var(--mid); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0 !important; box-shadow: none; padding: 18px 22px; }
.faq-section .accordion-button:not(.collapsed) { background: #181818; color: var(--red); }
.faq-section .accordion-button::after { filter: invert(1) brightness(0.6); }
.faq-section .accordion-button:not(.collapsed)::after { filter: invert(23%) sepia(96%) saturate(3500%) hue-rotate(347deg) brightness(88%); }
.faq-section .accordion-body { background: var(--mid); color: var(--text); font-size: 0.9rem; padding: 16px 22px 22px; border-top: 1px solid var(--border); }
.svc-faq-img { width: 100%; height: 560px; object-fit: cover; }

@media (max-width: 767.98px) {
    .svc-included-img { height: 260px; margin-top: 24px; }
    .svc-check-grid { columns: 1; }
    .svc-check-grid .check-race { margin-bottom: 0; }
    .svc-faq-img { height: 280px; }
}

/* ── REPAIRS PAGE ────────────────────────────────────── */
.repairs-categories-section { background: var(--mid); padding: 60px 0; }
.repair-cat-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red); padding: 28px 24px; height: 100%; }
.repair-cat-card-icon { font-size: 1.8rem; color: var(--red); margin-bottom: 14px; line-height: 1; }
.repair-cat-card h4 { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.repair-cat-card p { color: var(--text); font-size: 0.87rem; margin: 0; }

/* ── TIMING BELTS & CHAINS PAGE ──────────────────────── */
.timing-section { background: var(--dark); padding: 60px 0; }
.timing-nav { list-style: none; padding: 0; margin: 0 0 48px; display: flex; border-bottom: 2px solid var(--border); }
.timing-nav-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 32px 14px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.timing-nav-btn:hover { color: #fff; }
.timing-nav-btn.active { color: #fff; border-bottom-color: var(--red); }
.timing-faq { padding-top: 48px; border-top: 1px solid var(--border); margin-top: 48px; }
.timing-faq .accordion-item { background: var(--mid); border: 1px solid var(--border); border-radius: 0 !important; margin-bottom: 4px; }
.timing-faq .accordion-button { background: var(--mid); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0 !important; box-shadow: none; padding: 18px 22px; }
.timing-faq .accordion-button:not(.collapsed) { background: #181818; color: var(--red); }
.timing-faq .accordion-button::after { filter: invert(1) brightness(0.6); }
.timing-faq .accordion-button:not(.collapsed)::after { filter: invert(23%) sepia(96%) saturate(3500%) hue-rotate(347deg) brightness(88%); }
.timing-faq .accordion-body { background: var(--mid); color: var(--text); font-size: 0.9rem; padding: 16px 22px 22px; border-top: 1px solid var(--border); }

/* ── VEHICLE SEARCH ──────────────────────────────────────── */
.vs-breadcrumb { background: var(--grey); padding: 12px 0; border-bottom: 1px solid var(--border); }
.vs-breadcrumb .breadcrumb { font-size: 0.82rem; margin: 0; }
.vs-breadcrumb .breadcrumb-item a { color: var(--text); text-decoration: none; }
.vs-breadcrumb .breadcrumb-item a:hover { color: #fff; }
.vs-breadcrumb .breadcrumb-item.active { color: #fff; }
.vs-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--red); }

.vs-section { background: var(--mid); padding: 60px 0; }
@media (max-width: 767px) { .vs-section .sec-hdg { font-size: 1.8rem; } }
.vs-subtitle { color: var(--text); }

.vs-filter-input { background: var(--surface); border: 1px solid var(--border); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.95rem; padding: 12px 16px; width: 100%; max-width: 360px; outline: none; transition: border-color 0.2s, background 0.2s; }
.vs-filter-input::placeholder { color: #888; }
.vs-filter-input:focus { border-color: var(--red); background: var(--grey); }

.vs-makes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vs-make-btn { background: var(--surface); border: 1px solid #dedede; border-top: 3px solid #dedede; color: #fff; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; overflow: hidden; padding: 0; text-align: center; text-decoration: none; transition: border-top-color 0.2s, transform 0.15s; }
.vs-make-btn:hover { border-color: #dedede; border-top-color: var(--red); transform: translateY(-2px); }
.vs-make-btn:hover .vs-make-logo-wrap { background: #c6c6c6; }
.vs-make-btn:hover .vs-make-name { background: var(--grey); }
.vs-make-logo-wrap { background: #dedede; display: flex; align-items: center; justify-content: center; height: 72px; flex-shrink: 0; padding: 10px 14px; width: 100%; transition: background 0.2s; }
.vs-make-logo { width: auto; height: auto; max-width: 80px; max-height: 44px; object-fit: contain; display: block; }
.vs-make-fallback-icon { color: var(--red); font-size: 1.8rem; }
.vs-make-name { padding: 7px 10px; line-height: 1.2; background: var(--surface); }

.vs-model-card { background: #dedede; border: 1px solid #cacaca; border-left: 3px solid transparent; color: #111; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; text-decoration: none; transition: border-left-color 0.2s, background 0.2s; }
.vs-model-card:hover { border-left-color: var(--red); background: #c6c6c6; color: #111; }
.vs-model-name { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }
.vs-model-arrow { color: var(--red); font-size: 0.8rem; }

.vs-gen-list { margin: 0; }
.vs-gen-item { background: #dedede; border: 1px solid #cacaca; border-left: 3px solid transparent; color: #111; display: flex; align-items: center; padding: 16px 20px; text-decoration: none; transition: border-left-color 0.2s, color 0.2s, background 0.2s; margin-bottom: 16px; }
.vs-gen-item:hover { border-left-color: var(--red); background: #c6c6c6; color: #111; }
.vs-gen-name { color: #111; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; flex: 1; }
.vs-gen-years { color: #555; font-size: 0.82rem; margin: 0 16px; }
.vs-gen-arrow { color: var(--red); font-size: 0.8rem; }

.vs-fuel-header { background: var(--band); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; margin-bottom: 12px; }
.vs-fuel-header.petrol i { color: #5cb85c; }
.vs-fuel-header.diesel i { color: #fff; }
.vs-fuel-header.hybrid i { color: #64b5f6; }
.vs-fuel-header i { color: var(--red); }

.vs-variant-card { background: #dedede; border: 1px solid #cacaca; border-top: 3px solid transparent; color: #111; display: flex; flex-direction: column; gap: 8px; padding: 20px; text-decoration: none; transition: border-top-color 0.2s, background 0.2s; height: 100%; }
.vs-variant-card:hover { border-top-color: var(--red); background: #c6c6c6; color: #111; }
.vs-variant-name { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }
.vs-gain-badge { background: var(--red); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; display: inline-block; align-self: flex-start; }

.vs-gauges { background: #272727; border: 1px solid var(--border); }
.vs-gauges-hdr { display: grid; grid-template-columns: 84px repeat(3, 1fr); padding: 14px 20px 10px; background: #dedede; border-bottom: 1px solid #cacaca; }
.vs-gauge-col-hdr { text-align: center; color: #111; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.vs-gauge-row { display: grid; grid-template-columns: 84px repeat(3, 1fr); align-items: center; padding: 20px; }
.vs-gauge-row + .vs-gauge-row { border-top: 1px solid var(--border); }
.vs-gauge-row-label { display: flex; flex-direction: column; gap: 2px; padding-right: 8px; }
.vs-gauge-row-label span { color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; }
.vs-gauge-row-label small { color: var(--text); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vs-gauge-cell { display: flex; justify-content: center; padding: 4px; }
.vs-gauge-svg { width: 100%; max-width: 130px; height: auto; display: block; overflow: visible; }
.vs-gauge-track { fill: none; stroke: var(--border); stroke-width: 9; }
.vs-gauge-arc-stock { fill: none; stroke: #484848; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.vs-gauge-arc-tuned { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.vs-gauge-arc-gain  { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.vs-gauge-num { fill: #aaa; font-family: 'Rajdhani', sans-serif; font-size: 27px; font-weight: 700; }
.vs-gauge-num-red { fill: #fff; }
.vs-gauge-unit-text { fill: #777; font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
@media (max-width: 575px) {
    .vs-gauges-hdr,
    .vs-gauge-row { grid-template-columns: 56px repeat(3, 1fr); padding: 12px 10px; }
    .vs-gauge-col-hdr { font-size: 0.95rem; }
    .vs-gauge-row-label span { font-size: 0.82rem; }
    .vs-gauge-row-label small { font-size: 0.7rem; }
}

.vs-spec-section { background: #272727; border: 1px solid var(--border); padding: 20px 24px 24px; }
.vs-spec-chip { background: #dedede; border: 1px solid #cacaca; padding: 14px 12px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.vs-spec-label { color: #555; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.vs-spec-value { color: #111; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 600; }
.vs-spec-ecus { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.vs-ecu-badge { background: #c4c4c4; border: 1px solid #adadad; color: #111; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; padding: 3px 8px; letter-spacing: 0.02em; }

.vs-result-cta { background: var(--surface); border: 1px solid var(--border); padding: 24px; }
.vs-cta-text { color: var(--text); margin-bottom: 0; }

.vs-body-copy { color: var(--text); }

.vs-related { background: var(--grey); padding: 20px 24px; border: 1px solid var(--border); }
.vs-related-title { color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.vs-engine-badge { background: var(--surface); border: 1px solid var(--border); color: #ccc; font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; padding: 5px 12px; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.vs-engine-badge:hover { border-color: var(--red); color: #fff; background: var(--lift); }

.vs-error { color: var(--text); }
.vs-error a { color: var(--red); }

/* ── Privacy Policy ─────────────────────────────────── */
.privacy-section { padding: 60px 0; background: var(--dark); }
.privacy-meta { color: #555; font-size: 0.85rem; margin-bottom: 48px; }
.privacy-hdg { font-family: 'Rajdhani', sans-serif; font-size: 1.55rem; font-weight: 700; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 48px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.privacy-hdg:first-of-type { margin-top: 0; }
.privacy-sub { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; color: #ccc; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 28px; margin-bottom: 10px; }
.privacy-section p { color: var(--text); margin-bottom: 14px; }
.privacy-list { color: var(--text); padding-left: 1.3rem; margin-bottom: 14px; }
.privacy-list li { margin-bottom: 8px; }
.privacy-list strong { color: #ccc; }
.privacy-contact-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); padding: 20px 24px; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.privacy-contact-row { display: flex; align-items: center; gap: 12px; color: var(--text); }
.privacy-contact-row i { color: var(--red); width: 16px; flex-shrink: 0; }
.privacy-contact-row a { color: #ccc; text-decoration: none; }
.privacy-contact-row a:hover { color: var(--red); }