/* =========================================================================
   RIVERIE RENTAL — design system
   Clean / bright / premium. White canvas, faceted purple→blue gradient.
   ========================================================================= */

:root{
  --ink:#0E0E14;
  --ink-soft:#2B2B38;
  --muted:#6A6A78;
  --white:#ffffff;
  --canvas:#F6F5FB;       /* faint lilac-grey section wash */
  --canvas-2:#EFEDF8;
  --line:#E7E5F0;         /* hairline */

  --magenta:#9E1FCE;
  --violet:#5B2EE0;
  --blue:#2137E2;
  --blue-deep:#1B2BB0;

  --grad: linear-gradient(118deg,#9E1FCE 0%,#6A2BDD 45%,#2137E2 100%);
  --grad-soft: linear-gradient(118deg,rgba(158,31,206,.12),rgba(33,55,226,.12));

  --shadow-sm: 0 2px 10px rgba(20,16,48,.06);
  --shadow-md: 0 18px 50px -20px rgba(40,24,120,.30);
  --shadow-lg: 0 40px 90px -30px rgba(40,24,120,.45);

  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --maxw:1240px;
  --pad: clamp(20px,5vw,64px);

  --ff-display:'Sora',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-mono:'Space Mono','JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:dark}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--ff-display); font-weight:700; line-height:1.04; letter-spacing:-.01em; margin:0}
p{margin:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px)}
.section.alt{background:var(--canvas)}

/* ---- eyebrow / faceted glyph ---------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--violet); font-weight:700; margin:0 0 18px;
}
.eyebrow::before{
  content:""; width:13px; height:13px; flex:none;
  background:var(--grad);
  border-radius:50%;
}
.eyebrow.on-dark{color:#D9CBFF}

.gradient-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- buttons --------------------------------------------------------- */
.btn{
  --bg:var(--grad);
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--ff-display); font-weight:600; font-size:15px; letter-spacing:.01em;
  color:#fff; background-image:var(--grad); background-size:160% 160%;
  background-position:0% 50%; transition:background-position .5s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:0 12px 30px -12px rgba(91,46,224,.7);
}
.btn:hover{background-position:100% 50%; transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(91,46,224,.8)}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}

.btn.ghost{
  background:transparent; color:var(--ink); box-shadow:none;
  border:1.5px solid var(--line); background-image:none;
}
.btn.ghost:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px)}
.btn.on-dark.ghost{color:#fff; border-color:rgba(255,255,255,.45)}
.btn.on-dark.ghost:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.08)}
.btn.sm{padding:11px 18px; font-size:13.5px}

/* ============================ HEADER ==================================
   SSC-style: thin utility top-bar (phone/email + socials), then a row with
   the menu trigger (left), centred RR logo, and the Enquire button (right).
   Transparent over the hero, solidifies to ink on scroll.
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80; color:#fff;
  background:linear-gradient(180deg,rgba(7,7,12,.62),rgba(7,7,12,0));
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.site-header.scrolled{
  background:rgba(9,9,15,.86); backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 18px 40px -28px rgba(0,0,0,.9);
}
.site-header a{color:inherit}

/* ---- utility top-bar ---- */
.topbar{font-family:var(--ff-mono); border-bottom:1px solid rgba(255,255,255,.10); transition:max-height .4s ease, opacity .35s ease, border-color .4s ease}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:9px}
.tb-contact{display:flex; gap:24px; min-width:0}
.tb-contact a{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.06em; color:rgba(255,255,255,.74); transition:color .2s ease; white-space:nowrap}
.tb-contact a:hover{color:#fff}
.tb-contact svg{width:13px; height:13px; flex:none; opacity:.8}
.site-header.scrolled .topbar{max-height:0; opacity:0; overflow:hidden; border-color:transparent}

/* ---- main row (grid keeps logo dead-centre) ---- */
.headrow{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding:16px var(--pad);
  transition:padding .4s ease;
}
.site-header.scrolled .headrow{padding-block:11px}
.hr-left{justify-self:start}
.hr-right{justify-self:end}
.brand{justify-self:center; display:inline-flex; align-items:center; line-height:0}
.brand img{height:clamp(40px,4.6vw,58px); width:auto; transition:height .4s ease; filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))}
.site-header.scrolled .brand img{height:clamp(34px,3.4vw,44px)}

/* ---- menu trigger ---- */
.menu-btn{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  background:none; border:0; padding:8px 6px; color:#fff;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
}
.menu-ico{position:relative; width:26px; height:14px; flex:none}
.menu-ico span{position:absolute; left:0; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .35s ease}
.menu-ico span:nth-child(1){top:0}
.menu-ico span:nth-child(2){top:6px; width:18px}
.menu-ico span:nth-child(3){top:12px}
.menu-btn:hover .menu-ico span:nth-child(2){width:26px}
.menu-label{padding-bottom:1px}
body.nav-open .menu-ico span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .menu-ico span:nth-child(2){opacity:0; width:26px}
body.nav-open .menu-ico span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Enquire stays visible at all sizes; keep it tidy on mobile */
.hr-right .enquire{white-space:nowrap}

/* ============================ HERO ==================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#0E0E14}
.hero video, .hero .poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero .scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(14,14,20,.55) 0%,rgba(14,14,20,.05) 24%,rgba(14,14,20,0) 40%),
    linear-gradient(18deg,rgba(14,14,20,.88) 0%,rgba(14,14,20,.45) 46%,rgba(14,14,20,0) 74%);
}
.hero .wrap{position:relative; z-index:2; width:100%; padding-bottom:clamp(56px,9vh,120px); padding-top:120px}
.hero-card{max-width:760px; color:#fff}
.hero h1{
  font-size:clamp(33px,7.6vw,86px); font-weight:700; line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 20px; overflow-wrap:break-word;
}
.hero h1 em{font-style:normal}
.hero p.lede{font-size:clamp(16px,1.5vw,20px); color:rgba(255,255,255,.86); max-width:54ch; margin:0 0 30px}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:14px}
.hero .accent-bar{width:64px; height:5px; background:var(--grad); border-radius:4px; margin-bottom:26px}
.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.7); font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint .line{width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- trust marquee --------------------------------------------------- */
.marquee{background:var(--ink); color:#fff; overflow:hidden; padding-block:16px}
.marquee .track{display:flex; gap:48px; white-space:nowrap; width:max-content; animation:scrollx 30s linear infinite}
.marquee span{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.78); display:inline-flex; align-items:center; gap:48px}
.marquee span::after{content:"◆"; color:var(--violet); font-size:9px}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---- generic section heading ---------------------------------------- */
.sec-head{max-width:660px; margin-bottom:clamp(34px,5vw,60px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(30px,4.6vw,52px)}
.sec-head p{color:var(--muted); margin-top:16px; font-size:17px}

/* ---- intro split ----------------------------------------------------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.split .media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--canvas-2)}
.split .media video, .split .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split .media .facet{position:absolute; left:-1px; bottom:-1px; width:40%; height:34%; background:var(--grad); clip-path:polygon(0 100%,0 0,100% 100%); opacity:.9}
.split-section .copy h2{font-size:clamp(26px,3.2vw,42px); margin-bottom:18px}
.split-section .copy p{color:var(--muted); margin-bottom:16px}
.split-section .copy .stat-row{display:flex; gap:34px; margin-top:28px; flex-wrap:wrap}
.split-section .copy .stat-row .s b{font-family:var(--ff-display); font-size:34px; display:block; line-height:1}
.split-section .copy .stat-row .s span{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* ============================ FLEET CARDS ============================= */
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
/* Carbon-fibre panel behind the featured fleet (white margins kept on the sides) */
.fleet-panel{
  position:relative;
  border-radius:26px;
  padding:clamp(40px,5vw,76px) clamp(26px,4vw,62px);
  background-color:#0b0c0f;
  background-image:
    radial-gradient(130% 100% at 50% -12%, rgba(255,255,255,.08), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28)),
    url(../assets/images/carbon.png);
  background-size:auto, auto, 24px 24px;
  background-repeat:no-repeat, no-repeat, repeat;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -54px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
.fleet-panel .sec-head h2{color:#f5f5f8}
.fleet-panel .sec-head .eyebrow{color:#D9CBFF}
.fleet-panel .sec-head p{color:#bcbcc8}
.car-card{
  position:relative; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  content-visibility:auto; contain-intrinsic-size:auto 430px;
}
.car-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.car-card .ph{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--canvas-2)}
.car-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.car-card:hover .ph img{transform:scale(1.05)}
.car-card .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--ink); padding:6px 11px; border-radius:999px; font-weight:700;
}
.car-card .vidflag{position:absolute; top:14px; right:14px; z-index:2; background:var(--grad); color:#fff;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; padding:6px 10px; border-radius:999px; display:flex; gap:6px; align-items:center}
.car-card .body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.car-card .brand-line{font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--violet)}
.car-card h3{font-size:23px; line-height:1.05}
.car-card .specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.car-card .specs .chip{font-family:var(--ff-mono); font-size:11px; color:var(--ink-soft); background:var(--canvas); border:1px solid var(--line); padding:5px 9px; border-radius:8px}
.car-card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px}
.car-card .price{font-family:var(--ff-display); font-weight:600}
.car-card .price small{display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400}
.car-card .view{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-family:var(--ff-display); font-size:14px; color:var(--violet)}
.car-card .view .arr{transition:transform .25s ease}
.car-card:hover .view .arr{transform:translateX(4px)}
.car-card .stretch{position:absolute; inset:0; z-index:3}

