/* ============================================================
   JIUZHOU MOTORCYCLES — shared stylesheet
   Design v2: "showroom dossier" — near-black showroom floor,
   deep green record panels, vivid red for action, blue for tags.
   ============================================================ */

:root{
  color-scheme: light only;
  --bg:#E8F5E9;
  --bg-soft:#E8F5E9;
  --panel:#FFFFFF;
  --panel-2:#E8F5E9;
  --line:#E3DCC5;
  --cream:#1C1B16;
  --muted:#6E6A57;
  --red:#C1402E;
  --red-dark:#9F3324;
  --blue:#0B1849;
  --green:#1e6803;
  --green-soft:#E8EFE9;
  --black:#0e0d0a;
  --ink:#1C1B16;
  --radius:6px;
--wrap:1560px;
}

/* ---------- brand section (green) ---------- */
.brand-section{
  background:var(--green);
  color:#fff;
  --bg:var(--green);
  --bg-soft:#063001;
  --panel:#22610b;
  --panel-2:#1B9A54;
  --line:rgba(255,255,255,0.2);
  --cream:#FFFFFF;
  --muted:rgba(255,255,255,0.7);
}
.brand-section h1, .brand-section h2, .brand-section h3,
.brand-section h4, .brand-section h5{color:#fff;}
.brand-section .btn-outline{border-color:#fff; color:#fff;}
.brand-section .btn-outline:hover{background:rgba(255,255,255,0.15);}
.brand-section .hero-note, .brand-section .hero-note svg{color:#fff;}
.brand-section .testi-quote-mark{color:rgba(255,255,255,0.2);}

/* ---------- dark section utility ---------- */
.dark-section{
  background:var(--black);
  color:#fff;
  --bg:#0F0F0F;
  --bg-soft:#1A1A1A;
  --panel:#1A1A1A;
  --panel-2:#202020;
  --line:rgba(255,255,255,0.14);
  --cream:#FFFFFF;
  --muted:rgba(255,255,255,0.62);
}
.dark-section h1, .dark-section h2, .dark-section h3,
.dark-section h4, .dark-section h5{color:#fff;}
.dark-section .btn-outline{border-color:#fff; color:#fff;}
.dark-section .btn-outline:hover{background:rgba(255,255,255,0.12);}
.dark-section .hero-note, .dark-section .hero-note svg{color:#fff;}
.dark-section .testi-quote-mark{color:rgba(255,255,255,0.15);}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--bg);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1000; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{
  position:fixed; top:0; left:0; height:1px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--green), var(--red)); transition:width .1s linear;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}

h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.015em;
  line-height:1.4;
  font-weight:200;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--red);
  position:relative;
  padding-left:20px;
}
.eyebrow::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:13px; height:3px; background:var(--red); border-radius:2px;
}

.logo-word{font-family:'Bebas Neue', sans-serif; line-height:1; letter-spacing:0.1em;}
.logo-word-main{font-size:25px; color:#fff; margin-right:2px;}
.logo-word-sub{font-size:13px; color:rgba(255,255,255,0.75); font-weight:400;}

/* ---------- utility bar ---------- */
.utility-bar{
  background:var(--black); color:var(--bg); overflow:hidden;
  max-height:36px; transition:max-height .3s ease, opacity .3s ease;
  border-top:4px solid var(--red);
}
.utility-bar-inner{
  display:flex; justify-content:space-between; align-items:center; padding:8px 0;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.03em;
}
.utility-bar a{color:var(--bg);}
.utility-bar .u-links{display:flex; gap:24px;}
.utility-bar .u-links span{opacity:0.75;}
header.scrolled .utility-bar{max-height:0; opacity:0;}
@media (max-width:700px){.utility-bar .u-hide-mobile{display:none;}}

.stats{border-bottom:4px solid var(--black);}
.section-head h2{position:relative; padding-left:18px;}
.section-head h2::before{
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:5px;
  background:var(--black);
}
.testi-slide:nth-of-type(2) .testi-avatar{background:var(--red);}
.testi-slide:nth-of-type(3) .testi-avatar{background:var(--black);}
/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--green); color:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.12);
  transition:box-shadow .3s ease, padding .3s ease;
}
.nav-inner{padding:20px 28px;}
header.scrolled{
  box-shadow:0 8px 24px -16px rgba(0,0,0,0.35);
}
header.scrolled .nav-inner{padding:12px 28px;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; line-height:1;}
.logo-img{width:130px; height:80px; object-fit:cover; object-position:left center; display:block; flex-shrink:0; transition:width .3s ease, height .3s ease;}
@media (max-width:820px){
  .logo-img{width:70px; height:44px;}
  .nav-inner{padding:12px 20px;}
}
/* header.scrolled .logo-img{width:82px; height:26px;}
@media (max-width:700px){
  .logo-img,
  header.scrolled .logo-img{
    width:100px !important;
    height:32px !important;
  }
} */
.logo .sub{font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:0.14em; color:var(--muted); max-width:130px; line-height:1.35; flex-shrink:0;}
@media (max-width:560px){.logo .sub{display:none;}}
nav.main-nav ul{display:flex; gap:34px;}
nav.main-nav a{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:#fff; position:relative; padding:4px 0;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red);
  transition:width .25s ease;
  background-color: #0B1849;
}
nav.main-nav a:hover::after, nav.main-nav a.current::after{width:100%;}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.05em;
  text-transform:uppercase; font-weight:600; padding:8px 10px; border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.btn-red{background:var(--red-dark); color:#fff; box-shadow:0 6px 16px -8px rgba(193,64,46,0.5);}
.btn-red:hover{background:var(--red);}
.btn-outline{border:1.5px solid var(--green); color:var(--green);}
.btn-outline:hover{background:var(--green-soft);}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}


