/* ============================================================
   Toyota Zarghoon Motors — Toyota.com-inspired design system
   ============================================================ */
:root {
  --red: #EB0A1E;          /* Toyota red */
  --red-dark: #c00818;
  --black: #101010;
  --dark: #1a1a1a;
  --gray: #58595b;
  --light: #f5f5f5;
  --border: #e4e4e4;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0,0,0,.09);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.16);
  --font: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--dark); background: var(--white); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
::selection { background: var(--red); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(900px 600px at 50% 38%, #23252c 0%, #0c0d10 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader.skip { display: none; }
.pre-inner { text-align: center; }
.pre-logo-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 26px; }
.pre-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: preSpin 1.6s linear infinite; }
.pre-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.pre-ring-arc {
  fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 90 287; filter: drop-shadow(0 0 6px rgba(235,10,30,.6));
}
@keyframes preSpin { to { transform: rotate(360deg); } }
.pre-logo {
  position: absolute; inset: 16px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(235,10,30,.25), 0 14px 34px rgba(0,0,0,.5);
  animation: preLogoPop .8s cubic-bezier(.2,.9,.3,1.4) backwards;
}
.pre-logo img { width: 68%; height: auto; }
@keyframes preLogoPop { from { transform: scale(0); } to { transform: scale(1); } }
.pre-slogan {
  font-family: var(--font-display); font-size: 34px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 12px; justify-content: center;
}
.pre-slogan .pw { opacity: 0; transform: translateY(18px); animation: preWord .5s ease forwards; }
.pre-slogan .pw:nth-child(1) { animation-delay: .35s; }
.pre-slogan .pw:nth-child(2) { animation-delay: .55s; }
.pre-slogan .pw:nth-child(3) { animation-delay: .75s; }
.pre-slogan .pw:nth-child(4) { animation-delay: .95s; }
.pw-red { color: var(--red); }
.pw-brand { position: relative; }
.pw-brand::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; border-radius: 4px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  animation: preUnderline .45s 1.25s ease forwards;
}
@keyframes preWord { to { opacity: 1; transform: none; } }
@keyframes preUnderline { to { transform: scaleX(1); } }
.pre-bar {
  width: 220px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1);
  margin: 30px auto 0; overflow: hidden;
}
.pre-bar span {
  display: block; height: 100%; width: 40%; border-radius: 4px;
  background: linear-gradient(90deg, var(--red), #ff5f6d);
  animation: preBar 1.1s ease-in-out infinite;
}
@keyframes preBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--red), #ff5f6d);
  z-index: 500; transition: width .1s linear; box-shadow: 0 0 10px rgba(235,10,30,.55);
}

/* Scroll-reveal animation (classes added by main.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 13px 30px; border-radius: 40px;
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; transition: all .25s ease; text-align: center;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn:hover::after { left: 130%; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(235,10,30,.35); }
.btn-outline { border-color: var(--black); color: var(--black); background: transparent; }
.btn-outline:hover { background: var(--black); color: #fff; }
.btn-white { background: #fff; color: var(--black); }
.btn-white:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 9px 20px; font-size: 12px; }

/* ---------- Icons ---------- */
.icon { vertical-align: -2px; flex-shrink: 0; }

/* ---------- Top bar ---------- */
.topbar { background: var(--black); color: #cfcfcf; font-size: 13px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1000px) { .topbar-links { gap: 12px; font-size: 12px; } }
.topbar-contacts { display: flex; align-items: center; }
.topbar-contacts span { margin-right: 18px; display: inline-flex; align-items: center; gap: 6px; }
.topbar-contacts .icon { color: var(--red); }
.topbar-social { display: flex; gap: 14px; align-items: center; }
.topbar-social a { color: #cfcfcf; transition: color .2s; }
.topbar-social a:hover { color: var(--red); }
.topbar-links { display: flex; gap: 18px; align-items: center; }
.topbar-links a { color: #cfcfcf; font-weight: 600; transition: color .2s; }
.topbar-links a:hover { color: var(--red); }

/* ---------- Navbar ---------- */
.navbar { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 50px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 16.5px; font-weight: 900; letter-spacing: .04em; color: var(--black); white-space: nowrap; }
.brand-text small { font-size: 10px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 14px; }
.nav-links .home-link { display: none; } /* desktop: the logo is the home link */
.nav-links a.nav-vd:not(.btn) { color: var(--red); display: inline-flex; align-items: center; gap: 7px; }
.nav-links a.nav-vd:not(.btn):hover, .nav-links a.nav-vd.active:not(.btn) { border-bottom-color: var(--red); }
.vd-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  animation: vdPulse 1.6s ease-in-out infinite;
}
@keyframes vdPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(235,10,30,.45); } 50% { box-shadow: 0 0 0 6px rgba(235,10,30,0); } }
.nav-links a:not(.btn) {
  font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase;
  letter-spacing: .02em; padding: 6px 0; border-bottom: 3px solid transparent; transition: all .2s;
  white-space: nowrap;
}
.nav-links a:not(.btn):hover, .nav-links a.active:not(.btn) { color: var(--red); border-bottom-color: var(--red); }
.nav-cta { margin-left: 2px; padding: 10px 20px; font-size: 12px; white-space: nowrap; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-drop-toggle {
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase;
  letter-spacing: .02em; padding: 6px 0; border-bottom: 3px solid transparent; transition: all .2s;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.nav-drop-toggle .caret { font-size: 11px; transition: transform .25s; }
.nav-dropdown:hover .nav-drop-toggle, .nav-drop-toggle.active { color: var(--red); border-bottom-color: var(--red); }
.nav-dropdown:hover .caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.16);
  min-width: 240px; padding: 10px; opacity: 0; visibility: hidden; transition: all .25s ease; z-index: 60;
  border-top: 3px solid var(--red);
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; transition: .2s; border-bottom: 0 !important;
}
.nav-drop-menu a:hover, .nav-drop-menu a.active { background: #fdeaec; color: var(--red); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--black); margin: 5px 0; border-radius: 2px; transition: .3s; }

/* ---------- Hero slider ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--black);
  /* Full width always. Without this, max-height makes the browser shrink the
     whole section on a tall banner and leaves dead space beside the slider. */
  width: 100%;
  /* Height follows the proportions of the slide on screen, so nothing is cropped.
     --hero-ratio is set from the banner itself (see index.php / main.js). */
  aspect-ratio: var(--hero-ratio, 16 / 7);
  min-height: 320px;          /* very wide banners still leave room for the text */
  max-height: 86vh;           /* very tall banners never push the page off screen */
  /* No height/aspect-ratio transition. Browsers stop re-evaluating aspect-ratio
     while a transition on the box size is running, which pins the slider to the
     first slide's shape and crops every other banner. The 1s crossfade between
     slides covers the height change instead. */
}
/* Decorative watermark - only over slides that carry text, so it never sits on
   top of a banner meant to be seen on its own. Class is toggled in main.js. */
.hero.slide-has-text::after {
  content: 'TOYOTA'; position: absolute; right: -18px; bottom: -40px; z-index: 4;
  font-family: var(--font-display); font-weight: 800; font-size: 210px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); letter-spacing: .02em;
  pointer-events: none; user-select: none;
}
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px); color: #fff;
  font-size: 20px; cursor: pointer; transition: .25s; display: flex; align-items: center; justify-content: center;
}
.hero-arrow:hover { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.08); }
.hero-arrow.prev { left: 26px; }
.hero-arrow.next { right: 26px; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center;
}
/* The banner in full - contain never crops, unlike cover. */
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* Blurred fill behind it, so a slide shaped differently from the container
   sits on its own artwork instead of on empty black bars. */
.hero-blur {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: blur(30px) brightness(.45); transform: scale(1.06);
}
.hero-slide.active { opacity: 1; z-index: 2; }
/* Only darken the picture when words have to sit on top of it. A banner with no
   title/subtitle/button is shown exactly as the dealership designed it. */