/* filter chips */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px}
.chip-btn{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.chip-btn:hover{border-color:var(--violet); color:var(--violet)}
.chip-btn.active{background-image:var(--grad); color:#fff; border-color:transparent}

/* ============================ FEATURES =============================== */
/* Full-bleed "Who we are": image flush to top/bottom/left, copy on the right */
.split-section{position:relative; padding:0; overflow:hidden; background:#fff}
/* black gradient fades the whole bottom edge (G63 photo + copy + marques)
   into the dark showcase below. Rises only ~150px from the very bottom, so
   the G63 number plate (mid-image) stays clearly visible. */
.split-section::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:clamp(96px,13vh,160px); pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,6,13,0) 0%,
    rgba(6,6,13,.45) 52%,
    rgba(6,6,13,.86) 80%,
    #06060d 100%);
}
.split-right{position:relative; z-index:3}  /* keep copy + stats crisp above the fade */
.split-section .media-fill{position:absolute; top:0; bottom:0; left:0; right:50%; overflow:hidden}
.split-section .media-fill img{width:100%; height:100%; object-fit:cover; object-position:center 56%; display:block}
.split-right{margin-left:50%; min-height:clamp(520px,76vh,760px); display:flex; align-items:center;
  padding-right:calc(clamp(170px,15vw,275px) + clamp(20px,2.2vw,44px))}
.split-right .copy{box-sizing:border-box; padding:clamp(40px,4.6vw,80px) 0 clamp(40px,4.6vw,80px) clamp(24px,3.4vw,56px)}
.split-section .marques{position:absolute; top:0; bottom:0; right:0; width:clamp(170px,15vw,275px);
  background:#050506; overflow:hidden}
.split-section .marques img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
@media (max-width:860px){
  .split-section .media-fill{position:relative; top:auto; bottom:auto; left:auto; right:auto; width:100%; height:clamp(300px,52vh,440px)}
  .split-right{margin-left:0; min-height:0; display:block; padding-right:0}
  .split-right .copy{padding:clamp(32px,8vw,56px) clamp(20px,5vw,26px)}
  .split-section .marques{position:relative; top:auto; bottom:auto; right:auto; width:100%; height:auto; background:#070708; padding:26px 28px; display:flex; align-items:center; justify-content:center}
  .split-section .marques img{width:auto; height:auto; max-height:360px; max-width:min(420px,78%); object-fit:contain; margin:0 auto}
}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:30px 28px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.feature:hover{box-shadow:var(--shadow-sm); transform:translateY(-4px)}
.feature .ico{width:54px; height:54px; display:flex; align-items:center; justify-content:flex-start; margin-bottom:16px}
.feature .ico svg{width:50px; height:50px; display:block}
.feature h3{font-size:19px; margin-bottom:10px}
.feature p{color:var(--muted); font-size:15px}

/* Rolls-Royce video background for the Why Riverie and CTA area */
.home-video-zone{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0E0E14;
}
/* black gradient melts the dark section above into the why-riverie video */
.home-video-zone::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  z-index:1;
  pointer-events:none;
  height:clamp(120px,15vh,190px);
  background:linear-gradient(to bottom,
    #06060d 0%,
    rgba(6,6,13,.72) 42%,
    rgba(6,6,13,0) 100%);
}
.home-video-zone::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,14,20,.72),rgba(14,14,20,.60) 48%,rgba(14,14,20,.76)),
    radial-gradient(circle at 50% 24%,rgba(91,46,224,.30),transparent 46%);
}
.home-bg-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.home-video-zone > .section{
  position:relative;
  z-index:2;
  background:transparent;
}
.why-video-section{
  position:relative;
  overflow:visible;
  background:transparent;
}
.why-video-section .wrap,
.cta-video-section .wrap{
  position:relative;
  z-index:2;
}
.why-video-section .sec-head h2{
  color:#fff;
  text-shadow:0 16px 40px rgba(0,0,0,.45);
}
.why-video-section .eyebrow{
  color:#D9CBFF;
}
.why-video-section .feature{
  color:var(--ink);
  background:rgba(255,255,255,.94);
  box-shadow:0 22px 50px -32px rgba(0,0,0,.75);
}