@media (max-width:900px){
  nav.main-nav{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--green);
    padding: 100px 32px 32px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 99;
    border-left: 1px solid var(--line);
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column; gap:6px;}
  nav.main-nav ul li a{display:block; padding:14px 0; border-bottom:1px solid var(--line);}
 .menu-toggle{
    display: block;
    margin-left: auto;   /* Pushes it to the far right */
    z-index: 101;
  }  .nav-actions {display:none;}
}

/* ---------- marquee ticker ---------- */
.ticker{
  background:var(--green); color:#fff; overflow:hidden; white-space:nowrap;
  border-top:1px solid rgba(0,0,0,0.15); border-bottom:1px solid rgba(0,0,0,0.15);
}
.ticker-track{
  display:inline-flex; gap:40px; padding:5px 0; animation:scrollTicker 26s linear infinite;
}
@media (max-width:820px){
  .ticker-track span{font-size:10px;}
  .ticker-track{padding:6px 0;}
}
.ticker-track span{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
}
@keyframes scrollTicker{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:90px 0 30px;
  min-height:680px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(100deg, rgba(15,14,10,0.82) 0%, rgba(15,14,10,0.5) 5%, rgba(15,14,10,0.2) 10%),
    url("../images/offer.webp") center 42% / cover no-repeat,
    var(--black);
}

@media (max-width:820px){
  .hero{
    padding:100px 16px 32px;
    min-height:0;
    height:auto;
    display:flex;
    align-items:flex-end;
    background:
      linear-gradient(100deg, rgba(15,14,10,0.82) 0%, rgba(15,14,10,0.5) 5%, rgba(15,14,10,0.2) 5%),
      url("../images/offer.webp") center 25% / cover no-repeat,
            var(--black);
  }
  .hero-copy{gap:10px;}
  .hero h1{font-size:clamp(24px,6.5vw,34px); color:#fff;}
  .hero-ctas{gap:10px;}
  .hero-ctas .btn{padding:10px 16px; font-size:11px;}
}

.hero-inner{
  position:relative; z-index:2;
}
.hero-copy{
  max-width:700px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; gap:16px;
}
.hero h1{font-size:clamp(40px,5.6vw,68px); color:#fff; text-transform:uppercase; line-height:1.05;}
.hero h1 em{font-style:normal; color:var(--red); position:relative; display:inline-block;}
.hero p.lede{font-size:16.5px; color:rgba(255,255,255,0.85); max-width:48ch; margin:20px 0 30px;}

.hero-ctas{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center; position:relative;
}
.btn-loan{
  display:inline-flex; margin:6px auto 0;
  background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(4px);
  font-size:14px; padding:16px 30px;
  
}
.btn-loan:hover{background:var(--red-dark); transform:translateY(-2px);}
@media (max-width:480px){
  .btn-loan{font-size:12.5px; padding:14px 22px;}
}
.hero-note{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; letter-spacing:0.04em;
  color:#fff; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22);
  padding:9px 14px; border-radius:999px;
}
.hero-note svg{width:15px; height:15px; color:var(--red);}
@media (max-width:640px){.hero-note{display:none;}}

@media (max-width:900px){
  .hero-copy{max-width:100%; padding:0 16px;}
}


/* ---------- locations carousel ---------- */
/* .loc-arrows{display:flex; gap:10px;}
.loc-arrow{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--panel); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.loc-arrow:hover{border-color:var(--red); background:var(--green-soft);}
.loc-arrow svg{width:18px; height:18px;}

.loc-carousel{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.loc-carousel::-webkit-scrollbar{display:none;}
.loc-card{
  position:relative; flex:0 0 auto; width:320px; height:220px;
  border-radius:14px; overflow:hidden; scroll-snap-align:start;
}
.loc-card img{width:100%; height:100%; object-fit:cover; display:block;}
.loc-tag{
  position:absolute; bottom:14px; left:14px; background:rgba(15,14,10,0.7); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.04em;
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(4px);
}
@media (max-width:640px){
  .loc-card{width:260px; height:180px;}
} */





/* =========================
   LOCATION CAROUSEL
========================= */

.loc-carousel-wrap {
  position: relative;
  width: 100%;
}

.loc-carousel {
  display: flex;
  gap: 18px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 5px 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.loc-carousel::-webkit-scrollbar {
  display: none;
}

.loc-card {
  position: relative;
  flex: 0 0 440px;
  width: 440px;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #111;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.loc-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.loc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.70),
    rgba(0,0,0,0.10) 60%,
    transparent
  );
  pointer-events: none;
}

.loc-tag {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 2;

  background: rgba(43, 41, 33, 0.78);
  color: #fff;

  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;

  padding: 8px 13px;
  border-radius: 999px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,0.12);
}


/* =========================
   ARROWS
========================= */

.loc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 42px;
  height: 42px;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);

  background: rgba(15,14,10,0.72);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: all 0.25s ease;
}

