/* ==========================================================================
   NOVELTY GROUP — Global Stylesheet
   --------------------------------------------------------------------------
   Mobile-first. All responsive overrides live in css/media.css.
   Table of contents:
     1. Design tokens (:root)
     2. Base / reset
     3. Layout helpers
     4. Buttons & shared components
     5. Top bar
     6. Header / navigation
     7. Hero slider
     8. Dealer specialities
     9. About us
    10. New cars
    11. Why choose us
    12. Customer reviews
    13. CTA banner
    14. Footer
    15. Floating chat button
    16. Model overview page
    17. Contact us page
    18. Book service page
    19. Used cars listing page
    20. About us page
    21. Reveal-on-scroll animation
    22. Outlets page
    23. Careers page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --primary-color: #1961ac;
  --primary-dark: #124e8d;
  --primary-light: #e3f0ff;
  --secondary-color: #04070c;
  /* Figma quote border + check badge: #d5491f */
  --accent-color: #d5491f;

  /* Text colors — Figma uses #090808 at various opacities */
  --text-color: #090808;
  --text-muted: rgba(9, 8, 8, 0.7);
  --text-light: rgba(9, 8, 8, 0.5);
  --text-invert: #ffffff;

  /* Surface colors */
  --white: #ffffff;
  --bg-page: #f2f4f7;
  --bg-card: #f6fafd;
  --bg-beige: #ebe3d8;
  --bg-yellow: #f6f6d3;
  --bg-mint: #d9f4ee;
  --bg-sky: #e4f0fc;
  --border-color: rgba(9, 8, 8, 0.10);
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  overflow-x: hidden;
  background-color: var(--bg-page);
  /* Blurred colour blobs — mobile export of the Figma BG frame
     (desktop swaps to home-bg.svg via media.css) */
  background-image: url("../images/home-bg-mobile.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* Locked scroll while the mobile menu is open */
body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-color);
}

/* Anchored sections stop below the sticky header */
section[id] {
  scroll-margin-top: calc(72px + 16px);
}

/* Screen-reader-only helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  /* Figma: 1200px content column + 24px side padding; 20px gutters on mobile */
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  padding-block: 56px;
}

.section__title {
  /* Figma mobile: 28px (40px from tablet up via media.css) */
  font-size: 28px;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   4. BUTTONS & SHARED COMPONENTS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--primary-color);
  color: var(--text-invert);
}

.btn--primary:hover {
  background-color: var(--primary-dark);
}

.btn--light {
  background-color: var(--white);
  color: var(--text-color);
  border-radius: 999px;
  padding: 14px 28px;
}

.btn--light:hover {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}

/* Small pill label, e.g. "Why Choose Us" — translucent glass pill (Figma) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 100%);
  border: 1px solid var(--white);
  color: var(--text-color);
  font-size: 14px;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
}

/* Round icon-only button (slider arrows) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma: 48px square, 12px radius */
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--white);
  color: var(--text-color);
  box-shadow: 0 4.8px 7.2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}

.icon-btn:hover {
  color: var(--primary-color);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.icon-btn:disabled,
.icon-btn.swiper-button-disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. TOP BAR (desktop only — displayed from css/media.css)
   -------------------------------------------------------------------------- */
.topbar {
  display: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-color);
}

/* Sticky state: the topbar is NOT collapsed here — the header sticks at
   top:-40px (media.css) so the bar simply scrolls away. Collapsing it
   used to shrink the document and made scroll anchoring re-toggle the
   .is-scrolled class in a loop (header flicker). */

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  /* Figma: 10px icon-to-text, 4px text-to-chevron */
  gap: 10px;
}

.topbar__chevron {
  margin-left: -6px;
}

.topbar__item svg {
  flex-shrink: 0;
  color: var(--text-color);
}

.topbar__divider {
  width: 1px;
  height: 16px;
  background-color: rgba(9, 8, 8, 0.1);
}

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease;
}

.navbar {
  background-color: var(--white);
  /* Figma mobile header 11799:7277: soft 30px drop shadow always on */
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.08);
  transition: margin 0.3s ease, border-radius 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.is-scrolled .navbar {
  /* Figma sticky: same soft 30px drop as the floating pill */
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.08);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  order: 1;
}

.navbar__logo {
  /* Figma mobile 11793:5284: 43x40 logo box (desktop 48px tall, auto width) */
  width: 43px;
  height: 40px;
  object-fit: contain;
  transition: height 0.3s ease;
}

/* Hamburger (mobile only) */
.navbar__toggle {
  order: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  /* Figma: line centers 7px apart (1.5px lines) */
  gap: 5.5px;
  width: 24px;
  height: 24px;
  padding: 4px; /* 24px box: 16px bars centred */
}

.navbar__toggle-bar {
  display: block;
  /* Figma menu-02: 12/16/8px lines, 1.5px thick, round caps */
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background-color: var(--text-color);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.navbar__toggle-bar:nth-child(1) {
  width: 12px;
}

.navbar__toggle-bar:nth-child(3) {
  width: 8px;
}

/* Open state: equal arms for the close (X) icon */
.nav-open .navbar__toggle-bar {
  width: 16px;
}

/* Animated hamburger → close icon */
.nav-open .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-open .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar__cta {
  order: 2;
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  /* Figma: padding 14px 24px on a 40px-high button */
  padding: 14px 24px;
  line-height: 0.75;
}

/* Nav menu — collapsible panel on mobile */
.navbar__menu {
  order: 3;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--white);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
  padding: 12px 16px 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  /* Fills the rest of the viewport below the 56px header */
  min-height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.nav-open .navbar__menu {
  display: flex;
}

.navbar__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  padding: 12px 8px;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar__link:hover,
.navbar__link.is-active {
  color: var(--primary-color);
}

.navbar__caret {
  transition: transform 0.2s ease;
}

/* Dropdown ("Click To Buy") */
.navbar__item--dropdown.is-open .navbar__caret {
  transform: rotate(180deg);
}

.dropdown {
  display: none;
  flex-direction: column;
  padding-left: 16px;
}

.navbar__item--dropdown.is-open .dropdown {
  display: flex;
}

.dropdown__link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
}

.dropdown__link:hover {
  color: var(--primary-color);
  background-color: var(--primary-light);
}

/* --------------------------------------------------------------------------
   7. HERO SLIDER
   -------------------------------------------------------------------------- */
.hero {
  /* Mobile: 56px below the fixed header, flush at the bottom */
  padding-block: 56px 0;
}

/* Figma mobile: 340px banner in a 360 frame — 10px side gutters */
.hero .container {
  padding-inline: 10px;
}

.hero__slider-wrap {
  position: relative;
}

.hero-swiper {
  border-radius: 24px;
  overflow: hidden;
}

.hero-swiper .swiper-slide {
  /* Portrait banner on mobile, per the Figma mobile frame */
  height: 500px;
}

.hero-swiper picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Custom slider arrows — hidden on mobile, shown from media.css */
.hero__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--white);
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.hero__nav:hover {
  color: var(--primary-dark);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
}

.hero__nav--prev {
  left: -20px;
}

.hero__nav--next {
  right: -20px;
}

/* Pagination bullets (Swiper) — Figma: 7px white 50% dots, active is a
   20px ring with a 3px #108dfa stroke, 30px above the banner bottom */
.hero-swiper .swiper-pagination,
.hero-swiper.swiper-horizontal > .swiper-pagination-bullets,
.hero-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  --swiper-pagination-bottom: 30px;
  bottom: 30px;
  line-height: 0;
}

.hero-swiper .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  vertical-align: middle;
  /* Figma (mobile + desktop): 7px white dots at 50% */
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  /* Figma: ~17px between bullets */
  margin: 0 8.5px !important;
  transition: all 0.2s ease;
}