/* requirements checklist */
.checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px; margin-top:8px}
.checklist li{list-style:none; display:flex; gap:14px; align-items:flex-start; padding:0}
.checklist{padding:0; margin-block:0}
.checklist li .dot{flex:none; width:26px; height:26px; border-radius:8px; background:var(--grad); display:grid; place-items:center; color:#fff; font-size:13px; margin-top:2px}
.checklist li b{display:block; font-family:var(--ff-display); font-size:16px}
.checklist li span{color:var(--muted); font-size:14.5px}

/* ============================ CTA band =============================== */
.cta-band{position:relative; overflow:hidden; background:var(--ink); color:#fff; border-radius:var(--r-lg)}
.cta-band .glow{position:absolute; inset:0; background:var(--grad); opacity:.9; clip-path:polygon(58% 0,100% 0,100% 100%,30% 100%)}
.cta-band .inner{position:relative; z-index:2; padding:clamp(40px,6vw,72px); display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between}
.cta-band h2{font-size:clamp(28px,4vw,46px); max-width:18ch}
.cta-band p{color:rgba(255,255,255,.8); margin-top:12px; max-width:42ch}

/* ============================ PAGE HEAD ============================== */
.page-head{position:relative; min-height:56vh; display:flex; align-items:center; overflow:hidden; background:#0E0E14}
.page-head .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.page-head .scrim{position:absolute; inset:0; background:linear-gradient(20deg,rgba(14,14,20,.85),rgba(14,14,20,.35) 60%,rgba(27,43,176,.35))}
.page-head .wrap{position:relative; z-index:2; color:#fff; padding-top:120px; padding-bottom:50px}
.page-head h1{font-size:clamp(38px,6vw,72px); text-transform:uppercase; line-height:1}
.page-head p{color:rgba(255,255,255,.82); margin-top:18px; max-width:56ch; font-size:17px}
.crumbs{font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:18px}
.crumbs a:hover{color:#fff}

/* ============================ CONTACT ================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start}
.info-cards{display:grid; gap:16px}
.info-card{display:flex; gap:16px; align-items:flex-start; padding:22px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; transition:.3s}
.info-card:hover{box-shadow:var(--shadow-sm); transform:translateY(-3px)}
.info-card .ic{flex:none; width:46px; height:46px; border-radius:12px; background:var(--grad); display:grid; place-items:center; color:#fff}
.info-card b{font-family:var(--ff-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:3px}
.info-card a, .info-card span{color:var(--muted); font-size:15px}
.info-card a:hover{color:var(--violet)}

/* forms */
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-sm)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.field input, .field select, .field textarea{
  font-family:var(--ff-body); font-size:15px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:.2s; width:100%;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(91,46,224,.12)}
.form .btn{width:100%; justify-content:center; margin-top:6px}
.form-note{font-size:13px; color:var(--muted); margin-top:14px; text-align:center}
.form-success{display:none; text-align:center; padding:40px 10px}
.form-success.show{display:block}
.form-success .ok{width:64px; height:64px; border-radius:50%; background:var(--grad); display:grid; place-items:center; margin:0 auto 20px; color:#fff; font-size:30px}
.form-success h3{font-size:26px; margin-bottom:10px}
.form-success p{color:var(--muted)}

/* ============================ CAR DETAIL ============================= */
.detail-top{display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,30%,390px);
  grid-template-areas:"gallery info" "about info"; gap:clamp(24px,3vw,40px) clamp(34px,4vw,60px); align-items:start}
.detail-top .gallery{grid-area:gallery; min-width:0}
.detail-top .detail-info{grid-area:info; position:sticky; top:90px; align-self:start}
.detail-top .detail-desc{grid-area:about; max-width:none; margin-top:4px}
.gallery .main{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--canvas-2); box-shadow:var(--shadow-md)}
.gallery .main img, .gallery .main video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gallery .thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px}
.gallery .thumbs button{padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; aspect-ratio:1; background:var(--canvas-2)}
.gallery .thumbs button img{width:100%; height:100%; object-fit:cover}
.gallery .thumbs button.active{border-color:var(--violet)}
.gallery .thumbs button.vid{position:relative}
.gallery .thumbs button.vid::after{content:"▶"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(14,14,20,.45); color:#fff; font-size:14px}

.detail-info .brand-line{font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--violet); margin-bottom:10px}
.detail-info h1{font-size:clamp(30px,4vw,44px); text-transform:uppercase; line-height:1}
.detail-info .tagline{color:var(--muted); margin-top:14px; font-size:16px}
.detail-info .price-box{display:flex; align-items:baseline; gap:10px; margin:24px 0; padding:18px 22px; background:var(--canvas); border-radius:var(--r-md)}
.detail-info .price-box b{font-family:var(--ff-display); font-size:30px}
.detail-info .price-box span{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.spec-table{width:100%; border-collapse:collapse; margin-top:8px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table td{padding:12px 0; font-size:15px}
.spec-table td:first-child{color:var(--muted); font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.spec-table td:last-child{text-align:right; font-family:var(--ff-display); font-weight:600}
.detail-info .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.detail-desc{max-width:720px; margin-top:clamp(40px,6vw,72px)}
.detail-desc h2{font-size:28px; margin-bottom:16px}
.detail-desc p{color:var(--muted); margin-bottom:14px}

/* ---- gallery: expand affordance + full-screen lightbox ---- */
.gallery .main.has-img{cursor:zoom-in}
.gexpand{position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(10,10,16,.55); color:#fff; display:grid; place-items:center;
  cursor:pointer; opacity:0; transition:opacity .25s ease, background .2s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.gallery .main.has-img .gexpand{opacity:.85}
.gallery .main.has-img:hover .gexpand{opacity:1}
.gallery .main.has-video .gexpand{display:none}
.gexpand:hover{background:rgba(10,10,16,.82)}
.gexpand svg{width:17px; height:17px}

.lightbox{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,52px); background:rgba(5,5,9,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lightbox.open{display:flex; animation:lbFade .22s ease}
@keyframes lbFade{from{opacity:0} to{opacity:1}}
.lb-stage{margin:0; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center}
.lb-img{max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:10px;
  box-shadow:0 50px 130px -30px rgba(0,0,0,.9)}
.lb-close{position:absolute; top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .2s ease}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-close svg{width:20px; height:20px}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:background .2s ease}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-nav svg{width:24px; height:24px}
.lb-prev{left:clamp(10px,3vw,30px)} .lb-next{right:clamp(10px,3vw,30px)}
.lb-count{position:absolute; bottom:clamp(14px,3vw,26px); left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.7)}
.lightbox.single .lb-nav, .lightbox.single .lb-count{display:none}
body.lb-lock{overflow:hidden}

/* ===================== COLOUR VARIANTS + PICKER ====================== */
/* round colour swatch — used on cards, in the picker, and on the detail label */
.swatch{
  display:inline-block; position:relative; overflow:hidden; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22); box-shadow:0 1px 3px rgba(0,0,0,.5);
  flex:none; vertical-align:middle;
}
.swatch.swatch-split{background:var(--swatch-left)}
.swatch.swatch-split::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:50%;
  background:var(--swatch-right);
}
.swatch.lg{width:26px; height:26px; border-width:2px}

/* colour line on fleet cards (swatch + colour name) */
.car-card .colour-line{display:flex; align-items:center; gap:8px; margin-top:-6px;
  font-family:var(--ff-mono); font-size:11.5px; color:var(--muted)}
.car-card .colour-line span{letter-spacing:.01em}

/* "photography coming soon" placeholder — fleet cards */
.car-card .ph.is-empty{background:var(--canvas-2)}
.no-photo{position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; text-align:center}
.no-photo::after{content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%),
  linear-gradient(0deg, rgba(8,8,14,.42), rgba(8,8,14,.08));}
.no-photo .np-badge{position:relative; z-index:1; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(14,14,20,.36); border:1px solid rgba(255,255,255,.5);
  padding:8px 14px; border-radius:999px; line-height:1.4}

/* detail page — colour name under the H1 */
.detail-info .detail-colour{display:flex; align-items:center; gap:9px; margin-top:12px;
  font-family:var(--ff-display); font-weight:600; font-size:16px; color:var(--text)}
.detail-info .detail-colour .swatch{width:18px; height:18px}

/* detail page — in-profile colour picker */
.colour-picker{margin:22px 0 4px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--canvas)}
.colour-picker .cp-head{display:flex; align-items:baseline; gap:10px; justify-content:space-between}
.colour-picker .cp-label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.colour-picker .cp-current{font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--text); text-align:right}
.colour-picker .cp-dots{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px}
.cp-dot{position:relative; padding:4px; border-radius:50%; border:2px solid transparent;
  background:rgba(255,255,255,.06); cursor:pointer; line-height:0; transition:transform .2s ease, border-color .2s ease;
  box-shadow:var(--shadow-sm)}
.cp-dot:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.4)}
.cp-dot.active{border-color:var(--violet-l)}
.cp-dot.empty{border-style:dashed; border-color:var(--line)}
.cp-dot.empty .swatch{opacity:.4}
.cp-dot.empty.active{border-style:solid; border-color:var(--violet-l)}
.colour-picker .cp-hint{margin-top:12px; font-size:12.5px; color:var(--muted)}

