:root { 
  --cscblue: #2b2b2b; /* Converted from blue to dark charcoal grey */
  --cscred: #d41217; 
  --cscwhite: #f3f3f3; 
  --cscdark: #1a1a1a; 
  --reg-yellow: #ffcc00; 
  --csc-light: #f8f9fa;  
  --csc-red: #dc3545; 
  --csc-dark: #1a1d20;  
  --csc-grey: #6c757d;  
  --csc-card-bg: #111111; 
  --csc-border: #222222; 
  --csc-card: #1a1d21; 
  --font-body: 'Roboto', sans-serif;  
  --csc-text-dark: #2c3344; 
  --csc-text-body: #444b59; 
  --csc-navy: #1f1f1f; /* Replaced navy with neutral dark grey */
  --csc-navy-2: #161616; 
  --csc-navy-card: #1c1c1c; 
  --csc-red: #d32f2f; 
  --csc-red-dark: #b71c1c; 
  --csc-grey-bg: #eef1f4; 
  --csc-grey-bg-2: #e6e9ed; 
  --csc-grey-bg-3: #f7f8fa; 
  --csc-black: #1a1a1a; 
  --csc-black-2: #121212;  
  --csc-silver: #8a8f99; 
  --csc-green: #1d9e63;  
  --csc-amber: #d97706; 
  --font: 'Roboto', sans-serif; 

  /* Surface & Background Colors */
  --tp-black: #ffffff;
  --tp-dark: #f8fafc;
  --tp-dark-2: #ffffff; 
  --tp-dark-3: #f1f5f9; 
  --tp-dark-4: #e2e8f0;

  /* Accent Colors (Neutralized from blue to grey/dark) */
  --tp-blue: #333333;
  --tp-blue-2: #1a1a1a;
  --tp-blue-light: #555555; 
  --tp-blue-glow: rgba(0, 0, 0, 0.08);
  --tp-green: #059669;
  --tp-amber: #d97706;
  --tp-red: #dc2626;

  /* Borders & Dividers */
  --tp-border: #e2e8f0;
  --tp-border-2: #cbd5e1;

  /* Typography Colors */
  --tp-text: #0f172a; 
  --tp-text-2: #334155; 
  --tp-text-3: #64748b; 
  
  --font: 'Inter', sans-serif;
 }
@import url('https://fonts.cdnfonts.com/css/uk-number-plate');
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--csc-text-body); background: var(--csc-light); overflow-x: hidden; }

.text-tagline-small {font-size:14px; line-height:24px;}
.brand-2-btn, .styled-title {text-transform:uppercase;}
a, a:hover {text-decoration:none;}
#main,, .main-timeline-2, .navbar li, .timeline-2 {position:relative;}
.about .icon-box .title a:hover, .blog .blog-comments .comment h5 a:hover, .blog .entry .entry-footer a:hover, .blog .entry .entry-title a:hover, .blog .sidebar .categories ul a:hover, .blog .sidebar .recent-posts h4 a:hover, .faq .faq-list a.collapsed:hover, .services .icon-box:hover .icon i, .services .icon-box:hover .title a, .text-cscblue, .text-dark, a {color:var(--cscblue);}
a:hover {color:#152137 !important;}
.text-shadow {text-shadow:4px 4px #000;}
.container-custom {width:80%;}
.slimeline {width:60%;}

.h6, h6 {font-size:19px; line-height:29px;}
.gm {font-size:21px; line-height:31px;}
.h5, h5 {font-size:23px; line-height:33px;}
.h4, h4 {font-size:27px; line-height:37px;}
.h3, h3 {font-size:33px; line-height:43px;}
.h2, h2 {font-size:39px; line-height:49px;}
.h1, h1 {font-size:47px; line-height:57px;}
.h1-l {font-size:57px; line-height:67px;}
.h1-xl {font-size:68px; line-height:78px;}
.fs-7 { font-size: 12px; line-height:16px;}
.red-underline { border-bottom: 3px solid var(--csc-red); margin-bottom: 18px; }

@media only screen and (max-width: 920px) {
.h1-xl {font-size:30px; ine-height:40px;}
.h1-l {font-size:27px; line-height:37px;}
.h1, h1 {font-size:27px; line-height:37px;}
.h2, h2 {font-size:25px; line-height:35px;}
.h3, h4 {font-size:23px; line-height:33px;}
.h4, h4 {font-size:22px; line-height:32px;}
.h5, h5 {font-size:21px; line-height:31px;}
.gm {font-size:19px; line-height:25px;}
.h6, h6 {font-size:18px; line-height:24px;}
}

.dropshadow {-webkit-box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5); box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5);}
.services .icon-box, .values .card-body, .why-us .icon-boxes .icon-box {box-shadow:0 2px 15px rgba(0, 0, 0, 0.1);}
.p-10 {padding:100px;}
.p-9 {padding:90px;}
.p-8 {padding:80px;}
.p-7 {padding:70px;}
.p-6 {padding:60px;}
.p-5 {padding:50px;}
.p-20 {padding:20px;}
.pt-10 {padding-top:100px;}
.pt-9 {padding-top:90px;}
.pt-8 {padding-top:80px;}
.pt-7 {padding-top:70px;}
.pt-6 {padding-top:60px;}
.pt-5 {padding-top:50px;}
.pb-10 {padding-bottom:100px;}
.pb-9 {padding-bottom:90px;}
.pb-8 {padding-bottom:80px;}
.pb-7 {padding-bottom:70px;}
.pb-6 {padding-bottom:60px;}
.pb-5 {padding-bottom:50px;}
.pe-10 {padding-right:100px;}
.pe-9 {padding-right:90px;}
.pe-8 {padding-right:80px;}
.pe-7 {padding-right:70px;}
.pe-6 {padding-right:60px;}
.pe-5 {padding-right:50px;}
.ps-10 {padding-left:100px;}
.ps-9 {padding-left:90px;}
.ps-8 {padding-left:80px;}
.ps-7 {padding-left:70px;}
.ps-6 {padding-left:60px;}
.ps-5 {padding-left:50px;}
.ms {margin-left:40px;}
.ms-40 {margin-right:40px !important;}
.ms-30 {margin-right:30px !important;}
.ms-20 {margin-right:20px !important;}
.me {margin-right:40px;}
.me-40 {margin-left:40px !important;}
.me-30 {margin-left:30px !important;}
.me-20 {margin-left:20px !important;}
.mb-80 {margin-bottom:80px !important;}
.mb-70 {margin-bottom:70px !important;}
.mb-60 {margin-bottom:60px !important;}
.mb-50 {margin-bottom:50px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-20 {margin-bottom:20px !important;}
.bg-blue, .brand-1 a, .brand-2 {background-color:var(--cscblue);}
.brand-1, .brand-1 a, .brand-3 {background-color:var(--cscred);}
.brand-4 {background-color:#ecedf0; color:#000;}
.topbar {background:var(--cscred); height:50px;}
.topbar {font-size:14px; color:rgba(255, 255, 255, 0.8);}
.topbar .contact-info i {font-style:normal; color:var(--cscred);}
.topbar .contact-info i a, .topbar .contact-info i span {padding-left:5px; color:var(--cscwhite);}
.topbar .contact-info i a {line-height:0; transition:0.3s;}
.topbar .contact-info i a:hover {color:var(--cscred);}
.topbar .cta a {color:var(--cscwhite); background:var(--cscred); display:inline-block; transition:0.3s;}
.blog .entry .entry-content .read-more a:hover, .topbar .cta a:hover {background:#ff6b3b;}
.faq .faq-list a, .pricing h4 {font-family:'Raleway', sans-serif;}
.scrolled-offset {margin-top:70px;}
.main {z-index:3;}
.mobile-nav-toggle {color:#473d3a; font-size:28px; cursor:pointer; display:none !important; line-height:0; transition:0.5s;}
.about .icon-box:hover .icon i, .blog .blog-pagination li.active a, .blog .blog-pagination li:hover a, .btn-cscred, .footer a, .footer a:hover, .footer a:visited, .text-white:hover, .whats-app:hover {color:var(--cscwhite);}
.text-btn-white {color:var(--cscwhite);}
.text-btn-white:hover {color:var(--cscblue);}

/* ── HERO ── */
.homepage .hero-section { position: relative; min-height: 82vh; display: flex; align-items: center; text-align: center; background: linear-gradient(rgba(15,18,28,0.72), rgba(15,18,28,0.78)), url('/assets/images/rolling-road/csc-motors-rolling-road-glenrothes-fife.jpg') center/cover no-repeat; padding: 100px 0 80px; padding-top:140px; }
.subpages .hero-section {  position: relative; padding: 130px 0 80px; background: linear-gradient(rgba(12, 15, 24, 0.78), rgba(12, 15, 24, 0.82)) center / cover no-repeat; text-align: center; }
.hero-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--csc-red); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(211,47,47,0.18); border: 1px solid rgba(211,47,47,0.4); border-radius: 100px; padding: 5px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8080; margin-bottom: 20px; }
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff8080; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.35} }
.hero-title { font-size: clamp(28px,4.5vw,52px); font-weight: 900; color: #fff; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 14px; }
.homepage .hero-title { text-align: left; }
.hero-title span { color: var(--csc-red); }
.hero-sub { font-size: clamp(16px,2vw,20px); color: rgba(255,255,255,0.78); line-height: 1.55; margin-bottom: 32px;  }
.homepage .hero-sub{ max-width: 560px; text-align: left; }
.btn-csc-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--csc-red); color: #fff; border: none; border-radius: 4px; padding: 14px 28px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; transition: background 0.2s, transform 0.15s; }
.btn-csc-primary:hover { background: var(--csc-red-dark); color: #fff !important; transform: translateY(-2px); }
.btn-csc-outline-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 4px; padding: 13px 28px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: border-color 0.2s, background 0.2s; }
.btn-csc-outline-white:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); color: #fff !important; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.12); }
.subpages .hero-trust-row { justify-content: center; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; }
.hero-trust-item i { color: var(--csc-red); font-size: 17px; }
.hero-trust-item.gold i { color: #f5c518; }
.hero-trust-item span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }

/* ── VRM STRIP ── */
.vrm-strip { background: var(--csc-navy-card); padding: 28px 0; }
.vrm-strip-title { font-size: 15px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 16px; }
.vrm-strip-title span { color: var(--csc-red); }
.vrm-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; }
.vrm-select-csc { background: var(--csc-navy); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 10px 16px; font-size: 13.5px; font-family: var(--font); flex: 1; min-width: 160px; max-width: 200px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23aaa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.vrm-select-csc:focus { outline: none; border-color: var(--csc-red); }
.btn-vrm-go { background: var(--csc-red); color: #fff; border: none; border-radius: 4px; padding: 10px 26px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.btn-vrm-go:hover { background: var(--csc-red-dark); }
.section-title h1, .section-title h2, .section-title h3, .section-title h4 {margin-bottom:20px; padding-bottom:0; color:var(--cscblue); font-family:'Raleway', sans-serif;}
.section-bg {background-color:var(--cscwhite);}
.section-dark-bg {background-color:#202121; color:var(--cscwhite);}
.section-title {text-align:center; padding-bottom:30px;}
.section-container {padding:3.75em;}
@media only screen and (max-width: 720px) { .section-container { width: 97%; padding:2em; } }
@media only screen and (min-width:721px) and  (max-width: 990px) { .section-container { width: 95%; padding:2em; }}
@media only screen and (min-width:991px) and (max-width: 1090px) { .section-container { width: 90%; padding:2em; }}

.section-title p {margin-bottom:0;}
.blog .blog-comments, .blog .entry-single, .blog .sidebar .sidebar-item, .footer .footer-top .footer-contact, .footer .footer-top .footer-links, .why-us .content p {margin-bottom:30px;}
.why-us {position:relative; z-index:2;}
.why-us .content .more-btn {display:inline-block; background:rgba(234, 36, 40, 0.4); padding:6px 30px 8px; color:var(--cscwhite); border-radius:50px; transition:0.4s ease-in-out;}
.blog .blog-comments .reply-form p, .why-us .content .more-btn i {font-size:14px;}
.why-us .content .more-btn:hover {color:var(--cscred); background:var(--cscwhite);}
.why-us .icon-boxes .icon-box {text-align:center; border-radius:10px; background:var(--cscwhite); padding:40px 30px; width:100%;}
.why-us .icon-boxes .icon-box i {font-size:40px; color:var(--cscblue); margin-bottom:30px;}
.why-us .icon-boxes .icon-box h4 {font-size:20px; font-weight:700; margin:0 0 30px;}
.why-us .icon-boxes .icon-box p {font-size:15px; color:#716f6f;}
.about .icon-boxes h4 {font-size:18px; color:#7f6d68; margin-bottom:15px;}
.about .icon-boxes h3 {font-size:28px; font-weight:700; color:#554945; margin-bottom:15px;}
.about .icon-box {margin-top:40px;}
.about .icon-box .icon {float:left; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border:2px solid #ffcbba; border-radius:50px; transition:0.5s; background:var(--cscwhite);}
.about .icon-box .icon i {color:var(--cscblue); font-size:32px;}
.about .icon-box:hover .icon {background:var(--cscblue); border-color:var(--cscblue);}
.about .icon-box .title {margin-left:85px; font-weight:700; margin-bottom:10px; font-size:18px;}
.about .icon-box .title a {color:#343a40; transition:0.3s;}
.about .icon-box .description {margin-left:85px; line-height:24px; font-size:14px;}
@-webkit-keyframes pulsate-btn { 0% {transform:scale(0.6, 0.6); opacity:1;} 100% {transform:scale(1, 1); opacity:0;} }
@keyframes pulsate-btn { 0% {transform:scale(0.6, 0.6); opacity:1;} 100% {transform:scale(1, 1); opacity:0;} }
.services .icon-box {padding:50px 20px; margin-top:35px; margin-bottom:25px; text-align:center; height:200px; position:relative; background:var(--cscwhite);}
.services .icon {position:absolute; top:-36px; left:calc(50% - 36px); transition:0.2s; border-radius:50%; border:6px solid var(--cscwhite); display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; width:72px; height:72px; background:var(--cscblue);}
.services .icon i {color:var(--cscwhite); font-size:24px; line-height:0;}
.services .title {font-weight:700; margin-bottom:15px; font-size:18px;}
.faq .faq-list a.collapsed, .services .title a {color:#343a40;}
.services .icon-box:hover .icon {background:var(--cscwhite); border:2px solid var(--cscblue);}
.services .description {line-height:24px; font-size:14px;}
.values .card {border:0; padding:160px 20px 20px; position:relative; width:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.values .card-body {z-index:10; background:rgba(255, 255, 255, 0.9); padding:15px 30px; transition:0.4s ease-in-out; border-radius:5px;}
.values .card-title {font-weight:700; text-align:center; margin-bottom:15px;}
.values .card-title a {color:#473d3a;}
.values .card-text {color:#4b4949;}
.values .read-more a {color:#656262; font-weight:600; font-size:12px; transition:0.4s;}
.values .read-more a:hover {text-decoration:underline;}
.blog .blog-pagination li.active, .blog .blog-pagination li:hover, .brand-blue, .values .card:hover .card-body {background:var(--cscblue);}
.car-top, .car-top.car-run:after, .car-top.car-run:before, .car-top:hover:after, .car-top:hover:before {opacity:1;}
.pricing .box {padding:20px; box-shadow:0 0 4px rgba(0, 0, 0, 0.12); position:relative;}
.pricing .btn-wrap, .pricing h3 {padding:20px 15px; background:#f8f8f8;}
.pricing .btn-buy, .pricing .featured h3 {box-shadow:0 3px 7px rgba(255, 88, 33, 0.4);}
.pricing h3 {margin:-20px -20px 20px; font-size:16px; font-weight:600; color:#656262;}
.faq .faq-list ul, .pricing ul {padding:0; list-style:none;}
.pricing h4 {font-size:36px; color:var(--cscblue); font-weight:600; margin-bottom:20px;}
.pricing h4 sup {font-size:20px; top:-15px; left:-3px;}
.pricing h4 span {color:#bababa; font-size:16px; font-weight:300;}
.pricing ul {color:#313030; text-align:center; line-height:20px; font-size:14px;}
.pricing ul li {padding-bottom:16px;}
.pricing ul i {color:var(--cscblue); font-size:18px; padding-right:4px;}
.pricing ul .na {color:#ccc; text-decoration:line-through;}
.pricing .advanced, .pricing .btn-buy, .pricing .featured h3 {color:var(--cscwhite); background:var(--cscblue);}
.pricing .btn-wrap {margin:20px -20px -20px; text-align:center;}
.pricing .btn-buy {display:inline-block; padding:6px 35px 8px; border-radius:4px; transition:0.3s; font-size:14px; font-family:Raleway, sans-serif; font-weight:600;}
.pricing .btn-buy:hover {background:#ff7e54;}
.pricing .advanced {width:200px; position:absolute; top:18px; right:-68px; transform:rotate(45deg); z-index:1; font-size:14px; padding:1px 0 3px;}
.faq .faq-list {padding:0 100px;}
.blog .sidebar .recent-posts .post-item + .post-item, .faq .faq-list li + li {margin-top:15px;}
.faq .faq-list li {padding:20px; background:var(--cscwhite); border-radius:4px; position:relative;}
.faq .faq-list a {display:block; position:relative; font-size:16px; line-height:24px; font-weight:500; padding:0 30px; outline:0; cursor:pointer;}
.faq .faq-list .icon-help {font-size:24px; position:absolute; right:0; left:20px; color:#ffb8a1;}
.faq .faq-list .icon-close, .faq .faq-list .icon-show {font-size:24px; position:absolute; right:0; top:0;}
.faq .faq-list p {margin-bottom:0; padding:10px 0 0;}
.faq .faq-list .icon-show, .faq .faq-list a.collapsed .icon-close, .mobile-show {display:none;}
.blog .entry .entry-footer .cats li, .blog .entry .entry-footer .tags li, .blog .sidebar .tags ul li, .faq .faq-list a.collapsed .icon-show {display:inline-block;}

@media (max-width: 1200px) { .faq .faq-list {padding:0;} }

.contact .info-box {color:#313030; box-shadow:0 0 30px rgba(214, 215, 216, 0.6); padding:20px;}
.contact .info-box i {font-size:32px; color:var(--cscred); border-radius:50%; padding:8px; border:2px dotted #ffded4; float:left;}
.contact .info-box h3 {font-size:20px; color:#656262; font-weight:700;}
.contact .info-box p {padding:0; line-height:24px; font-size:14px; margin:0 0 0 68px;}
.blog .blog-author, .blog .entry {box-shadow:0 4px 16px rgba(0, 0, 0, 0.1);}

@-webkit-keyframes animate-loading {
0% {transform:rotate(0);}
100% {transform:rotate(360deg);}
}

@keyframes animate-loading {
0% {transform:rotate(0);}
100% {transform:rotate(360deg);}
}

.blog {padding:20px 0;}
.blog .entry {padding:30px; margin-bottom:60px;}
.blog .entry .entry-img {max-height:440px; margin:-30px -30px 20px; overflow:hidden;}
.blog .entry .entry-title {font-size:28px; font-weight:700; padding:0; margin:0 0 20px;}
.blog .entry .entry-title a, .blog .sidebar .categories ul a, .blog .sidebar .recent-posts h4 a {color:#473d3a; transition:0.3s;}
.blog .entry .entry-meta {margin-bottom:15px; color:#afa29e;}
.blog .entry .entry-meta ul {display:flex; flex-wrap:wrap; list-style:none; align-items:center; padding:0; margin:0;}
.blog .entry .entry-meta ul li + li {padding-left:20px;}
.blog .entry .entry-meta i {font-size:16px; margin-right:8px; line-height:0;}
.blog .entry .entry-meta a {color:#656262; font-size:14px; display:inline-block; line-height:1;}
.blog .entry .entry-content p {line-height:24px;}
.blog .entry .entry-content .read-more {-moz-text-align-last:right; text-align-last:right;}
.blog .entry .entry-content .read-more a {display:inline-block; background:var(--cscblue); color:var(--cscwhite); padding:6px 20px; transition:0.3s; font-size:14px; border-radius:4px;}
.blog .entry .entry-content h3 {font-size:22px; margin-top:30px; font-weight:700;}
.blog .entry .entry-content blockquote {overflow:hidden; background-color:#fafafa; padding:60px; position:relative; text-align:center; margin:20px 0;}
.blog .entry .entry-content blockquote p {color:#313030; line-height:1.6; margin-bottom:0; font-style:italic; font-weight:500; font-size:22px;}
.blog .entry .entry-content blockquote::after {content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background-color:#473d3a; margin-top:20px; margin-bottom:20px;}
.blog .entry .entry-footer {padding-top:10px; border-top:1px solid #e6e6e6;}
.blog .entry .entry-footer i {color:#988782; display:inline;}
.blog .entry .entry-footer a {color:#554945; transition:0.3s;}
.blog .entry .entry-footer .cats {list-style:none; display:inline; padding:0 20px 0 0; font-size:14px;}
.blog .entry .entry-footer .tags {list-style:none; display:inline; padding:0; font-size:14px;}
.blog .entry .entry-footer .tags li + li::before {padding-right:6px; color:#6c757d; content:", ";}
.blog .entry .entry-footer .share {font-size:16px;}
.blog .entry .entry-footer .share i {padding-left:5px;}
.blog .blog-author {padding:20px; margin-bottom:30px;}
.blog .blog-comments .reply-form, .blog .sidebar {padding:30px; box-shadow:0 4px 16px rgba(0, 0, 0, 0.1);}
.blog .blog-author img {width:120px; margin-right:20px;}
.blog .blog-author h4 {font-weight:600; font-size:22px; margin-bottom:0; padding:0; color:#473d3a;}
.blog .blog-author .social-links {margin:0 10px 10px 0;}
.blog .blog-author .social-links a {color:rgba(71, 61, 58, 0.5); margin-right:5px;}
.blog .blog-author p {font-style:italic; color:#a4a2a2;}
.blog .blog-comments .comments-count {font-weight:700;}
.blog .blog-comments .comment {margin-top:30px; position:relative;}
.blog .blog-comments .comment .comment-img {margin-right:14px;}
.blog .blog-comments .comment .comment-img img {width:60px;}
.blog .blog-comments .comment h5 {font-size:16px; margin-bottom:2px;}
.blog .blog-comments .comment h5 a {font-weight:700; color:#313030; transition:0.3s;}
.blog .blog-comments .comment h5 .reply {padding-left:10px; color:#473d3a;}
.blog .blog-comments .comment h5 .reply i {font-size:20px;}
.blog .blog-comments .comment time {display:block; font-size:14px; color:#635551; margin-bottom:5px;}
.blog .blog-comments .comment.comment-reply {padding-left:40px;}
.blog .blog-comments .reply-form {margin-top:30px;}
.blog .blog-comments .reply-form h4 {font-weight:700; font-size:22px;}
.blog .blog-comments .reply-form input, .blog .blog-comments .reply-form textarea {border-radius:4px; padding:10px; font-size:14px;}
.blog .blog-comments .reply-form input:focus, .blog .blog-comments .reply-form textarea:focus {box-shadow:none; border-color:#ffa587;}
.blog .blog-comments .reply-form .form-group {margin-bottom:25px;}
.blog .blog-comments .reply-form .btn-primary {border-radius:4px; padding:10px 20px; border:0; background-color:#473d3a;}
.blog .blog-comments .reply-form .btn-primary:hover {background-color:#554945;}
.blog .blog-pagination {color:#7f6d68;}
.blog .blog-pagination ul {display:flex; padding:0; margin:0; list-style:none;}
.blog .blog-pagination li {margin:0 5px; transition:0.3s;}
.blog .blog-pagination li a {color:#473d3a; padding:7px 16px; display:flex; align-items:center; justify-content:center;}
.blog .sidebar {margin:0 0 60px 20px;}
.blog .sidebar .sidebar-title {font-size:20px; font-weight:700; padding:0; margin:0 0 15px; color:#473d3a; position:relative;}
.blog .sidebar .search-form form {background:var(--cscwhite); border:1px solid #ddd; padding:3px 10px; position:relative;}
.blog .sidebar .search-form form input[type="text"] {border:0; padding:4px; border-radius:4px; width:calc(100% - 40px);}
.blog .sidebar .search-form form button {position:absolute; top:0; right:0; bottom:0; border:0; background:var(--cscblue); font-size:16px; padding:0 15px; margin:-1px; color:var(--cscwhite); transition:0.3s; border-radius:0 4px 4px 0; line-height:0;}
.blog .sidebar .search-form form button i {line-height:0;}
.blog .sidebar .search-form form button:hover {background:#ff6735;}
.blog .sidebar .categories ul, .blog .sidebar .tags ul {list-style:none; padding:0;}
.blog .sidebar .categories ul li + li {padding-top:10px;}
.blog .sidebar .categories ul a span {padding-left:5px; color:#989595; font-size:14px;}
.blog .sidebar .recent-posts img {width:80px; float:left;}
.blog .sidebar .recent-posts h4 {font-size:15px; margin-left:95px; font-weight:700;}
.blog .sidebar .recent-posts time {display:block; margin-left:95px; font-style:italic; font-size:14px; color:#989595;}
.blog .sidebar .tags {margin-bottom:-10px;}
.blog .sidebar .tags ul a {color:#8d7973; font-size:14px; padding:6px 14px; margin:0 6px 8px 0; border:1px solid #f4f2f2; display:inline-block; transition:0.3s;}
.blog .sidebar .tags ul a:hover {color:var(--cscwhite); border:1px solid var(--cscblue); background:var(--cscblue);}
.blog .sidebar .tags ul a span {padding-left:5px; color:#ddd7d6; font-size:14px;}
.footer {color:var(--cscwhite); font-size:14px; background:#000;}
.footer .footer-top {padding:60px 0 30px; background:#000;}
.footer .footer-top p {font-size:14px; line-height:24px; margin-bottom:0; font-family:Raleway, sans-serif; color:var(--cscwhite);}
.footer .footer-newsletter h4, .footer .footer-top .footer-contact h4, .footer .footer-top h4 {font-size:16px; font-weight:700; color:var(--cscwhite); position:relative; padding-bottom:12px;}
.footer .footer-top .footer-links ul {list-style:none; padding:0; margin:0;}
.footer .footer-top .footer-links ul i {padding-right:2px; color:var(--cscwhite); font-size:18px; line-height:1;}
.footer .footer-top .footer-links ul li {padding:10px 0; display:flex; align-items:center;}
.footer .footer-top .footer-links ul a, .footer .social-links a {display:inline-block; line-height:1; transition:0.3s; color:var(--cscwhite);}
.footer .footer-top .footer-links ul li:first-child {padding-top:0;}
.footer .footer-top .footer-links ul a:hover {text-decoration:none; color:var(--cscwhite);}
.footer .credits {padding-top:5px; font-size:13px; color:var(--cscwhite);}
.footer .social-links a {font-size:29px; background:var(--cscblue); padding:10px 0; margin-right:7px; border-radius:50%; text-align:center; width:50px; height:50px;}
.footer .social-links a:hover {background:var(--cscwhite); color:#0361aa; text-decoration:none;}
.notify-badge {position:absolute; right:10px; top:10px; background:var(--cscblue); text-align:center; color:var(--cscwhite); padding:5px 10px; font-size:16px;}
.NumberPlate .regNum, .uk-numberplate {height:50px; text-transform:uppercase;}
.stats {border:2px solid var(--cscred);}
.increase {font-size:0.8em;}
.registration-ui {background:linear-gradient(to bottom, #f8d038 0, #f5ca2e 100%); padding:0.25em 1em 0.25em 1.75em; font-weight:700; font-size:2em; border-radius:5px; border:1px solid #000; box-shadow:1px 1px 1px #ddd; position:relative; font-family:helvetica, ariel, sans-serif;}
.registration-ui:before {content:"GB"; display:block; width:30px; height:100%; background:#063298; position:absolute; top:0; border-radius:5px 0 0 5px; color:#f8d038; font-size:0.5em; line-height:85px; padding-left:5px;}
.registration-ui:after {content:""; display:block; position:absolute; top:7px; left:5px; width:20px; height:20px; border-radius:30px; border:1px dashed #f8d038;}
.uk-numberplate {font-family:"Arial", Arial Black, Comic Sans MS, UK-Number-Plate; font-size:2em; font-weight:700; background-color:#fdf75d; border:2px solid #039; width:100%; padding:0;}

@media only screen and (max-width: 990px) {
.mobile-hide {display:none !important;}
.mobile-show {display:block;}
.uk-numberplate {font-size:1em;}
}

.vrmSearch {border-spacing:0; border-collapse:collapse;}
.plateBg {border:none; padding:3px; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0, 2); box-shadow:0 2px 2px rgb(0 0 0 / 20%);}
.vrm_btn {background:#264386; font-size:20px; font-weight:800; color:var(--cscwhite); padding:9px 12px; border-radius:0 10px 10px 0;}
.NumberPlate .regNum {font-size:24px; color:#000; text-align:center; font-weight:900; background:#ffd300; border:1px solid #eac100;}
.NumberPlate .form-control {padding:14px 0;}
.price {font-size:24px; font-style:italic;}
.styled-title {font-size:24px; line-height:28px; font-weight:600; font-family:'Raleway', sans-serif; color:var(--cscblue);}
.small-icon {font-size:0.6em; background-color:var(--cscblue); color:var(--cscwhite); padding:4px; border-radius:10px;}
.chatwithus, .whats-app {background-color:#25d366; border-radius:10px; position:fixed;}
.whats-app {width:60px; height:60px; bottom:40px; color:var(--cscwhite); text-align:center; font-size:40px; z-index:1000; right:25px;}
.chatwithus {color:var(--cscwhite); font-size:20px;}
.my-whats-app {margin-top:5px; display:block !important;}
.chatwithus {padding:0 16px; line-height:1.6; margin:0 10px; display:none; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; bottom:50px; right:90px;}
.section-partners {color:var(--cscwhite); background-color:var(--cscred);}
.main-timeline-2::after, .timeline-2::after {content:""; position:absolute; background-color:var(--cscred);}
.main-timeline-2::after {width:3px; top:0; bottom:0; left:50%; margin-left:-3px;}
.timeline-2 {background-color:inherit; width:50%;}
.timeline-2::after {width:25px; height:25px; right:-11px; top:15px; border-radius:50%; z-index:1;}
.left-2::before, .right-2::before {content:" "; position:absolute; top:18px; z-index:1;}
.left-2 {padding:0 40px 20px 0; left:0;}
.right-2 {padding:0 0 20px 40px; left:50%;}
.left-2::before {right:30px; border:solid var(--cscwhite); border-width:10px 0 10px 10px; border-color:transparent transparent transparent var(--cscwhite);}
.right-2::before {left:30px; border:solid var(--cscwhite); border-width:10px 10px 10px 0; border-color:transparent var(--cscwhite) transparent transparent;}
.right-2::after {left:-14px;}

@media screen and (max-width: 600px) {
.main-timeline-2::after {left:31px;}
.timeline-2 {width:100%; padding-left:70px; padding-right:25px;}
.timeline-2::before {left:60px; border:solid var(--cscwhite); border-width:10px 10px 10px 0; border-color:transparent var(--cscwhite) transparent transparent;}
.left-2::after, .right-2::after {left:18px;}
.left-2::before {right:auto;}
.right-2 {left:0;}
}

.btn-csc-outline-home { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--csc-navy); border: 1.5px solid var(--csc-navy); border-radius: 4px; padding: 12px 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: all 0.2s; }
.btn-csc-outline-home:hover { background: var(--csc-navy); color: #fff !important; }
.section-text { font-size: 15px; color: var(--csc-text-body); line-height: 1.75; }

.top-logo {margin-top:-50px; margin-bottom:50px; z-index:2; position:relative;}
.top-line {border-top:3px solid var(--cscred);}
.hero-red-overlay {height:50vh; background-color:var(--cscred); opacity:30%; position:absolute; width:100%;}
.brand-2-btn {background-color:var(--cscblue); line-height:25px;}
.bg-cscred, .btn-cscred {background-color:var(--cscred);}
.brand-2-btn:hover, .btn-cscblue:hover {background-color:var(--cscwhite); color:var(--cscblue);}
.text-cscred {color:var(--cscred);}
.btn-cscred:hover {background-color:var(--cscwhite); color:var(--cscred) !important;}
.btn-cscblue {background-color:var(--cscblue); color:var(--cscwhite);}
.btn-black {background-color:#000; color:var(--cscwhite);}
.btn-black:hover {background-color:var(--cscwhite); color:#000;}
.no-rounded {-webkit-appearance:none; -webkit-border-radius:0px;}
.section-bg-alt {background-color:#f9f8f7;}
@media only screen and (max-width: 768px) { .section-stats-footer .section-container {padding:10px !important;} }
.hero .mask {background-color:hsla(0, 0%, 0%, 0.7);}
@media (min-width: 1400px) { .container {max-width:1220px !important;} }
@media (min-width: 768px) { .header-link {color:var(--cscwhite) !important; font-size:16px !important;} .header-link:hover {color:var(--cscwhite) !important; font-size:17px !important;} }
.dropdown-item {padding-top:10px; padding-bottom:10px;}
.navbar-nav>li>a {font-size:14px; padding-bottom:4px; color:#fff; font-weight:700; line-height:1.1; text-decoration:none; text-transform:uppercase; border-bottom:4px solid transparent; white-space:nowrap; transition:border .3s ease-out; margin:8px 8px 0;}
.navbar-toggler {padding:.20rem .50rem; font-size:1.25rem; line-height:1; background-color:transparent; border:1px solid white;}
.nav-link {color:#fff !important;}
.top-bar {height:40px; font-size:13px;}
.wrapper {width:100%; position:absolute; height:100%; background-color:#000; clip-path:polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 71% 100%); transition:1s all;}
.navbar-brand {color:#fff; margin-bottom:4px; font-size:18px; transition:border .3s ease-out;}
.navbar-red:hover .wrapper {clip-path:polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 65% 100%);}
.navbar-brand:hover {color:#fff !important; font-size:20px; border-bottom:4px solid #fff;}
.navbar-red {background-color:var(--cscred); color:#fff;}
.all-show {z-index:10;}
.dropdown-item:hover {color:black !important;}
.nav-link:hover {color:white !important; font-weight:bold; border-bottom:4px solid #fff; font-size:16px;}
.text-hover-white:hover {color:white !important;}
.navbar-inverse {background:#222B31 !important; border-bottom:4px solid var(--cscred) !important;}
.navbar-inverse .navbar-toggle {border:none;}
.navbar-collapse {box-shadow:none !important; border:none !important;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:active {background:transparent !important;}
.dropdown-menu {background-color:#222B31; color:white;}
.dropdown-item {color:white !important;}
.light-background {--background-color:#f9fcf9; --surface-color:#ffffff; background-color:#f9fcf9;}
.navbar-nav .btn-csc-outline { color: #fff; border-color: #fff; }
.navbar-nav .btn-csc-outline:hover { color: #fff !important; border-color: #f9fcf9; }


.section-title h2::after, .hero h2::after {margin:auto;}
.CBCaptcha {opacity:0; position:absolute; top:0; left:0; height:0; width:0; z-index:-1;}
.ukreg { display: inline-flex; border-radius: 4px; width:100%; background: linear-gradient(to bottom, #ffdb54 0%,#f5ca2e 100%); -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1); padding:2px 1px 2px 2px; }
.ukreg .flag{ border-radius: 4px 0px 0px 4px; background: #063298; color:#f8d038; font-weight:bold; font-size:15px; padding:10px 5px 5px 5px; text-align:center; display: flex; flex-direction: column; gap:0.5em; align-items: center; justify-content: space-around; z-index: 1; }
.ukreg input, .ukreg .input{ position: relative; left:-1px; border-radius: 0px 6px 6px 0px; color:#000; background: none; border:1px solid rgba(0,0,0,0); padding:0px 0.4em 0px 0.3em; font-family:uknumberplate; font-size:20px; line-height: 30px; text-transform: uppercase; width:100%; text-align:center; transition: all 0.5s; }
.ukreg input::placeholder{ color:#000 !important; opacity:0.40 !important; }
.ukreg input:focus-visible { outline: none; border:1px solid #56460a; }
.ukreg input .is-invalid { background: #F64E60; }
.main-card { border: none; border-radius: 1.25rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.175); overflow: hidden; min-height: 650px; }
.sidebar { background-color: #1d2c48; color: white; padding: 2.5rem; }
.step-content { display: none; }
.step-content.active { display: block; }
.fade-in { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Service Card Styling (Bootstrap compatible) */
.service-card{background:var(--csc-blue);border:1px solid #222;border-radius:12px;padding:2.5rem;height:100%;transition:.4s cubic-bezier(.175, .885, .32, 1.275);position:relative;overflow:hidden}
.service-card:hover{transform:translateY(-8px);border-color:#444;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.service-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--vxr-red)}.check-icon{display:none;color:#dc3545;font-size:1.25rem}
.form-label-custom,.vehicle-badge{font-size:.75rem;text-transform:uppercase;font-weight:700}
.service-card.selected .check-icon{display:block}
.form-label-custom{color:#6c757d;letter-spacing:.5px;margin-bottom:.25rem}
.btn-dark-custom{background-color:#1a1d20;border:none;padding:1rem;font-weight:700;border-radius:.5rem}
.btn-dark-custom:hover{background-color:#000}
.progress{height:.5rem;border-radius:1rem;background-color:#e9ecef}
.selection-header{padding:60px 0 40px;background:#fff;border-bottom:1px solid #eee}
.vehicle-badge{background:#e9ecef;color:var(--csc-dark);padding:5px 15px;border-radius:50px;letter-spacing:2px;display:inline-block;margin-bottom:15px}
/* Model Card Styling */
.model-card:hover,.model-card:hover .model-icon{color:var(--csc-red)}
.model-card{background:#fff;border:1px solid #eee;border-radius:1rem;padding:25px;text-align:center;transition:.3s;text-decoration:none;color:var(--csc-dark);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 6px rgba(0,0,0,.02)}
.model-card:hover{border-color:var(--csc-red);transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.05)}
.model-icon{font-size:2rem;margin-bottom:15px;color:#dee2e6;transition:color .3s}
.model-name{font-weight:700;font-size:1.1rem;margin-bottom:0}
/* Grid container */
.model-grid { padding: 60px 0; }
/* Trust Bar */
.trust-item { font-size: 0.85rem; font-weight: 600; color: #6c757d; }
.trust-item i { color: var(--csc-red); margin-right: 8px; }
/* Back Button */
.btn-back { color: var(--csc-dark); text-decoration: none; font-weight: 700; font-size: 0.9rem;  display: inline-flex; align-items: center; margin-bottom: 20px; transition: color 0.2s; }
.btn-back:hover { color: var(--csc-red); }
/* Search/Filter placeholder */
.brand-name,.variant-stat,.vehicle-badge{text-transform:uppercase;font-weight:700}
.search-container{max-width:500px;margin:0 auto 40px}
.form-control-custom{border-radius:50px;padding:12px 25px;border:2px solid #eee}
.form-control-custom:focus{border-color:var(--csc-red);box-shadow:none}
.model-name{font-weight:700;font-size:1.1rem;margin-bottom:5px}
.model-engine-code{font-size:.8rem;color:#6c757d;font-family:monospace;background:#f1f3f5;padding:2px 8px;border-radius:4px}
.variant-stat{font-size:.7rem;color:#adb5bd;margin-top:10px}
.brand-card{background:#fff;border:1px solid #eee;border-radius:1rem;padding:30px 20px;text-align:center;transition:.3s;text-decoration:none;color:var(--csc-dark);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 6px rgba(0,0,0,.02)}
.brand-card:hover{border-color:var(--csc-red);transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.05)}
.brand-card i{font-size:2.5rem;margin-bottom:15px;color:#dee2e6;transition:color .3s}
.brand-card:hover i{color:var(--csc-red)}
.brand-name{font-size:1.2rem;letter-spacing:1px}
.vehicle-badge{background:#e9ecef;color:var(--csc-dark);padding:5px 15px;border-radius:50px;font-size:.75rem;letter-spacing:2px;display:inline-block;margin-bottom:15px}
.brand-logo-container img,.brand-logo-container svg{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:.3s}
.brand-card:hover .brand-logo-container img,.brand-card:hover .brand-logo-container svg{filter:grayscale(0%);opacity:1;transform:scale(1.1)}
.brand-card:hover .brand-logo-container img, .brand-card:hover .brand-logo-container svg { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }
/* Registration Search Styling */
.reg-search-container{max-width:450px;margin:0 auto 30px;position:relative}
.reg-input-group{display:flex;background:var(--reg-yellow);padding:5px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.1);border:2px solid #333}
.reg-input-2{border:none;background:0 0;font-family:'Arial Black',sans-serif;font-size:1.8rem;text-transform:uppercase;text-align:center;width:100%;letter-spacing:2px;font-weight:900;outline:0;color:#1a1a1a}
.reg-input-2::placeholder{color:rgba(0,0,0,.3);font-size:1.2rem;letter-spacing:0}
.reg-submit{background:#333;color:#fff;border:none;padding:0 20px;border-radius:5px;font-weight:700;transition:background .2s}
.reg-submit:hover { background: #000; }
/* Header & Breadcrumbs */
.stats-header{background:#fff;padding:40px 0;border-bottom:1px solid #eee}
.breadcrumb-custom{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.breadcrumb-custom a{color:var(--csc-grey);text-decoration:none}
.breadcrumb-custom span{color:var(--csc-red);font-weight:700}

/* Performance Display */
.stage-switcher{background:#eee;padding:5px;border-radius:50px;display:inline-flex;margin-bottom:30px}
.stage-btn{border:none;padding:8px 25px;border-radius:50px;font-weight:700;font-size:.9rem;transition:.3s;background:0 0;color:var(--csc-grey)}
.stage-btn.active{background:var(--csc-red);color:#fff;box-shadow:0 4px 10px rgba(220,53,69,.3)}
.stats-card{background:#fff;border-radius:1.5rem;padding:40px;box-shadow:0 10px 30px rgba(0,0,0,.05);margin-bottom:40px}
.stat-box{text-align:center;padding:20px}
.stat-value{font-size:3.5rem;font-weight:900;line-height:1;margin-bottom:5px;display:block}
.stat-label{text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--csc-grey);font-size:.8rem}
.stat-increase{color:#28a745;font-weight:700;font-size:.9rem;display:block;margin-top:10px}

/* Content Sections */
.content-card{background:#fff;border-radius:1rem;padding:30px;height:100%;border:1px solid #eee}
.section-title{font-weight:800;text-transform:uppercase;font-size:1.1rem;margin-bottom:20px;display:flex;align-items:center}
.section-title i{color:var(--csc-red);margin-right:10px}

/* Advanced Options List */
.option-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f8f9fa; }
.option-item:last-child { border-bottom: none; }
.option-info { display: flex; align-items: center; }
.option-info i { width: 25px; color: var(--csc-red); }
.option-name { font-weight: 600; font-size: 0.95rem; }

/* Booking Bar */
.booking-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--csc-dark); color: white; padding: 15px 0; z-index: 1000; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); }
.logo-watermark { max-width: 180px; opacity: 0.1; position: absolute; right: 40px; bottom: 40px; pointer-events: none; }
@media (max-width: 768px) { .stat-value { font-size: 2.5rem; } .stats-card { padding: 25px; } .booking-cta { padding-bottom: 30px; } /* Space for mobile home bars */ }
/* SEO Text Area */
.seo-section { background: #fff; border-top: 1px solid #eee; padding: 60px 0 100px; margin-top: 40px; }
.seo-content { column-count: 2; column-gap: 40px; font-size: 1.05rem; line-height: 1.7; }
/* Dyno Modal Styling */
.modal-content { border-radius: 1.5rem; border: none; overflow: hidden; }
.dyno-placeholder { width: 100%; aspect-ratio: 16/9; background: #f0f0f0; display: flex; align-items: center; justify-content: center; position: relative; }
.dyno-placeholder img { width: 100%; height: 100%; object-fit: contain; }
/* Graphic Table Style */
.gain-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.gain-table th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: var(--csc-grey); padding: 10px 20px; font-weight: 700; }
.gain-row { background: var(--csc-light); border-radius: 10px; transition: all 0.3s ease; }
.gain-row td { padding: 20px; vertical-align: middle; }
.gain-row td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.gain-row td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
		
@media (max-width: 992px) {  .gain-row td .h5, .gain-row td h5 { font-size: 0.9rem !important; }  .val-label { font-size: 0.8rem !important; } .val-sub { font-size: 0.7rem !important; }  .gain-row td { padding: 5px; } .gain-table th { font-size: 0.7rem; } .option-name { font-size: 0.8rem !important; } .seo-content { font-size: 1rem; column-count: 1; } }

.val-label { font-weight: 800; font-size: 1.1rem; display: block; }
.val-sub { font-size: 0.75rem; color: var(--csc-grey); text-transform: uppercase; }
.val-gain { color: #28a745; font-weight: 700; }
/* Animation for Stat Updates */
.stat-update { animation: fadeInScale 0.4s ease-out; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
/* Performance Display */
.stage-switcher-container { margin-bottom: 25px; }
.stage-switcher { background: #e9ecef; padding: 5px; border-radius: 50px; display: inline-flex; }
.stage-btn{ border:none;padding:8px 30px;border-radius:50px;font-weight:700;font-size:.9rem;transition:.3s;background:0 0;color:var(--csc-grey) }
.stage-btn.active{ background:var(--csc-red);color:#fff;box-shadow:0 4px 10px rgba(220,53,69,.3) }
.stats-card{ background:#fff;border-radius:1.5rem;padding:40px;box-shadow:0 10px 30px rgba(0,0,0,.05);margin-bottom:30px; }
/* Service Links */
.service-category-title{color:var(--csc-red);font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:2px;margin-bottom:1.25rem;display:flex;align-items:center}
.service-category-title::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1);margin-left:10px}
.dropdown-item{color:rgba(255,255,255,.8)!important;padding:.6rem 0;font-size:.95rem;transition:.3s;background:0 0!important;display:flex;align-items:center}
.dropdown-item i{width:25px;color:var(--csc-red);transition:transform .3s}
.dropdown-item:hover { color: #ffffff !important; padding-left: 10px; }
.dropdown-item:hover i { transform: scale(1.2); }
/* Featured Box */
.promo-box{background:rgba(0,0,0,.2);border-radius:10px;padding:1.5rem;text-align:center;border:1px solid rgba(255,255,255,.05)}
.btn-csc-outline{ border:2px solid var(--csc-red);color:#fff;font-weight:700;text-transform:uppercase;font-size:.8rem;padding:.5rem 1rem;transition:.3s}
.btn-csc-outline:hover{background-color:var(--csc-red);color:#fff}
/* Mobile Adjustments */
@media (max-width: 991px) { .service-category-title { margin-top: 1.5rem; } }
/* Info Cards */
.info-card{background-color:var(--csc-dark);border:1px solid rgba(255,255,255,.05);padding:2rem;border-radius:12px;height:100%;transition:transform .3s}
.info-card:hover{transform:translateY(-5px);border-color:var(--csc-red)}
.benefit-item,.icon-circle{display:flex;margin-bottom:20px}
.icon-box{width:50px;height:50px;background-color:rgba(230,57,70,.1);color:var(--csc-red);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.5rem;margin-bottom:1.5rem}
.feature-icon-box{background:var(--csc-card-bg);border:1px solid var(--csc-border);padding:30px;border-radius:15px;height:100%;transition:.3s}
.feature-icon-box:hover{border-color:var(--csc-red);transform:translateY(-10px)}
.icon-circle{width:60px;height:60px;background:var(--csc-red);color:var(--csc-white);align-items:center;justify-content:center;border-radius:50%;font-size:1.5rem}
.benefit-item{align-items:flex-start}
.benefit-icon{color:var(--csc-red);font-size:1.25rem;margin-right:15px;margin-top:5px}
.service-link-card{background:linear-gradient(45deg,#111,#1a1a1a);border:1px solid var(--csc-border);border-radius:12px;padding:40px 25px;text-align:center;text-decoration:none;color:#fff;display:block;transition:.4s;position:relative;overflow:hidden}
.service-link-card:hover{border-color:var(--csc-red);transform:scale(1.02);color:#fff}
.service-link-card i{font-size:2.5rem;margin-bottom:20px;color:var(--csc-red)}
.tech-tag{display:inline-block;background:#252525;color:#ccc;padding:5px 12px;border-radius:6px;margin:4px;font-size:.75rem;font-weight:700;text-transform:uppercase;border:1px solid #333}
/* Feature Cards */
.platform-card{background:var(--csc-card);border:1px solid #222;border-radius:15px;padding:2rem;height:100%;transition:.3s}
.platform-card:hover{border-color:var(--bmw-light-blue);transform:translateY(-8px)}
.zf8-box{background:linear-gradient(145deg,#1a1a1a,#0a0a0a);border-radius:20px;padding:3rem;border-left:5px solid var(--bmw-light-blue)}
.btn-bmw{background-color:var(--bmw-dark-blue);color:#fff;font-weight:800;border-radius:5px;padding:15px 35px;text-transform:uppercase}
.btn-bmw:hover{background-color:var(--bmw-light-blue);color:#fff}
/* --- FAQ Styles --- */
.faq-card { background: var(--csc-card); border: 1px solid var(--csc-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-trigger { width: 100%; padding: 1rem 1.5rem; text-align: left; background: none; border: none; color: white; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-content { padding: 0 1.5rem 1.5rem; color: var(--csc-light); font-size: 0.95rem; display: none; }
.faq-card.open .faq-content { display: block; }
.faq-card.open i { transform: rotate(180deg); color: var(--csc-red); }
/* --- Authorised Dealer --- */		
.closing-line { font-size: 16.5px; font-weight: 700; color: var(--csc-text-dark); line-height: 1.6; margin-top: 36px; }
.benefits-list { padding-left: 20px; margin-bottom: 0; }
.benefits-list li { font-size: 15px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 14px; }
.benefits-list li strong { color: var(--csc-text-dark); }

/* ── DEALER TIER CARDS ── */
.cards-section { background: var(--csc-grey-bg-3); padding: 70px 0; }
.tier-card-csc { background: #fff; border: 1px solid #e0e3e8; border-radius: 3px; box-shadow: 0 2px 10px rgba(20,30,50,0.06); height: 100%; display: flex; flex-direction: column; }
.tier-card-header { padding: 20px 26px; border-bottom: 1px solid #ececef; }
.tier-card-header h5 { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--csc-text-dark); margin: 0; }
.tier-card-body { padding: 22px 26px; flex: 1; }
.tier-card-body p { font-size: 14.5px; color: var(--csc-text-body); line-height: 1.7; margin: 0; }
.tier-card-footer { padding: 18px 26px 26px; }
.btn-csc-dark { background: var(--csc-navy); color: #fff; border: none; border-radius: 2px; padding: 12px 22px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; display: inline-block; transition: background 0.2s; }
.btn-csc-dark:hover { background: #11161f; color: #fff !important; }
.benefits-list { padding-left: 20px; margin-bottom: 0; }
.benefits-list li { font-size: 15px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 14px; }
.benefits-list li strong { color: var(--csc-text-dark); }
/* Image panel */
.content-image-panel { border-radius: 4px; overflow: hidden; border: 1px solid #dfe3e8; box-shadow: 0 2px 10px rgba(20,30,50,0.06); height: 100%; min-height: 280px; position: relative; background: var(--csc-navy); }
.content-image-panel img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
.content-image-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px; background: linear-gradient(0deg, rgba(15,20,32,0.92) 0%, transparent 100%); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.content-h2 { font-size: 26px; font-weight: 700; color: var(--csc-navy); text-transform: uppercase; letter-spacing: 0.01em; display: inline-block; padding-bottom: 10px; border-bottom: 3px solid var(--csc-red); margin-bottom: 18px; }
.content-h3 { font-size: 21px; font-weight: 700; color: var(--csc-navy); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 16px; }
.lede-text { font-size: 15.5px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 28px; max-width: 680px; }
/* Benefit icon cards (replaces plain bullets) */
.benefit-card-csc { background: #fff; border: 1px solid #dfe3e8; border-radius: 4px; padding: 26px 24px; height: 100%; box-shadow: 0 2px 8px rgba(20,30,50,0.05); transition: box-shadow 0.2s, transform 0.2s; }
.benefit-card-csc:hover { box-shadow: 0 6px 18px rgba(20,30,50,0.10); transform: translateY(-3px); }
.benefit-icon-csc { width: 50px; height: 50px; border-radius: 8px; background: rgba(211,47,47,0.09); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px; color: var(--csc-red); }
.benefit-title-csc { font-size: 15.5px; font-weight: 700; color: var(--csc-navy); margin-bottom: 8px; }
.benefit-text-csc { font-size: 14px; color: var(--csc-text-body); line-height: 1.65; margin: 0; }
/* Workshop advantage stat strip */
.stat-strip-csc { background: var(--csc-navy-card); border-radius: 6px; padding: 28px 10px; display: flex; flex-wrap: wrap; }
.stat-strip-item { flex: 1; min-width: 200px; text-align: center; padding: 10px 16px; position: relative; }
.stat-strip-item + .stat-strip-item::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(255,255,255,0.12); }
.stat-strip-icon { font-size: 22px; color: var(--csc-red); margin-bottom: 8px; }
.stat-strip-text { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
/* ── CERT BAR (black thin strip) ── */
.cert-bar-csc { background: var(--csc-black); padding: 16px 0; }
.cert-bar-csc .row { --bs-gutter-x: 0; }
.cert-item-csc { display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cert-item-csc i { font-size: 15px; color: var(--csc-red); }
.cert-item-csc.gold i { color: #f5c518; }
/* ── PROCESS SECTION ── */
.process-section-csc { background: #20262f; padding: 64px 0 56px; }
.process-h2-csc { text-align: center; font-size: 24px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 12px; }
.process-sub-csc { text-align: center; font-size: 14px; color: #aeb3bd; margin-bottom: 44px; }
.process-step-csc { text-align: center; position: relative; }
.process-connector-csc {   position: absolute; top: 34px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: rgba(255,255,255,0.10); }
.process-circle-csc { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: #fff; border: 2px solid rgba(255,255,255,0.14); }
.process-num-csc { position: absolute; top: -4px; right: calc(50% - 38px); width: 22px; height: 22px; border-radius: 50%; background: var(--csc-red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #20262f; }
.process-title-csc { font-size: 13.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.process-sub2-csc { font-size: 11.5px; color: #9499a3; margin-top: 2px; }
/* ── REVIEWS ── */
.reviews-section-csc { background: linear-gradient(rgba(10,10,10,0.82), rgba(10,10,10,0.88)), radial-gradient(ellipse at center, #2a2a2a 0%, #000 80%); padding: 70px 0; }
.google-logo-row { text-align: center; margin-bottom: 8px; }
.google-logo-row img { height: 38px; }
.reviews-h2-csc { text-align: center; font-size: 19px; font-weight: 700; color: var(--csc-red); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 40px; }
.review-text-csc { font-size: 14.5px; color: #d8dade; line-height: 1.75; font-style: italic; text-align: center; margin-bottom: 18px; }
.review-name-csc { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; margin-bottom: 10px; }
.review-stars-csc { text-align: center; color: #fff; font-size: 15px; letter-spacing: 3px; }
/* ── SOCIAL STRIP ── */
.social-strip { background: var(--csc-grey-bg-3); padding: 40px 0; text-align: center; }
.social-strip .follow-label { font-size: 15px; color: var(--csc-text-dark); font-weight: 500; margin-right: 14px; }
.social-icon-csc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #2c3344;
  color: #2c3344; font-size: 16px; margin: 0 5px; transition: all 0.2s;
}
.social-icon-csc:hover { background: var(--csc-navy); color: #fff; border-color: var(--csc-navy); }
.winols-banner { max-width: 320px; margin: 24px auto 0; display: block; border-radius: 3px; overflow: hidden; }
.winols-banner img { width: 100%; display: block; }
/* ── FOOTER ── */
.footer-csc-main { background: var(--csc-black-2); padding: 60px 0 30px; }
.footer-col-title-csc { font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 18px; }
.footer-link-box {
  display: block; border: 1px solid #2e2e30; border-radius: 2px;
  padding: 11px 16px; margin-bottom: 8px; font-size: 13.5px; color: #c7c9cd;
  transition: border-color 0.2s, color 0.2s;
}
.footer-link-box:hover { border-color: var(--csc-red); color: #fff; }
.footer-link-box i { margin-right: 8px; color: var(--csc-red); }
.footer-find-us p { font-size: 14px; color: #c7c9cd; line-height: 1.7; margin-bottom: 4px; }
.footer-find-us a { color: #c7c9cd; }
.footer-find-us a:hover { color: var(--csc-red); }
.footer-find-us i { width: 18px; color: var(--csc-red); margin-right: 6px; }
.footer-divider-csc { border-color: #2a2a2c; margin: 30px 0 22px; }
.footer-bottom-csc { font-size: 12.5px; color: #8b8d92; }
.footer-bottom-csc a { color: #8b8d92; }
.footer-bottom-csc a:hover { color: #fff; }

/* ── BRANDS SECTION ── */
.brands-section-csc { background: var(--csc-black-2); padding: 50px 0 60px; }
.brands-h3 { font-size: 18px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--csc-red); margin-bottom: 28px; }
.brand-link-csc { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #b8c4e0; margin-bottom: 14px; transition: color 0.2s; }
.brand-link-csc:hover { color: var(--csc-red); }
.brand-link-csc i { color: var(--csc-red); font-size: 15px; }

/* ── COOKIE BAR ── */
.cookie-bar-csc { background: var(--csc-navy-card); text-align: center; padding: 16px 0; }
.cookie-bar-csc span { color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* ── BREADCRUMB ── */
.breadcrumb-csc { padding: 18px 0 0; font-size: 12.5px; }
.breadcrumb-csc a { color: var(--csc-silver); }
.breadcrumb-csc a:hover { color: var(--csc-red); }
.breadcrumb-csc .current { color: var(--csc-red); font-weight: 600; }


/* ── VEHICLE HEADER ── */
.vehicle-header { padding: 14px 0 4px; }
.vehicle-title { font-size: 26px; font-weight: 700; color: var(--csc-navy); margin-bottom: 6px; }
.vehicle-meta { font-size: 13.5px; color: var(--csc-silver); margin-bottom: 16px; }
.vehicle-meta strong { color: var(--csc-text-dark); font-weight: 700; }
@media (min-width: 768px) { .vehicle-title { font-size: 34px; } }

.stage-pill-csc {
  display: inline-flex; align-items: center; gap: 6px; background: var(--csc-red); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 100px; margin-bottom: 24px;
}

/* ── STAGE SWITCHER ── */
.stage-switcher-csc {
  display: flex; gap: 8px; background: var(--csc-grey-bg-2); border-radius: 100px;
  padding: 5px; margin-bottom: 22px; max-width: 100%; width: fit-content;
}
.stage-tab-btn {
  border: none; background: transparent; color: var(--csc-text-body);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 100px; cursor: pointer; transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.stage-tab-btn.active { background: var(--csc-navy); color: #fff; }
.stage-tab-btn:not(.active):hover { color: var(--csc-navy); }
@media (min-width: 576px) { .stage-tab-btn { padding: 10px 26px; font-size: 13.5px; } }
/* ══════════════════════════════════════════════════════════
   STATS DISPLAY — the critical mobile-first section
   ══════════════════════════════════════════════════════════ */
.stats-panel {
  background: #fff; border: 1px solid #dfe3e8; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(20,30,50,0.07); overflow: hidden; margin-bottom: 14px;
}

/* MOBILE: stacked metric cards (default) */
.stat-block { padding: 20px; }
.stat-block + .stat-block { border-top: 1px solid #eef0f3; }
.stat-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.stat-block-icon {
  width: 36px; height: 36px; border-radius: 8px; background: rgba(211,47,47,0.08);
  display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 17px; flex-shrink: 0;
}
.stat-block-name { font-size: 15px; font-weight: 700; color: var(--csc-navy); }
.stat-block-unit { font-size: 11.5px; color: var(--csc-silver); text-transform: uppercase; letter-spacing: 0.03em; }

.stat-flow { display: flex; align-items: center; gap: 10px; }
.stat-flow-val { flex: 1; text-align: center; }
.stat-flow-num { font-size: 21px; font-weight: 700; line-height: 1; }
.stat-flow-num.orig { color: var(--csc-silver); }
.stat-flow-num.remap { color: var(--csc-red); }
.stat-flow-lbl { font-size: 10px; color: var(--csc-silver); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 5px; }
.stat-flow-arrow { color: #c7cbd2; font-size: 18px; flex-shrink: 0; }

.stat-gain-badge {
  margin-top: 14px; background: rgba(29,158,99,0.08); border: 1px solid rgba(29,158,99,0.25);
  border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.stat-gain-badge i { color: var(--csc-green); font-size: 16px; }
.stat-gain-badge-text { font-size: 15px; font-weight: 700; color: var(--csc-green); }

/* DESKTOP: table layout (≥768px) */
.stats-table-wrap { display: none; }
@media (min-width: 768px) {
  .stat-block { display: none; }
  .stats-table-wrap { display: block; }
  .stats-table-csc { width: 100%; border-collapse: collapse; }
  .stats-table-csc thead th {
    font-size: 11px; font-weight: 700; color: var(--csc-silver); text-transform: uppercase;
    letter-spacing: 0.05em; text-align: left; padding: 18px 24px 12px; background: var(--csc-grey-bg-3);
  }
  .stats-table-csc thead th:not(:first-child) { text-align: center; }
  .stats-table-csc tbody td { padding: 18px 24px; border-top: 1px solid #eef0f3; vertical-align: middle; }
  .stats-table-csc tbody td:not(:first-child) { text-align: center; }
  .table-stat-name { font-size: 16px; font-weight: 700; color: var(--csc-navy); }
  .table-stat-unit { font-size: 12px; color: var(--csc-silver); margin-top: 2px; }
  .table-num-orig { font-size: 18px; font-weight: 700; color: var(--csc-text-dark); }
  .table-num-remap { font-size: 18px; font-weight: 700; color: var(--csc-red); }
  .table-num-gain {
    display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; color: var(--csc-green);
    background: rgba(29,158,99,0.08); padding: 5px 14px; border-radius: 100px;
  }
}

.stats-disclaimer { font-size: 12px; color: var(--csc-silver); font-style: italic; padding: 14px 20px; }

.stage-note-csc {
  display: flex; align-items: flex-start; gap: 9px; background: var(--csc-grey-bg-3);
  border-bottom: 1px solid #eef0f3; padding: 13px 20px; font-size: 12.5px; color: var(--csc-text-body); line-height: 1.5;
}
.stage-note-csc i { color: var(--csc-red); font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* CTA strip under stats */
.cta-strip-csc {
  background: var(--csc-black); border-radius: 8px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-bottom: 40px;
}
.cta-strip-label { font-size: 14px; font-weight: 600; color: #fff; }
.btn-enquire-csc {
  background: var(--csc-red); color: #fff; border: none; border-radius: 100px;
  padding: 11px 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
}
.btn-enquire-csc:hover { background: var(--csc-red-dark); color: #fff; }
@media (min-width: 576px) {
  .cta-strip-csc { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ── ABOUT SECTION ── */
.about-section-csc { background: var(--csc-grey-bg); padding: 44px 0; }
.about-h2 { font-size: 21px; font-weight: 700; color: var(--csc-navy); margin-bottom: 16px; }
.about-text { font-size: 14.5px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 16px; }
.about-text:last-child { margin-bottom: 0; font-weight: 600; color: var(--csc-text-dark); }
@media (min-width: 768px) { .about-h2 { font-size: 24px; } }

/* ── ADVANTAGE / OPTIONS CARDS ── */
.cards-section-csc { background: var(--csc-grey-bg-3); padding: 44px 0; }
.info-card-csc { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 24px; height: 100%; box-shadow: 0 2px 8px rgba(20,30,50,0.05); }
.info-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.info-card-head i { color: var(--csc-red); font-size: 19px; }
.info-card-head h3 { font-size: 16px; font-weight: 700; color: var(--csc-navy); margin: 0; text-transform: uppercase; letter-spacing: 0.01em; }
.info-card-text { font-size: 14px; color: var(--csc-text-body); line-height: 1.7; margin-bottom: 16px; }
.check-list-csc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-list-csc li { font-size: 13.5px; color: var(--csc-text-dark); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.check-list-csc i { color: var(--csc-green); font-size: 14px; }

.option-row-csc { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f1f3; gap: 10px; }
.option-row-csc:last-child { border-bottom: none; }
.option-name { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--csc-text-dark); }
.option-name i { color: var(--csc-red); font-size: 15px; flex-shrink: 0; }
.option-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.option-badge.available { background: rgba(29,158,99,0.1); color: var(--csc-green); }
.option-badge.offroad { background: rgba(211,47,47,0.08); color: var(--csc-red); }

/* ── TECH SPEC SECTION ── */
.tech-section-csc { background: #fff; padding: 44px 0; }
.tech-h2 {
  font-size: 21px; font-weight: 700; color: var(--csc-navy); text-transform: uppercase; letter-spacing: 0.01em;
  display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--csc-red); margin-bottom: 24px;
}
.tech-list-csc { padding-left: 18px; margin-bottom: 0; }
.tech-list-csc li { font-size: 14px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 18px; }
.tech-list-csc li strong { color: var(--csc-text-dark); }
.tech-list-csc a { color: var(--csc-red); font-weight: 600; }
.tech-closing { font-size: 15px; font-weight: 700; color: var(--csc-text-dark); margin-top: 8px; }
@media (min-width: 768px) { .tech-h2 { font-size: 24px; } }
/* ── QUOTE FORM ── */
.quote-section-csc { background: var(--csc-grey-bg); padding: 44px 0 56px; }
.quote-intro-h2 { font-size: 19px; font-weight: 700; color: var(--csc-red); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 20px; }
@media (min-width: 768px) { .quote-intro-h2 { font-size: 22px; } }

/* ── TRUST BAR ── */
.trust-bar { background: var(--csc-navy-card); padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 4px 0; }
.trust-item i { font-size: 17px; }
.trust-item.gold i { color: #f5c518; }
.trust-item.red i { color: var(--csc-red); }
.trust-divider { border-left: 1px solid rgba(255,255,255,0.12); }

/* ── STAT STRIP ── */
.stat-strip { background: var(--csc-grey-bg); padding: 50px 0; }
.stat-tile { text-align: center; padding: 16px; }
.stat-num { font-size: clamp(34px,4vw,48px); font-weight: 900; color: var(--csc-navy); line-height: 1; margin-bottom: 6px; }
.stat-num span { color: var(--csc-red); }
.stat-label { font-size: 13px; font-weight: 600; color: var(--csc-silver); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-divider { border-left: 2px solid #d8dce4; }

/* ── ABOUT SECTION ── */
.about-section { background: #fff; padding: 80px 0; }
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--csc-red); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--csc-red); }
.section-h2 { font-size: clamp(26px,3.5vw,38px); font-weight: 700; color: var(--csc-navy); line-height: 1.15; margin-bottom: 18px; text-transform: uppercase; }
.section-h2 em { font-style: normal; color: var(--csc-red); }
.about-text { font-size: 15px; color: var(--csc-text-body); line-height: 1.8; margin-bottom: 16px; }
.about-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.about-check i { color: var(--csc-green); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.about-check-text { font-size: 14.5px; color: var(--csc-text-dark); font-weight: 500; }
.about-check-sub { font-size: 13px; color: var(--csc-silver); }
.about-image-wrap { position: relative; border-radius: 8px; overflow: hidden; }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; display: block; }
.about-image-badge { position: absolute; bottom: 20px; left: 20px; background: var(--csc-red); color: #fff; border-radius: 6px; padding: 12px 18px; font-size: 13px; font-weight: 700; }
.about-image-badge strong { display: block; font-size: 22px; line-height: 1; }


/* ── SERVICES SECTION ── */
.services-section { background: var(--csc-grey-bg); padding: 80px 0; }
.service-card-csc { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; padding: 28px 24px; height: 100%; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(20,30,50,0.05); transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.service-card-csc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--csc-red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.service-card-csc:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20,30,50,0.10); }
.service-card-csc:hover::before { transform: scaleX(1); }
.service-icon-csc { width: 50px; height: 50px; border-radius: 10px; background: rgba(211,47,47,0.08); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 22px; margin-bottom: 18px; }
.service-title-csc { font-size: 17px; font-weight: 700; color: var(--csc-navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.01em; }
.service-desc-csc { font-size: 14px; color: var(--csc-text-body); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.service-link-csc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--csc-red); text-transform: uppercase; letter-spacing: 0.04em; transition: gap 0.2s; }
.service-link-csc:hover { gap: 10px; color: var(--csc-red-dark); }

/* ── PROCESS SECTION ── */
.process-section { background: #20262f; padding: 80px 0; }
.process-h2 { text-align: center; font-size: clamp(22px,3vw,32px); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 10px; }
.process-sub { text-align: center; font-size: 14px; color: #9499a3; margin-bottom: 52px; }
.process-step { text-align: center; position: relative; }
.process-connector { position: absolute; top: 34px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: rgba(255,255,255,0.08); }
.process-circle { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; color: #fff; border: 2px solid rgba(255,255,255,0.14); position: relative; }
.process-num { position: absolute; top: -4px; right: calc(50% - 38px); width: 22px; height: 22px; border-radius: 50%; background: var(--csc-red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #20262f; }
.process-title { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.process-sub2 { font-size: 11.5px; color: #9499a3; margin-top: 3px; }

/* ── CERT BAR ── */
.cert-bar { background: var(--csc-black); padding: 16px 0; }
.cert-item { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cert-item i { color: var(--csc-red); font-size: 14px; }
.cert-item.gold i { color: #f5c518; }

/* ── BREADCRUMB ── */
.breadcrumb-csc { padding: 16px 0 0; font-size: 12.5px; }
.breadcrumb-csc a { color: var(--csc-silver); }
.breadcrumb-csc a:hover { color: var(--csc-red); }
.breadcrumb-csc .bc-active { color: var(--csc-red); font-weight: 600; }

/* ── SECTION HELPERS ── */
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--csc-red); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--csc-red); flex-shrink: 0; }
.section-h2 { font-size: clamp(24px,3vw,36px); font-weight: 700; color: var(--csc-navy); line-height: 1.15; margin-bottom: 16px; text-transform: uppercase; }
.section-h2 em { font-style: normal; color: var(--csc-red); }
.section-text { font-size: 15px; color: var(--csc-text-body); line-height: 1.8; margin-bottom: 16px; }
.btn-csc-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--csc-navy); border: 1.5px solid var(--csc-navy); border-radius: 4px; padding: 12px 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: all 0.2s; }
.btn-csc-outline:hover { background: var(--csc-navy); color: #fff; }

/* ── WHAT IS ADBLUE SECTION ── */
.csccontent-section { background: #fff; padding: 80px 0; }
.ab-fact-card { background: var(--csc-grey-bg-3); border: 1px solid #e2e6ed; border-radius: 10px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; height: 100%; }
.ab-fact-icon { width: 42px; height: 42px; border-radius: 8px; background: rgba(211,47,47,0.09); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 19px; flex-shrink: 0; }
.ab-fact-title { font-size: 14.5px; font-weight: 700; color: var(--csc-navy); margin-bottom: 5px; }
.ab-fact-text { font-size: 13.5px; color: var(--csc-text-body); line-height: 1.6; margin: 0; }

/* ── SYMPTOMS SECTION ── */
.symptoms-section { background: var(--csc-grey-bg); padding: 80px 0; }
.symptoms-intro { font-size: 16px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 40px; max-width: 680px; }
.symptom-card { background: #fff; border: 1px solid #dfe3e8; border-left: 4px solid var(--csc-red); border-radius: 8px; padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; height: 100%; box-shadow: 0 2px 8px rgba(20,30,50,0.05); transition: box-shadow 0.2s, transform 0.2s; }
.symptom-card:hover { box-shadow: 0 6px 18px rgba(20,30,50,0.10); transform: translateY(-2px); }
.symptom-icon { width: 44px; height: 44px; border-radius: 8px; background: rgba(211,47,47,0.08); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 20px; flex-shrink: 0; }
.symptom-title { font-size: 15px; font-weight: 700; color: var(--csc-navy); margin-bottom: 5px; }
.symptom-text { font-size: 13.5px; color: var(--csc-text-body); line-height: 1.6; margin: 0; }

/* ── SOLUTION SECTION ── */
.solution-section { background: #fff; padding: 80px 0; }
.solution-step { display: flex; gap: 20px; margin-bottom: 24px; }
.solution-step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--csc-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.solution-step-title { font-size: 15.5px; font-weight: 700; color: var(--csc-navy); margin-bottom: 5px; }
.solution-step-text { font-size: 14px; color: var(--csc-text-body); line-height: 1.7; margin: 0; }

/* Off-road disclaimer */
.disclaimer-box { background: #fffbeb; border: 1.5px solid #fbbf24; border-radius: 8px; padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; margin-top: 36px; }
.disclaimer-box i { color: var(--csc-amber); font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.disclaimer-title { font-size: 14px; font-weight: 700; color: #92400e; margin-bottom: 4px; }
.disclaimer-text { font-size: 13.5px; color: #78350f; line-height: 1.65; margin: 0; }

/* ── REASONS STRIP ── */
.reasons-strip { background: var(--csc-navy-card); padding: 56px 0; }
.reason-tile { text-align: center; padding: 16px; }
.reason-icon { font-size: 28px; color: var(--csc-red); margin-bottom: 12px; }
.reason-title { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.reason-text { font-size: 13px; color: #9499a3; line-height: 1.6; }
.reason-divider { border-left: 1px solid rgba(255,255,255,0.1); }

/* ── SECTION HELPERS ── */
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--csc-red); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--csc-red); flex-shrink: 0; }
.section-h2 { font-size: clamp(24px,3vw,36px); font-weight: 700; color: var(--csc-navy); line-height: 1.15; margin-bottom: 16px; text-transform: uppercase; }
.section-h2 em { font-style: normal; color: var(--csc-red); }
.section-text { font-size: 15px; color: var(--csc-text-body); line-height: 1.8; margin-bottom: 16px; }
.btn-csc-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--csc-navy); border: 1.5px solid var(--csc-navy); border-radius: 4px; padding: 12px 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: all 0.2s; }
.btn-csc-outline:hover { background: var(--csc-navy); color: #fff; }

/* ── IMPORTANT NOTICE BANNER ── */
.notice-banner { background: var(--csc-grey-bg); border-top: 4px solid var(--csc-navy); padding: 32px 0; }
.notice-inner { display: flex; align-items: flex-start; gap: 18px; }
.notice-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--csc-navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; }
.notice-title { font-size: 16px; font-weight: 700; color: var(--csc-navy); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
.notice-text { font-size: 14.5px; color: var(--csc-text-body); line-height: 1.7; margin: 0; }

/* ── AVAILABILITY OPTIONS ── */
.options-section { background: #fff; padding: 80px 0; }
.option-card { border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(20,30,50,0.08); border: 1px solid #e2e6ed; }
.option-card-header { padding: 28px 30px; }
.option-card-header.remap { background: linear-gradient(135deg, var(--csc-navy-2) 0%, var(--csc-navy) 100%); }
.option-card-header.club { background: linear-gradient(135deg, #7a1212 0%, var(--csc-red) 100%); }
.option-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.option-title { font-size: 24px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 6px; }
.option-subtitle { font-size: 14px; color: rgba(255,255,255,0.72); }
.option-card-body { padding: 28px 30px; background: #fff; flex: 1; display: flex; flex-direction: column; }
.option-desc { font-size: 15px; color: var(--csc-text-body); line-height: 1.75; margin-bottom: 22px; }
.option-includes { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.option-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--csc-text-dark); }
.option-includes li i { color: var(--csc-green); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.btn-option-remap { display: block; background: var(--csc-navy); color: #fff; border: none; border-radius: 6px; padding: 13px 24px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; transition: background 0.2s; }
.btn-option-remap:hover { background: #11161f; color: #fff; }
.btn-option-club { display: block; background: var(--csc-red); color: #fff; border: none; border-radius: 6px; padding: 13px 24px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; transition: background 0.2s; }
.btn-option-club:hover { background: var(--csc-red-dark); color: #fff; }

/* ── DYNO SPEC SECTION ── */
.spec-section { background: var(--csc-grey-bg); padding: 80px 0; }
.spec-panel { background: var(--csc-navy); border-radius: 10px; padding: 36px; color: #fff; }
.spec-panel-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.spec-panel-name { font-size: 26px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.spec-row:last-child { border-bottom: none; }
.spec-row-label { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; }
.spec-row-val { font-size: 13.5px; color: #fff; font-weight: 700; text-align: right; }
.spec-highlight { color: var(--csc-red); }

.spec-fact-card { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; padding: 22px; height: 100%; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 2px 6px rgba(20,30,50,0.05); }
.spec-fact-icon { width: 42px; height: 42px; border-radius: 8px; background: rgba(211,47,47,0.09); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 19px; flex-shrink: 0; }
.spec-fact-title { font-size: 14.5px; font-weight: 700; color: var(--csc-navy); margin-bottom: 5px; }
.spec-fact-text { font-size: 13.5px; color: var(--csc-text-body); line-height: 1.6; margin: 0; }


/* ── FAQ SECTION ── */
.faq-section { background: #fff; padding: 80px 0; }
.faq-accordion-csc .accordion-item { border: 1px solid #e2e6ed; border-radius: 8px !important; margin-bottom: 10px; overflow: hidden; }
.faq-accordion-csc .accordion-button { font-size: 15px; font-weight: 700; color: var(--csc-navy); background: #fff; padding: 18px 22px; border-radius: 8px !important; }
.faq-accordion-csc .accordion-button:not(.collapsed) { background: var(--csc-navy); color: #fff; box-shadow: none; }
.faq-accordion-csc .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231c2536' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.faq-accordion-csc .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.faq-accordion-csc .accordion-body { font-size: 14.5px; color: var(--csc-text-body); line-height: 1.75; padding: 18px 22px; background: var(--csc-grey-bg-3); }

/* ── INTRO SECTION ── */
.intro-section { background: var(--csc-grey-bg); padding: 80px 0; }
.intro-image-wrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(20,30,50,0.12); }
.intro-image-wrap img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; display: block; }
.intro-image-badge { position: absolute; bottom: 20px; right: 20px; background: var(--csc-red); color: #fff; border-radius: 6px; padding: 12px 18px; font-size: 12px; font-weight: 700; text-align: center; }
.intro-image-badge strong { display: block; font-size: 22px; line-height: 1; }
.stat-inline { display: flex; gap: 28px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid #dfe3e8; border-bottom: 1px solid #dfe3e8; margin: 24px 0; }
.stat-inline-item { }
.stat-inline-num { font-size: 28px; font-weight: 700; color: var(--csc-navy); line-height: 1; }
.stat-inline-num span { color: var(--csc-red); }
.stat-inline-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--csc-silver); margin-top: 4px; }

/* ── REMAP OPTIONS ── */
.options-section { background: #fff; padding: 80px 0; }
.stage-card { background: var(--csc-grey-bg-3); border: 1px solid #e2e6ed; border-radius: 10px; padding: 28px 24px; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.stage-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--csc-red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.stage-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20,30,50,0.10); }
.stage-card:hover::before { transform: scaleX(1); }
.stage-card.featured { background: #fff; border-color: rgba(211,47,47,0.35); box-shadow: 0 4px 16px rgba(211,47,47,0.10); }
.stage-card.featured::before { transform: scaleX(1); }
.stage-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 100px; margin-bottom: 16px; }
.stage-badge.s1 { background: rgba(211,47,47,0.10); color: var(--csc-red); }
.stage-badge.s2 { background: rgba(28,36,54,0.10); color: var(--csc-navy); }
.stage-badge.safety { background: rgba(29,158,99,0.10); color: var(--csc-green); }
.stage-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; flex-shrink: 0; }
.stage-icon.s1 { background: rgba(211,47,47,0.10); color: var(--csc-red); }
.stage-icon.s2 { background: rgba(28,36,54,0.10); color: var(--csc-navy); }
.stage-icon.safety { background: rgba(29,158,99,0.10); color: var(--csc-green); }
.stage-title { font-size: 20px; font-weight: 700; color: var(--csc-navy); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 8px; }
.stage-sub { font-size: 13px; color: var(--csc-red); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.stage-desc { font-size: 14px; color: var(--csc-text-body); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.stage-includes { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.stage-includes li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--csc-text-dark); }
.stage-includes li i { color: var(--csc-green); font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.stage-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--csc-red); text-transform: uppercase; letter-spacing: 0.04em; transition: gap 0.2s; }
.stage-link:hover { gap: 10px; color: var(--csc-red-dark); }

/* ── WHY CSC ── */
.why-section { background: var(--csc-grey-bg); padding: 80px 0; }
.why-card { background: #fff; border: 1px solid #e2e6ed; border-radius: 8px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; height: 100%; box-shadow: 0 2px 6px rgba(20,30,50,0.05); transition: border-color 0.2s, box-shadow 0.2s; }
.why-card:hover { border-color: rgba(211,47,47,0.3); box-shadow: 0 4px 14px rgba(20,30,50,0.08); }
.why-icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(211,47,47,0.09); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 20px; flex-shrink: 0; }
.why-title { font-size: 15px; font-weight: 700; color: var(--csc-navy); margin-bottom: 6px; }
.why-text { font-size: 13.5px; color: var(--csc-text-body); line-height: 1.65; margin: 0; }
.winols-panel { background: var(--csc-navy); border-radius: 10px; padding: 28px; display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; }
.winols-panel-icon { font-size: 28px; color: var(--csc-red); flex-shrink: 0; }
.winols-panel-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
.winols-panel-text { font-size: 13px; color: #9499a3; line-height: 1.6; margin: 0; }

/* ── ADDITIONAL SERVICES STRIP ── */
.addl-section { background: #fff; padding: 80px 0; }
.addl-card { background: var(--csc-grey-bg-3); border: 1px solid #e2e6ed; border-radius: 8px; padding: 22px 20px; display: flex; gap: 14px; align-items: flex-start; height: 100%; transition: border-color 0.2s, transform 0.2s; }
.addl-card:hover { border-color: rgba(211,47,47,0.35); transform: translateY(-2px); }
.addl-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(211,47,47,0.09); display: flex; align-items: center; justify-content: center; color: var(--csc-red); font-size: 18px; flex-shrink: 0; }
.addl-title { font-size: 14.5px; font-weight: 700; color: var(--csc-navy); margin-bottom: 4px; }
.addl-text { font-size: 13px; color: var(--csc-text-body); line-height: 1.55; margin-bottom: 10px; }
.addl-link { font-size: 12.5px; font-weight: 700; color: var(--csc-red); display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.04em; transition: gap 0.2s; }
.addl-link:hover { gap: 8px; color: var(--csc-red-dark); }

/* ── ECOSYSTEM STRIP ── */
.ecosystem-section { background: #20262f; padding: 80px 0; }
.ecosystem-title { font-size: clamp(22px,3vw,30px); font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.ecosystem-title span { color: var(--csc-red); }
.ecosystem-sub { font-size: 14px; color: #9499a3; margin-bottom: 40px; }
.eco-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 28px 24px; height: 100%; display: flex; flex-direction: column; transition: background 0.2s, border-color 0.2s; }
.eco-card:hover { background: rgba(255,255,255,0.10); border-color: rgba(211,47,47,0.4); }
.eco-icon { font-size: 26px; color: var(--csc-red); margin-bottom: 14px; }
.eco-title { font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 8px; }
.eco-text { font-size: 13.5px; color: #9499a3; line-height: 1.65; flex: 1; margin-bottom: 20px; }
.eco-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--csc-red); text-transform: uppercase; letter-spacing: 0.04em; transition: gap 0.2s; }
.eco-link:hover { gap: 10px; color: #ff6b6b; }

.brands-h3 { font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--csc-red); margin-bottom: 24px; }
.brand-link-csc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #b8c4e0; margin-bottom: 12px; transition: color 0.2s; }
.brand-link-csc:hover { color: var(--csc-red) !important; }
.brand-link-csc i { color: var(--csc-red); font-size: 14px; }


/* Availability key */
.avail-key { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.avail-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 100px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; }
.avail-badge i { font-size: 13px; }
.avail-badge.all    { background: rgba(29,158,99,0.10); color: #15803d; border: 1px solid rgba(29,158,99,0.3); }
.avail-badge.diesel { background: rgba(28,36,54,0.10); color: var(--csc-navy); border: 1px solid rgba(28,36,54,0.25); }
.avail-badge.petrol { background: rgba(37,99,235,0.10); color: #1d4ed8; border: 1px solid rgba(37,99,235,0.25); }
.avail-badge.offroad{ background: rgba(217,119,6,0.10); color: var(--csc-amber); border: 1px solid rgba(217,119,6,0.3); }

/* ── OPTION CARDS ── */
.options-section { background: #fff; padding: 70px 0; }
.options-section-alt { background: var(--csc-grey-bg); padding: 70px 0; }
.options-section-dark { background: #20262f; padding: 70px 0; }

.category-label { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.category-label-line { flex: 1; height: 1px; background: #dfe3e8; }
.category-label-line.dark { background: rgba(255,255,255,0.12); }
.category-label-text { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--csc-red); white-space: nowrap; }

.option-card {
  background: #fff; border: 1px solid #dfe3e8; border-radius: 10px; padding: 26px 24px;
  height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(20,30,50,0.05); transition: transform 0.2s, box-shadow 0.2s;
}
.option-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--csc-red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.option-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(20,30,50,0.10); }
.option-card:hover::before { transform: scaleX(1); }
.option-card-dark { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 26px 24px; height: 100%; display: flex; flex-direction: column; transition: background 0.2s, border-color 0.2s; }
.option-card-dark:hover { background: rgba(255,255,255,0.12); border-color: rgba(211,47,47,0.45); }
.option-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.option-icon { width: 44px; height: 44px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.option-icon.red    { background: rgba(211,47,47,0.10); color: var(--csc-red); }
.option-icon.amber  { background: rgba(217,119,6,0.10);  color: var(--csc-amber); }
.option-icon.navy   { background: rgba(28,36,54,0.10);  color: var(--csc-navy); }
.option-icon.green  { background: rgba(29,158,99,0.10);  color: var(--csc-green); }
.option-icon.blue   { background: rgba(37,99,235,0.10);  color: #1d4ed8; }
.option-icon-dark { width: 44px; height: 44px; border-radius: 9px; background: rgba(211,47,47,0.14); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--csc-red); flex-shrink: 0; }
.option-avail { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.option-avail.all     { background: rgba(29,158,99,0.10); color: #15803d; }
.option-avail.diesel  { background: rgba(28,36,54,0.10); color: var(--csc-navy); }
.option-avail.petrol  { background: rgba(37,99,235,0.10); color: #1d4ed8; }
.option-avail.offroad { background: rgba(217,119,6,0.10); color: var(--csc-amber); }
.option-avail.dark-all { background: rgba(29,158,99,0.15); color: #4ade80; }
.option-avail.dark-offroad { background: rgba(217,119,6,0.15); color: #fbbf24; }

.option-title { font-size: 17px; font-weight: 700; color: var(--csc-navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.01em; }
.option-title-dark { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.01em; }
.option-desc { font-size: 14px; color: var(--csc-text-body); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.option-desc-dark { font-size: 14px; color: #9499a3; line-height: 1.7; flex: 1; margin-bottom: 18px; }
.option-note { font-size: 12px; font-weight: 600; color: var(--csc-amber); display: flex; align-items: center; gap: 5px; margin-bottom: 16px; }
.option-note i { font-size: 13px; }
.option-enquire { display: inline-flex; align-items: center; gap: 6px; background: var(--csc-navy); color: #fff; border: none; border-radius: 5px; padding: 10px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.option-enquire:hover { background: #11161f; color: #fff !important; }
.option-enquire-red { display: inline-flex; align-items: center; gap: 6px; background: var(--csc-red); color: #fff; border: none; border-radius: 5px; padding: 10px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.option-enquire-red:hover { background: var(--csc-red-dark); color: #fff; }
/* ── CONTACT METHOD CARDS ── */
.contact-methods { background:var(--csc-grey-bg); padding:70px 0 50px; }
.breadcrumb-row { padding:20px 0 32px; }
.method-card { background:#fff; border:1px solid #dfe3e8; border-radius:10px; padding:28px 24px; height:100%; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(20,30,50,0.05); transition:transform 0.2s, box-shadow 0.2s; position:relative; overflow:hidden; }
.method-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--csc-red); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.method-card:hover { transform:translateY(-4px); box-shadow:0 8px 22px rgba(20,30,50,0.10); }
.method-card:hover::before { transform:scaleX(1); }
.method-card.whatsapp::before { background:#25d366; }
.method-icon { width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; flex-shrink:0; }
.method-icon.red { background:rgba(211,47,47,0.09); color:var(--csc-red); }
.method-icon.green { background:rgba(37,211,102,0.09); color:#25d366; }
.method-icon.navy { background:rgba(28,36,54,0.09); color:var(--csc-navy); }
.method-title { font-size:17px; font-weight:700; color:var(--csc-navy); text-transform:uppercase; letter-spacing:0.01em; margin-bottom:8px; }
.method-detail { font-size:14.5px; color:var(--csc-text-body); line-height:1.65; flex:1; margin-bottom:18px; }
.method-detail a { color:var(--csc-text-body); }
.method-detail a:hover { color:var(--csc-red); }
.btn-method { display:inline-flex; align-items:center; gap:7px; border-radius:5px; padding:10px 18px; font-size:13px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; transition:all 0.2s; }
.btn-method.red { background:var(--csc-red); color:#fff; }
.btn-method.red:hover { background:var(--csc-red-dark); color:#fff; }
.btn-method.navy { background:var(--csc-navy); color:#fff; }
.btn-method.navy:hover { background:#11161f; color:#fff; }
.btn-method.wa { background:#25d366; color:#fff; }
.btn-method.wa:hover { background:#1da851; color:#fff; }
.btn-method.outline { background:transparent; color:var(--csc-navy); border:1.5px solid var(--csc-navy); }
.btn-method.outline:hover { background:var(--csc-navy); color:#fff; }
/* ── FORM + HOURS SECTION ── */
.form-section { background:#fff; padding:80px 0; }
.form-card { background:var(--csc-grey-bg-3); border:1px solid #e2e6ed; border-radius:10px; padding:36px 32px; }
.form-card-title { font-size:22px; font-weight:700; color:var(--csc-navy); text-transform:uppercase; margin-bottom:6px; }
.form-card-sub { font-size:14px; color:var(--csc-silver); margin-bottom:28px; }
.form-label-csc { font-size:11px; font-weight:700; color:var(--csc-text-dark); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; display:block; }
.form-control-csc { width:100%; border:1px solid #d8dbe0; border-radius:6px; padding:12px 15px; font-size:14.5px; color:var(--csc-text-dark); font-family:var(--font); background:#fff; margin-bottom:18px; transition:border-color 0.2s, box-shadow 0.2s; }
.form-control-csc:focus { outline:none; border-color:var(--csc-red); box-shadow:0 0 0 3px rgba(211,47,47,0.08); }
.form-control-csc::placeholder { color:#b0b6c2; }
.form-select-csc { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%238a8f99' stroke-width='1.5' stroke-linecap='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }
.btn-form-submit { background:var(--csc-red); color:#fff; border:none; border-radius:6px; padding:14px; font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; width:100%; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background 0.2s; }
.btn-form-submit:hover { background:var(--csc-red-dark); }
/* ── HOURS PANEL ── */
.hours-panel { background:var(--csc-navy); border-radius:10px; overflow:hidden; }
.hours-panel-header { padding:24px 26px 20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.hours-panel-title { font-size:17px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:4px; }
.hours-panel-sub { font-size:13px; color:#9499a3; }
.hours-row { display:flex; align-items:center; justify-content:space-between; padding:13px 26px; border-bottom:1px solid rgba(255,255,255,0.07); }
.hours-row:last-child { border-bottom:none; }
.hours-row.today { background:rgba(211,47,47,0.10); }
.hours-day { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#fff; }
.today-dot { width:7px; height:7px; border-radius:50%; background:var(--csc-green); flex-shrink:0; }
.hours-right { display:flex; align-items:center; gap:10px; }
.hours-time { font-size:13px; color:#9499a3; }
.hours-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:3px 8px; border-radius:100px; }
.hours-badge.open { background:rgba(29,158,99,0.15); color:#4ade80; }
.hours-badge.closed { background:rgba(100,116,139,0.12); color:#64748b; }
.hours-badge.extended { background:rgba(211,47,47,0.15); color:#ff8080; }
/* Map embed */
.map-wrap { border-radius:10px; overflow:hidden; border:1px solid #e2e6ed; margin-top:24px; }
.map-wrap iframe { display:block; width:100%; height:260px; border:none; }
/* Info strip below hours */
.info-strip { background:rgba(255,255,255,0.05); border-top:1px solid rgba(255,255,255,0.08); padding:18px 26px; display:flex; gap:10px; align-items:flex-start; }
.info-strip i { color:var(--csc-red); font-size:15px; margin-top:2px; flex-shrink:0; }
.info-strip-text { font-size:12.5px; color:#9499a3; line-height:1.6; }
/* ── QUICK CONTACT STRIP ── */
.quick-strip { background:var(--csc-navy-card); padding:40px 0; }
.quick-item { display:flex; align-items:center; gap:12px; }
.quick-icon { width:44px; height:44px; border-radius:8px; background:rgba(211,47,47,0.18); display:flex; align-items:center; justify-content:center; color:var(--csc-red); font-size:18px; flex-shrink:0; }
.quick-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#9499a3; margin-bottom:2px; }
.quick-val { font-size:14.5px; font-weight:700; color:#fff; }
.quick-val a { color:#fff; transition:color 0.2s; }
.quick-val a:hover { color:var(--csc-red); }
.quick-divider { border-left:1px solid rgba(255,255,255,0.1); height:48px; }

.map-options-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        margin-top 0.3s ease;
    margin-top: 0;
}
.map-options-wrap.visible {
    max-height: 2000px;
    opacity: 1;
    margin-top: 16px;
}
.map-options-panel {
    background: var(--tp-dark-3);
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    overflow: hidden;
	padding: 5px;
}
.map-options-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--tp-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-options-header-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-text-3);
}
.map-options-body {
    padding: 18px;
}

/* Free options */
.map-options-divider {
    height: 1px;
    background: var(--tp-border);
    margin: 16px 0;
}
.map-options-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tp-green);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}
.map-options-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(16, 185, 129, 0.2);
}
.map-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 576px) { .map-options-grid { grid-template-columns: 1fr; } }
.map-option-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--tp-dark-2);
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.15s;
    width: 49%;
}
.map-option-row:hover {
    border-color: rgba(16, 185, 129, 0.3);
}
.map-option-row.checked {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.04);
}
.map-option-cb {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--tp-border-2);
    background: var(--tp-dark-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.map-option-cb.checked {
    background: var(--tp-green);
    border-color: var(--tp-green);
}
.map-option-cb.checked::after {
    content: "\2713";
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.map-option-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tp-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.map-option-row.checked .map-option-name {
    color: var(--tp-text);
}
.online-badge,.offline-badge { color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 6px; white-space: nowrap; }
.online-badge { background: var(--tp-green); }
.offline-badge { background: var(--tp-red); }
.btn-soft-dark { background: var(--tp-dark-3); border: 1px solid var(--tp-border-2); color: var(--tp-text); font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 6px; }

/* SERVICE TILE SELECTOR */
.svc-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-text-3);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 10px;
}
.svc-group-label:first-of-type {
    margin-top: 0;
}
.svc-group-label i {
    font-size: 12px;
    color: var(--tp-blue);
}
.svc-group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tp-border);
}
.svc-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.svc-tile {
    background: var(--tp-dark-3);
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        transform 0.1s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.svc-tile:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.svc-tile.selected {
    border-color: var(--tp-blue);
    background: var(--tp-blue-glow);
}
.svc-tile.selected .svc-tile-name {
    color: var(--tp-blue-light);
}
.svc-tile.selected .svc-tile-price {
    color: var(--tp-blue-light);
}
.svc-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.svc-tile-icon.tuning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--tp-amber);
}
.svc-tile-icon.software {
    background: rgba(37, 99, 235, 0.12);
    color: var(--tp-blue-light);
}
.svc-tile-icon.combo {
    background: rgba(16, 185, 129, 0.12);
    color: var(--tp-green);
}
.svc-tile.selected .svc-tile-icon.tuning,
.svc-tile.selected .svc-tile-icon.software,
.svc-tile.selected .svc-tile-icon.combo {
    background: rgba(37, 99, 235, 0.2);
    color: var(--tp-blue-light);
}
.svc-tile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tp-text);
    line-height: 1.2;
}
.svc-tile-desc {
    font-size: 11px;
    color: var(--tp-text-3);
    line-height: 1.4;
    flex: 1;
}
.svc-tile-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--tp-text);
    margin-top: 6px;
    letter-spacing: -0.01em;
}
.svc-tile-manual {
    border-color: rgba(245, 158, 11, 0.3);
}
.svc-manual-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 100px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--tp-amber);
    margin-top: 4px;
    width: fit-content;
}
/* Selected checkmark */
.svc-tile.selected::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tp-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    text-align: center;
}

/* BASE SERVICE TILES (4 primary) */
.svc-base-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .svc-base-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.svc-base-tile {
    background: var(--tp-dark-3);
    border: 1px solid var(--tp-border-2);
    border-radius: 10px;
    padding: 16px 14px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        transform 0.1s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.svc-base-tile:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.svc-base-tile.selected {
    border-color: var(--tp-blue);
    background: var(--tp-blue-glow);
}
.svc-base-tile.selected .svc-tile-name {
    color: var(--tp-blue-light);
}
.svc-base-tile.selected .svc-tile-price {
    color: var(--tp-blue-light);
}
.svc-base-tile.selected::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tp-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    text-align: center;
}