/* Active bullet: a 20px ring that fills like a progress dial over the
   4.5s autoplay delay (swiper.js) — when it completes, the next banner
   slides in. The conic gradient is masked down to a 3px ring. */
@property --hero-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.hero-swiper .swiper-pagination-bullet-active {
  /* Figma: 23px outer ring (r10 + 3px stroke), white 50% track,
     #108dfa progress arc */
  width: 23px;
  height: 23px;
  border: none;
  background: conic-gradient(#108dfa var(--hero-progress), rgba(255, 255, 255, 0.5) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: hero-bullet-fill 4.5s linear forwards;
}

/* Swiper pauses autoplay on hover (pauseOnMouseEnter) — pause the ring too */
.hero-swiper:hover .swiper-pagination-bullet-active {
  animation-play-state: paused;
}

@keyframes hero-bullet-fill {
  from {
    --hero-progress: 0%;
  }
  to {
    --hero-progress: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. DEALER SPECIALITIES
   -------------------------------------------------------------------------- */
.specialities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.speciality-card {
  /* Figma: translucent white gradient over the page background,
     1px white border, 30px radius, soft 5/10px ambient shadow */
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.67) 99%
  );
  border: 1px solid var(--white);
  border-radius: 30px;
  padding: 20px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.speciality-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.speciality-card__icon {
  color: var(--primary-color);
  margin-bottom: 10px;
}

.speciality-card__title {
  font-size: 20px;
  /* Figma: 20px gap between title and text */
  margin-bottom: 20px;
}

.speciality-card__text {
  color: var(--text-muted);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   9. ABOUT US
   -------------------------------------------------------------------------- */
/* Double class beats the responsive .section padding override */
.about.section {
  padding-top: 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.about__lead,
.about__text {
  font-size: 15px;
  line-height: 24px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.about__quote {
  display: block;
  border-left: 4px solid var(--accent-color);
  padding-left: 24px;
  padding-block: 10px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 24px;
}

.about__media {
  position: relative;
}

/* Storefront photo — desktop-only collage piece */
.about__storefront {
  display: none;
  width: 48%;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.about__caption {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
  text-align: center;
  max-width: 300px;
  margin-inline: auto;
  margin-bottom: 16px;
}

.about__interior {
  width: 100%;
  /* Figma mobile: 320x291 crop with a 20px radius */
  aspect-ratio: 320 / 291;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* --------------------------------------------------------------------------
   9b. ABOUT PAGE (Figma: About Us 11751:14331)
   -------------------------------------------------------------------------- */
.about--page.section {
  /* breadcrumb's 10px bottom padding + 30px = Figma's 40px gap */
  padding-top: 30px;
  padding-bottom: 0;
}

/* Showroom collage — proportional to the 488x459 Figma frame:
   small 232x192 top-left (luminosity), big 418x380 bottom-right */
.about__collage {
  position: relative;
}

.about__collage-small {
  width: 47.49%;
  aspect-ratio: 232 / 192;
  object-fit: cover;
  border-radius: 16px;
  mix-blend-mode: luminosity;
}

.about__collage-big {
  position: relative;
  display: block;
  width: 85.62%;
  aspect-ratio: 418 / 380;
  object-fit: cover;
  border-radius: 16px;
  /* big image starts at y=79 while the small one ends at y=192 */
  margin: -23.16% 0 0 auto;
}

/* Service & pre-owned promo banners — full banner art straight
   from the backend page images (3/4) */
.about-promos {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 56px;
}

.about-promo {
  display: block;
  flex: 1 1 280px;
  border-radius: 16px;
  overflow: hidden;
}

.about-promo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Why choose us */
.about-why {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-block: 56px;
}

.about-why__media img {
  width: 100%;
  max-width: 387px;
}

.about-why__title {
  margin-bottom: 12px;
}

.about-why__intro {
  font-size: 16px;
  line-height: 1.6;
}

.about-why__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.about-why__item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

.about-why__item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   10. NEW CARS
   -------------------------------------------------------------------------- */
/* Double class beats the responsive .section padding override */
.new-cars.section {
  padding-top: 0;
}

.new-cars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Figma: plain white card, image box flush to the edges */
  background-color: var(--white);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

/* Figma mobile: 9px between the photo and the model name
   (desktop overrides this to 16px in media.css) */
.car-card__media {
  margin-bottom: 9px;
}

/* The car eases back slightly as the circle grows, like the prototype */
.car-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-card__name {
  font-size: 14px;
  margin-bottom: 4px;
  padding-inline: 12px;
}

.car-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 12px;
  gap: 8px;
  margin-top: auto;
}

.car-card__price {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.car-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--text-invert);
  overflow: hidden;
}

.car-card__btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.35s ease;
}

/* On card hover the arrow slides to the right edge of the button,
   like the Figma hover variant (justify-end) */
.car-card:hover .car-card__btn svg {
  transform: translateX(7px);
}

/* --------------------------------------------------------------------------
   11. WHY CHOOSE US
   -------------------------------------------------------------------------- */
.why-us {
  /* Figma 12476:7006: #e4dcd3 base + topo-line art (10% opacity is
     baked into the PNG), covering the section */
  background-color: #e4dcd3;
  background-image: url("../images/why-us-bg.png");
  background-size: cover;
  background-position: center;
}

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Figma mobile: 50px between bento and copy */
  gap: 50px;
  align-items: start;
}

/* Bento cards — two staggered columns, exactly like the Figma layout */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Figma mobile: 13px gaps, 145px cards */
  gap: 13px;
  align-items: start;
}

.bento__col {
  display: grid;
  gap: 13px;
}

.bento-card {
  position: relative;
  height: 145px;
  border-radius: 16px;
  padding: 13px 17px;
  overflow: hidden;
}

.bento-card__title {
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 5px;
}

.bento-card__text {
  font-size: 8px;
  line-height: 12px;
  color: var(--text-muted);
}

/* Card: Great 24/7 Support */
.bento-card--support {
  background-color: var(--white);
  border: 1px solid rgba(9, 8, 8, 0.07);
  text-align: center;
}

.bento-card--support img {
  width: auto;
  height: 57.5px;
  border-radius: 6.5px;
  margin: 0 auto 5px;
}

.bento-card--support .bento-card__text {
  margin-inline: auto;
}

/* Card: Fast Booking — key visual sits bottom-right */
.bento-card--booking {
  background-color: #f1f1cc;
  padding-bottom: 0;
}

.bento-card--booking .bento-card__text {
  max-width: 130px;
}

.bento-card--booking img {
  position: absolute;
  right: 4px;
  bottom: 6px;
  height: 52%;
  width: auto;
  max-width: none;
  margin: 0;
}

/* Card: Best Price — piggy anchors bottom-right, text wraps beside it */
.bento-card--price {
  background-color: #d3f3ee;
}

.bento-card--price .bento-card__text {
  max-width: 70%;
}

.bento-card--price img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 94%;
  width: auto;
}

/* Card: 245+ Dealership */
.bento-card--dealers {
  background-color: #e3f0ff;
  text-align: center;
  padding: 10px 8px;
}

.bento-card--dealers img {
  width: auto;
  height: 60px;
  margin: 0 auto 5px;
}

.bento-card--dealers .bento-card__text {
  font-size: 9.5px;
  max-width: 210px;
  margin-inline: auto;
}

/* Right-hand copy */
.why-us__content .chip {
  margin-bottom: 12px;
}

.why-us__title {
  /* Figma mobile: 30px / 1.2 */
  font-size: 30px;
  line-height: 36px;
  margin-bottom: 10px;
}

/* Figma mobile: 15px body copy in this section */
.why-us__content p,
.why-us__list li {
  font-size: 15px;
  line-height: 24px;
}

.why-us__text {
  color: var(--text-color);
  margin-bottom: 20px;
}

.why-us__list {
  display: grid;
  /* Figma mobile: 8px between checklist rows */
  gap: 8px;
}

.why-us__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.why-us__list svg {
  flex-shrink: 0;
  margin-top: 12px;
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   12. CUSTOMER REVIEWS
   -------------------------------------------------------------------------- */
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.reviews .section__title {
  font-size: 24px;
  line-height: 28px;
}

.reviews__intro-text {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 8px 0 12px;
}

.reviews__logo {
  width: 84px;
}

.reviews__slider-wrap {
  min-width: 0;
  margin-inline: -20px;
  padding-left: 20px;
  overflow: hidden;
}

.reviews-swiper {
  /* The wrap clips; keeping this visible lets swiped cards show in the
     wrap's padding zone without disturbing Swiper's own math */
  overflow: visible;
}

/* Figma mobile: 290 x 367 review card with the next card peeking */
.reviews-swiper .swiper-slide {
  width: 290px;
}

.review-card {
  min-height: 367px;
}

.review-card {
  /* Figma: glass card; the active slide turns solid white below */
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 100%);
  border: 1px solid var(--white);
  border-radius: 30px;
  padding: 25px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
  height: auto;
}

.reviews-swiper .swiper-slide-active.review-card {
  background: var(--white);
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Figma: 30px below the author row */
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.review-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* No photo — Figma fallback: beige circle with a 30px initial */
.review-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e4dcd3;
  color: #090808;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.review-card__name {
  font-size: 20px;
  margin-bottom: 4px;
}

.review-card__stars {
  display: flex;
  gap: 2px;
  color: #f6b900;
}

.review-card__stars .star--empty {
  color: #d6dbe3;
}

.review-card__text {
  color: var(--text-muted);
  /* Figma: 16px mobile, 18px desktop (media.css) */
  font-size: 16px;
  line-height: 1.6;
}

.reviews__nav {
  /* Figma mobile: no arrows (swipe only) — shown from media.css */
  display: none;
  gap: 20px;
  margin-top: 32px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   13. CTA BANNER
   -------------------------------------------------------------------------- */
/* Double class beats the responsive .section padding override */
.cta.section {
  padding-top: 0;
}

.cta__banner {
  position: relative;
  border-radius: 20px;
  padding: 24px;
  background-color: #020a12;
  /* Blue glow radiating from the upper-left, per the Figma fill */
  background-image: radial-gradient(
    150% 130% at 12% 28%,
    #0369b3 0%,
    rgba(3, 73, 122, 0.75) 28%,
    rgba(2, 22, 39, 0.4) 55%,
    rgba(2, 8, 14, 0) 80%
  );
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  overflow: hidden;
}

.cta__text {
  color: var(--text-invert);
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: -0.6px;
}

/* Full-width white button on mobile, per the Figma mobile frame */
.cta__banner .btn {
  width: 100%;
  border-radius: 14px;
  padding-block: 16px;
  font-size: 16px;
}

.cta__text strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--white);
  /* 56px on mobile, per the Figma mobile frame */
  padding-top: 56px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 32px between the stacked columns (48px row gap from tablet up) */
  gap: 32px;
}