/* detail page — empty gallery state */
.gallery.is-empty .no-photo.lg{position:relative; aspect-ratio:16/10; border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:30px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px}
.gallery.is-empty .np-badge{font-size:12px; padding:10px 18px}
.gallery.is-empty .np-sub{position:relative; z-index:1; max-width:360px; color:#fff;
  font-size:14px; line-height:1.55; text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* ========== FLEET PAGE — full-width grid on the site's dark theme ==========
   The site is already dark (see the theme block below); the fleet grid simply
   sits on it. This lets the cards fill the row edge to edge, wrapping to the
   next line, and styles the filter toolbar. The cards are unchanged. */
.fleet-section .fleet-grid{grid-template-columns:repeat(3, 1fr); gap:26px}
@media (max-width:1024px){ .fleet-section .fleet-grid{grid-template-columns:repeat(2, 1fr); gap:20px} }
@media (max-width:560px){ .fleet-section .fleet-grid{grid-template-columns:1fr} }

/* ----- filter toolbar: segmented "Type" control + "Make" dropdown ----- */
.fleet-toolbar{position:relative; z-index:40; display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 30px; margin-bottom:18px}
.ft-field{display:flex; flex-direction:column; gap:10px; min-width:0}
.ft-field-label{font-family:var(--ff-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding-left:3px}

/* segmented control — a gradient thumb slides under the active type */
.ft-seg{position:relative; display:inline-flex; align-items:stretch; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4); max-width:100%; overflow-x:auto; scrollbar-width:none}
.ft-seg::-webkit-scrollbar{display:none}
.ft-seg-thumb{position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:999px;
  background-image:var(--grad); box-shadow:0 8px 20px -8px rgba(91,46,224,.85);
  transition:transform .42s cubic-bezier(.34,1.18,.42,1), width .42s cubic-bezier(.34,1.18,.42,1); z-index:0}
.ft-seg-btn{position:relative; z-index:1; flex:0 0 auto; white-space:nowrap; border:0; background:transparent;
  cursor:pointer; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.07em;
  color:rgba(255,255,255,.6); padding:9px 19px; border-radius:999px; transition:color .3s ease}
.ft-seg-btn:hover{color:rgba(255,255,255,.9)}
.ft-seg-btn.active{color:#fff}
.ft-seg-btn:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:2px}

/* Make dropdown */
.ft-select{position:relative}
.ft-select-btn{display:inline-flex; align-items:center; gap:14px; cursor:pointer; min-width:200px;
  padding:11px 16px 11px 18px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:#fff; font-family:var(--ff-body); font-size:14.5px;
  transition:border-color .25s ease, background .25s ease}
.ft-select-btn:hover{border-color:rgba(255,255,255,.28)}
.ft-select-btn:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:2px}
.ft-select.open .ft-select-btn{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08)}
.ft-select.is-filtered .ft-select-btn{border-color:transparent; box-shadow:0 0 0 1.5px var(--violet)}
.ft-select-value{flex:1; text-align:left}
.ft-select-caret{width:17px; height:17px; color:rgba(255,255,255,.55); transition:transform .3s ease; flex:none}
.ft-select.open .ft-select-caret{transform:rotate(180deg)}
.ft-select-menu{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; margin:0; list-style:none;
  padding:6px; border-radius:14px; background:#13131c; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 64px -26px rgba(0,0,0,.92); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; max-height:330px; overflow-y:auto}
.ft-select.open .ft-select-menu{opacity:1; visibility:visible; transform:none}
.ft-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:9px; cursor:pointer; font-size:14.5px; color:rgba(255,255,255,.8);
  transition:background .16s ease, color .16s ease}