.loc-arrow svg {
  width: 18px;
  height: 18px;
}

.loc-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.05);
}

.loc-arrow-left {
  left: 10px;
}

.loc-arrow-right {
  right: 10px;
}


/* =========================
   LAPTOP
========================= */

@media (max-width: 1399px) and (min-width: 1101px) {
  .loc-card {
    flex-basis: 420px;
    width: 420px;
    height: 265px;
  }
}


/* =========================
   TABLET / SMALL LAPTOP
========================= */

@media (max-width: 1100px) and (min-width: 641px) {
  .loc-card {
    flex-basis: 380px;
    width: 380px;
    height: 245px;
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

  .loc-carousel {
    gap: 14px;
  }

  .loc-card {
    flex-basis: 290px;
    width: 290px;
    height: 195px;
    border-radius: 14px;
  }

  .loc-tag {
    left: 12px;
    bottom: 12px;
    font-size: 10px;
    padding: 7px 11px;
  }

  .loc-arrow {
    width: 38px;
    height: 38px;
  }

  .loc-arrow svg {
    width: 16px;
    height: 16px;
  }

  .loc-arrow-left {
    left: 7px;
  }

  .loc-arrow-right {
    right: 7px;
  }
}


/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 400px) {
  .loc-card {
    flex-basis: 270px;
    width: 270px;
    height: 180px;
  }
}


/* =========================================================
   LOCATIONS CAROUSEL
   ========================================================= */

.loc-carousel-wrap {
  position: relative;
  width: 100%;
}


/* Carousel */

.loc-carousel {
  display: flex;
  gap: 24px;

  width: 100%;
  overflow-x: auto;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 10px 5px 22px;

  scrollbar-width: none;
  -ms-overflow-style: none;

  user-select: none;
  -webkit-user-select: none;
}

.loc-carousel::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   LOCATION CARD
   ========================================================= */

.loc-card {
  position: relative;

  flex: 0 0 680px;
  width: 680px;
  height: 430px;

  border-radius: 22px;
  overflow: hidden;

  scroll-snap-align: start;

  background: #111;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.loc-card img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;

  transition: transform 0.7s ease;
}


/* Image overlay */

.loc-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.25) 42%,
    rgba(0, 0, 0, 0.02) 75%
  );

  pointer-events: none;
}


/* Hover */

.loc-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.20);
}

.loc-card:hover img {
  transform: scale(1.05);
}


/* =========================================================
   LOCATION LABEL
   ========================================================= */

.loc-tag {
  position: absolute;

  left: 22px;
  bottom: 22px;

  z-index: 2;

  background: rgba(61, 61, 59, 0.82);
  color: #fff;

  font-family: 'IBM Plex Mono', monospace;

  font-size: 14px;
  font-weight: 600;

  letter-spacing: 0.04em;

  padding: 10px 17px;

  border-radius: 999px;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.14);
}


/* =========================================================
   LEFT / RIGHT CAROUSEL BUTTONS
   ========================================================= */