.footer__heading {
  font-size: 18px;
  margin-bottom: 16px;
}

.location {
  margin-bottom: 32px;
}

.location:last-child {
  margin-bottom: 0;
}

.location__list {
  display: grid;
  gap: 12px;
}

.location__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.location__item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-light);
}

.location__item a:hover {
  color: var(--primary-color);
}

/* Address + Google-Maps direction badge: the whole address is the link,
   hovering anywhere on it turns the text and the diamond blue (Figma) */
.location__direction {
  color: inherit;
  transition: color 0.2s ease;
}

.location__direction svg {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  margin-left: 4px;
  color: #c6ccd6;
  transition: color 0.2s ease;
}

.location__direction:hover,
.location__direction:hover svg {
  color: var(--primary-color);
}

.footer__links {
  display: grid;
  /* Figma: 20px between links */
  gap: 20px;
  align-content: start;
}

/* Figma: 16px after the heading — cancel 4px of the 20px grid gap
   (the heading's own 16px margin would otherwise stack on the gap) */
.footer__links .footer__heading {
  margin-bottom: -4px;
}

.footer__link {
  /* Figma: 15/24 */
  font-size: 15px;
  line-height: 24px;
  color: var(--text-color);
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: var(--primary-color);
}

.footer__bottom {
  border-top: 1px solid var(--border-color);
  margin-top: 48px;
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-light);
  /* Bleed the divider to the viewport edges while the content stays
     aligned with the container */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

.footer__social {
  display: flex;
  align-items: center;
  /* Figma: 28px between icons, 20px after "Connect:" */
  gap: 28px;
}

.footer__social span {
  font-size: 15px;
  color: rgba(9, 8, 8, 0.5);
  margin-right: -8px;
}

.footer__social a {
  display: inline-flex;
  color: #090808;
  opacity: 0.3;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer__social a:hover {
  color: var(--primary-color);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   15. FLOATING CHAT WIDGET (button + quick-help panel)
   -------------------------------------------------------------------------- */
.chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* The widget box also covers the (hidden) panel area — let clicks fall
     through to the page; the button and open panel re-enable themselves */
  pointer-events: none;
}

.chat-widget .chat-fab,
.chat-widget .chat-panel {
  pointer-events: auto;
}

.chat-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--text-invert);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 15px rgba(25, 97, 172, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.chat-fab:hover {
  background-color: var(--primary-dark);
  transform: scale(1.06);
}

/* FAB icons crossfade with a small spin when the panel opens */
.chat-fab {
  position: relative;
}

.chat-fab__icon {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.chat-fab__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.chat-widget.is-open .chat-fab__icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.chat-widget.is-open .chat-fab__icon--close {
  opacity: 1;
  transform: none;
}

/* Quick-help panel — grows out of the button's corner on open, exactly
   like the Figma prototype (panel starts at ~40% scale beside the FAB) */
.chat-panel {
  width: 260px;
  margin-bottom: 2px;
  padding: 20px 10px;
  display: grid;
  gap: 1px;
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.4);
  transform-origin: bottom right;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}

.chat-widget.is-open .chat-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.chat-panel__title {
  padding: 0 14px 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-color);
}

.chat-panel__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-color);
  transition: background-color 0.2s ease;
}

.chat-panel__option:hover,
.chat-panel__option:focus-visible {
  background-color: #eef1fb;
}

.chat-panel__option svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. MODEL OVERVIEW PAGE (modeloverview/modeloverview.html)
   -------------------------------------------------------------------------- */

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  /* Figma: 6px between crumbs */
  gap: 6px;
  font-size: 12px;
  line-height: 16.8px;
  /* Figma: 20px above, 10px below */
  padding-block: 20px 10px;
}

/* Model overview page only: 20px above, 40px below */
.breadcrumb--overview {
  padding-block: 20px 40px;
}

.breadcrumb a {
  font-weight: 600;
  color: var(--text-color);
}

.breadcrumb a:hover {
  color: var(--primary-color);
}

.breadcrumb svg {
  color: var(--text-light);
}

.breadcrumb__current {
  /* Figma: current crumb at 50% */
  color: var(--text-light);
}

/* ---- Page layout -------------------------------------------------------
   Mobile: the two wrappers become display:contents so the blocks can be
   interleaved (gallery → title card → sections → recommended).
   Desktop (media.css): wrappers turn back into blocks in a 2-column grid. */
.model__layout {
  display: flex;
  flex-direction: column;
  /* Mobile: no bottom gap (tablet+ gets 80px via media.css) */
  padding-bottom: 0;
}

/* Mobile: 56px above the recommended-cars card (reset on tablet+) */
.model__layout .reco-card {
  margin-top: 56px;
}

.model__main,
.model__aside {
  display: contents;
}

.model__layout .model-gallery {
  order: 1;
  margin-bottom: 0;
}

.model__layout .model-title-card {
  order: 2;
}