.ft-opt:hover{background:rgba(255,255,255,.06); color:#fff}
.ft-opt.hl{background:rgba(255,255,255,.09); color:#fff}
.ft-opt.selected{color:#fff}
.ft-opt-check{width:17px; height:17px; opacity:0; color:#b39bff; flex:none}
.ft-opt.selected .ft-opt-check{opacity:1}

/* result count + empty state */
.fleet-section .fleet-count{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:26px}
.fleet-section .empty-state{color:rgba(236,235,242,.82); border:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.fleet-section .empty-state b{color:var(--text)}

@media (max-width:640px){
  .fleet-toolbar{gap:16px}
  .ft-field-type, .ft-field-make, .ft-select, .ft-select-btn{width:100%}
  .ft-seg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ft-seg-thumb, .ft-select-menu, .ft-select-caret, .cp-dot{transition:none}
}

/* ============================ FOOTER ================================= */
.site-footer{background:var(--ink); color:#fff; padding-block:clamp(54px,7vw,86px) 30px}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .brand .word b{color:#fff}
.site-footer p.blurb{color:rgba(255,255,255,.6); margin-top:18px; max-width:34ch; font-size:14.5px}
.site-footer h4{font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:18px}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.site-footer ul a{color:rgba(255,255,255,.82); font-size:14.5px}
.site-footer ul a:hover{color:#fff}
.footer-bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:24px; color:rgba(255,255,255,.45); font-size:12.5px; font-family:var(--ff-mono); letter-spacing:.05em}

/* ============================ REVEAL ================================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ============================ RESPONSIVE ============================= */
@media (max-width:1024px){
  .fleet-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav .links{display:none}
  .nav > .btn.sm{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr}
  .split .media{aspect-ratio:16/11}
  .contact-grid{grid-template-columns:1fr}
  .detail-top{grid-template-columns:1fr; grid-template-areas:"gallery" "info" "about"}
  .detail-top .detail-info{position:static; top:auto}
  .checklist{grid-template-columns:1fr}
  .cta-band .glow{clip-path:polygon(0 64%,100% 30%,100% 100%,0 100%)}
}
@media (max-width:560px){
  .fleet-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .gallery .thumbs{grid-template-columns:repeat(4,1fr)}
  .hero .cta-row{flex-direction:column; align-items:stretch}
  .hero .cta-row .btn{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}

/* ============================ INTRO SPLASH ===========================
   Full-screen brand intro on black — the gradient mark + RR reveal and a
   light sweep, then it fades away to the cinematic hero beneath.
   ===================================================================== */
.intro-splash{
  position:fixed; inset:0; z-index:200; background:#07070c;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity 1s ease, visibility 1s ease;
}
.intro-splash.hide{opacity:0; visibility:hidden}
.intro-splash video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.intro-skip{
  position:absolute; bottom:clamp(24px,5vh,48px); right:clamp(20px,5vw,52px); z-index:2;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:10px 18px; cursor:pointer;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.78); transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.intro-skip:hover{color:#fff; border-color:#fff; background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){ .intro-splash{display:none} }

/* ============================ NAV PANEL (dropdown) ===================
   Opened by the Menu trigger — a full-width sheet that drops from the top.
   Replaces the old mobile drawer and works at every screen size.
   ===================================================================== */
.navpanel{position:fixed; inset:0; z-index:75; visibility:hidden; pointer-events:none}
.navpanel::before{content:""; position:absolute; inset:0; background:rgba(4,4,8,.5); opacity:0; transition:opacity .45s ease; backdrop-filter:blur(3px)}
.navpanel .sheet{
  position:absolute; top:0; left:0; right:0; background:var(--ink); color:#fff;
  transform:translateY(-101%); transition:transform .55s cubic-bezier(.4,0,.2,1);
  padding:clamp(118px,15vh,168px) var(--pad) clamp(40px,6vh,68px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.navpanel .sheet::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad)}
body.nav-open .navpanel{visibility:visible; pointer-events:auto}
body.nav-open .navpanel::before{opacity:1}
body.nav-open .navpanel .sheet{transform:none}
.sheet-in{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,6vw,84px); align-items:start}

.np-links{display:flex; flex-direction:column; gap:2px}
.np-links a{
  position:relative; width:max-content; max-width:100%; color:#fff; padding:7px 0 7px 0;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(30px,5.2vw,58px); line-height:1.1;
  opacity:0; transform:translateY(20px); transition:color .25s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
}
body.nav-open .np-links a{opacity:1; transform:none; transition:opacity .55s ease calc(var(--i)*.06s + .12s), transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.06s + .12s), padding-left .35s ease, color .25s ease}
.np-links a::before{content:""; position:absolute; left:0; top:50%; width:0; height:3px; background:var(--grad); transform:translateY(-50%); transition:width .3s ease; border-radius:3px}
.np-links a:hover{padding-left:46px}
.np-links a:hover::before{width:32px}
.np-links a[aria-current="page"]{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

.np-aside{display:grid; gap:clamp(24px,3vw,34px); padding-top:8px}
.np-h{font-family:var(--ff-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.42); display:block; margin-bottom:14px}
.np-cats{display:flex; flex-wrap:wrap; gap:10px}
.np-cats a{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:9px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:rgba(255,255,255,.82); transition:.25s}
.np-cats a:hover{border-color:transparent; background-image:var(--grad); color:#fff}
.np-contact a, .np-contact span{display:block; color:rgba(255,255,255,.82); font-size:15px; margin-bottom:9px; transition:color .2s ease}
.np-contact a:hover{color:#fff}

/* ============================ SOCIAL ICONS =========================== */
.social{display:flex; gap:10px; margin-top:16px}
.social a{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:#fff; transition:transform .25s ease, background .25s ease, border-color .25s ease}
.social a:hover{border-color:transparent; background-image:var(--grad); transform:translateY(-3px)}
.social svg{width:16px; height:16px}
.tb-social{display:flex; gap:15px; align-items:center}
.tb-social a{color:rgba(255,255,255,.72); display:inline-flex; transition:color .2s ease, transform .2s ease}
.tb-social a:hover{color:#fff; transform:translateY(-1px)}
.tb-social svg{width:15px; height:15px; display:block}

/* ============================ HERO VIDEO CONTROL ===================== */
.hero .media-toggle{
  position:absolute; right:clamp(18px,4vw,40px); bottom:clamp(18px,4vh,34px); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(10,10,16,.4); border:1px solid rgba(255,255,255,.3); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:.25s;
}
.hero .media-toggle:hover{background:rgba(10,10,16,.7); border-color:#fff}
.hero .media-toggle svg{width:16px; height:16px}
.hero .scroll-hint{left:clamp(20px,5vw,64px); transform:none; align-items:flex-start}

/* ============================ CINEMATIC SHOWCASE =====================
   Second full-bleed running video (the blue-car detail clip). Portrait
   source shown near native size inside a glowing frame so it stays crisp.
   ===================================================================== */
.cinema{position:relative; background:#070710; color:#fff; overflow:hidden; padding-block:clamp(70px,10vw,130px)}
.cinema::before{content:""; position:absolute; width:60vw; height:60vw; max-width:780px; max-height:780px; right:-12vw; top:50%; transform:translateY(-50%); background:radial-gradient(circle, rgba(91,46,224,.30), rgba(33,55,226,0) 68%); pointer-events:none}
.cinema-in{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); display:grid; grid-template-columns:1fr .82fr; gap:clamp(34px,6vw,80px); align-items:center}
.cinema .copy h2{font-size:clamp(30px,4.4vw,52px); line-height:1.02; margin-bottom:20px}
.cinema .copy h2 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cinema .copy p{color:rgba(255,255,255,.72); margin-bottom:16px; max-width:48ch; font-size:16.5px}
.cinema .copy .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.cinema-frame{position:relative; justify-self:center; width:100%; max-width:400px; aspect-ratio:464/832; border-radius:26px; overflow:hidden; box-shadow:0 50px 110px -40px rgba(60,30,160,.8), 0 0 0 1px rgba(255,255,255,.06)}
.cinema-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cinema-frame .ring{position:absolute; inset:0; border-radius:26px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.cinema-frame .badge{position:absolute; left:16px; bottom:16px; z-index:2; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; background:rgba(7,7,16,.55); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); padding:7px 12px; border-radius:999px}

/* ============================ FOOTER SOCIAL ========================== */
.footer-social{margin-top:20px}

/* ============================ HEADER RESPONSIVE ====================== */
@media (max-width:900px){
  .sheet-in{grid-template-columns:1fr; gap:30px}
}
@media (max-width:720px){
  .tb-contact a:nth-child(2){display:none}        /* hide email, keep phone */
  .topbar-in{padding-block:7px}
  .menu-label{display:none}                         /* icon-only menu on small screens */
  .brand img{height:38px}
}
@media (max-width:430px){
  .tb-contact a span.tb-txt{display:none}           /* phone -> icon only */
  .hr-right .enquire{padding:10px 14px; font-size:12.5px}
  .np-links a{font-size:30px}
}

/* clear the taller fixed header on inner page heads */
.page-head .wrap{padding-top:clamp(150px,18vh,196px)}
@media (max-width:860px){
  .cinema-in{grid-template-columns:1fr; gap:36px; text-align:center}
  .cinema .copy .cta-row{justify-content:center}
  .cinema .copy p{margin-inline:auto}
  .cinema-frame{max-width:330px}
  .cinema::before{display:none}
}

/* hero headline — B sizing (slightly smaller, more compact column) */
.hero-card{max-width:720px}
.hero h1{font-size:clamp(30px,5vw,60px)}
.hero p.lede{font-size:18px}
@media (max-width:560px){
  .hero .eyebrow{font-size:10.5px; letter-spacing:.15em}
  .hero h1{font-size:clamp(30px,8vw,44px)}
  .hero p.lede{font-size:16.5px}
}

/* hero text: flush to the far-left edge (aligned with the Menu trigger and
   the Scroll hint), with a comfortable gap above the Scroll hint */
.hero{align-items:flex-end}
.hero .wrap{max-width:none; margin-inline:0; padding-bottom:clamp(104px,12vh,140px)}
.hero .scroll-hint{bottom:20px; left:var(--pad)}
@media (max-width:560px){
  .hero .wrap{padding-bottom:104px}
}

/* =========================================================================
   SHOWCASE — merged "In the detail" film + "The Fleet"
   Sticky cinematic media on the left, fleet scrolls past on the right.
   ========================================================================= */
.showcase{
  position:relative; background:#06060d; color:#fff;
  padding-block:clamp(72px,9vw,132px);
}
/* (seam is handled by a BLACK gradient at the bottom of the "Who we are"
   section instead — see .split-section::after) */
.showcase-glow{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.showcase-glow::before{
  content:""; position:absolute; left:-14vw; top:8%; width:54vw; height:54vw;
  max-width:720px; max-height:720px;
  background:radial-gradient(circle, rgba(91,46,224,.34), rgba(33,55,226,0) 66%);
}
.showcase-glow::after{
  content:""; position:absolute; right:-16vw; bottom:-6%; width:48vw; height:48vw;
  max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(33,55,226,.26), rgba(158,31,206,0) 68%);
}
.showcase-in{
  position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,4.5vw,72px);
  align-items:stretch;
}

/* LEFT — sticky film + copy */
.sc-stick{position:sticky; top:clamp(90px,12vh,120px)}
.sc-copy h2{font-size:clamp(28px,3.6vw,46px); line-height:1.03; margin-bottom:16px}
.sc-copy h2 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sc-copy p{color:rgba(255,255,255,.7); max-width:42ch; font-size:16px}
.sc-frame{
  position:relative; margin:24px 0 22px; width:100%; max-width:330px;
  aspect-ratio:464/832; border-radius:24px; overflow:hidden;
  box-shadow:0 50px 110px -44px rgba(60,30,160,.85), 0 0 0 1px rgba(255,255,255,.06);
}
.sc-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sc-frame .ring{position:absolute; inset:0; border-radius:24px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.sc-frame .badge{
  position:absolute; left:15px; bottom:15px; z-index:2;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(7,7,16,.55); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px);
  padding:7px 12px; border-radius:999px;
}
.sc-cta{display:flex; flex-wrap:wrap; gap:12px}

/* RIGHT — the white fleet header box + cards */
.sc-fleet-head{
  background:#fff; color:var(--ink);
  border-radius:20px;
  padding:clamp(26px,2.6vw,38px) clamp(24px,2.6vw,38px);
  margin-bottom:24px;
  box-shadow:0 34px 80px -46px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.6);
}
.sc-fleet-head .eyebrow{color:var(--violet); margin-bottom:14px}
.sc-fleet-head h2{color:var(--ink); font-size:clamp(28px,3vw,40px)}
.sc-fleet-head p{color:var(--muted); margin-top:13px; font-size:16px; max-width:52ch}
/* fleet cards in the right column: two-up, tighter */
.sc-grid{grid-template-columns:repeat(2,1fr); gap:20px}
.sc-grid .car-card h3{font-size:21px}
.sc-all{margin-top:30px}

/* staggered reveal for the cards inside the right column */
.sc-grid .car-card{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .7s ease}
.sc-grid .car-card.reveal{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease}
.sc-grid .car-card:nth-child(2){transition-delay:.06s}
.sc-grid .car-card:nth-child(3){transition-delay:.10s}
.sc-grid .car-card:nth-child(4){transition-delay:.14s}
.sc-grid .car-card:nth-child(5){transition-delay:.18s}
.sc-grid .car-card:nth-child(6){transition-delay:.22s}

/* tablet: drop sticky, single column, film first then fleet */
@media (max-width:1024px){
  .showcase-in{grid-template-columns:1fr; gap:clamp(34px,6vw,56px)}
  .sc-stick{position:static}
  .sc-media{display:flex; flex-direction:column; align-items:center; text-align:center}
  .sc-copy p{margin-inline:auto}
  .sc-cta{justify-content:center}
  .sc-frame{max-width:330px}
}
@media (max-width:560px){
  .sc-grid{grid-template-columns:1fr; gap:18px}
}

/* =========================================================================
   Scroll-reveal (site-wide): light lift + fade, GPU-friendly (no blur)
   ========================================================================= */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .65s cubic-bezier(.2,.7,.2,1),
             transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; filter:none; transition:none}
  .sc-stick{position:static}
}

/* =========================================================================
   REFINEMENTS — accessibility + inner-page theme parity
   (skip links, focus rings, touch targets, SVG icon chips, new sections)
   ========================================================================= */

/* ---- skip link (keyboard users) ---- */
.skip-link{
  position:fixed; top:14px; left:14px; z-index:300;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:999px;
  font-family:var(--ff-display); font-weight:600; font-size:14px;
  transform:translateY(-260%); transition:transform .25s ease; box-shadow:var(--shadow-md);
}
.skip-link:focus{transform:none}

/* ---- visible focus for keyboard users ---- */
:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:6px}
.site-header :focus-visible, .navpanel :focus-visible, .site-footer :focus-visible,
.page-head :focus-visible, .hero :focus-visible, .quote-band :focus-visible,
.cta-band :focus-visible, .marquee :focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:4px}
.form-success h3:focus{outline:none}

/* ---- comfortable touch targets ---- */
button, .btn, .chip-btn{touch-action:manipulation}
.chip-btn{min-height:44px}
.menu-btn{min-height:44px}
.tb-contact a, .tb-social a{padding-block:10px; margin-block:-10px}
.tb-social a{padding-inline:4px}

/* ---- balanced headings ---- */
h1,h2,h3{text-wrap:balance}

/* ---- page-head fact chips ---- */
.head-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.head-chips span{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.30); border-radius:999px;
  padding:8px 14px; background:rgba(10,10,18,.38); backdrop-filter:blur(4px);
}

/* ---- SVG icon sizing in chips / dots ---- */
.info-card .ic svg{width:20px; height:20px}
.checklist li .dot svg{width:13px; height:13px}
.form-success .ok svg{width:28px; height:28px}

/* ---- forms: required mark + helper text ---- */
.field .req{color:var(--magenta)}
.field .hint{font-family:var(--ff-body); font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--muted)}

/* ---- fleet: results count + empty state ---- */
.fleet-count{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:-16px 0 26px;
}
.empty-state{
  grid-column:1/-1; text-align:center; padding:64px 20px;
  border:1.5px dashed var(--line); border-radius:var(--r-lg); color:var(--muted);
}
.empty-state b{display:block; font-family:var(--ff-display); font-size:20px; color:var(--ink); margin-bottom:8px}

/* ---- car gallery: prev/next + counter ---- */
.gallery .main .gslot{position:absolute; inset:0}
.gnav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,10,16,.45); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease;
}
.gnav-btn:hover{background:rgba(10,10,16,.75); border-color:#fff}
.gnav-btn.prev{left:14px}
.gnav-btn.next{right:14px}
.gnav-btn svg{width:18px; height:18px}
.gcount{
  position:absolute; right:14px; bottom:12px; z-index:3;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:#fff;
  background:rgba(7,7,16,.55); border:1px solid rgba(255,255,255,.2);
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(6px);
}

/* ---- related cars (car page) ---- */
.related-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){ .related-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .related-grid{grid-template-columns:1fr} }

/* ---- quote band (About) ---- */
.quote-band{position:relative; overflow:hidden; background:#06060d; color:#fff; padding-block:clamp(70px,9vw,120px)}
.quote-band::before{
  content:""; position:absolute; left:50%; top:-30%; width:70vw; height:70vw;
  max-width:900px; max-height:900px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(91,46,224,.28), rgba(33,55,226,0) 65%); pointer-events:none;
}
.quote-band .wrap{position:relative; z-index:1; text-align:center; max-width:920px}
.quote-band .eyebrow{justify-content:center}
.quote-band blockquote{
  margin:0; font-family:var(--ff-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(26px,4.4vw,48px); line-height:1.12;
}
.quote-band blockquote em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.quote-band .sub{color:rgba(255,255,255,.68); margin-top:22px; font-size:16.5px; max-width:56ch; margin-inline:auto}

/* ---- FAQ accordion (Contact) ---- */
.faq{display:grid; gap:12px; max-width:820px}
.faq details{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; transition:box-shadow .25s ease}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none; padding:18px 22px; min-height:44px;
  font-family:var(--ff-display); font-weight:600; font-size:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--canvas); color:var(--violet);
  font-size:18px; font-weight:600; transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px; color:var(--muted); font-size:15px; max-width:65ch}

/* ---- reassurance chips (Enquiry) ---- */
.assure{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.assure span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--canvas); border:1px solid var(--line);
  border-radius:999px; padding:9px 14px;
}
.assure svg{width:13px; height:13px; color:var(--violet); flex:none}