.loc-arrow {
  position: absolute;

  top: 50%;
  transform: translateY(-50%);

  z-index: 10;

  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(15, 14, 10, 0.72);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.loc-arrow svg {
  width: 21px;
  height: 21px;
}

.loc-arrow:hover {
  background: var(--red);
  border-color: var(--red);

  transform: translateY(-50%) scale(1.08);
}


/* Button positions */

.loc-arrow-left {
  left: 18px;
}

.loc-arrow-right {
  right: 18px;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1399px) and (min-width: 1101px) {

  .loc-card {
    flex-basis: 600px;
    width: 600px;
    height: 380px;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) and (min-width: 901px) {

  .loc-card {
    flex-basis: 500px;
    width: 500px;
    height: 330px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 641px) {

  .loc-card {
    flex-basis: 460px;
    width: 460px;
    height: 305px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .loc-carousel {
    gap: 16px;
  }

  .loc-card {
    flex-basis: 310px;
    width: 310px;
    height: 210px;

    border-radius: 16px;
  }

  .loc-tag {
    left: 14px;
    bottom: 14px;

    font-size: 11px;
    padding: 8px 13px;
  }

  .loc-arrow {
    width: 40px;
    height: 40px;
  }

  .loc-arrow svg {
    width: 17px;
    height: 17px;
  }

  .loc-arrow-left {
    left: 8px;
  }

  .loc-arrow-right {
    right: 8px;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

  .loc-card {
    flex-basis: 285px;
    width: 285px;
    height: 195px;
  }

}


/* ---------- stats ---------- */
.stats{background:var(--green); border-top:3px solid var(--red);}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.stat{padding:40px 26px; border-left:1px solid rgba(255,255,255,0.14); text-align:left;}
.stat:first-child{border-left:none;}
.stat .num{font-family:'Bebas Neue',sans-serif; font-size:48px; color:#fff; display:block;}
.stat .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.65);}
@media (max-width:860px){.stats .wrap{grid-template-columns:1fr 1fr;} .stat:nth-child(3){border-left:none;} }
@media (max-width:560px){.stats .wrap{grid-template-columns:1fr;} .stat{border-left:none !important; border-top:1px solid rgba(255,255,255,0.14);} .stat:first-child{border-top:none;}}

/* ---------- section pattern ---------- */
.section{padding:100px 0;}
.section-head{display:flex; justify-content:space-between; align-items:stretch; gap:24px; margin-bottom:52px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(34px,5vw,54px); text-transform:uppercase; color:var(--cream);}
.section-head p{max-width:44ch; color:var(--muted); font-size:15px; margin-top:14px;}


/* ---------- lineup loan callout ---------- */
.lineup-side{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:16px;
  min-width:260px;width: 60%;
}
.lineup-loan-card{
  display:flex; flex-direction:column; align-items:stretch; text-align:center; gap:4px;
  background:linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius:14px; padding:18px 24px; width:100%;
  box-shadow:0 16px 30px -14px rgba(193,64,46,0.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lineup-loan-card:hover{transform:translateY(-4px); box-shadow:0 22px 40px -14px rgba(193,64,46,0.6);}
.llc-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.8);
}
.llc-big{
  font-family:'Bebas Neue',sans-serif; font-size:36px; color:#fff; line-height:1; letter-spacing:0.01em;
}
.llc-big em{font-style:normal; color:#ffd166;}
.llc-sub{font-size:16.5px; color:rgba(255,255,255,0.85);}

@media (max-width:860px){
  .section-head{align-items:flex-start;}
  .lineup-side{width:100%; align-items:stretch;}
  .lineup-loan-card{align-items:center; text-align:center;}
  .llc-big{font-size:30px;}
}
@media (max-width:480px){
  .llc-big{font-size:26px;}
  .lineup-loan-card{padding:16px 18px;}
}

/* ---------- features ---------- */
.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.feature{
  background:var(--panel); padding:34px 26px; border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature:nth-child(1){transform:rotate(-0.6deg);}
.feature:nth-child(2){transform:rotate(0.5deg) translateY(10px);}
.feature:nth-child(3){transform:rotate(-0.4deg) translateY(-4px);}
.feature:nth-child(4){transform:rotate(0.7deg) translateY(6px);}
.feature:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 18px 32px -22px rgba(28,27,22,0.28); border-color:var(--green);}
.feature .ic{width:34px; height:34px; color:var(--green); margin-bottom:18px;}
.feature h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; text-transform:none; margin-bottom:8px;}
.feature p{font-size:13.5px; color:var(--muted);}
@media (max-width:860px){.features-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.features-grid{grid-template-columns:1fr;}}

/* ---------- services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.service-card{
  background:var(--panel); border-radius:var(--radius); padding:30px 24px; position:relative;
  border:1px solid var(--line); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-card:nth-child(odd){transform:translateY(-6px);}
.service-card:hover{transform:translateY(-12px); border-color:var(--red); box-shadow:0 18px 32px -22px rgba(28,27,22,0.28);}
.service-card .idx{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--red); display:block; margin-bottom:16px;}
.service-card h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; text-transform:none; margin-bottom:10px;}
.service-card p{font-size:13.5px; color:var(--muted);}
@media (max-width:900px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr;}}

/* ---------- financing banner ---------- */
.financing{
  background:var(--green); color:var(--bg);
  border-radius:var(--radius);
  padding:48px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.financing-left{align-items:center;}
.financing-left .btn-red{align-self:center;}
.financing-left, .financing-right{display:flex; flex-direction:column;}
.financing h3{font-size:clamp(26px,3.4vw,36px); text-transform:uppercase; margin-bottom:14px; color:#fff;}
.financing-left p{color:rgba(244,240,224,0.75); font-size:14.5px; max-width:46ch; margin-bottom:22px;}
.financing-left .btn-red{align-self:flex-start;}

.partner-heading{
  font-family:'Bebas Neue',sans-serif; font-size:22px; text-transform:uppercase; color:#fff;
  letter-spacing:0.01em; margin-bottom:18px;
}
.partner-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){
  .partner-row{grid-template-columns:1fr;}
}
.partner-logo{
  border-radius:8px; height:72px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.partner-logo img{width:100%; height:100%; object-fit:cover; display:block;}

.financing-prices{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px;}
.fin-price-card{
  position:relative; overflow:hidden;
  background:#fff; color:var(--ink); border-radius:14px; padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 16px 30px -14px rgba(0,0,0,0.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fin-price-card:nth-child(1){transform:rotate(-1.2deg);}
.fin-price-card:nth-child(2){transform:rotate(1.2deg);}
.fin-price-card:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 22px 40px -16px rgba(0,0,0,0.5);}
.fin-price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--red);
}
.fp-icon{
  width:46px; height:46px; color:#fff; background:var(--green); border-radius:12px;
  display:flex; align-items:center; justify-content:center; padding:10px; margin-bottom:10px;
}
.fp-icon svg{width:100%; height:100%;}
.fp-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.fp-amount{font-family:'Bebas Neue',sans-serif; font-size:30px; color:var(--green); margin-top:2px; line-height:1;}
.fp-note{font-size:12.5px; color:var(--muted); margin-top:4px;}

@media (max-width:860px){
  .financing{grid-template-columns:1fr;}
  .financing-right{margin-top:8px;}
}
@media (max-width:560px){
  .financing-prices{grid-template-columns:1fr;}
  .fin-price-card:nth-child(1),.fin-price-card:nth-child(2){transform:none;}
}

.testi-slide:nth-of-type(2) .testi-avatar{background:var(--red);}
.testi-slide:nth-of-type(3) .testi-avatar{background:#fff; color:var(--black);}

/* ---------- featured bikes (home preview) ---------- */
.bike-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.bike-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.bike-grid{grid-template-columns:1fr;}}

.bike-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .12s ease, box-shadow .3s ease, border-color .3s ease;
  cursor:pointer; transform-style:preserve-3d; will-change:transform;
}
.bike-card:hover{box-shadow:0 26px 40px -22px rgba(28,27,22,0.28); border-color:var(--line);}
.bike-media{
  background:linear-gradient(140deg, var(--bg-soft), var(--bg-soft));
  height:250px; display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden;
}
.bike-media img{width:100%; height:100%; object-fit:cover;}

/* the zoom/contain trick only applies to homepage featured cards with transparent cutouts */
.bike-grid .bike-media img{object-fit:contain; transform:scale(1.12); transition:transform .3s ease;}
.bike-grid .bike-card:hover .bike-media img{transform:scale(1.18);}
.bike-badge{
  position:absolute; top:12px; left:12px; background:var(--red); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px;
}
.bike-body{padding:20px 22px 22px;}
.bike-body .cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--blue); letter-spacing:0.06em;}
.bike-body{text-align:center;}
.bike-body .cat{display:block; margin-bottom:6px;}
.bike-body h3{
  font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:28px; text-transform:uppercase;
  letter-spacing:0.02em; color:var(--green); margin:4px 0 16px; line-height:1.05;
}
.bike-specs-mini{justify-content:center;}
.bike-body-footer{flex-direction:column; gap:10px;}
.bike-specs-mini{display:flex; gap:16px; margin-bottom:16px;}
.bike-specs-mini div{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);}
.bike-specs-mini strong{display:block; color:var(--cream); font-size:13px;}
.bike-body-footer{display:flex; justify-content:space-between; align-items:center;}
.price-tag{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--red); font-weight:600; text-transform:uppercase;}
.view-link{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--cream); display:flex; align-items:center; gap:6px;}
.view-link svg{width:13px; height:13px; transition:transform .2s ease;}
.bike-card:hover .view-link svg{transform:translateX(4px);}