.model__main > * {
  order: 3;
  /* Section spacing comes from .model-section rules (mobile flex layout
     does not collapse margins, so any value here would add up) */
  margin-bottom: 0;
}

.model__layout .reco-card {
  order: 4;
}

.model__layout .model-title-card {
  /* Mobile: 20px below the card (40px on desktop via media.css) */
  margin-bottom: 20px;
}

.model__layout .reco-card {
  margin-bottom: 24px;
}

/* ---- Gallery ---- */
.model-gallery {
  position: relative;
  /* Mobile: edge-to-edge with rounded corners, like the Figma mobile PDP */
  margin-inline: calc(50% - 50vw);
  border-radius: 24px;
  overflow: hidden;
}

.gallery-swiper {
  /* Mobile: sized like the Figma mobile gallery so the whole car stays
     in frame (the slide flex-stretches, so the ratio lives on the container) */
  aspect-ratio: 3 / 2;
}

.gallery-swiper .swiper-slide {
  height: 100%;
}

.model-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* Square-ish rounded arrows, as in the Figma design */
.model-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Blue chevron only on hover */
.model-gallery__nav:hover {
  background-color: var(--white);
  color: var(--primary-color);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.model-gallery__nav--prev {
  left: 10px;
}

.model-gallery__nav--next {
  right: 10px;
}

.model-gallery__actions {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 10;
  display: flex;
  gap: 12px;
}

.media-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--white);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.media-pill:hover {
  color: var(--primary-color);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* ---- Title / price card ---- */
.model-title-card {
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 99%);
  border: 1px solid var(--white);
  border-radius: 0 0 24px 24px;
  margin-inline: calc(50% - 50vw);
  /* Mobile: full-bleed card with a flat 20px inset on all sides;
     no top border (restored on desktop via media.css) */
  border-top: none;
  padding: 20px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
}

.model-title-card__name {
  font-size: 24px;
  line-height: normal;
  margin-bottom: 12px;
}

.model-title-card__price {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 4px;
}

/* Figma: the price asterisk sits inline, not superscript */
.model-title-card__price sup {
  position: static;
  top: 0;
  vertical-align: baseline;
  font-size: inherit;
}

.model-title-card__note {
  font-size: 12px;
  color: var(--text-light);
  /* Mobile: 12px below (20px on desktop via media.css) */
  margin-bottom: 12px;
}

.model-title-card__note a {
  color: var(--primary-color);
  font-weight: 400;
}

/* City link underlines on hover, same as the Get Best Offers link */
.model-title-card__note a:hover {
  text-decoration: underline;
}

.model-title-card__emi {
  font-size: 14px;
  color: var(--text-muted);
  /* Mobile: 12px below (20px on desktop via media.css) */
  margin-bottom: 12px;
}


.model-title-card__emi a {
  color: var(--primary-color);
  font-weight: 600;
}

.model-title-card__emi a:hover {
  text-decoration: underline;
}

.model-title-card__actions {
  display: flex;
  gap: 12px;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  color: var(--text-light);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.action-chip:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.action-chip--active {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ---- Recommended cars card ---- */
.reco-card {
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 99%);
  border: 1px solid var(--white);
  border-radius: 24px;
  padding: 24px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
}

/* Figma 11705:14530: 30px title (desktop) + 8px subtitle, 20px rhythm */
.reco-card__title {
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 400;
}

.reco-card__subtitle {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-light);
  margin-bottom: 20px;
}

.reco-card__list {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.reco-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.reco-item__thumb {
  width: 130px;
  height: 98px;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
}

.reco-item__name {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 10px;
}

.reco-item a:hover .reco-item__name {
  color: var(--primary-color);
}

.reco-item__price {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
}

.reco-card__more {
  display: inline-flex;
  align-items: center;
  /* Figma 11705:14555: 16px semibold, 6px before the 20px icon */
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.reco-card__more:hover {
  text-decoration: underline;
}

/* ---- Section tabs (Overview / Price / Specs / Colors) ---- */
.page-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
  /* Mobile: the strip scrolls edge-to-edge; pills rest at the 20px gutter */
  margin-inline: -20px;
  padding-inline: 20px;
  /* Keeps the pill shadows from clipping against the overflow edge */
  padding-bottom: 4px;
}

/* Keeps the last pill clear of the right screen edge while scrolling */
.page-tabs::after {
  content: "";
  flex: 0 0 8px;
}

.page-tabs::-webkit-scrollbar {
  display: none;
}

.page-tabs__link {
  flex-shrink: 0;
  background-color: var(--white);
  color: var(--text-color);
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  padding: 15px 36px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.page-tabs__link:hover {
  color: var(--primary-color);
}

.page-tabs__link.is-active {
  background-color: var(--primary-color);
  color: var(--text-invert);
}

/* ---- Shared section shell inside the main column ----
   Figma mobile 11799:6594: 30px section padding, 20px to the divider;
   desktop values (50/40/42) live in media.css ≥768 */
.model-section {
  padding-top: 30px;
}

/* Mobile: 30px below the content + 20px to the divider line */
#overview .model-section__title,
#features .model-section__title {
  margin-bottom: 20px;
}

#features {
  /* keep the accordion's own 20px padding as the only trailing space */
  margin-bottom: 0;
}

.model-section + .model-section {
  border-top: 1px solid rgba(9, 8, 8, 0.12);
  /* Mobile: 30px below the content + 20px gap (40px on desktop) */
  margin-top: 50px;
}

.model-section__title {
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  /* Prototype: 24px below the section title */
  margin-bottom: 24px;
}

.model-section__subtitle {
  color: var(--text-light);
  /* Figma 11705:14156: 15px/1.4, 8px under the title, 32px above the table */
  font-size: 15px;
  line-height: 1.4;
  margin: calc(-1 * 16px) 0 32px;
}

/* ---- Car overview spec list ---- */
.overview-list {
  display: grid;
  grid-template-columns: 1fr;
  /* Figma: 22px between rows */
  gap: 22px 48px;
}

.overview-list__item {
  display: flex;
  /* Top-aligned so a wrapped (2-line) value keeps the icon on line 1 */
  align-items: flex-start;
  /* Figma: 21px row line-height */
  font-size: 15px;
  line-height: 21px;
}

.overview-list__item svg {
  flex-shrink: 0;
  color: var(--text-muted);
  /* Figma: 20px icon centered on the 21px first line, 8px gap to the label */
  margin-top: 0.5px;
  margin-right: 8px;
}

.overview-list__label {
  color: var(--text-muted);
  /* Figma: 160px label column + 4px gap, values left-aligned after it */
  flex: 0 0 160px;
  margin-right: 4px;
}

.overview-list__value {
  font-weight: 600;
  min-width: 0;
}

/* ---- Price / variants ---- */
.price-table__head {
  display: none;
  /* Figma 11705:14160: 300px variants column, price fills, actions auto */
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 0 20px 12px;
  font-weight: 600;
  font-size: 15px;
}

.variant-row {
  border-radius: 30px;
  border: 1px solid #fff;
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 99.11%);
  box-shadow: -5px 0 10px 0 rgba(0, 0, 0, 0.01), 5px 0 10px 0 rgba(0, 0, 0, 0.01),
    0 -5px 10px 0 rgba(0, 0, 0, 0.01), 0 5px 10px 0 rgba(0, 0, 0, 0.01);
  padding: 20px;
  margin-bottom: 12px;
}

.variant-row__name {
  font-size: 20px;
  /* Figma 11705:14167: semibold, 6px above the spec line */
  font-weight: 600;
  margin-bottom: 6px;
}