/* ---- mini requirements card (Enquiry) ---- */
.req-mini{margin-top:30px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--canvas)}
.req-mini b{font-family:var(--ff-display); font-size:15px; display:block; margin-bottom:8px}
.req-mini p{color:var(--muted); font-size:14.5px}
.req-mini a{color:var(--violet); font-weight:600}
.req-mini a:hover{text-decoration:underline}

/* ============================ FINAL PAGE POLISH ========================
   Targeted spacing/background refinements for Fleet, Contact, About and Car.
   Keeps the lower-page background continuous into the CTA areas without
   changing unrelated website sections.
   ===================================================================== */
.flow-zone{background:var(--canvas)}
.flow-start{padding-top:clamp(56px,7vw,98px); padding-bottom:clamp(34px,4.8vw,64px)}
.flow-cta{padding-top:0; padding-bottom:clamp(54px,7vw,94px)}
.flow-zone .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.flow-zone .feature-grid{gap:20px}
.flow-zone .cta-band{box-shadow:0 30px 70px -46px rgba(14,14,20,.72)}
.car-related-section .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.car-related-section .related-grid{gap:22px}
.car-cta-section .cta-band{box-shadow:0 30px 70px -46px rgba(14,14,20,.72)}

.about-story{padding-block:clamp(56px,7vw,96px)}
.about-story .split{gap:clamp(26px,4vw,58px)}
.about-values{padding-block:clamp(54px,7vw,94px)}
.about-values .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.about-quote-band{padding-block:clamp(58px,8vw,96px)}
.about-requirements{padding-top:clamp(54px,7vw,94px); padding-bottom:clamp(36px,5vw,62px)}
.about-requirements .sec-head{margin-bottom:clamp(28px,4vw,42px)}
.about-cta{padding-top:0; padding-bottom:clamp(54px,7vw,94px)}
.about-cta .cta-band{box-shadow:0 30px 70px -46px rgba(14,14,20,.72)}