/* ---------- testimonials ---------- */
.testimonials{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.testi-slider{position:relative; max-width:680px; margin:0 auto; min-height:200px;}
.testi-quote-mark{font-family:'Bebas Neue',sans-serif; font-size:110px; color:rgba(193,64,46,0.16); line-height:0.6; margin-bottom:-10px;}
.testi-slide{
  position:absolute; inset:0; opacity:0; transform:translateY(10px) rotate(-0.4deg); transition:opacity .5s ease, transform .5s ease; pointer-events:none;
}
.testi-slide.active{opacity:1; transform:translateY(0) rotate(0deg); pointer-events:auto; position:relative;}
.testi-slide p{font-size:20px; color:var(--cream); font-family:'Manrope',sans-serif; font-weight:500; line-height:1.55; margin-bottom:22px;}
.testi-who-row{display:flex; align-items:center; gap:12px;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif;
  font-size:15px; letter-spacing:0.02em; flex-shrink:0;
}
.testi-slide .who{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; display:block;}
.testi-slide .who strong{color:var(--cream); font-weight:600; display:block; font-family:'Manrope',sans-serif; font-size:13.5px; text-transform:none; letter-spacing:0;}
.testi-dots{display:flex; gap:8px; margin-top:34px;}
.testi-dots button{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; transition:background .2s ease, transform .2s ease;}
.testi-dots button.active{background:var(--red); transform:scale(1.3);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--red-dark); color:#fff;
  border-radius:var(--radius); padding:60px 50px; text-align:center;
}
.cta-banner h2{font-size:clamp(30px,4.6vw,48px); color:#fff; text-transform:uppercase; margin-bottom:16px;}
.cta-banner p{color:rgba(255,255,255,0.85); margin-bottom:28px;}
.cta-banner .btn-outline{border-color:#fff; color:#fff;}
.cta-banner .btn-outline:hover{background:rgba(255,255,255,0.12);}

/* ---------- contact / footer shared ---------- */
.contact{background:var(--bg-soft); border-top:1px solid var(--line);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.contact-list li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.contact-list li:first-child{padding-top:0;}
.contact-list .ic{width:20px; flex-shrink:0; color:var(--green); margin-top:3px;}
.contact-list .label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px;}
.contact-list .value{font-size:15.5px; color:var(--cream);}
.social-row{display:flex; gap:14px; margin-top:26px;}
.social-row a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background .2s ease;}
.social-row a:hover{border-color:var(--green); background:var(--green-soft);}
.social-row svg{width:16px; height:16px;}
.map-box{
  background:var(--panel-2); border:1px dashed var(--line); border-radius:var(--radius);
  min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:30px;
}
.map-box svg{width:32px; height:32px; color:var(--green);}
.map-box .m1{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
.map-box .m2{font-size:13px; color:var(--muted); max-width:32ch;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

footer{background:var(--black); color:var(--bg); padding:64px 0 0; border-top:3px solid var(--red);}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr 1fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-logo-img{height:60px; width:auto; display:block; margin-bottom:2px;}
.footer-brand p{font-size:13px; color:rgba(244,240,224,0.55); margin-top:14px; max-width:32ch; line-height:1.6;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background .2s ease;
}
.footer-social a:hover{border-color:var(--red); background:rgba(193,64,46,0.15);}
.footer-social svg{width:14px; height:14px; color:var(--bg);}
.footer-col h4{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; position:relative; padding-bottom:10px;
  color:rgba(244,240,224,0.45); margin-bottom:18px;
}
.footer-col h4{}
.footer-col h4::after{
  content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background:var(--red);
}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul li a{font-size:14px; color:rgba(244,240,224,0.85); transition:color .2s ease;}
.footer-col ul li a:hover{color:var(--red);}
.footer-col .contact-line{font-size:13.5px; color:rgba(244,240,224,0.75); display:block; margin-bottom:10px; line-height:1.5;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:22px 0;
}
.footer-bottom p{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(244,240,224,0.45);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- floating whatsapp ---------- */
.float-whatsapp{
  position:fixed; bottom:24px; right:24px; z-index:90;
  background:var(--red); color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(193,64,46,0.55);
  transition:transform .25s ease; animation:floatPulse 2.4s ease-in-out infinite;
}
.float-whatsapp:hover{transform:scale(1.08);}
.float-whatsapp svg{width:26px; height:26px;}
@keyframes floatPulse{0%,100%{box-shadow:0 10px 26px -8px rgba(193,64,46,0.55);} 50%{box-shadow:0 10px 30px -4px rgba(193,64,46,0.8);}}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; bottom:24px; right:92px; z-index:90;
  background:var(--panel); color:var(--ink); width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -12px rgba(28,27,22,0.3); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top:hover{border-color:var(--red);}
.back-to-top svg{width:18px; height:18px;}
@media (max-width:560px){.back-to-top{right:20px; bottom:84px;}}
@media (prefers-reduced-motion:reduce){.float-whatsapp{animation:none;}}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;}}

a:focus-visible, button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* ============================================================
   PRODUCTS PAGE — filter + expanding dossier detail
   ============================================================ */
.page-header{padding:150px 0 60px; background:var(--bg); border-bottom:1px solid var(--line);}
.page-header h1{font-size:clamp(40px,7vw,72px); text-transform:uppercase;}
.page-header p{color:var(--muted); max-width:50ch; margin-top:16px; font-size:15px;}

.filter-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:44px 0 40px;}
.toggle-group{display:inline-flex; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.toggle-group button{
  background:transparent; border:none; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:0.05em; text-transform:uppercase; font-weight:600; padding:12px 20px; cursor:pointer;
  color:var(--muted); transition:background .2s ease, color .2s ease;
}
.toggle-group button + button{border-left:1.5px solid var(--line);}
.toggle-group button.active{background:var(--red); color:#fff;}
.result-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);}

.catalog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-bottom:24px;}
@media (max-width:640px){.catalog-grid{grid-template-columns:1fr;}}
.catalog-card .bike-media{height:auto !important; aspect-ratio:4/3 !important;}