.variant-row__desc {
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.variant-row__price {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.variant-row__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn--outline {
  flex: 1;
  height: 48px;
  padding: 10px 24px;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
  font-size: 16px;
  /* Figma 11705:14176: bold label */
  font-weight: 700;
  color: var(--primary-color);
}

.btn--outline:hover {
  background-color: var(--primary-color);
  color: var(--text-invert);
}

.brochure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  /* Figma 11705:14178: 12px radius, 22px icon */
  border-radius: 12px;
  background-color: var(--primary-color);
  color: var(--text-invert);
  transition: background-color 0.2s ease;
}

.brochure-btn:hover {
  background-color: var(--primary-dark);
}

/* ---- Features checklist ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Figma 11705:14201: 22px row gap, 30px column gap */
  gap: 22px 30px;
  margin-bottom: 30px;
}

.features-grid li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.4;
}

.features-grid svg {
  flex-shrink: 0;
  /* Figma: 16px icon centered on the 21px first text line */
  margin-top: 2.5px;
  color: var(--accent-color);
}

/* ---- Feature-group accordions (native <details>) ----
   Figma 11705:14263: divider under each row, 20px above/below, none on the last */
.accordion {
  border-bottom: 1px solid rgba(9, 8, 8, 0.1);
}

.accordion:last-of-type {
  border-bottom: none;
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.accordion:first-of-type .accordion__summary {
  padding-top: 0;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.accordion[open] .accordion__summary svg {
  transform: rotate(180deg);
}

.accordion__body {
  padding-bottom: 20px;
}

/* ---- Colours ---- */
.colours-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.fuel-select {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 16px;
}

.fuel-select select {
  font: inherit;
  font-weight: 600;
  color: var(--text-color);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 36px 10px 16px;
  cursor: pointer;
  appearance: none;
  /* Small solid triangle, like the Figma select */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0.9 0h6.2a0.9 0.9 0 0 1 0.68 1.49L4.68 4.63a0.9 0.9 0 0 1-1.36 0L0.22 1.49A0.9 0.9 0 0 1 0.9 0Z' fill='%23090808'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.colours-card {
  background-color: var(--white);
  border-radius: 24px;
  /* Figma mobile: image flush to the card edges, 20px below the swatches */
  padding: 0 0 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  position: relative;
  text-align: center;
}

.colours-card__stage {
  position: relative;
  /* Figma mobile: no inset — restored on tablet+ in media.css */
  padding: 0;
}

.colours-card__image {
  margin-inline: auto;
  /* Figma: the car fills the card on mobile, 88% on desktop */
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  /* Mobile: rounded top corners flush with the card */
  border-radius: 24px 24px 0 0;
}

.colours-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma mobile: 32px buttons (40px on tablet+ via media.css) */
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-muted);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Blue chevron only on hover */
.colours-card__nav:hover {
  color: var(--primary-color);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.colours-card__nav--prev {
  left: -12px;
}

.colours-card__nav--next {
  right: -12px;
}

.colours-card__label {
  display: inline-block;
  position: relative;
  background-color: var(--bg-sky);
  border-radius: 999px;                                         
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  margin: -15px 0 14px;
}

.colours-card__label [data-colour-name] {
  margin-left: 4px;
}

.swatches {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 16px;
  /* Figma mobile: strip starts 30px in from the card edge */
  padding-inline: 30px;
  padding-bottom: 12px;
  padding-top: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.swatches::-webkit-scrollbar {
  display: none;
}

.swatch {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(9, 8, 8, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch svg {
  position: absolute;
  inset: 0;
  margin: auto;
  color: var(--text-invert);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.swatch.is-selected {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--text-light);
}

.swatch.is-selected svg {
  opacity: 1;
}

/* Light swatches need a dark check mark */
.swatch--light svg {
  color: var(--text-color);
}

/* --------------------------------------------------------------------------
   17. CONTACT US PAGE (contactus/contactus.html)
   -------------------------------------------------------------------------- */

/* ---- Page heading ---- */
.page-head__title {
  /* Figma mobile: 24px (40px from tablet up via media.css) */
  font-size: 24px;
  margin-bottom: 24px;
}

/* ---- City selector strip ---- */
.city-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.city-strip::-webkit-scrollbar {
  display: none;
}

.city-card {
  flex-shrink: 0;
  width: 88px;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.city-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.city-card img {
  width: 100%;
  height: 55px;
  object-fit: cover;
}

.city-card span {
  display: block;
  font-size: 12px;
  color: var(--text-color);
  padding: 6px 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Map ---- */
.map-section {
  position: relative;
  height: 420px;
  background-image: url("../images/map-bg.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.map-pin {
  position: absolute;
  width: 23px;
  height: 26px;
  transform: translate(-50%, -100%);
}

.map-marker {
  position: absolute;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
}

/* Dealer info card floating on the map */
.map-card {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 88%);
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
  overflow: visible;
}

.map-card::after {
  /* Downward-pointing tail */
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 11px solid var(--white);
}

.map-card__image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.map-card__content {
  padding: 16px 24px 24px;
}

.map-card__title {
  font-size: 16px;
  margin-bottom: 8px;
}

.map-card__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.map-card__address svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Zoom / locate controls */
.map-controls {
  position: absolute;
  right: 16px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-controls__group {
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-controls button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.map-controls button:hover {
  color: var(--text-color);
  background-color: var(--bg-page);
}

.map-controls__group button + button {
  border-top: 1px solid var(--border-color);
}

.map-controls__locate {
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* ---- Need assistance (form + reach-out) ---- */
.assist {
  /* Mobile: 40px top; desktop keeps 16px via media.css */
  padding-block: 40px 90px;
}

.assist__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 56px between the form and reach-out blocks */
  gap: 56px;
}

.assist__title {
  /* Figma: 24px */
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 8px;
  line-height: normal;
}

.assist__subtitle {
  color: var(--text-light);
  font-size: 15px;
  line-height: 21px;
  margin-bottom: 24px;
}

.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Figma: 20px gaps, 24px above the submit button */
  gap: 20px;
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: normal;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--text-color);
  background-color: var(--white);
  /* Figma: 1px #EDEDED border, 12px radius, 16/18 padding */
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Figma: 54px fields (textarea keeps its own height) */
.form-field input,
.form-field select {
  height: 54px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-light);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(25, 97, 172, 0.15);
}

.form-field select {
  appearance: none;
  cursor: pointer;
  /* No block padding: the select centers its text within the 54px height
     (16px padding squeezed the line box and pushed the text off-centre) */
  padding-block: 0;
  /* Custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23090808' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-field--full {
  grid-column: 1 / -1;
}

/* Full-width on mobile, per the Figma; shrinks back at ≥768px (media.css) */
.contact-form button[type="submit"] {
  /* Figma: full-width on mobile; 48px tall, 16px label, 12px radius */
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
}

/* Post-submit confirmation (toggled by js/contact.js) */
.contact-form__success {
  display: none;
  margin-top: 16px;
  font-weight: 600;
  color: #129d61;
}

.contact-form.is-sent .contact-form__success {
  display: block;
}

/* ---- "Thank You" popup shown after any form submit ---- */
.thanks-popup {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.thanks-popup[hidden] {
  display: none;
}

.thanks-popup__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 8, 8, 0.5);
}

.thanks-popup__card {
  position: relative;
  width: 460px;
  max-width: 100%;
  background-color: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 24px 28px 28px;
}

.thanks-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.thanks-popup__title {
  font-size: 24px;
}

.thanks-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-color);
}

.thanks-popup__text {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- Reach out to us ---- */
.reach-out__title {
  /* Mobile: 24px; desktop 30px via media.css */
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 24px;
  line-height: normal;
}

.reach-out__item {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Figma: 40px between rows */
  margin-bottom: 40px;
}

.reach-out__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(9, 8, 8, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}

.reach-out__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  line-height: normal;
}

.reach-out__value {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  padding-top: 4px;
}

.reach-out__value a:hover {
  color: var(--primary-color);
}

.reach-out__value small {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.reach-out__tollfree {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   18. BOOK SERVICE PAGE (bookservice/bookservice.html)
   Reuses .contact-form / .form-grid / .form-field from the contact page.
   -------------------------------------------------------------------------- */
.service__layout {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 64px;
}

/* Radio-group field labels match the regular field labels
   (only the field's own label — not the Yes/No option labels) */
.form-radio-group .form-group > label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ---- Custom radios (Figma 11740:4577) ---- */
/* Option rows sit on a 54px line so they align with neighbouring fields */
.service-type-radio,
.pickup-radio {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 54px;
}

.service-type-radio label,
.pickup-radio label {
  display: inline-flex;
  align-items: center;
  /* Figma: 10px between the circle and its 14px muted text */
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
}

/* Figma: 18px circle — white with a 1.5px #EDEDED ring when idle,
   solid #1961AC with a centred 4px white dot when selected */
.service-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #ededed;
  border-radius: 50%;
  background-color: var(--white);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.service-radio:checked {
  border: none;
  background-color: var(--primary-color);
  background-image: radial-gradient(circle, #fff 4px, transparent 4.5px);
}

.service-radio:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* "Personal Details" / "Service Details" group headings */
.form-heading {
  font-size: 28px;
  font-weight: 600;
  margin: 16px 0 24px;
}

.form-heading:first-child {
  margin-top: 16px;
}

/* Native date field with a custom calendar glyph */
.form-field input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23124e8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='3'/%3E%3Cpath d='M8 2v4m8-4v4M3 9h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  opacity: 0; /* invisible but still opens the picker over the custom glyph */
  cursor: pointer;
}

/* Illustration panel — desktop only (the mobile Figma frame omits it) */
.service-aside {
  display: none;
}

.service-aside__art {
  display: block;
  width: 410px;
  margin-left: auto;
}

.service-badges {
  position: absolute;
  top: 83px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--white);
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
  white-space: nowrap;
}

.badge-pill svg {
  flex-shrink: 0;
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   19. USED CARS LISTING PAGE (usedcars/usedcars.html)
   -------------------------------------------------------------------------- */

/* ---- Listing header (mobile only — the desktop Figma has no title) ---- */
.listing-head__title {
  font-size: 24px;
  /* Figma mobile 11802: 8px above the chips row */
  margin-bottom: 8px;
}

.listing-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  /* Figma mobile: 20px above the first card */
  margin-bottom: 20px;
}

/* No applied filters — no empty gap */
.listing-chips:empty {
  display: none;
}

.chip--dismiss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--white);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.chip--dismiss button,
.chip--dismiss a {
  display: inline-flex;
  color: var(--text-light);
}

.chip--dismiss button:hover,
.chip--dismiss a:hover {
  color: var(--text-color);
}

.listing-clear {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

/* ---- Layout ---- */
.listing__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  /* Mobile: 40px below the cards (80px from tablet up via media.css) */
  padding-bottom: 40px;
}

/* ---- Filter sidebar (desktop) ---- */
.filter-sidebar {
  display: none;
}

.filter-card {
  /* Figma 11745:6209: glass card — 20px radius/padding, white border */
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 99.11%);
  border: 1px solid var(--white);
  border-radius: 20px;
  padding: 20px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
  margin-bottom: 10px;
}

.filter-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.filter-card__summary::-webkit-details-marker {
  display: none;
}

/* +/- indicator swaps with the open state */
.filter-card__summary .icon-minus,
.filter-card[open] .filter-card__summary .icon-plus {
  display: none;
}

.filter-card[open] .filter-card__summary .icon-minus {
  display: block;
}

.filter-card__body {
  /* Figma: 20px between the card title and its content */
  padding-top: 20px;
}

/* Checkbox rows — Figma: 14px semibold labels, 10px from the box */
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

/* Figma: 16px between rows (desktop sidebar; the drawer spaces its own) */
.filter-sidebar .filter-option + .filter-option {
  margin-top: 16px;
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Figma: 1.5px rgba(9,8,8,.5) ring, 5px radius */
  border: 1.5px solid rgba(9, 8, 8, 0.5);
  border-radius: 5px;
  background-color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.filter-option input[type="checkbox"]:checked,
.filter-option input[type="radio"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.125 3.37522L4.875 8.62499L2.25 6.00022' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.filter-option__count {
  margin-left: auto;
  /* Figma: 12px bold muted count */
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
}

/* Model search box — Figma 11745:6391: 40px white box, radius 8,
   16px icon at 16, 15px placeholder at 42, 20px below */
.filter-search {
  position: relative;
  margin-bottom: 20px;
}

.filter-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
}

.filter-search input {
  /* No native search-field inset — keeps the icon→text gap at exactly 10px */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text-color);
  background-color: var(--white);
  border: none;
  border-radius: 8px;
  /* 39px = 16 + 16px icon + 10px visual gap (glyph inset/bearing compensated) */
  padding: 0 16px 0 39px;
}

.filter-search input::placeholder {
  color: #7c7e88;
}

.filter-search input:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: -1px;
}

.filter-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
}

/* Budget dual-thumb slider */
.range-labels {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 16px;
}

.range-slider {
  position: relative;
  height: 20px;
  margin-bottom: 24px;
}

.range-slider__track,
.range-slider__fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
}