@media (max-width:560px){
  .flow-start{padding-top:52px; padding-bottom:30px}
  .flow-cta{padding-bottom:56px}
  .about-story, .about-values, .about-requirements{padding-top:52px}
  .about-story, .about-values{padding-bottom:52px}
  .about-quote-band{padding-block:56px}
  .about-requirements{padding-bottom:32px}
  .about-cta{padding-bottom:56px}
}


/* =========================================================================
   ADDED — WhatsApp button, prominent "call us" bar, and form success actions
   (additive only; does not alter existing rules)
   ========================================================================= */

/* WhatsApp-styled button variant */
.btn.wa{
  background-image:none; background-color:#25D366; color:#fff;
  box-shadow:0 12px 30px -12px rgba(37,211,102,.7);
}
.btn.wa:hover{background-color:#1ebe5a; box-shadow:0 18px 38px -12px rgba(37,211,102,.85); transform:translateY(-2px)}
.btn.wa svg{width:20px; height:20px; flex:none}

/* Prominent "Call us on …" bar (platinumet-style) — sticks under the header */
.callbar{
  position:sticky; top:var(--cbtop,64px); z-index:70;
  background:#0B0B11; color:#fff; text-align:center;
  padding:clamp(12px,1.8vw,18px) var(--pad);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9);
}
.callbar::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad)}
/* used on pages with no dark hero above it (car.html): pushes the bar below
   the fixed header in normal flow so nothing is hidden behind it */
.callbar--lead{margin-top:var(--cbtop,64px)}
/* used only for an instant, transition-free header measurement */
.site-header.no-anim, .site-header.no-anim *{transition:none !important}
.callbar .cb-in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 12px;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(14px,2vw,21px); line-height:1.25; color:rgba(255,255,255,.9);
}
.callbar a.num{
  color:#fff; font-weight:800; font-size:clamp(21px,3.3vw,33px); letter-spacing:.02em;
  white-space:nowrap; transition:color .2s ease;
}
.callbar a.num:hover{color:#cdb8ff}
@media (max-width:560px){
  .callbar{padding-block:9px}
  .callbar .cb-in{font-size:13px; gap:1px 7px; letter-spacing:.01em}
  .callbar a.num{font-size:20px}
}

/* form confirmation: fallback action buttons + helper note */
.form-success-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px}
.form-success-note{color:var(--muted); font-size:14px; line-height:1.5; margin-top:14px; max-width:48ch; margin-inline:auto}

/* Floating WhatsApp button — fixed bottom-right, fades in on scroll, all pages */
.wa-float{
  position:fixed; right:clamp(15px,3vw,26px); bottom:clamp(15px,3vw,26px); z-index:60;
  width:clamp(50px,12vw,58px); height:clamp(50px,12vw,58px); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6), 0 4px 14px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s, background .2s ease;
}
.wa-float.show{opacity:1; visibility:visible; transform:none}
.wa-float:hover{background:#1ebe5a; transform:translateY(-2px)}
.wa-float:active{transform:translateY(0) scale(.96)}
.wa-float svg{width:56%; height:56%}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:opacity .2s ease, visibility .2s}
  .wa-float.show{transform:none}
}

/* =========================================================================
   SLEEK REFRESH 2.0 — unified dark, editorial, premium theme
   Re-skins every surface for a cleaner, calmer, more professional feel
   (prestige-style). Structure/layout/animation rules above are preserved.
   ========================================================================= */
:root{
  --canvas:#101017;          /* alt-section wash */
  --canvas-2:#17171f;        /* image / input placeholders */
  --line:rgba(255,255,255,.10);
  --muted:#9A9AA8;
  --surface:#16151e;         /* cards */
  --surface-2:#1c1b26;
  --text:#ECEBF2;
  --violet-l:#C3B1FF;        /* legible violet on dark */
  --bg:#0A0A0F;              /* base canvas */
  --shadow-sm:0 2px 16px rgba(0,0,0,.45);
  --shadow-md:0 28px 64px -34px rgba(0,0,0,.8);
  --shadow-lg:0 46px 100px -40px rgba(0,0,0,.85);
}

/* base */
body{background:var(--bg); color:var(--text)}
::selection{background:rgba(124,75,232,.4); color:#fff}
.section.alt{background:var(--canvas)}
h1,h2,h3,h4{letter-spacing:-.022em}
.sec-head h2{letter-spacing:-.028em}
.sec-head p{color:var(--muted)}

/* eyebrow + accent legibility on dark */
.eyebrow{color:var(--violet-l)}
.gradient-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* buttons — calmer, cleaner */
.btn{box-shadow:0 10px 28px -16px rgba(91,46,224,.85); font-weight:600}
.btn:hover{box-shadow:0 16px 36px -16px rgba(91,46,224,.95)}
.btn.ghost{color:var(--text); border-color:rgba(255,255,255,.18); background:transparent}
.btn.ghost:hover{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.05)}