.dossier-row{grid-column:1/-1; display:none; margin:-6px 0 18px;}
.dossier-row.open{display:block;}

.dossier{
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; overflow:hidden; animation:dossierOpen .35s ease;
}
@keyframes dossierOpen{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
.dossier-top{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.dossier-gallery{background:var(--bg-soft); padding:20px; display:flex; flex-direction:column; gap:16px;}
.dossier-gallery-main{
  height:auto; aspect-ratio:16/11; border-radius:4px; background:linear-gradient(140deg, var(--panel), var(--bg-soft));
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line); overflow:hidden;
}
.dossier-gallery-main img{width:100%; height:100%; object-fit:cover;}
.dossier-thumbs{display:flex; gap:10px;}
.dossier-thumbs button{
  flex:1; height:90px; border-radius:4px; border:1.5px solid var(--line); background:var(--panel);
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
  overflow:hidden; padding:0;
}
.dossier-info h3{position:relative; padding-left:16px;}
.dossier-info h3::before{
  content:""; position:absolute; left:0; top:10%; bottom:10%; width:4px; background:var(--black);
}
.dossier-thumbs button.active{border-color:var(--red);}
.dossier-thumbs img{width:100%; height:100%; object-fit:cover;}
.dossier-info{padding:30px 34px;}
.dossier-info .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--blue); letter-spacing:0.06em;}
.dossier-info h3{font-family:'Bebas Neue',sans-serif; font-size:34px; text-transform:uppercase; margin:8px 0 14px;}
.dossier-info p.desc{color:var(--muted); font-size:14px; margin-bottom:20px;}
.dossier-tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:18px;}
.dossier-tabs button{
  background:none; border:none; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); padding:10px 16px 10px 0; margin-right:16px; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.dossier-tabs button.active{color:var(--cream); border-color:var(--red);}