.range-slider__track {
  width: 100%;
  background-color: #e2e7ee;
}

.range-slider__fill {
  background-color: var(--primary-color);
}

.range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  appearance: none;
  background: none;
  pointer-events: none; /* only the thumbs are interactive */
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: none;
  cursor: pointer;
}

.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: none;
  cursor: pointer;
}

.filter-subtitle {
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  /* Figma: 12px above the checkbox list */
  margin-bottom: 12px;
}

/* ---- Used car cards ---- */
.used-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Figma 11750:4345: image inset 8px, content at 20px, 20px bottom */
.used-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 0 0 20px;
  /* Figma: hairline border instead of a shadow */
  border: 1px solid rgba(9, 8, 8, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.used-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

.used-card__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* Figma: 8px inset around the photo, 10px below */
  margin: 8px 8px 10px;
}

.used-card__media img {
  width: 100%;
  /* Figma: 269x170 thumbnail */
  aspect-ratio: 269 / 170;
  object-fit: cover;
}

/* Figma chip: 24px white pill at 14/16, 10px medium text, 12px icon */
.offer-chip {
  position: absolute;
  top: 8px; /* 16px from the card edge = 8px media inset + 8px */
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  background-color: var(--white);
  border-radius: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: capitalize;
  box-shadow: 0 1px 2px rgba(36, 39, 44, 0.08);
}

.offer-chip svg {
  width: 12px;
  height: 12px;
  color: var(--accent-color);
}

.used-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
  margin: 0 20px 4px;
}

.used-card__price {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-inline: 20px;
}

/* Figma: visible gap between the rupee sign and the amount */
.used-card__price i {
  font-style: normal;
  margin-right: 4px;
}

/* Figma: the price asterisk sits inline, not superscript */
.used-card__price sup {
  position: static;
  top: 0;
  vertical-align: baseline;
  font-size: inherit;
}

.used-card__meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px; /* 0.6875rem — keeps all three specs on one line */
  line-height: 18px;
  white-space: nowrap;
  color: var(--text-color);
  /* Figma: 8px under the price, 16px above the button */
  margin: 8px 20px 16px;
}

.used-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Figma spec glyphs keep their own 13x11 / 10x11 / 11x11 boxes */
.used-card__meta svg {
  flex-shrink: 0;
}

.used-card .btn--outline {
  display: flex;
  width: auto;
  margin-inline: 20px;
}

/* ---- Mobile "Filters" floating button ---- */
.filters-fab {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--white);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
}

.filters-fab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: var(--text-invert);
  font-size: 12px;
  font-weight: 700;
}

/* ---- Mobile filter drawer ---- */
.filter-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
}

.filter-drawer.is-open {
  transform: none;
  visibility: visible;
}

body.drawer-open {
  overflow: hidden;
}