.hero-slide.has-text::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%);
}
.hero-slide.no-image { background: radial-gradient(1200px 600px at 80% 20%, #3a3a3a 0%, #161616 55%, #0a0a0a 100%); }
.hero-content { position: relative; z-index: 3; color: #fff; max-width: 640px; }
.hero-kicker {
  color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .25em; font-size: 13px;
  margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px;
}
.hero-kicker::before { content: ''; width: 42px; height: 3px; background: var(--red); display: inline-block; }
.hero-content h1 { font-family: var(--font-display); font-size: 76px; font-weight: 800; line-height: .98; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.hero-content p { font-size: 18px; color: #e3e3e3; margin-bottom: 30px; }
/* Slide-in entrance for active slide content */
.hero-slide .hero-kicker, .hero-slide h1, .hero-slide p, .hero-slide .btn { opacity: 0; transform: translateY(26px); }
.hero-slide.active .hero-kicker { animation: heroUp .7s .15s ease forwards; }
.hero-slide.active h1          { animation: heroUp .7s .3s ease forwards; }
.hero-slide.active p           { animation: heroUp .7s .45s ease forwards; }
.hero-slide.active .btn        { animation: heroUp .7s .6s ease forwards; }
@keyframes heroUp { to { opacity: 1; transform: none; } }
.hero-dots { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 5; }
.hero-dots button { width: 34px; height: 4px; border: 0; border-radius: 4px; background: rgba(255,255,255,.35); cursor: pointer; transition: .3s; }
.hero-dots button.active { background: var(--red); width: 54px; }

/* ---------- Quick actions: floating card over hero ---------- */
.quick-strip { background: transparent; position: relative; z-index: 20; }
.quick-strip .container {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(115deg, var(--red) 0%, #b00715 100%);
  /* Sits below the slider, not over it. The old -52px overlap hid the bottom
     strip of every banner, which is exactly what this update is meant to stop. */
  border-radius: 18px; margin-top: 18px; overflow: hidden;
  box-shadow: 0 24px 54px rgba(235,10,30,.35);
}
.quick-item {
  color: #fff; text-align: center; padding: 26px 12px; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em; transition: background .25s, transform .25s;
  border-right: 1px solid rgba(255,255,255,.16); position: relative;
}
.quick-item:last-child { border-right: 0; }
.quick-item:hover { background: rgba(0,0,0,.22); transform: translateY(-3px); }
.quick-item .qi-icon { display: flex; justify-content: center; margin-bottom: 10px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section.gray { background: var(--light); }
.section.dark { background: var(--black); color: #fff; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.section-head .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.section-head h2 { font-family: var(--font-display); font-size: 48px; font-weight: 800; text-transform: uppercase; margin: 8px 0 18px; line-height: 1.05; position: relative; padding-bottom: 16px; }
.section-head h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 64px; height: 4px; background: var(--red); border-radius: 4px; }
.section-head p { color: var(--gray); font-size: 16px; }
.section.dark .section-head p { color: #b9b9b9; }

/* ---------- Category tabs ---------- */
.cat-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.cat-tab {
  padding: 12px 28px; border-radius: 40px; border: 2px solid var(--border); background: #fff;
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: .25s;
}
.cat-tab:hover { border-color: var(--red); color: var(--red); }
.cat-tab.active { background: var(--black); border-color: var(--black); color: #fff; }

/* ---------- Vehicle cards ---------- */
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.vehicle-card {
  background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column;
}
.vehicle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.vc-img { position: relative; height: 200px; background: linear-gradient(160deg, #f2f2f2, #e2e2e2); overflow: hidden; }
.vc-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.16) 0%, transparent 32%);
}
.vc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vehicle-card:hover .vc-img img { transform: scale(1.06); }
.vc-badge {
  position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 30px;
  z-index: 2; transition: opacity .3s ease, transform .3s ease;
}
/* Hide the Featured / status label while hovering the vehicle image */
.vehicle-card:hover .vc-badge,
.vc-img:hover .vc-badge { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.vc-badge.hold { background: var(--black); }
.vc-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.vc-body h3 { font-family: var(--font-display); font-size: 27px; font-weight: 700; text-transform: uppercase; position: relative; padding-bottom: 8px; letter-spacing: .015em; }
.vc-body h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; background: var(--red); transition: width .35s ease; }
.vehicle-card:hover .vc-body h3::after { width: 62px; }
.vc-tagline { color: var(--gray); font-size: 13.5px; margin: 4px 0 12px; }
.vc-specs {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; padding-top: 10px;
  border-top: 1px solid var(--border); color: var(--gray); font-size: 12.5px; font-weight: 600;
}
.vc-specs span { display: inline-flex; align-items: center; gap: 5px; }
.vc-specs .icon { color: var(--red); }
.vc-price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); }
.vc-price small { display: block; color: var(--gray); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.vc-price strong { font-size: 19px; color: var(--red); font-weight: 800; }
.vc-actions { display: flex; gap: 10px; margin-top: 16px; }
.vc-actions .btn { flex: 1; padding: 11px 8px; font-size: 12px; }

/* ---------- Services ---------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.service-card {
  background: #fff; border-radius: var(--radius); padding: 36px 28px; border-top: 4px solid var(--red);
  box-shadow: var(--shadow); transition: transform .3s;
}
.section.dark .service-card { background: #1d1d1d; color: #fff; }
.service-card:hover { transform: translateY(-6px); }
.service-card .sc-icon {
  margin-bottom: 18px; width: 68px; height: 68px; display: flex;
  align-items: center; justify-content: center; background: rgba(235,10,30,.09);
  border-radius: 16px; transition: .3s; color: var(--red);
}
.service-card:hover .sc-icon { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.05); }
.service-card h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.service-card p { color: var(--gray); font-size: 14.5px; }
.section.dark .service-card p { color: #b5b5b5; }

/* ---------- Stats band ---------- */
.stats-band {
  background:
    repeating-linear-gradient(-55deg, transparent 0 26px, rgba(255,255,255,.022) 26px 28px),
    radial-gradient(900px 300px at 15% 0%, #26262b 0%, var(--black) 60%);
  color: #fff; padding: 64px 0; border-top: 4px solid var(--red);
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; text-align: center; }
.stat h3 { font-family: var(--font-display); font-size: 58px; font-weight: 800; color: var(--red); line-height: 1; }
.stat p { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: #bdbdbd; }

/* ---------- News cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.news-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: .3s; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-card .nc-img { height: 190px; background: linear-gradient(150deg, #2a2a2a, #101010); overflow: hidden; }
.news-card .nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .nc-img img { transform: scale(1.06); }
.nc-body { padding: 24px; }
.nc-date { color: var(--red); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.nc-body h3 { font-size: 19px; font-weight: 800; margin: 8px 0 10px; line-height: 1.3; }
.nc-body p { color: var(--gray); font-size: 14px; }
.nc-link { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.testi-card { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); position: relative; }
.testi-card::before { content: '\201C'; position: absolute; top: 8px; right: 22px; font-size: 90px; color: rgba(235,10,30,.12); font-family: Georgia, serif; line-height: 1; }
.testi-stars { display: flex; gap: 3px; margin-bottom: 12px; }
.icon.star-on { color: #f5a623; fill: #f5a623; }
.icon.star-off { color: #d8d8d8; }
.testi-card p { color: var(--gray); font-size: 15px; font-style: italic; }
.testi-author { margin-top: 18px; display: flex; align-items: center; gap: 13px; }
.testi-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--red), #8f0511); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(235,10,30,.35);
}
.testi-author strong { display: block; font-size: 15px; }
.testi-author span { color: var(--red); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Vehicle Doctor homepage band ---------- */
.vd-band {
  background:
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(255,255,255,.025) 30px 32px),
    radial-gradient(900px 500px at 85% 20%, #2c2e36 0%, #121317 60%);
  color: #fff; padding: 84px 0; border-top: 4px solid var(--red); overflow: hidden;
}
.vd-band-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.vd-band-text .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.vd-band-text h2 { font-family: var(--font-display); font-size: 50px; font-weight: 800; text-transform: uppercase; line-height: 1; margin: 8px 0 14px; }
.vd-band-text p { color: #c4c4c4; font-size: 16px; max-width: 560px; }
.vd-band-stats { display: flex; gap: 28px; margin: 26px 0 30px; flex-wrap: wrap; }
.vd-band-stats div { border-left: 3px solid var(--red); padding-left: 14px; }
.vd-band-stats strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; }
.vd-band-stats span { color: #9a9a9a; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.vd-band-visual { position: relative; min-height: 320px; }
.vd-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 210px; height: 210px; border-radius: 50%; color: var(--red);
  background: rgba(235,10,30,.07); border: 2px dashed rgba(235,10,30,.45);
  display: flex; align-items: center; justify-content: center;
  animation: isoPulse 3s ease-in-out infinite;
}
.vd-float {
  position: absolute; background: #fff; color: var(--dark); border-radius: 30px;
  padding: 9px 18px; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px rgba(0,0,0,.35);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  animation: vdFloat 4.5s ease-in-out infinite;
}
.vd-float .icon { color: #157347; }
.vd-f1 { top: 8%; left: 0; animation-delay: 0s; }
.vd-f2 { top: 46%; right: 0; animation-delay: 1.4s; }
.vd-f3 { bottom: 6%; left: 10%; animation-delay: 2.8s; }
@keyframes vdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 992px) {
  .vd-band-inner { grid-template-columns: 1fr; }
  .vd-band-text h2 { font-size: 38px; }
  .vd-band-visual { min-height: 300px; margin-top: 10px; }
}

/* ---------- Model marquee ---------- */
.brand-marquee {
  background: var(--black); overflow: hidden; padding: 26px 0; border-top: 4px solid var(--red);
  position: relative;
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 34px; white-space: nowrap;
  animation: marquee 36s linear infinite; will-change: transform;
}
.brand-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-size: 44px; font-weight: 800; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); letter-spacing: .04em;
  transition: .3s;
}
.marquee-track span:hover { color: var(--red); -webkit-text-stroke-color: var(--red); }
.marquee-track i { color: var(--red); font-size: 22px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(255,255,255,.045) 30px 32px),
    linear-gradient(100deg, var(--red) 0%, #a30713 100%);
  color: #fff; padding: 76px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px;
  border: 34px solid rgba(255,255,255,.07); border-radius: 50%;
}
.cta-band h2 { font-family: var(--font-display); font-size: 48px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; line-height: 1; }
.cta-band p { font-size: 17px; opacity: .92; margin-bottom: 28px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(255,255,255,.02) 30px 32px),
    radial-gradient(1000px 400px at 75% 0%, #3c3c3c 0%, #141414 60%);
  color: #fff; padding: 80px 0; text-align: center; position: relative; overflow: hidden;
  border-bottom: 4px solid var(--red);
}
.page-hero::after {
  content: 'TOYOTA'; position: absolute; right: -12px; bottom: -34px;
  font-family: var(--font-display); font-weight: 800; font-size: 150px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); pointer-events: none; user-select: none;
}
.page-hero h1 { font-family: var(--font-display); font-size: 56px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.page-hero p { color: #c9c9c9; margin-top: 8px; font-size: 16px; }
.breadcrumb { color: var(--red); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 10px; }

/* ---------- Vehicle detail ---------- */
.vd-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
.vd-image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(160deg,#f0f0f0,#dcdcdc); position: relative; }
.vd-image::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); pointer-events: none; }
.vd-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vd-image:hover img { transform: scale(1.04); }
.vd-info h1 { font-family: var(--font-display); font-size: 54px; font-weight: 800; text-transform: uppercase; line-height: .98; }
.vd-tagline { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; margin-bottom: 12px; }
.vd-desc { color: var(--gray); margin: 14px 0 22px; }
.vd-price-box { background: var(--light); border-left: 4px solid var(--red); padding: 18px 22px; border-radius: 6px; margin-bottom: 24px; }
.vd-price-box small { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--gray); display: block; }
.vd-price-box strong { font-size: 28px; font-weight: 900; color: var(--red); }
/* ---------- Interactive 3D model ---------- */
.v3d-section {
  background:
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(255,255,255,.02) 30px 32px),
    radial-gradient(1000px 500px at 50% 0%, #1d1f26 0%, #0c0d10 65%);
  padding: 70px 0; border-top: 4px solid var(--red);
}
.v3d-stage { max-width: 1000px; margin: 0 auto; }
.v3d-ratio {
  position: relative; width: 100%; padding-top: 56.25%; background: #000;
  border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
}
.v3d-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v3d-hints { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.v3d-hints span {
  display: inline-flex; align-items: center; gap: 7px; color: #b9b9b9;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.v3d-hints .icon { color: var(--red); }
.v3d-note { text-align: center; color: #8a8a8a; font-size: 12px; margin-top: 14px; }
@media (max-width: 768px) { .v3d-hints { gap: 14px; } }

/* ---------- Vehicle video (autoplays, clean player) ---------- */
.vv-section { background: #0c0d10; padding: 70px 0; border-top: 4px solid var(--red); }
.vv-head { text-align: center; margin-bottom: 28px; }
.vv-head .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.vv-head h2 { font-family: var(--font-display); font-size: 42px; font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.05; margin-top: 6px; }
.vv-stage { max-width: 1000px; margin: 0 auto; }
.vv-ratio {
  position: relative; width: 100%; padding-top: 56.25%; background: #000;
  border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.vv-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Transparent shield: blocks clicks on the YouTube logo / title so nothing
   navigates away from our site. Our own buttons below drive the player. */
.vv-shield { position: absolute; inset: 0; z-index: 2; }
/* Shown while stopped, so YouTube's paused overlay never appears */
.vv-cover {
  position: absolute; inset: 0; z-index: 3; background: #0c0d10; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.vv-cover.show { opacity: 1; visibility: visible; }
.vv-cover-play {
  width: 74px; height: 74px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(235,10,30,.4);
  transition: transform .25s ease;
}
.vv-cover:hover .vv-cover-play { transform: scale(1.08); }
.vv-cover-text { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; color: #fff; }
.vv-controls { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.vv-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 24px; border-radius: 30px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-family: var(--font); font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; cursor: pointer; transition: .25s;
}
.vv-btn:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
@media (max-width: 768px) { .vv-head h2 { font-size: 30px; } }

/* Toyota slogan mark in the footer, sits under the dealership logo */
.toyota-mark { margin-bottom: 20px; }
.toyota-mark img { width: 100%; max-width: 260px; height: auto; opacity: .95; display: block; margin: 0 auto; }
@media (max-width: 768px) {
  .toyota-mark img { max-width: 220px; }
  .footer-logo { height: 90px; }
}

/* ---------- Vehicle page: full-width image stage ---------- */
.vd-stage {
  border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 70%, #e6e6e6 100%);
  box-shadow: 0 26px 60px rgba(0,0,0,.14); margin: 0 auto 26px; max-width: 860px; padding: 26px 44px 18px;
}
/* The car sits in the stage with room around it (Toyota Indus proportions) — never cropped, never oversized. */
.vd-stage img { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; margin: 0 auto; transition: opacity .3s ease; }
@media (max-width: 720px) { .vd-stage { padding: 14px 16px 10px; } .vd-stage img { max-height: 260px; } }
.vd-colors-center { text-align: center; margin-bottom: 28px; }
.vd-colors-center .color-swatches { justify-content: center; }
.vd-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.ps-note { display: block; }

/* ---------- Four separate price sections ---------- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.price-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .price-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .price-grid-4 { grid-template-columns: 1fr; } }
.price-section {
  border-radius: 14px; overflow: hidden; border: 2px solid var(--border); background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.price-section:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ps-head {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  background: var(--black); color: #fff; line-height: 1.25;
}
.ps-head .icon { color: #fff; opacity: .9; flex-shrink: 0; }
.ps-body { padding: 14px; }
.ps-body small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gray); margin-bottom: 2px; }
.ps-body strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; display: block; }

/* Each section gets its own identity */
.pf-factory   { border-color: var(--red); }
.pf-factory   .ps-head { background: var(--red); }
.pf-factory   .ps-body strong { color: var(--red); }
.pf-showroom  { border-color: var(--black); }
.pf-showroom  .ps-head { background: var(--black); }
.pf-showroom  .ps-body strong { color: var(--black); }
.pf-filer     { border-color: #157347; }
.pf-filer     .ps-head { background: #157347; }
.pf-filer     .ps-body strong { color: #157347; }
.pf-nonfiler  { border-color: #997404; }
.pf-nonfiler  .ps-head { background: #997404; }
.pf-nonfiler  .ps-body strong { color: #997404; }

.ps-note { display: block; margin-bottom: 22px; font-size: 11.5px; color: var(--gray); }
.vt-showroom { color: var(--dark) !important; }
.vt-filer { color: #157347 !important; }
.vt-nonfiler { color: #997404 !important; }

/* Colour selection */
.vd-colors { margin-bottom: 24px; }
.vc-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.vc-title span { color: var(--red); }
.color-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 2px solid rgba(0,0,0,.14);
  box-shadow: 0 3px 10px rgba(0,0,0,.16); transition: transform .2s, box-shadow .2s;
  position: relative;
}
.swatch:hover { transform: translateY(-3px) scale(1.06); }
.swatch.active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }

/* Variant table */
.variant-table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: var(--shadow); background: #fff; }
.variant-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.variant-table thead th {
  background: var(--black); color: #fff; text-align: left; padding: 15px 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; white-space: nowrap;
}
.variant-table tbody td { padding: 15px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.variant-table tbody tr:last-child td { border-bottom: 0; }
.variant-table tbody tr { transition: background .2s; }
.variant-table tbody tr:hover { background: #fdf5f6; }
.variant-table tbody td strong { font-size: 15.5px; }
.vt-price { font-weight: 700; color: var(--red); white-space: nowrap; }
.badge-hold { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--gray); }
.variant-note { margin-top: 16px; font-size: 12.5px; color: var(--gray); text-align: center; }
@media (max-width: 768px) {
  .price-grid { grid-template-columns: 1fr; }
  .variant-table { min-width: 0; }
  .variant-table thead { display: none; }
  .variant-table tbody tr { display: block; border-bottom: 8px solid var(--light); padding: 6px 0; }
  .variant-table tbody td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 8px 16px; }
  .variant-table tbody td::before {
    content: attr(data-label); font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--gray); flex-shrink: 0;
  }
}

.spec-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; }
.spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.spec-table td:first-child { font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; color: var(--gray); width: 40%; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.feature-pill { background: var(--light); border: 1px solid var(--border); padding: 7px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.feature-pill .icon { color: var(--red); }

/* ---------- CMS page content ---------- */
.cms-content { color: var(--gray); font-size: 16.5px; line-height: 1.9; }
.cms-content strong { color: var(--dark); }

/* ---------- Brochure cards ---------- */
.brochure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 34px; }
.brochure-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: .3s; }
.brochure-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.brochure-cover { height: 170px; background: var(--light); }
.brochure-cover img { width: 100%; height: 100%; object-fit: cover; }
.brochure-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.brochure-body strong { font-size: 15px; line-height: 1.35; }

/* ---------- ISO certification band ---------- */
.iso-band {
  background:
    repeating-linear-gradient(-55deg, transparent 0 30px, rgba(255,255,255,.03) 30px 32px),
    linear-gradient(110deg, #14161c 0%, #23252d 100%);
  color: #fff; padding: 56px 0; border-bottom: 4px solid var(--red);
}
.iso-band-inner { display: flex; align-items: center; gap: 48px; }
.iso-badge { flex-shrink: 0; text-align: center; animation: isoPulse 3s ease-in-out infinite; }
.iso-badge-ring {
  width: 150px; height: 150px; border-radius: 50%;
  border: 4px solid #d4af37; box-shadow: 0 0 0 6px rgba(212,175,55,.18), 0 12px 34px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #2c2f38 0%, #171920 70%);
}
.iso-title { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #d4af37; line-height: 1; letter-spacing: .08em; }
.iso-num { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1; color: #fff; }
.iso-year { font-size: 13px; color: #b9b9b9; font-weight: 700; letter-spacing: .1em; }
.iso-cert {
  display: inline-block; margin-top: 12px; background: #d4af37; color: #14161c;
  font-weight: 800; font-size: 11px; letter-spacing: .28em; padding: 5px 16px; border-radius: 20px;
}
@keyframes isoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.iso-badge-img { background: #fff; gap: 4px; }
.iso-badge-img img { width: 74px; height: auto; }
.iso-num-sm { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #14161c; line-height: 1; }
.welcome-iso-logo { width: 34px; height: auto; }
.iso-text .kicker { color: #d4af37; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.iso-text h2 { font-family: var(--font-display); font-size: 40px; font-weight: 800; text-transform: uppercase; margin: 6px 0 12px; line-height: 1.05; }
.iso-text p { color: #c4c4c4; font-size: 15.5px; max-width: 720px; }

/* ---------- Client cards ---------- */
.client-group { margin-bottom: 46px; }
.client-group-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; text-transform: uppercase;
  margin-bottom: 20px; padding-left: 14px; border-left: 5px solid var(--red);
}
.client-group-title.cat-gov { border-color: #0a7d33; }
.client-group-title.cat-mil { border-color: #4b5320; }
.client-group-title.cat-ngo { border-color: #0a58ca; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.client-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 18px;
  text-align: center; transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.client-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.client-logo { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.client-logo img { max-width: 84px; max-height: 84px; object-fit: contain; }
.client-monogram {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #fff; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--red), #8f0511); box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.client-card.cat-gov .client-monogram { background: linear-gradient(135deg, #0f9d44, #075c26); }
.client-card.cat-mil .client-monogram { background: linear-gradient(135deg, #5d6828, #333a12); }
.client-card.cat-ngo .client-monogram { background: linear-gradient(135deg, #1268e3, #073a85); }
.client-name { font-weight: 700; font-size: 14.5px; line-height: 1.35; }

/* ---------- Welcome popup ---------- */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 900; background: rgba(8,8,10,.78); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.welcome-overlay.open { opacity: 1; pointer-events: auto; }
.welcome-card {
  background: #fff; border-radius: 20px; max-width: 460px; width: 100%; text-align: center;
  padding: 0 0 36px; overflow: hidden; position: relative;
  transform: translateY(40px) scale(.92); transition: transform .5s cubic-bezier(.2,.9,.3,1.2);
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
.welcome-overlay.open .welcome-card { transform: none; }
.welcome-top {
  background:
    repeating-linear-gradient(-55deg, transparent 0 26px, rgba(255,255,255,.06) 26px 28px),
    linear-gradient(115deg, var(--red), #90040f);
  padding: 34px 20px 58px; position: relative;
}
.welcome-top h2 { font-family: var(--font-display); color: #fff; font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1.02; }
.welcome-top p { color: rgba(255,255,255,.85); font-size: 13.5px; margin-top: 6px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.welcome-logo {
  width: 96px; height: 96px; border-radius: 50%; background: #fff; margin: -48px auto 16px;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); border: 4px solid #fff; animation: logoPop .7s .35s cubic-bezier(.2,.9,.3,1.4) backwards;
}
.welcome-logo img { width: 76px; height: auto; }
@keyframes logoPop { from { transform: scale(0); } to { transform: scale(1); } }
.welcome-body { padding: 0 34px; }
.welcome-body h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; }
.welcome-body .w-tag { color: var(--gray); font-size: 14px; margin: 6px 0 16px; }
.welcome-iso {
  display: inline-flex; align-items: center; gap: 10px; background: #fdf6e3; border: 1px solid #e8d9a0;
  color: #7a6114; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 30px; margin-bottom: 20px;
}
.welcome-iso .iso-dot {
  width: 30px; height: 30px; border-radius: 50%; background: #d4af37; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900;
}
.welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 17px; cursor: pointer; transition: .2s;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.welcome-close:hover { background: #fff; color: var(--red); transform: rotate(90deg); }

/* ---------- Forms ---------- */
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.form-group input, .form-group select, .form-group textarea {
  padding: 13px 15px; border: 2px solid var(--border); border-radius: 8px; font-family: var(--font);
  font-size: 15px; transition: border-color .2s; background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--red); }
.alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 22px; font-weight: 600; font-size: 14.5px; }

/* Filer / Non-Filer choice */
.filer-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.filer-opt { flex: 1; min-width: 120px; cursor: pointer; }
.filer-opt input { position: absolute; opacity: 0; pointer-events: none; }
.filer-opt span {
  display: block; text-align: center; padding: 12px 14px; border: 2px solid var(--border);
  border-radius: 10px; font-weight: 700; font-size: 14px; transition: .2s; background: #fff;
}
.filer-opt:hover span { border-color: var(--red); color: var(--red); }
.filer-opt input:checked + span { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(235,10,30,.28); }

/* ---------- Captcha ---------- */
.captcha-group { background: var(--light); border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px; }
.captcha-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.captcha-img { border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.captcha-refresh {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); background: #fff;
  font-size: 19px; cursor: pointer; transition: .25s; color: var(--gray); line-height: 1;
}
.captcha-refresh:hover { border-color: var(--red); color: var(--red); transform: rotate(180deg); }
.captcha-input { flex: 1; min-width: 150px; text-transform: uppercase; letter-spacing: .35em; font-weight: 800; font-size: 17px !important; }
.alert-success { background: #e6f7ec; color: #157347; border: 1px solid #b8e6cb; }
.alert-error, .alert-danger { background: #fdecec; color: #b02a37; border: 1px solid #f5c2c7; }

/* ---------- Vehicle Doctor (diagnostic wizard) ---------- */
.diag-progress { margin-bottom: 20px; }
.dp-info { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dp-step { font-family: var(--font-display); font-size: 19px; font-weight: 800; text-transform: uppercase; color: var(--dark); }
.dp-label { color: var(--red); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.dp-bar { height: 8px; background: #e6e6e6; border-radius: 8px; overflow: hidden; }
.dp-bar span {
  display: block; height: 100%; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--red), #ff5f6d);
  transition: width .5s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 10px rgba(235,10,30,.4);
}

.diag-trail { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.diag-chip {
  border: 1.5px solid var(--border); background: #fff; border-radius: 12px; padding: 7px 14px;
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s;
  display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.3; text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.diag-chip small { color: var(--red); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; }
.diag-chip b { color: #b9b9b9; font-weight: 400; font-size: 11px; margin-left: 2px; }
.diag-chip:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(235,10,30,.15); }
.diag-chip:hover b { color: var(--red); }

.diag-card {
  background: #fff; border-radius: 18px; padding: 34px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08); border-top: 4px solid var(--red);
}
.step-in { animation: stepIn .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.diag-step-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.diag-step-icon {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--red), #a30713);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(235,10,30,.35);
}
.diag-step-head h3 { font-family: var(--font-display); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.diag-step-head p { color: var(--gray); font-size: 13.5px; margin-top: 2px; }

.diag-search-wrap {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--border); border-radius: 12px;
  padding: 0 16px; margin-bottom: 16px; transition: border-color .2s; color: var(--gray);
}
.diag-search-wrap:focus-within { border-color: var(--red); color: var(--red); }
.diag-search { flex: 1; border: 0; padding: 13px 0; font-family: var(--font); font-size: 15px; background: transparent; }
.diag-search:focus { outline: 0; }

.diag-options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
  max-height: 430px; overflow-y: auto; padding: 4px 4px 8px;
}
.diag-options.compact { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.diag-options.wide { grid-template-columns: 1fr; max-height: 460px; }
/* Few options: center them instead of hugging the left edge */
.diag-options.few { display: flex; flex-wrap: wrap; justify-content: center; }
.diag-options.few .diag-opt { flex: 0 1 280px; }
.diag-opt {
  position: relative; border: 2px solid var(--border); background: #fff; border-radius: 14px;
  padding: 16px 40px 16px 18px; font-family: var(--font); cursor: pointer; text-align: left;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; gap: 3px;
  animation: optIn .4s ease both;
}
@keyframes optIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.diag-opt:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(235,10,30,.14); }
.diag-opt.picked { border-color: var(--red); background: #fdeaec; transform: scale(.97); }
.do-label { font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.diag-opt:hover .do-label { color: var(--red); }
.do-sub { font-size: 12.5px; color: var(--gray); }
.do-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: #d0d0d0; font-size: 15px; transition: .25s;
}
.diag-opt:hover .do-arrow { color: var(--red); transform: translateY(-50%) translateX(3px); }
.diag-options.compact .diag-opt { padding: 13px 12px; align-items: center; }
.diag-options.compact .do-label { font-size: 15.5px; font-family: var(--font-display); font-weight: 700; }
.diag-options.compact .do-arrow { display: none; }
.diag-code {
  align-self: flex-start; background: var(--black); border-radius: 6px; font-size: 10.5px; font-weight: 800;
  color: #fff; padding: 2px 9px; letter-spacing: .05em;
}
.diag-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.diag-restart {
  background: none; border: 0; color: var(--gray); font-family: var(--font); font-size: 13px;
  font-weight: 700; cursor: pointer; transition: color .2s; text-transform: uppercase; letter-spacing: .05em;
}
.diag-restart:hover { color: var(--red); }

.diag-loading { display: flex; gap: 8px; justify-content: center; padding: 34px 0; grid-column: 1 / -1; }
.diag-loading.big { padding: 60px 0; }
.diag-loading span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--red);
  animation: diagDots 1s ease-in-out infinite;
}
.diag-loading span:nth-child(2) { animation-delay: .15s; }
.diag-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes diagDots { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-8px); opacity: 1; } }

.dr-banner {
  display: flex; align-items: center; gap: 10px; background: #e6f7ec; color: #157347;
  border: 1px solid #b8e6cb; border-radius: 12px; padding: 14px 20px; font-weight: 700;
  font-size: 14.5px; margin-bottom: 18px;
}
.diag-result { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 30px; margin-bottom: 24px; border-top: 4px solid var(--red); }
.dr-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.dr-code {
  background: var(--black); color: #fff; font-family: var(--font-display); font-weight: 800;
  border-radius: 8px; padding: 8px 14px; font-size: 18px;
}
.dr-head h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.dr-head small { color: var(--gray); font-size: 13px; }
.dr-cost { margin-left: auto; text-align: right; background: #fdeaec; border-radius: 10px; padding: 10px 18px; }
.dr-cost small { display: block; color: var(--gray); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.dr-cost strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--red); }

/* "Ask for Estimate" CTA — sits where the price used to be */
.dr-quote {
  margin-left: auto; text-align: center; border-radius: 12px; padding: 12px 22px;
  background: linear-gradient(135deg, var(--red) 0%, #a30713 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  box-shadow: 0 8px 22px rgba(235,10,30,.32); transition: transform .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden; min-width: 210px;
}
.dr-quote::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.dr-quote:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(235,10,30,.42); }
.dr-quote:hover::after { left: 130%; }
.dr-quote small { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; opacity: .85; }
.dr-quote strong {
  font-family: var(--font-display); font-size: 21px; font-weight: 800; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.15;
}
.dr-quote span { font-size: 11px; opacity: .8; }
@media (max-width: 768px) { .dr-quote { margin-left: 0; width: 100%; } }
@media print { .no-print { display: none !important; } }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dr-item { background: var(--light); border-radius: 10px; padding: 16px 18px; }
.dr-item h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--red); margin-bottom: 6px; }
.dr-item p { font-size: 14.5px; color: var(--dark); }
.dr-solution { grid-column: 1 / -1; background: #eefbf1; }
.dr-solution h4 { color: #157347; }
.dr-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .dr-grid { grid-template-columns: 1fr; }
  .dr-cost { margin-left: 0; }
}

/* ---------- Finance calculator ---------- */
.fc-result {
  font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--red);
  background: var(--light); border-left: 4px solid var(--red); border-radius: 8px; padding: 8px 18px;
}
.fc-note { margin-top: 18px; color: var(--gray); font-size: 13px; }
input[type=range] { accent-color: var(--red); padding: 0; height: 38px; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
.contact-info-card { background: var(--black); color: #fff; border-radius: var(--radius); padding: 38px; }
.contact-info-card h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; }
.ci-item { margin-bottom: 20px; }
.ci-item small { color: var(--red); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; display: block; }
.ci-item span { color: #ddd; font-size: 15px; }
/* Social media buttons */
.social-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 30px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-size: 13.5px; font-weight: 700; transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.social-btn:hover { transform: translateY(-3px); color: #fff; }
.social-btn .brand-icon { flex-shrink: 0; }
.sb-facebook:hover  { background: #1877F2; border-color: #1877F2; box-shadow: 0 10px 22px rgba(24,119,242,.4); }
.sb-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); border-color: transparent; box-shadow: 0 10px 22px rgba(220,39,67,.4); }
.sb-whatsapp:hover  { background: #25D366; border-color: #25D366; box-shadow: 0 10px 22px rgba(37,211,102,.4); }
.sb-youtube:hover   { background: #FF0000; border-color: #FF0000; box-shadow: 0 10px 22px rgba(255,0,0,.4); }
.sb-tiktok:hover    { background: #010101; border-color: #69C9D0; box-shadow: 0 10px 22px rgba(105,201,208,.35); }
.sb-linkedin:hover  { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 10px 22px rgba(10,102,194,.4); }
.sb-twitter:hover   { background: #000; border-color: #000; box-shadow: 0 10px 22px rgba(0,0,0,.45); }
.sb-website:hover   { background: var(--red); border-color: var(--red); box-shadow: 0 10px 22px rgba(235,10,30,.4); }

/* Footer "Connect With Us" — flat icon row */
.footer-connect { margin-top: 26px; padding-top: 22px; border-top: 1px solid #2a2a2a; }
.footer-connect h4 {
  color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; margin-bottom: 16px;
}
.footer .footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.footer .footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; background: none; border-radius: 0;
  color: #cfcfcf; margin: 0; padding: 0; transition: color .2s ease, transform .2s ease;
}
.footer .footer-social a:hover { color: var(--red); background: none; transform: translateY(-3px); padding-left: 0; }

.map-frame { border: 0; width: 100%; height: 380px; border-radius: var(--radius); margin-top: 50px; box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
.footer {
  background: var(--black); color: #b7b7b7; padding-top: 70px; font-size: 14px;
  border-top: 4px solid var(--red); position: relative;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; pointer-events: none;
  background: radial-gradient(600px 120px at 50% 0%, rgba(235,10,30,.08), transparent 70%);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 50px; }
.footer-logo { height: 110px; width: auto; margin: 0 auto 18px; background: #fff; border-radius: 12px; padding: 10px; display: block; }
.footer-col h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--red); }
.footer-col a { display: block; color: #b7b7b7; margin-bottom: 10px; transition: .2s; }
.footer-col a:hover { color: var(--red); padding-left: 5px; }
.footer-col p { margin-bottom: 8px; }
.footer-bottom { border-top: 1px solid #262626; padding: 20px 0; font-size: 13px; }
.footer-bottom-inner { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dev-credit a { color: var(--red); font-weight: 700; transition: color .2s; }
.dev-credit a:hover { color: #fff; }

/* ---------- Floating action buttons ---------- */
.float-btn {
  position: fixed; right: 24px; z-index: 200; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); border: 0; transition: transform .25s ease, opacity .3s ease;
}
.float-btn:hover { transform: translateY(-4px) scale(1.06); }
.whatsapp-btn { bottom: 24px; background: #25D366; color: #fff; }
.top-btn {
  bottom: 92px; background: var(--black); color: #fff; font-size: 22px; font-weight: 900;
  opacity: 0; pointer-events: none;
}
.top-btn.show { opacity: 1; pointer-events: auto; }

/* Navbar elevated state on scroll */
.navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.navbar { transition: box-shadow .3s ease; }

/* ---------- Print: professional diagnosis report ---------- */
.print-only { display: none; }
@media print {
  .topbar, .navbar, .footer, .cta-band, .float-btn, .scroll-progress, .preloader,
  .welcome-overlay, .site-popup, .poster-lightbox, .page-hero, .diag-progress, .diag-trail, .dr-actions,
  .diag-restart, .diag-card, .brand-marquee, .quick-strip { display: none !important; }
  body { background: #fff; }
  .section { padding: 0; }
  .section.gray { background: #fff; }
  .print-only { display: block; }
  table.print-only { display: table; }

  .report-head {
    display: flex; align-items: center; gap: 18px; border-bottom: 4px solid #EB0A1E;
    padding-bottom: 16px; margin-bottom: 18px;
  }
  .report-head img { height: 64px; width: auto; }
  .rh-brand { display: flex; flex-direction: column; line-height: 1.45; }
  .rh-brand strong { font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
  .rh-brand span { font-size: 12px; color: #555; }
  .rh-meta { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.5; }
  .rh-meta strong { font-size: 15px; text-transform: uppercase; color: #EB0A1E; }
  .rh-meta span { font-size: 12px; color: #555; }

  .report-answers { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
  .report-answers th, .report-answers td { border: 1px solid #ddd; padding: 6px 10px; font-size: 12px; text-align: left; }
  .report-answers th { background: #f4f4f4; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; width: 22%; }

  .dr-banner { border: 1px solid #b8e6cb; }
  .diag-result { box-shadow: none; border: 1px solid #ddd; border-top: 4px solid #EB0A1E; page-break-inside: avoid; margin-bottom: 16px; padding: 20px; }
  .dr-item { border: 1px solid #eee; background: #fafafa; }
  .dr-solution { background: #f2faf4; }
  .dr-cost { border: 1px solid #f0c8cc; }
  .fc-note { font-size: 10.5px; }
  .report-foot {
    margin-top: 20px; padding-top: 12px; border-top: 1px solid #ddd;
    font-size: 10.5px; color: #666; text-align: center;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  /* Collapse the main menu early so links never wrap or crush */
  .nav-toggle { display: block; }
  .nav-links .home-link { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; padding: 18px 22px; gap: 6px;
    box-shadow: 0 14px 24px rgba(0,0,0,.12);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .nav-cta { margin: 10px 0 0; text-align: center; }
  .nav-dropdown { width: 100%; }
  .nav-drop-toggle { width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--border); justify-content: space-between; font-size: 14px; }
  .nav-drop-menu {
    position: static; transform: none; opacity: 1; visibility: hidden; display: none;
    box-shadow: none; border-top: 0; padding: 0 0 0 16px; min-width: 0;
  }
  .nav-dropdown.open .nav-drop-menu { display: block; visibility: visible; transform: none; }
  .nav-dropdown:hover .nav-drop-menu { transform: none; }
}

@media (max-width: 992px) {
  .hero-content h1 { font-size: 56px; }
  .hero::after { font-size: 130px; }
  .vd-layout, .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .quick-strip .container { grid-template-columns: repeat(2, 1fr); }
  .hero-arrow { display: none; }
}
@media (max-width: 768px) {
  .hide-sm { display: none; }
  .hero { min-height: 240px; max-height: 78vh; }
  /* A slide with a headline needs room for it on a narrow screen. The picture
     still shows in full - the extra space is the blurred backdrop. */
  .hero.slide-has-text { min-height: 360px; }
  .hero-content { text-align: center; }
  .hero-kicker { font-size: 11px; letter-spacing: .18em; }
  .hero-content h1 { font-size: 42px; }
  .hero::after, .page-hero::after { display: none; }
  .section { padding: 56px 0; }
  .section-head h2 { font-size: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 38px; }
  .vd-info h1 { font-size: 38px; }
  .quick-strip .container { margin-top: 14px; border-radius: 14px; }
  .iso-band-inner { flex-direction: column; text-align: center; gap: 28px; }
  .iso-text h2 { font-size: 30px; }
  .pre-slogan { font-size: 24px; gap: 8px; }
  .pre-logo-wrap { width: 108px; height: 108px; }
  .marquee-track span { font-size: 30px; }
}

/* ============================================================
   UPDATE 9 — colour note, brochure button, protection plan,
              special offers, price list & site-entry popup
   ============================================================ */

/* ---------- Vehicle colour disclaimer ---------- */
.vd-color-note {
  margin-top: 12px; font-size: 12.5px; color: var(--gray); font-style: italic;
  text-align: center; letter-spacing: .01em;
}

/* ---------- Download Brochure button ---------- */
.btn-dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn-dark:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.btn-brochure { display: inline-flex; align-items: center; gap: 8px; }
.btn-brochure .icon { flex-shrink: 0; }

/* Highlighted "Special Offers" item in the main menu */
.nav-offers { display: inline-flex !important; align-items: center; gap: 6px; color: var(--red) !important; }
.nav-offers .icon { flex-shrink: 0; }

/* ---------- Toyota Protection Plan: the three programme sections ---------- */
.tpp-sections { display: grid; gap: 26px; margin: 34px 0 8px; }
.tpp-section {
  background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--red);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow);
}
.tpp-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.tpp-letter {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
}
.tpp-head h2 { font-family: var(--font-display); font-size: 27px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.tpp-sub { color: var(--gray); font-size: 14.5px; margin-top: 3px; }
.tpp-img { border-radius: 10px; margin-bottom: 18px; width: 100%; }
.tpp-section .cms-content { margin-bottom: 16px; }

/* ---------- Special Offers page ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.offer-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-card.is-featured { border-color: var(--red); }
.offer-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--red); color: #fff;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 30px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
}
.offer-poster { background: var(--light); }
.offer-poster img { width: 100%; height: auto; cursor: zoom-in; }
.offer-pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 220px; color: var(--gray); font-weight: 700; font-size: 13.5px;
}
.offer-pdf:hover { color: var(--red); }
.offer-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.offer-body h3 { font-family: var(--font-display); font-size: 23px; font-weight: 800; text-transform: uppercase; line-height: 1.12; }
.offer-sub { color: var(--gray); font-size: 14px; }
.offer-valid {
  display: inline-flex; align-items: center; gap: 7px; color: #7a6114; background: #fdf6e3;
  border: 1px solid #e8d9a0; border-radius: 30px; padding: 5px 13px; font-size: 12px;
  font-weight: 700; align-self: flex-start;
}
.offer-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 12px; }
.offer-note { color: var(--gray); font-size: 12.5px; text-align: center; margin-top: 30px; font-style: italic; }
.offers-empty {
  text-align: center; max-width: 560px; margin: 0 auto; padding: 50px 24px; color: var(--gray);
  background: var(--light); border-radius: var(--radius);
}
.offers-empty .icon { color: var(--red); margin: 0 auto 14px; }
.offers-empty h3 { font-family: var(--font-display); font-size: 25px; text-transform: uppercase; color: var(--dark); margin-bottom: 8px; }
.offers-empty p { margin-bottom: 20px; font-size: 14.5px; }

/* ---------- Price list block ---------- */
.pricelist-block {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-align: center; box-shadow: var(--shadow);
}
.pricelist-block img { border-radius: 8px; margin: 0 auto 20px; cursor: zoom-in; }

/* ---------- Poster lightbox ---------- */
.poster-lightbox {
  position: fixed; inset: 0; z-index: 950; background: rgba(8,8,10,.92);
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.poster-lightbox.open { display: flex; }
.poster-lightbox img { max-width: 100%; max-height: 84vh; width: auto; border-radius: 8px; }
.poster-lightbox figcaption {
  color: #fff; text-align: center; margin-top: 14px; font-size: 14px; font-weight: 600;
}
.poster-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1; transition: .2s;
}
.poster-close:hover { background: #fff; color: var(--red); transform: rotate(90deg); }

/* ---------- Site-entry popup (offer + price list + welcome) ---------- */
.site-popup {
  position: fixed; inset: 0; z-index: 900; background: rgba(8,8,10,.78); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.site-popup.open { opacity: 1; pointer-events: auto; }
.sp-shell {
  background: #fff; border-radius: 20px; max-width: 470px; width: 100%; position: relative;
  overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5);
  transform: translateY(40px) scale(.92); transition: transform .5s cubic-bezier(.2,.9,.3,1.2);
  max-height: 92vh; display: flex; flex-direction: column;
}
.site-popup.open .sp-shell { transform: none; }
.sp-close {
  position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(16,16,16,.5); color: #fff; font-size: 17px; cursor: pointer; transition: .2s;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sp-close:hover { background: #fff; color: var(--red); transform: rotate(90deg); }
.sp-track { flex: 1; overflow-y: auto; }
.sp-slide { display: none; }
.sp-slide.active { display: block; animation: spFade .35s ease both; }
@keyframes spFade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.sp-poster-slide { text-align: center; padding-bottom: 26px; }
.sp-kicker {
  display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 8px 18px; border-radius: 0 0 12px 0; float: left;
}
.sp-poster { clear: both; background: var(--light); }
.sp-poster img { width: 100%; height: auto; max-height: 52vh; object-fit: contain; }
.sp-pdfcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 190px; color: var(--gray); font-weight: 700; font-size: 13.5px;
}
.sp-text { padding: 20px 28px 0; }
.sp-text h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.sp-text p { color: var(--gray); font-size: 14px; margin-top: 6px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 18px 24px 0; }
.sp-welcome { text-align: center; padding-bottom: 30px; }

.sp-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 20px; border-top: 1px solid var(--border); background: #fafafa;
}
.sp-arrow {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: var(--dark); font-size: 20px; line-height: 1; cursor: pointer; transition: .2s;
}
.sp-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
.sp-dots { display: flex; gap: 8px; }
.sp-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; background: #cfcfcf; cursor: pointer; padding: 0;
  transition: .2s;
}
.sp-dot.active { background: var(--red); transform: scale(1.3); }

@media (max-width: 640px) {
  .tpp-section { padding: 22px 18px; }
  .tpp-head h2 { font-size: 22px; }
  .sp-text h2 { font-size: 22px; }
  .sp-poster img { max-height: 40vh; }
  .offer-actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   Vehicle comparison
   ============================================================ */

.cmp-picker {
  display: grid; grid-template-columns: repeat(2, 1fr) auto; gap: 16px; align-items: end;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 30px;
}
.cmp-pick { display: flex; flex-direction: column; gap: 7px; }
.cmp-pick label {
  font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--gray);
}
.cmp-pick select {
  padding: 12px 13px; border: 2px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 14.5px; background: #fff; color: var(--dark);
}
.cmp-pick select:focus { outline: none; border-color: var(--red); }
.cmp-go .btn { width: 100%; }

.cmp-empty {
  text-align: center; max-width: 560px; margin: 0 auto; padding: 50px 24px; color: var(--gray);
  background: var(--light); border-radius: var(--radius);
}
.cmp-empty .icon { color: var(--red); margin: 0 auto 14px; }
.cmp-empty h3 {
  font-family: var(--font-display); font-size: 25px; text-transform: uppercase;
  color: var(--dark); margin-bottom: 8px;
}

.cmp-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 620px; }

.cmp-table thead th {
  background: #fff; padding: 22px 18px; text-align: center; vertical-align: top;
  border-bottom: 2px solid var(--border); position: relative;
}
.cmp-table thead th.is-toyota { background: linear-gradient(180deg, #fff5f5, #fff); }
.cmp-table thead th.is-toyota::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red);
}
.cmp-photo { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cmp-photo img { max-height: 110px; width: auto; object-fit: contain; }
.cmp-name {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  text-transform: uppercase; line-height: 1.1; margin-bottom: 8px;
}
.cmp-badge {
  display: inline-block; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; padding: 4px 11px; border-radius: 20px;
}
.cmp-badge.other { background: #58595b; }
.cmp-head-actions { display: flex; gap: 7px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

.cmp-table td { padding: 13px 18px; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 14.5px; }
.cmp-rowhead {
  text-align: left !important; font-weight: 700; color: var(--gray); background: #fafafa;
  white-space: nowrap; font-size: 13.5px;
}
.cmp-table tr.cmp-group td {
  background: var(--black); color: #fff; font-family: var(--font-display); font-size: 15px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-align: left; padding: 11px 18px;
}
.cmp-best { background: #eaf7ef; font-weight: 800; color: #157347; }
.cmp-tick { display: inline-flex; vertical-align: middle; margin-left: 5px; color: #157347; }
.cmp-missing { color: #b3b3b3; font-style: italic; font-weight: 400; }

.cmp-feats { list-style: none; padding: 0; margin: 0; text-align: left; display: inline-block; }
.cmp-feats li { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; padding: 2px 0; }
.cmp-feats .icon { color: var(--red); flex-shrink: 0; margin-top: 3px; }

.cmp-note {
  margin-top: 26px; background: #fff8e6; border: 1px solid #f0dca0; border-radius: var(--radius);
  padding: 18px 22px; font-size: 13.5px; line-height: 1.7; color: #6b5300;
}
.cmp-note p { margin-bottom: 8px; }
.cmp-note p:last-child { margin-bottom: 0; }
.cmp-src { font-size: 12.5px; color: #7a6114; }
.cmp-src a { text-decoration: underline; }

@media (max-width: 900px) {
  .cmp-picker { grid-template-columns: 1fr 1fr; }
  .cmp-go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cmp-picker { grid-template-columns: 1fr; padding: 18px; }
  .cmp-table { min-width: 520px; }
  .cmp-name { font-size: 16px; }
  .cmp-photo, .cmp-photo img { height: 74px; max-height: 74px; }
  .cmp-table td, .cmp-table thead th { padding: 10px 12px; font-size: 13.5px; }
}

/* ---------- Comparison: segments, variants and rival shortcuts ---------- */
.cmp-picker { grid-template-columns: repeat(2, 1fr) auto; }
.cmp-allseg { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmp-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--dark); text-transform: none; letter-spacing: 0;
}
.cmp-check input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.cmp-allseg .hint { font-size: 12.5px; color: var(--gray); }

.cmp-variant { font-size: 12.5px; color: var(--gray); margin: -4px 0 7px; }
.cmp-seg {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gray); background: #f0f0f0;
  padding: 3px 9px; border-radius: 20px; margin-bottom: 8px;
}

.cmp-warn {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff8e6; border: 1px solid #f0dca0; color: #6b5300;
  border-radius: var(--radius); padding: 14px 18px; font-size: 13.5px;
  line-height: 1.6; margin-bottom: 24px;
}
.cmp-warn .icon { flex-shrink: 0; margin-top: 2px; }

/* Rival shortcuts on the vehicle page */
.vd-rivals {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 9px; margin: 26px 0 4px;
}
.vd-rivals-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray);
}
.vd-rivals-label .icon { color: var(--red); }
.vd-rival {
  border: 1px solid var(--border); border-radius: 30px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; background: #fff; transition: .2s;
}
.vd-rival:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

@media (max-width: 900px) {
  .cmp-picker { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cmp-picker { grid-template-columns: 1fr; }
  .vd-rivals { flex-direction: column; }
}

/* Admin-only notice on the Compare page */
.cmp-warn.cmp-admin { background: #eef4ff; border-color: #c3d5f5; color: #23407a; }
.cmp-warn.cmp-admin a { text-decoration: underline; font-weight: 700; white-space: nowrap; }

/* Compare link inside the variant table */
.vt-compare {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--gray); transition: .2s;
}
.vt-compare .icon { color: var(--red); }
.vt-compare:hover { color: var(--red); }
.vd-rival { display: inline-flex; flex-direction: column; line-height: 1.25; text-align: center; }
.vd-rival small { font-size: 11px; font-weight: 600; color: var(--gray); }
.vd-rival:hover small { color: var(--red); }
.vd-rival-more { border-style: dashed; color: var(--red); font-weight: 800; justify-content: center; }

/* ---------- 360° view (photos around the car) ---------- */
.v360-section {
  background: radial-gradient(900px 420px at 50% 20%, #23252b 0%, #0c0d10 70%);
  padding: 60px 0 56px; color: #fff; border-top: 4px solid var(--red);
}
.v360-section .vv-head .kicker { color: var(--red); }
.v360-section .vv-head h2 { color: #fff; }
.v360-sub { color: #b9b9b9; font-size: 14px; margin-top: 6px; text-align: center; }
.v360-stage { position: relative; max-width: 1000px; margin: 26px auto 0; user-select: none; cursor: grab; }
.v360-stage.dragging { cursor: grabbing; }
.v360-stage img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; pointer-events: none; }
.v360-arrow {
  position: absolute; top: 45%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; transition: .2s;
}
.v360-arrow:hover { background: var(--red); border-color: var(--red); }
.v360-arrow.prev { left: -6px; } .v360-arrow.next { right: -6px; }
.v360-bar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: #b9b9b9; }
.v360-btn { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 7px 14px; border-radius: 30px; font-weight: 700; cursor: pointer; font-family: inherit; }
.v360-btn:hover { background: var(--red); border-color: var(--red); }
.v360-count { font-variant-numeric: tabular-nums; }

/* ---------- Customer satisfaction ---------- */
.fb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.fb-stat { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; text-align: center; }
.fb-stat strong { display: block; font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; color: var(--red); }
.fb-stat strong small { font-size: 18px; color: var(--gray); }
.fb-stat span { display: block; color: var(--gray); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.fb-stars { color: #ddd; font-size: 18px; letter-spacing: 2px; }
.fb-stars .on { color: #f5a623; }
.fb-rate { display: flex; gap: 4px; }
.fb-rate button { background: none; border: 0; font-size: 30px; line-height: 1; color: #d9d9d9; cursor: pointer; padding: 0 2px; transition: .15s; }
.fb-rate button.on, .fb-rate button:hover { color: #f5a623; transform: scale(1.08); }
.fb-yesno { display: flex; gap: 22px; padding-top: 8px; font-weight: 600; }
.fb-yesno input { margin-right: 6px; }
.fb-quote span { display: block; font-style: italic; margin: 4px 0; }
.fb-quote small { color: var(--gray); font-weight: 700; }
@media (max-width: 720px) { .fb-stats { grid-template-columns: 1fr; } }

/* ---------- Specialized vehicle fabrication ---------- */
.fab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.fab-card { display: block; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: inherit; text-decoration: none; transition: .25s; }
.fab-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.fab-card-img { aspect-ratio: 16 / 10; background: #f1f1f1; overflow: hidden; }
.fab-card-img img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.fab-card:hover .fab-card-img img { transform: scale(1.05); }
.fab-card-body { padding: 20px 22px 22px; }
.fab-card-body h3 { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; margin-bottom: 6px; }
.fab-card-body p { color: var(--gray); font-size: 14px; min-height: 42px; }
.fab-card-count { display: inline-block; margin-top: 12px; color: var(--red); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.fab-cta { margin-top: 50px; background: #16181d; color: #fff; border-radius: var(--radius); padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fab-cta .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; }
.fab-cta h3 { font-family: var(--font-display); font-size: 34px; text-transform: uppercase; margin: 6px 0 8px; }
.fab-cta p { color: #c4c4c4; max-width: 560px; }
.fab-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.fab-stage { padding: 0; max-width: none; }
.fab-stage img { max-height: 460px; }
.fab-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.fab-thumbs img { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.fab-thumbs img.active, .fab-thumbs img:hover { border-color: var(--red); }
.fab-info .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; }
.fab-info h2 { font-family: var(--font-display); font-size: 42px; text-transform: uppercase; line-height: 1.02; margin: 6px 0 12px; }
.fab-info h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; margin: 22px 0 8px; color: var(--red); }
.fab-base { display: inline-flex; align-items: center; gap: 8px; background: #f4f4f4; border-radius: 30px; padding: 6px 14px; font-size: 13px; margin-bottom: 12px; }
.fab-summary { font-size: 16px; color: #444; }
.fab-specs { background: #fafafa; border-left: 4px solid var(--red); padding: 14px 18px; border-radius: 8px; font-size: 14.5px; line-height: 1.75; }
@media (max-width: 860px) { .fab-detail { grid-template-columns: 1fr; } }