.dossier-pane{display:none;}
.dossier-pane.active{display:block;}
.spec-table{width:100%; border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:9px 0; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted);}
.spec-table td:last-child{text-align:right; color:var(--cream); font-weight:600;}
.dossier-footer{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}
.dossier-close{
  position:absolute; top:16px; right:16px; background:var(--panel); border:1px solid var(--line);
  color:var(--cream); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.dossier-close:hover{background:var(--black); color:#fff; border-color:var(--black);}
.dossier{position:relative;}
@media (max-width:780px){.dossier-top{grid-template-columns:1fr;}}

/* ---------- standard features (homepage condensed) ---------- */
.standard-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.standard-item{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.standard-item:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:0 16px 28px -20px rgba(28,27,22,0.28);}
.standard-item .idx{color:var(--red); display:block; margin-bottom:10px;}
.standard-item h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:6px;}
.standard-item p{font-size:12.5px; color:var(--muted); line-height:1.55;}
@media (max-width:900px){.standard-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.standard-grid{grid-template-columns:1fr;}}

/* ---------- feature table (products page, full 16-point list) ---------- */
.feature-table{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.ft-row{
  display:flex; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.ft-row:nth-child(odd){border-right:1px solid var(--line);}
.ft-num{color:var(--red); font-size:12px; flex-shrink:0; padding-top:2px;}
.ft-row h5{font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; margin-bottom:4px;}
.ft-row p{font-size:12.5px; color:var(--muted); line-height:1.5;}
@media (max-width:780px){
  .feature-table{grid-template-columns:1fr;}
  .ft-row:nth-child(odd){border-right:none;}
}

.bike-body h3{position:relative; display:inline-block;}
.bike-card:hover .bike-body h3::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px; background:var(--red);
}

/* ---------- showroom gallery ---------- */
.showroom-grid{
  display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:440px;
}
.showroom-grid .sr-main{grid-row:1/3; border-radius:var(--radius); overflow:hidden; position:relative;}
.showroom-grid .sr-a, .showroom-grid .sr-b{border-radius:var(--radius); overflow:hidden; position:relative;}
.showroom-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.showroom-grid > div:hover img{transform:scale(1.05);}
.sr-tag{
  position:absolute; bottom:14px; left:14px; background:rgba(21,20,15,0.65); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:3px; backdrop-filter:blur(4px);
}
@media (max-width:780px){
  .showroom-grid{grid-template-columns:1fr; grid-template-rows:220px 160px 160px; height:auto;}
  .showroom-grid .sr-main{grid-row:auto;}
}

/* ---------- magnifier lens (hover zoom on desktop) ---------- */
.mag-lens{
  position:fixed;
  width:170px; height:170px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 12px 34px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08);
  pointer-events:none;
  z-index:250;
  display:none;
  background-repeat:no-repeat;
}
.mag-lens.show{display:block;}
.dossier-gallery-main{cursor:zoom-in;}
@media (hover:none){.mag-lens{display:none !important;}}

/* ---------- image lightbox / zoom ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(15,15,15,0.94); z-index:300;
  display:none; align-items:center; justify-content:center; padding:24px;
  cursor:zoom-out;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:92vw; max-height:88vh; object-fit:contain; cursor:zoom-in;
  transition:transform .25s ease; transform:scale(1);
  touch-action:pinch-zoom;
}
.lightbox img.zoomed{transform:scale(2.2); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); color:#fff;
  font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.dossier-gallery-main{cursor:zoom-in;}

/* ---------- interested-in CTA panel (dossier) ---------- */
.interest-panel{
  background:var(--green-soft); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius);
  padding:22px 24px; margin-top:22px;
}
.interest-panel .eyebrow{color:var(--green);}
.interest-panel h4{
  font-family:'Bebas Neue',sans-serif; font-size:22px; text-transform:uppercase; margin:6px 0 4px; letter-spacing:0.01em;
}
.interest-panel p{font-size:13px; color:var(--muted); margin-bottom:16px;}