/* Figma 11804:24129: back arrow on its own row, 24px title below */
.filter-drawer__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 0;
}

.filter-drawer__head [data-drawer-close] {
  display: inline-flex;
  padding-inline: 12px;
}

.filter-drawer__head h2 {
  font-size: 24px;
  padding-inline: 20px;
}

.filter-drawer__body {
  flex: 1;
  display: grid;
  /* Figma: 130px rail */
  grid-template-columns: 130px minmax(0, 1fr);
  overflow: hidden;
}

.filter-drawer__rail {
  background-color: #f5f6fa;
  overflow-y: auto;
}

.rail-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 48px;
  text-align: left;
  padding: 0 16px 0 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}

.rail-tab.is-active {
  background-color: var(--white);
  color: var(--text-color);
  /* Figma: #d2481f accent inside the drawer */
  border-left-color: #d2481f;
}

.rail-tab__note {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #d2481f;
}

.rail-tab__note:empty {
  display: none;
}

.filter-drawer__pane {
  display: none;
  overflow-y: auto;
  /* Figma: 15px top, 20px sides and bottom */
  padding: 15px 20px 20px;
}

.filter-drawer__pane.is-active {
  display: block;
}

.filter-drawer__pane-title {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Figma: 12px bold labels, 18px boxes 10px away, 16px row rhythm */
.filter-drawer .filter-option {
  gap: 10px;
  padding-block: 0;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.filter-drawer .filter-option input[type="checkbox"],
.filter-drawer .filter-option input[type="radio"] {
  border: 1.5px solid rgba(9, 8, 8, 0.3);
  border-radius: 5px;
}

.filter-drawer .filter-option input[type="checkbox"]:checked,
.filter-drawer .filter-option input[type="radio"]:checked {
  border-color: var(--primary-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.125 3.37522L4.875 8.62499L2.25 6.00022' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.filter-drawer .filter-search {
  margin-bottom: 16px;
}

.filter-drawer .filter-search svg {
  left: 16px;
}

.filter-drawer .filter-search input {
  height: 40px;
  font-size: 13px;
  line-height: 1.4;
  background-color: #f5f6fa;
  padding: 0 16px 0 39px;
}

.filter-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Figma: 72px bar, 12x20 padding, hairline top border */
  height: 72px;
  padding: 12px 20px;
  border-top: 1px solid #f5f6fa;
}

.filter-drawer__clear {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: underline;
}

.filter-drawer__foot .btn--primary {
  flex: 0 0 auto;
  width: 190px;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   20. ABOUT US PAGE (aboutus/aboutus.html)
   Reuses .about__grid / .why-us__list components.
   -------------------------------------------------------------------------- */

/* Promo banner pair (Exchange / Hyundai Assured) */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.promo-grid a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* Coded promo banners — the artwork is CSS/SVG, only the cars are images.
   All positions are percentages of the 591x230 Figma design frame. */
.promo-banner {
  position: relative;
  aspect-ratio: 591 / 230;
}

.promo-banner--exchange {
  background: linear-gradient(180deg, #eecdb1 0%, rgba(255, 255, 255, 0.1) 98%);
}

.promo-banner--assured {
  background: linear-gradient(180deg, #c5d4e4 0%, rgba(255, 255, 255, 0.1) 98%);
}

/* Subtle halftone dot texture in the top-left corner */
.promo-banner::before {
  content: "";
  position: absolute;
  inset: 0 55% 55% 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1.4px, transparent 1.6px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(120% 120% at 0 0, #000 40%, transparent 75%);
  mask-image: radial-gradient(120% 120% at 0 0, #000 40%, transparent 75%);
  pointer-events: none;
}

.promo-banner__arcs,
.promo-banner__coins,
.promo-banner__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.promo-banner__title {
  position: absolute;
  left: 4.5%;
  top: 11.6%;
  font-weight: 700;
  font-size: 26.7px;
  line-height: 1.4;
  color: #d5491f;
}

.promo-banner--assured .promo-banner__title {
  color: var(--primary-color);
}

.promo-banner__sub {
  position: absolute;
  left: 4.5%;
  top: 47.4%;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-color);
}

/* Soft gradient rule the cars sit on */
.promo-banner__line {
  position: absolute;
  left: 50%;
  top: 81.2%;
  width: 42%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(254, 154, 35, 0) 0%, #fe9a23 50%, rgba(254, 154, 35, 0) 100%);
}

.promo-banner--assured .promo-banner__line {
  background: linear-gradient(90deg, rgba(25, 97, 172, 0) 0%, var(--primary-color) 50%, rgba(25, 97, 172, 0) 100%);
}

.promo-banner__img {
  position: absolute;
  display: block;
}

.promo-banner__img--sedan {
  left: 30.3%;
  top: 50.4%;
  width: 55.2%;
}

.promo-banner__img--suv {
  left: 65.8%;
  top: 53%;
  width: 29.3%;
}

.promo-banner__img--assured {
  left: 52.7%;
  top: 40.9%;
  width: 45.4%;
}

/* Why Hyundai Novality */
.why-novality {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 64px;
}

.why-novality__art {
  max-width: 387px;
  margin-inline: auto;
}

.why-novality__text {
  color: var(--text-muted);
  margin: 16px 0 32px;
  max-width: 47rem;
}

/* Checklist is bolder here than on the homepage, as in the Figma */
.why-novality .why-us__list li {
  font-weight: 600;
}

.why-novality .why-us__list svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   21. REVEAL-ON-SCROLL ANIMATION (progressive enhancement, see js/main.js)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   22. OUTLETS PAGE (outlets/outlets.html) — START
   ========================================================================== */
.outlets {
  padding-bottom: 56px;
}

/* Figma: 20px above the breadcrumb, 10px below it */
.outlets-page-breadcrumb {
  padding-block: 20px 10px;
}

.outlets .page-head__title {
  margin-bottom: 40px;
}

/* Sidebar filters + outlet list (Figma: 284px / 895px, 21px gap) */
.outlets-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* Sidebar filters are desktop-only; mobile uses the filter drawer */
.outlets-sidebar {
  display: none;
}

.filter-drawer .outlet-filter__search {
  margin-bottom: 16px;
  /* Drawer pane is white — keep the field visible on it */
  background-color: #f5f6fa;
}

/* Narrow drawer pane: 13px like the used-cars drawer so the
   placeholder ("Search Workshop") is not clipped */
.filter-drawer .outlet-filter__search input {
  font-size: 13px;
}

/* ---- Filter card — same glass card as the used-cars sidebar (Figma) ---- */
.outlet-filter {
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.67) 99.11%);
  border: 1px solid var(--white);
  border-radius: 20px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.01), 5px 0 10px rgba(0, 0, 0, 0.01),
    0 -5px 10px rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.01);
  padding: 20px;
  margin-bottom: 12px;
}

.outlet-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.outlet-filter__title {
  font-size: 18px;
}

.outlet-filter__toggle {
  color: var(--text-color);
  padding: 4px;
}

/* Figma 12089:7719: 40px white box, radius 8, 16px icon, 10px gap */
.outlet-filter__search {
  display: flex;
  align-items: center;
  /* 7px box gap = 10px visual gap icon→text (glyph inset/bearing compensated) */
  gap: 7px;
  height: 40px;
  padding-inline: 16px;
  border-radius: 8px;
  background-color: var(--white);
  color: var(--text-color);
  margin-bottom: 20px;
  cursor: text;
}

.outlet-filter__search input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  outline: none;
  font: inherit;
  /* Figma: 15px placeholder */
  font-size: 15px;
  color: var(--text-color);
  width: 100%;
}

.outlet-filter__search input::placeholder {
  color: #7c7e88;
}

.outlet-filter__list {
  display: grid;
  /* Figma: 16px between rows */
  gap: 16px;
}

.outlet-filter__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.outlet-filter__item .filter-option {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding-block: 0;
}

.outlet-filter__count {
  /* Figma: 12px bold muted */
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
}

.outlet-filter__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color);
}