/* "who we are" split */
.split-section{background:#0c0b12}
.split-section .marques{background:#08070c; border-left:1px solid rgba(255,255,255,.07)}

/* feature cards */
.feature{background:var(--surface); border-color:var(--line)}
.feature:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:rgba(255,255,255,.16)}
.feature h3{color:var(--text)}
.feature p{color:var(--muted)}
.why-video-section .feature{background:rgba(20,19,28,.55); color:var(--text); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(12px); box-shadow:0 30px 64px -38px rgba(0,0,0,.85)}
.why-video-section .feature p{color:rgba(236,235,242,.74)}

/* fleet / car cards */
.car-card{background:var(--surface); color:var(--text); border-color:var(--line)}
.car-card:hover{box-shadow:var(--shadow-md); border-color:rgba(255,255,255,.20)}
.car-card .ph{background:#0e0e15}
.car-card h3{color:var(--text)}
.car-card .brand-line{color:var(--violet-l)}
.car-card .view{color:var(--violet-l)}
.car-card .specs .chip{background:rgba(255,255,255,.05); color:rgba(236,235,242,.82); border-color:var(--line)}
.car-card .tag{background:rgba(10,10,16,.84); color:#fff; border:1px solid rgba(255,255,255,.18)}

/* filter chips */
.chip-btn{background:var(--surface); color:rgba(236,235,242,.82); border-color:var(--line)}
.chip-btn:hover{border-color:var(--violet-l); color:#fff}
.fleet-count{color:var(--muted)}

/* showcase fleet header — quiet glass panel */
.sc-fleet-head{background:rgba(255,255,255,.035); color:var(--text); border:1px solid var(--line); box-shadow:none}
.sc-fleet-head h2{color:var(--text)}
.sc-fleet-head p{color:var(--muted)}
.sc-fleet-head .eyebrow{color:var(--violet-l)}

/* contact info + forms */
.info-card{background:var(--surface); border-color:var(--line)}
.info-card a, .info-card span{color:var(--muted)}
.info-card a:hover{color:var(--violet-l)}
.form{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-md)}
.field label{color:rgba(236,235,242,.7)}
.field input, .field select, .field textarea{background:#0f0f16; color:var(--text); border-color:var(--line)}
.field input::placeholder, .field textarea::placeholder{color:rgba(236,235,242,.38)}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--violet); box-shadow:0 0 0 4px rgba(91,46,224,.20)}
.field select option{background:#15141c; color:var(--text)}
.form-note{color:var(--muted)}
.form-success p{color:var(--muted)}
.form-success-note{color:var(--muted)}

/* car detail */
.detail-info .brand-line{color:var(--violet-l)}
.detail-info .tagline{color:var(--muted)}
.detail-info .price-box{background:rgba(255,255,255,.04)}
.detail-info .price-box span{color:var(--muted)}
.gallery .main{background:#0e0e15}
.gallery .thumbs button{background:#0e0e15}

/* faq */
.faq details{background:var(--surface); border-color:var(--line)}
.faq summary::after{background:rgba(255,255,255,.06); color:var(--violet-l)}
.faq .a{color:var(--muted)}

/* enquiry assure + mini card */
.assure span{background:rgba(255,255,255,.05); color:rgba(236,235,242,.82); border-color:var(--line)}
.assure svg{color:var(--violet-l)}
.req-mini{background:rgba(255,255,255,.04); border-color:var(--line)}
.req-mini p{color:var(--muted)}
.req-mini a{color:var(--violet-l)}
.checklist li span{color:var(--muted)}

/* lower-page flow wash */
.flow-zone{background:var(--canvas)}

/* marquee + callbar harmonised tone */
.marquee{background:#0c0c12}
.marquee span{color:rgba(255,255,255,.6)}
.callbar{background:#0c0c12}

/* mobile spacing polish */
@media (max-width:560px){
  .section{padding-block:clamp(52px,13vw,72px)}
  .car-card .body{padding:18px 18px 20px}
  .feature{padding:24px 22px}
}

/* =========================================================================
   BRAND WHEEL — vertical manufacturer logo wheel
   ========================================================================= */
.brand-wheel{
  height:100%; min-height:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:clamp(16px,2vh,24px); padding:clamp(30px,4.2vw,48px) 18px 0; text-align:center;
}
.bw-label{
  flex:0 0 auto; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.46);
}
.bw-window{
  position:relative; flex:1 1 auto; min-height:0; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
}
.bw-track{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:clamp(16px,3.2vh,34px); will-change:transform;
  animation:brandWheelVertical 25s linear infinite;
}
.bw-track li{
  min-height:clamp(76px,10.8vh,116px); display:flex; align-items:center; justify-content:center;
  line-height:1; white-space:nowrap; padding:4px 0;
}
.brand-wheel .bw-track img,
.split-section .marques .bw-track img{
  display:block; width:min(86%, 210px); height:auto; max-height:96px; object-fit:contain; object-position:center;
  opacity:.82; filter:drop-shadow(0 0 16px rgba(134,90,255,.18)) drop-shadow(0 12px 28px rgba(0,0,0,.34));
  transform:translateZ(0);
}
.bw-dot{display:none}
@keyframes brandWheelVertical{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
.brand-wheel:hover .bw-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .bw-track{animation:none}
}
@media (max-width:860px){
  .brand-wheel{height:250px; align-items:center; justify-content:center; padding:24px 22px; gap:0}
  .bw-label{display:none}
  .bw-window{flex:0 0 auto; width:min(340px,100%); height:210px; min-height:210px}
  .bw-track{gap:18px}
  .bw-track li{min-height:70px}
  .brand-wheel .bw-track img,
  .split-section .marques .bw-track img{width:min(78%, 230px); max-height:58px}
}

/* =========================================================================
   CTA BANDS → translucent dark "glass" (match the see-through feature cards)
   Replaces the bright purple gradient panel with a calm frosted dark panel.
   ========================================================================= */
.cta-band{
  background:rgba(20,19,28,.55);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
          backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.8);
}
.cta-band .glow{display:none}
.cta-band p{color:rgba(255,255,255,.74)}
/* Targeted polish: richer purple accents on vehicle-card manufacturer and enquiry text. */
.car-card .brand-line,
.car-card .view{
  color:#D9CBFF;
  text-shadow:0 0 18px rgba(158,31,206,.22);
}
.car-card:hover .brand-line,
.car-card:hover .view{
  color:#E5D9FF;
}

/* =========================================================================
   FLEET — AURORA BACKDROP behind the grid
   Brand purple->blue glow drifting over near-black, with the cards lifted to
   premium glass so the aurora reads softly through the gaps and panels.
   ========================================================================= */
.fleet-section{
  position:relative;
  isolation:isolate;            /* keep the glow contained to this section */
  overflow:hidden;
  background:#060610;           /* deep near-black base (faint blue cast) */
}
.fleet-section > .wrap{position:relative; z-index:1}  /* content above the glow */

/* aurora — soft brand glow distributed the full height of the section so a
   gentle purple->blue wash is always present behind the grid. The glows sit
   in alternating columns (left/right) and the opaque cards rest on top, so the
   colour reads in the margins + gaps without ever competing with the cars. */
.fleet-section::before{
  content:"";
  position:absolute;
  inset:0 -12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(40% 15% at 14% 6%,  rgba(158,31,206,.22), transparent 62%),
    radial-gradient(42% 15% at 86% 21%, rgba(33,55,226,.20),  transparent 62%),
    radial-gradient(40% 15% at 24% 39%, rgba(124,75,232,.17), transparent 62%),
    radial-gradient(42% 15% at 80% 57%, rgba(158,31,206,.16), transparent 62%),
    radial-gradient(40% 15% at 18% 75%, rgba(33,55,226,.18),  transparent 62%),
    radial-gradient(44% 16% at 82% 92%, rgba(124,75,232,.18), transparent 62%);
  filter:blur(62px) saturate(122%);
  will-change:transform;
  animation:fleetAurora 30s ease-in-out infinite alternate;
}
/* hold cars as the focal point + melt the glow into the sections above/below */
.fleet-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(115% 42% at 50% 50%, rgba(6,6,16,.32), rgba(6,6,16,0) 72%),
    linear-gradient(180deg,#060610 0%, rgba(6,6,16,0) 7%, rgba(6,6,16,0) 93%, #060610 100%);
}
@keyframes fleetAurora{
  0%  {transform:translate3d(-1.5%,-0.6%,0) scale(1.03)}
  50% {transform:translate3d(1.5%, 0.8%,0) scale(1.06)}
  100%{transform:translate3d(-0.8%,1.2%,0) scale(1.03)}
}

/* premium glass cards floating over the aurora */
.fleet-section .car-card{
  background:rgba(17,16,24,.74);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
          backdrop-filter:blur(10px) saturate(120%);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 24px 60px -38px rgba(0,0,0,.85);
}
/* bigger, centred car image so the vehicle is the hero of each card */
.fleet-section .car-card{contain-intrinsic-size:auto 500px}
.fleet-section .car-card .ph{background:#0c0c13; aspect-ratio:3/2}
.fleet-section .car-card .ph img{object-fit:cover; object-position:center 48%}
/* gentle floor-shadow under the car so it reads as lifted, not flat */
.fleet-section .car-card .ph::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(8,7,13,.42) 100%);
}
.fleet-section .car-card:hover{
  border-color:rgba(195,177,255,.55);
  box-shadow:0 34px 80px -34px rgba(91,46,224,.6), 0 0 0 1px rgba(124,75,232,.22);
}
.fleet-section .car-card .specs .chip{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

/* the result-count line + toolbar labels sit brighter against the glow (AA) */
.fleet-section .fleet-count{color:rgba(236,235,242,.66)}
.fleet-section .ft-field-label{color:rgba(236,235,242,.72)}

/* skip-link / in-page anchors clear the fixed header */
#main{scroll-margin-top:96px}

@media (prefers-reduced-motion:reduce){
  .fleet-section::before{animation:none}
  .reveal{transition:none}
  /* keep colour/shadow hover cues, drop the motion (lift + image zoom) */
  .fleet-section .car-card,
  .fleet-section .car-card .ph img{transition:none}
  .fleet-section .car-card:hover,
  .fleet-section .car-card:hover .ph img{transform:none}
}
@media (max-width:480px){
  /* lighter blur on phones for paint cost; glow stays */
  .fleet-section::before{filter:blur(52px) saturate(110%)}
  .fleet-section .car-card{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(17,16,24,.92)}
}