/* ---------- shared standard-features grid ---------- */
.std-features-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:44px;
}
.std-feature{background:var(--panel); padding:20px 22px; display:flex; gap:14px;}
.std-feature .sf-num{
  font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--red); flex-shrink:0; width:28px;
}
.std-feature h5{font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:4px;}
.std-feature p{font-size:12.5px; color:var(--muted); line-height:1.5;}
@media (max-width:780px){.std-features-grid{grid-template-columns:1fr;}}

.catalog-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:transform .12s ease, border-color .3s ease, box-shadow .3s ease;
  will-change:transform;
}
.catalog-card:hover{border-color:var(--red); box-shadow:0 20px 34px -22px rgba(28,27,22,0.25);}
.catalog-card.selected{border-color:var(--red);}


.scroll-hint{
  position:fixed; bottom:24px; right:158px; z-index:90;
  background:var(--panel); color:var(--green); width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -12px rgba(0,0,0,0.3); cursor:pointer;
  animation:bounceHint 1.8s ease-in-out infinite;
  transition:opacity .25s ease;
}
.scroll-hint svg{width:18px; height:18px;}
.scroll-hint.hide{opacity:0; pointer-events:none;}
@keyframes bounceHint{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}
@media (max-width:560px){.scroll-hint{right:20px; bottom:140px;}}


/* ---------- red section variant ---------- */
.red-section{
  background:var(--red);
  color:#fff;
  --bg:var(--red);
  --bg-soft:var(--red-dark);
  --panel:var(--red-dark);
  --panel-2:#8F1919;
  --line:rgba(255,255,255,0.2);
  --cream:#FFFFFF;
  --muted:rgba(255,255,255,0.75);
}
.red-section h1, .red-section h2, .red-section h3,
.red-section h4, .red-section h5{color:#fff;}
.red-section .standard-item .idx,
.red-section .ft-num{color:#fff;}
.red-section .standard-item:hover,
.red-section .ft-row:hover{border-color:#fff;}

.black-section{
  background:var(--green);
  color:#fff;
  --bg:var(--green);
  --bg-soft:#5a1c1c;
  --panel:#0c3001;
  --panel-2:#222222;
  --line:rgba(255,255,255,0.14);
  --cream:#FFFFFF;
  --muted:rgba(255,255,255,0.65);
}
.black-section h1, .black-section h2, .black-section h3,
.black-section h4, .black-section h5{color:#fff;}
.black-section .standard-item{border-left:4px solid var(--red);}
.black-section .standard-item .idx{color:var(--red);}
.black-section .standard-item:hover{border-color:var(--red);}


.financing-prices{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px;}
.fin-price-card{
  position:relative; overflow:hidden;
  background:#fff; color:var(--ink); border-radius:14px; padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 16px 30px -14px rgba(0,0,0,0.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fin-price-card:nth-child(1){transform:rotate(-1.2deg);}
.fin-price-card:nth-child(2){transform:rotate(1.2deg);}
.fin-price-card:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 22px 40px -16px rgba(0,0,0,0.5);}
.fin-price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--red);
}
.fp-icon{
  width:46px; height:46px; color:#fff; background:var(--green); border-radius:12px;
  display:flex; align-items:center; justify-content:center; padding:10px; margin-bottom:10px;
}
.fp-icon svg{width:100%; height:100%;}
.fp-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.fp-amount{font-family:'Bebas Neue',sans-serif; font-size:30px; color:var(--green); margin-top:2px; line-height:1;}
.fp-note{font-size:12.5px; color:var(--muted); margin-top:4px;}
@media (max-width:560px){
  .financing-prices{grid-template-columns:1fr;}
  .fin-price-card:nth-child(1),.fin-price-card:nth-child(2){transform:none;}
}


/* FORCE LOCATION CAROUSEL SIZE */

.loc-carousel .loc-card {
    flex: 0 0 400px !important;
    width: 400px !important;
    height: 255px !important;
}

/* Laptop */
@media (max-width: 1399px) and (min-width: 1101px) {
    .loc-carousel .loc-card {
        flex-basis: 380px !important;
        width: 380px !important;
        height: 240px !important;
    }
}

/* Tablet */
@media (max-width: 1100px) and (min-width: 641px) {
    .loc-carousel .loc-card {
        flex-basis: 350px !important;
        width: 350px !important;
        height: 225px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .loc-carousel .loc-card {
        flex-basis: 290px !important;
        width: 290px !important;
        height: 195px !important;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .loc-carousel .loc-card {
        flex-basis: 270px !important;
        width: 270px !important;
        height: 180px !important;
    }
}