/* ---- Outlet row card ---- */
.outlet-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--white);
  border-radius: 16px;
  /* Figma 12089:9592: hairline border instead of a shadow */
  border: 1px solid rgba(9, 8, 8, 0.1);
  /* Figma mobile card: 16px top, 20px sides */
  padding: 16px 20px 20px;
  margin-bottom: 16px;
}

.outlet-row__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.outlet-row__name {
  /* Mobile: small enough for the badge to sit beside it (Figma) */
  font-size: 17px;
  /* Figma: semibold */
  font-weight: 600;
  line-height: 1.3;
}

/* Figma 12089:9597: #EEF1FB pill, 12px/500 */
.outlet-row__badge {
  background-color: #eef1fb;
  border-radius: 30px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--text-color);
}

.outlet-row__address {
  /* Figma: 15px/24 muted */
  font-size: 15px;
  line-height: 24px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.outlet-row__info {
  display: grid;
  gap: 6px;
  /* Figma: 15px medium ink rows */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.outlet-row__info li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.outlet-row__info svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-color);
}

.outlet-row__info a:hover {
  color: var(--primary-color);
}

/* Stacked action buttons, both 48px with a 12px radius (Figma 217x48) */
.outlet-row__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

/* Figma 12089:9686: 48px buttons, 12px radius, 16px bold labels */
.outlet-row__actions .btn {
  height: 48px;
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

.outlet-row__actions .btn--outline {
  flex: 0 0 auto;
}
/* ==========================================================================
   22. OUTLETS PAGE — END
   ========================================================================== */

/* ==========================================================================
   23. CAREERS PAGE (careers/careers.html) — START
   ========================================================================== */
.careers {
  padding-block: 40px 56px;
}

/* Hero */
.careers__hero-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 50px;
}

/* Photo collage.
   Mobile: a CSS-only swipe carousel (280x211 slides, scroll-snap).
   Desktop (media.css): one large photo + two stacked (Figma: 685/494). */
.careers-collage {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Keeps the snapped slide aligned to the container edge, not the viewport */
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  /* Swipes edge-to-edge while the first slide stays container-aligned
     (the container's mobile padding is 1rem) */
  margin-inline: -16px;
  padding-inline: 16px;
}

.careers-collage::-webkit-scrollbar {
  display: none;
}

/* The stacked pair flattens so all three photos are slides */
.careers-collage__side {
  display: contents;
}

.careers-collage img {
  width: 280px;
  height: 211px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 16px;
  scroll-snap-align: start;
}

/* Current openings */
.careers-openings {
  margin-top: 56px;
}

.careers__title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 15px;
}

.careers__sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
}

/* Jobs list — 931px column centered, like the Figma */
.careers-jobs {
  max-width: 931px;
  margin-inline: auto;
}

.careers-jobs__count {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Job row card */
.job-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--white);
  border-radius: 16px;
  /* Figma: hairline border, no shadow */
  border: 1px solid rgba(9, 8, 8, 0.1);
  /* Figma mobile card: 16px top, 20px sides */
  padding: 16px 20px 20px;
  margin-bottom: 8px;
}

.job-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 6px;
}

.job-card__desc {
  /* Figma: 15px / 24px */
  font-size: 15px;
  line-height: 24px;
  color: rgba(9, 8, 8, 0.7);
  margin-bottom: 6px;
}

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  /* Figma: 15px / 24px medium */
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-color);
}

.job-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.job-card__meta svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.job-card__cta {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  padding: 10px 40px;
  /* Figma: bold Apply label */
  font-weight: 700;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 50px;
}

/* Inside the cards wrapper the flex gap (32px) provides the spacing */
.used-grid-wrapper .pagination {
  margin-top: 0;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination__item:hover {
  color: var(--primary-color);
}

.pagination__item.is-active {
  background-color: var(--text-color);
  color: var(--text-invert);
}

.pagination__item--next {
  width: 70px;
  border-radius: 20px;
}

/* ---- Apply modal (Figma 12271-27245) ---- */
body.modal-open {
  overflow: hidden;
}

.career-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Full screen on mobile; a centered card from tablet up (media.css) */
  padding: 0;
}

.career-modal[hidden] {
  display: none;
}

.career-modal__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 8, 8, 0.5);
}

.career-modal__card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: var(--white);
  border-radius: 0;
  /* Figma: soft 0 6px 5px drop shadow */
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.05);
  padding: 48px 20px 24px;
}

.career-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-color);
}

.career-modal__title {
  /* Figma: 24/26.4 */
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.career-modal__sub {
  /* Figma: 15/24 at 70% */
  font-size: 15px;
  line-height: 24px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.career-form {
  display: grid;
  /* minmax(0,1fr) pins the column to the card width so a long
     file name can never blow the track (and the modal) wider */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.career-form > *,
.career-upload {
  min-width: 0;
}

.career-field {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background-color: #f2f4f6;
  font: inherit;
  /* Figma: 15px, semibold once filled */
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.career-field::placeholder {
  /* Figma: 15px regular at 50% */
  font-weight: 400;
  color: var(--text-light);
}

/* Description textarea: same 52px box as the other fields, with the
   14px block padding centering the single-line placeholder */
.career-field--textarea {
  height: 52px;
  padding-block: 14px;
  line-height: 24px;
}

.career-field:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 97, 172, 0.15);
}

/* Upload field: placeholder text left, dashed Upload link right */
.career-field--upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.career-upload__text {
  /* min-width:0 lets the flex item shrink so a long file name
     truncates with an ellipsis instead of stretching the modal */
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  color: var(--text-light);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.career-upload__text.is-filled {
  font-weight: 600;
  color: var(--text-color);
}

.career-upload__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* Figma: 10/16 with a solid-dark dashed underline */
  font-size: 10px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-color);
  border-bottom: 1px dashed var(--text-color);
  padding: 2px 0 4px;
}

.career-upload__hint {
  /* Figma: 12px at 50%, inset 20px from the field edge */
  font-size: 12px;
  color: var(--text-light);
  text-align: right;
  padding-right: 20px;
  margin-top: 2px;
}

.career-form__submit {
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
}

/* ==========================================================================
   23. CAREERS PAGE — END
   ========================================================================== */

/* ==========================================================================
   FORM VALIDATION / ERROR MESSAGES
   Restored from previous global.css
   ========================================================================== */
.service-form .field {
  margin-bottom: 0;
}

.service-form .has-error .form-control,
.service-form .has-error select,
.service-form .has-error textarea {
  border-color: #d94a1f;
  box-shadow: 0 0 0 3px rgba(217, 74, 31, 0.15);
}

.service-form .help-block {
  margin-top: 4px;
  color: var(--accent-color);
  font-size: 14px;
}


/* ==========================================================================
   MODEL GALLERY MODAL
   Preserved from previous global.css
   ========================================================================== */
body.is-modal-open {
  overflow: hidden;
}

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(6, 10, 16, 0.84);
}

.gallery-modal[hidden] {
  display: none;
}

.gallery-modal__content {
  position: relative;
  width: min(920px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-modal__image {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 24px;
  background-color: var(--white);
}

.gallery-modal__close,
.gallery-modal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--text-color);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.gallery-modal__close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 44px;
  height: 44px;
}

.gallery-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-invert);
  padding-inline: 4px;
}

.gallery-modal__counter {
  font-size: 15.2px;
  font-weight: 600;
}

.gallery-modal__controls {
  display: flex;
  gap: 12px;
}

.gallery-modal__nav {
  width: 44px;
  height: 44px;
}

.model-gallery__image {
  cursor: zoom-in;
}

.media-pill {
  border: 0;
  cursor: pointer;
}

.model-title-card__cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.model-title-card__best-offers {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}