/*
Theme Name:   Divi Luxury Child
Theme URI:    https://www.luxurycarsrental.in/
Description:  Luxury child theme for Luxury Cars Rental Chennai. Requires the Divi parent theme.
Author:       Luxury Cars Rental
Template:     Divi
Version:      1.0.0
Text Domain:  divi-luxury-child
*/

/* =========================================================
   1. TOKENS  — change colours HERE ONLY.
   Replace these with the exact hex codes from your current site.
   ========================================================= */
:root{
  --lux-ink:#000000;        /* main dark background            */
  --lux-graphite:#16140f;   /* cards / alternate dark sections */
  --lux-gold:#c9a24b;       /* accent: lines, buttons, numbers */
  --lux-gold-soft:#e6cf94;  /* accent hover / highlights       */
  --lux-ivory:#f6f2e9;      /* light sections                  */
  --lux-text:#d9d4c7;       /* body text on dark               */
  --lux-text-dark:#2a2620;  /* body text on light              */
  --lux-line:rgba(201,162,75,.28);

  --lux-display:"Cormorant Garamond","Times New Roman",serif;
  --lux-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --lux-ease:cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   2. BASE
   ========================================================= */
html{scroll-behavior:smooth}
body,#page-container{background:var(--lux-ink);color:var(--lux-text);font-family:var(--lux-body);font-weight:300}
body.et_pb_pagebuilder_layout #main-content{background:var(--lux-ink)}
h1,h2,h3,h4,h5,h6{font-family:var(--lux-display);color:#fff;font-weight:500;letter-spacing:.01em;line-height:1.08}
h1{font-size:clamp(2.8rem,6.5vw,6rem)}
h2{font-size:clamp(2.1rem,4vw,3.6rem)}
h3{font-size:clamp(1.5rem,2.2vw,2rem)}
p{font-size:17px;line-height:1.85;color:var(--lux-text);padding-bottom:1.1em}
a{color:var(--lux-gold);transition:color .3s var(--lux-ease)}
a:hover{color:var(--lux-gold-soft)}
::selection{background:var(--lux-gold);color:#000}
:focus-visible{outline:2px solid var(--lux-gold);outline-offset:3px}

/* =========================================================
   3. HEADER  — slim top bar + transparent nav that turns solid
   ========================================================= */
#top-header{background:#000;border-bottom:1px solid var(--lux-line);font-size:13px;letter-spacing:.06em}
#top-header,#top-header a{color:var(--lux-gold)}
#main-header{background:transparent;box-shadow:none;border-bottom:1px solid transparent;transition:background .4s var(--lux-ease),border-color .4s}
#main-header.lux-scrolled,.et-fixed-header#main-header{background:rgba(0,0,0,.92)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--lux-line);box-shadow:none!important}
#et-top-navigation{padding-top:0}
#top-menu li a{font-family:var(--lux-body);font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding-bottom:6px}
#top-menu li a:hover,#top-menu li.current-menu-item>a{color:var(--lux-gold);opacity:1}
#top-menu li>a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--lux-gold);transition:width .4s var(--lux-ease)}
#top-menu li>a:hover:after,#top-menu li.current-menu-item>a:after{width:100%}
#top-menu li{position:relative}
.nav li ul{background:#000;border-top:1px solid var(--lux-gold);width:260px}
.nav li li a{width:220px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile_menu_bar:before,#et_mobile_nav_menu .select_page{color:var(--lux-gold)}
.et_mobile_menu{background:#000;border-top:2px solid var(--lux-gold)}
.et_mobile_menu li a{color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.et_pb_button,.lux-btn{
  font-family:var(--lux-body)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.22em!important;
  text-transform:uppercase;color:#000!important;background:var(--lux-gold)!important;
  border:1px solid var(--lux-gold)!important;border-radius:0!important;padding:1.05em 2.4em!important;
  transition:background .35s var(--lux-ease),color .35s,letter-spacing .35s var(--lux-ease)!important}
.et_pb_button:after{display:none!important}
.et_pb_button:hover,.lux-btn:hover{background:transparent!important;color:var(--lux-gold)!important;letter-spacing:.28em!important;padding:1.05em 2.4em!important}
.lux-btn--ghost,.lux-btn--ghost.et_pb_button{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.lux-btn--ghost:hover{border-color:var(--lux-gold)!important;color:var(--lux-gold)!important}

/* =========================================================
   5. HERO
   ========================================================= */
.lux-hero{position:relative;min-height:100vh;display:flex;align-items:center;background-size:cover!important;background-position:center!important}
.lux-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#000 8%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.25) 100%)}
.lux-hero .et_pb_row{position:relative;z-index:2}
.lux-hero h1{max-width:12ch;margin-bottom:.35em}
.lux-hero .lux-lead{max-width:46ch;font-size:19px;color:#fff;opacity:.88}
.lux-hero .lux-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
.lux-hero .lux-rule{width:96px;height:1px;background:var(--lux-gold);margin:0 0 28px}
.lux-scroll-cue{position:absolute;left:50%;bottom:28px;width:1px;height:64px;background:linear-gradient(var(--lux-gold),transparent);z-index:3;transform-origin:top;animation:luxcue 2.2s var(--lux-ease) infinite}
@keyframes luxcue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* page-load hero sequence (the one orchestrated motion) */
.lux-hero .lux-rule,.lux-hero h1,.lux-hero .lux-lead,.lux-hero .lux-actions{opacity:0;transform:translateY(22px);animation:luxin 1s var(--lux-ease) forwards}
.lux-hero .lux-rule{animation-delay:.15s}.lux-hero h1{animation-delay:.3s}
.lux-hero .lux-lead{animation-delay:.55s}.lux-hero .lux-actions{animation-delay:.75s}
@keyframes luxin{to{opacity:1;transform:none}}

/* =========================================================
   6. BRAND MARQUEE
   ========================================================= */
.lux-marquee{overflow:hidden;border-top:1px solid var(--lux-line);border-bottom:1px solid var(--lux-line);padding:26px 0;background:#000}
.lux-marquee-track{display:flex;gap:72px;width:max-content;animation:luxmarq 38s linear infinite}
.lux-marquee span{font-family:var(--lux-display);font-size:clamp(1.6rem,3vw,2.4rem);font-style:italic;color:var(--lux-gold);white-space:nowrap}
.lux-marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--lux-gold)}
@keyframes luxmarq{to{transform:translateX(-50%)}}

/* =========================================================
   7. FLEET — each car is a "chauffeur's trip ticket"
   ========================================================= */
.lux-fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:34px}
.lux-car{background:var(--lux-graphite);border:1px solid var(--lux-line);position:relative;display:flex;flex-direction:column;transition:transform .5s var(--lux-ease),border-color .4s}
.lux-car:hover{transform:translateY(-8px);border-color:var(--lux-gold)}
.lux-car-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.lux-car-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--lux-ease)}
.lux-car:hover .lux-car-img img{transform:scale(1.07)}
.lux-car-img:after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,var(--lux-graphite))}
.lux-car-body{padding:6px 30px 0}
.lux-car h3{margin:0 0 4px}
.lux-car-color{font-size:14px;letter-spacing:.14em;color:var(--lux-gold)}
/* perforated ticket divider */
.lux-ticket{margin-top:22px;position:relative;border-top:2px dashed var(--lux-line);padding:22px 30px 28px;display:grid;gap:12px}
.lux-ticket:before,.lux-ticket:after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--lux-ink);border:1px solid var(--lux-line)}
.lux-ticket:before{left:-13px}.lux-ticket:after{right:-13px}
.lux-ticket div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.lux-ticket small{font-size:13px;letter-spacing:.12em;color:var(--lux-text)}
.lux-ticket b{font-family:var(--lux-display);font-size:1.9rem;font-weight:600;color:#fff}
.lux-car .lux-book{margin:0 30px 30px;text-align:center;border:1px solid var(--lux-gold);color:var(--lux-gold);padding:.95em;font-size:12px;letter-spacing:.24em;text-transform:uppercase;transition:background .3s,color .3s}
.lux-car .lux-book:hover{background:var(--lux-gold);color:#000}

/* =========================================================
   8. SERVICES — alternating editorial rows
   ========================================================= */
.lux-service{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:0;margin-bottom:90px}
.lux-service:nth-child(even){grid-template-columns:1fr 1.1fr}
.lux-service:nth-child(even) .lux-service-img{order:2}
.lux-service-img{overflow:hidden;aspect-ratio:4/3}
.lux-service-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);transition:transform 1.4s var(--lux-ease)}
.lux-service:hover .lux-service-img img{transform:scale(1.05)}
.lux-service-copy{padding:0 clamp(28px,6vw,90px)}
.lux-service-copy h3{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:.5em}
.lux-service-copy h3:after{content:"";display:block;width:64px;height:1px;background:var(--lux-gold);margin-top:18px}
.lux-service-copy a.lux-more{font-size:13px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--lux-gold);padding-bottom:4px}

/* =========================================================
   9. NUMBERS / TRUST STRIP
   ========================================================= */
.lux-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center}
.lux-stats div{padding:34px 10px;border-left:1px solid var(--lux-line)}
.lux-stats div:first-child{border-left:0}
.lux-stats b{display:block;font-family:var(--lux-display);font-size:clamp(2.6rem,5vw,4.4rem);font-weight:500;color:var(--lux-gold);line-height:1}
.lux-stats small{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--lux-text)}

/* =========================================================
   10. LIGHT SECTION (ivory) for contrast
   ========================================================= */
.lux-ivory{background:var(--lux-ivory)!important}
.lux-ivory h2,.lux-ivory h3{color:#000}
.lux-ivory p{color:var(--lux-text-dark)}

/* =========================================================
   11. FORMS
   ========================================================= */
.et_pb_contact_form input,.et_pb_contact_form textarea,.et_pb_contact_form select,
.et_pb_contact input,.et_pb_contact textarea{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--lux-line)!important;border-radius:0!important;
  color:#fff!important;padding:18px 0!important;font-family:var(--lux-body);font-size:16px;transition:border-color .3s}
.et_pb_contact_form input:focus,.et_pb_contact_form textarea:focus{border-bottom-color:var(--lux-gold)!important}
.et_pb_contact_form ::placeholder{color:rgba(255,255,255,.45)}
.et_pb_contact_captcha_question{color:var(--lux-gold)}
.et_pb_contact_form .et_pb_contact_submit{margin-top:20px}

/* =========================================================
   12. FOOTER
   ========================================================= */
#main-footer{background:#000;border-top:1px solid var(--lux-line)}
#footer-bottom{background:#000;border-top:1px solid rgba(255,255,255,.06)}
#footer-info,#footer-info a{color:rgba(255,255,255,.55);font-size:13px;letter-spacing:.06em}
#footer-widgets .widget-title,.footer-widget h4{color:var(--lux-gold)!important;font-family:var(--lux-display);font-size:1.5rem}
.footer-widget,.footer-widget a{color:var(--lux-text)}

/* floating call / WhatsApp pill */
.lux-float{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.lux-float a{display:flex;align-items:center;justify-content:center;height:52px;min-width:52px;padding:0 20px;background:var(--lux-gold);color:#000;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--lux-ease)}
.lux-float a:hover{transform:translateX(-4px);color:#000;background:var(--lux-gold-soft)}

/* scroll reveal (applied by JS, only to section headings) */
.lux-reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--lux-ease),transform 1s var(--lux-ease)}
.lux-reveal.is-in{opacity:1;transform:none}

/* =========================================================
   13. RESPONSIVE + ACCESSIBILITY
   ========================================================= */
@media (max-width:980px){
  .lux-service,.lux-service:nth-child(even){grid-template-columns:1fr;margin-bottom:60px}
  .lux-service:nth-child(even) .lux-service-img{order:0}
  .lux-service-copy{padding:28px 6px 0}
  .lux-hero:before{background:linear-gradient(180deg,rgba(0,0,0,.55),#000 95%)}
  .lux-stats div{border-left:0;border-top:1px solid var(--lux-line)}
}
@media (max-width:600px){
  p{font-size:16px}
  .lux-float{right:12px;bottom:12px}
  .lux-float a span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .lux-reveal,.lux-hero .lux-rule,.lux-hero h1,.lux-hero .lux-lead,.lux-hero .lux-actions{opacity:1;transform:none}
}


/* ==========================================================================
   Luxury Cars Rental — Chennai
   Design system: near-black ground, antique-gold coachline accent,
   Cormorant Garamond display type over Jost body type.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --black:        #09080a;
  --charcoal:     #131116;
  --charcoal-2:   #1b1820;
  --charcoal-3:   #1a140e;   /* warm espresso-black, used to break up repeated charcoal */
  --wine:         #230f12;   /* deep leather-red, used sparingly as an accent band */
  --line:         #2b2730;
  --line-on-cream: rgba(34,28,21,.16);

  --gold:         #c9a15a;
  --gold-light:   #e8cf9a;
  --gold-deep:    #8a6a2f;
  --gold-soft:    rgba(201,161,90,0.14);

  --cream:        #f4eee1;
  --cream-dim:    #cfc6b6;
  --muted:        #948a79;

  /* "cabin leather" panel — the light counterpart to the black exterior */
  --panel-bg:     #efe3cb;
  --panel-bg-2:   #e7d8b8;
  --panel-text:   #221c15;
  --panel-muted:  #7a6c50;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Jost', 'Segoe UI', sans-serif;

  --maxw: 1220px;
  --radius: 2px;

  --mx: 50%;  /* cursor position, updated by JS for the hero spotlight */
  --my: 30%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--cream);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:.01em;
}
p{ margin:0 0 1.1em; color:var(--cream-dim); }
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; }

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

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* -------------------------------------------------- coachline rule -- */
.coachline{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent);
  border:0;
  margin:0;
}
.coachline--l{
  width:64px; height:2px; margin:0 0 22px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
}
.section-kicker{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-light);
  font-size:1.05rem;
  margin:0 0 6px;
}

/* --------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:500; font-size:.92rem;
  letter-spacing:.03em;
  padding:14px 30px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  color:#141014;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,161,90,.28); }
.btn-line{
  border-color:var(--gold-deep);
  color:var(--cream);
  background:transparent;
}
.btn-line:hover{ border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }

/* ---------------------------------------------------------- topbar -- */
.topbar{
  background:var(--charcoal);
  border-bottom:1px solid var(--line);
  font-size:.82rem;
  color:var(--muted);
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  height:40px;
  gap:20px;
}
.topbar a{ color:var(--cream-dim); transition:color .2s; }
.topbar a:hover{ color:var(--gold-light); }
.topbar__contacts{ display:flex; gap:22px; }
.topbar__contacts span{ opacity:.5; }
.topbar__tag{ font-family:var(--serif); font-style:italic; color:var(--gold); letter-spacing:.02em; }

/* ----------------------------------------------------------- header -- */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(9,8,10,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.logo{
  display:flex; flex-direction:column; line-height:1;
  font-family:var(--serif);
}
.logo__main{ font-size:1.55rem; letter-spacing:.04em; color:var(--cream); }
.logo__main em{ color:var(--gold-light); font-style:italic; }
.logo__sub{ font-family:var(--sans); font-size:.62rem; letter-spacing:.32em; color:var(--muted); margin-top:5px; text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav > li{ position:relative; }
.nav > li > a, .nav > li > button{
  display:flex; align-items:center; gap:6px;
  padding:14px 16px;
  font-size:.9rem; letter-spacing:.02em;
  color:var(--cream-dim);
  background:none; border:0; font-family:var(--sans); font-weight:400; cursor:pointer;
  transition:color .2s;
}
.nav > li > a:hover, .nav > li > button:hover, .nav > li.is-open > button{ color:var(--gold-light); }
.nav > li > a.current{ color:var(--gold-light); box-shadow:inset 0 -2px 0 var(--gold); }
.nav .caret{ width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; opacity:.7; }
.nav li.is-open .caret{ transform:rotate(-135deg) translateY(2px); }

.dropdown{
  position:absolute; top:100%; left:0;
  min-width:250px;
  background:var(--charcoal);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav li.is-open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:11px 14px; font-size:.87rem; color:var(--cream-dim);
  border-left:2px solid transparent;
}
.dropdown a:hover{ color:var(--gold-light); border-left-color:var(--gold); background:rgba(201,161,90,.06); }

.nav-cta{ margin-left:6px; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:11px; right:11px; height:1px; background:var(--gold-light);
}
.nav-toggle span{ top:20px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

/* ------------------------------------------------------------- hero -- */
.hero{
  position:relative;
  padding:120px 0 96px;
  background:
    radial-gradient(ellipse 900px 500px at 82% 10%, rgba(201,161,90,.16), transparent 60%),
    linear-gradient(180deg, #0c0b0d 0%, var(--black) 60%);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:'';
  position:absolute; inset:auto -10% -30% auto;
  width:60vw; height:60vw; max-width:780px; max-height:780px;
  background:radial-gradient(circle, rgba(201,161,90,.10), transparent 65%);
  pointer-events:none;
}
/* cursor-tracking spotlight — a single, deliberate interactive flourish */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(480px 480px at var(--mx) var(--my), rgba(201,161,90,.12), transparent 60%);
  pointer-events:none;
  transition:background .08s linear;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero__eyebrow{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold-light); margin-bottom:14px; }
.hero h1{ font-size:clamp(2.5rem, 5vw, 4.1rem); margin-bottom:20px; }
.hero h1 span{ color:var(--gold-light); font-style:italic; }
.hero p.lead{ font-size:1.08rem; max-width:46ch; color:var(--cream-dim); }
.hero__cta{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero__brands{ display:flex; gap:28px; margin-top:52px; flex-wrap:wrap; }
.hero__brands span{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--muted); letter-spacing:.03em; }

.hero__panel{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  padding:34px 30px;
}
.hero__panel::before{
  content:''; position:absolute; inset:8px;
  border:1px solid var(--gold-deep);
  pointer-events:none;
}
.hero__panel h3{ font-size:1.5rem; margin-bottom:4px; }
.hero__panel .muted{ color:var(--muted); font-size:.85rem; margin-bottom:22px; }
.hero__stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px; }
.hero__stat b{ display:block; font-family:var(--serif); font-size:2.1rem; color:var(--gold-light); font-weight:500; }
.hero__stat span{ font-size:.78rem; color:var(--muted); letter-spacing:.03em; }

/* SVG car mark used decoratively */
.car-mark{ opacity:.9; }
.car-mark path, .car-mark circle, .car-mark line{ stroke:var(--gold); fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------------- page-hero -- */
.page-hero{
  padding:74px 0 58px;
  background:
    radial-gradient(ellipse 700px 380px at 90% 0%, rgba(201,161,90,.14), transparent 60%),
    var(--black);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px 420px at var(--mx) var(--my), rgba(201,161,90,.10), transparent 60%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.breadcrumb{ font-size:.82rem; color:var(--muted); margin-bottom:14px; }
.breadcrumb a{ color:var(--cream-dim); }
.breadcrumb a:hover{ color:var(--gold-light); }
.page-hero h1{ font-size:clamp(2.1rem,4vw,3.1rem); }
.page-hero p.lead{ max-width:64ch; color:var(--cream-dim); font-size:1.03rem; }

/* ----------------------------------------------------------- section -- */
section{ padding:92px 0; position:relative; }
.section-alt{ background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-espresso{ background:var(--charcoal-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:660px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }

/* -------------------------------------------- the "cabin" light panel -- */
/* Exterior (black paint) vs. interior (cream leather) is the recurring
   light/dark device used through the site — this is the interior half. */
.section-cream{
  background:
    radial-gradient(ellipse 640px 320px at 12% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border-top:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
  color:var(--panel-text);
}
.section-cream h1, .section-cream h2, .section-cream h3, .section-cream h4{ color:var(--panel-text); }
.section-cream p{ color:#4a4132; }
.section-cream .muted, .section-cream .section-kicker{ color:var(--gold-deep); }
.section-cream .why-item, .section-cream .loc-card{ border-color:var(--line-on-cream); }
.section-cream .why-item__mark{ color:var(--gold-deep); }
.section-cream .svc-card{ background:rgba(255,255,255,.4); border-color:var(--line-on-cream); }
.section-cream .svc-card:hover{ background:rgba(255,255,255,.65); border-color:var(--gold-deep); }
.section-cream .svc-card p{ color:#4a4132; }
.section-cream .btn-line{ border-color:var(--gold-deep); color:var(--panel-text); }
.section-cream .btn-line:hover{ border-color:var(--panel-text); color:var(--panel-text); background:rgba(34,28,21,.06); }
.section-cream .coachline--l{ background:linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.section-cream .icon path, .section-cream .icon circle, .section-cream .icon rect, .section-cream .icon line{ stroke:var(--gold-deep); }

/* ------------------------------------------------------- surface texture -- */
/* Faint carbon-fibre weave — for panels that should read as "material" */
.pattern-carbon{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px);
}
/* Faint dashed road-line — used as a thin divider strip */
.pattern-road{
  height:26px;
  background-image: repeating-linear-gradient(90deg, var(--gold-deep) 0 26px, transparent 26px 52px);
  background-position:center;
  background-repeat:no-repeat;
  opacity:.55;
}
/* Vertical grille lines — a nod to a front grille, used behind stat panels */
.pattern-grille{
  background-image: repeating-linear-gradient(90deg, rgba(201,161,90,.10) 0 2px, transparent 2px 14px);
}

/* ------------------------------------------------------------- grids -- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* ------------------------------------------------------- fleet card -- */
.grid-3, .grid-2{ perspective:1400px; }
.car-card{
  border:1px solid var(--line);
  background:var(--charcoal);
  position:relative;
  transition:border-color .25s ease, transform .12s ease, box-shadow .3s ease;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transform-style:preserve-3d;
  will-change:transform;
}
.car-card::after{
  content:'';
  position:absolute; top:0; right:0; width:22px; height:22px;
  background:linear-gradient(135deg, transparent 50%, var(--gold-deep) 50%);
  opacity:.8;
}
.car-card:hover{ border-color:var(--gold-deep); box-shadow:0 22px 40px -18px rgba(0,0,0,.6); }
.car-card:hover::after{ background:linear-gradient(135deg, transparent 50%, var(--gold-light) 50%); }
.car-card__art{
  height:168px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,161,90,.14), transparent 55%),
    linear-gradient(160deg, #17141a, #0c0b0e);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.car-card__art::before{
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px);
}
.car-card .car-mark{ position:relative; transition:transform .5s ease; }
.car-card:hover .car-mark{ transform:translateX(6px); }
.car-card__body{ padding:24px 26px 26px; }
.car-card__body h3{ font-size:1.45rem; margin-bottom:2px; }
.car-card__color{ font-size:.78rem; color:var(--muted); letter-spacing:.03em; margin-bottom:16px; }
.rate-list{ border-top:1px solid var(--line); padding-top:14px; }
.rate-list li{ display:flex; justify-content:space-between; font-size:.88rem; color:var(--cream-dim); padding:5px 0; }
.rate-list li b{ color:var(--gold-light); font-weight:500; }

/* --------------------------------------------------- service card -- */
.svc-card{
  border:1px solid var(--line);
  padding:30px 28px;
  background:var(--black);
  transition:border-color .25s ease, background .25s ease, transform .12s ease;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.svc-card:hover{ border-color:var(--gold-deep); background:var(--charcoal); }
.svc-card__icon{ margin-bottom:20px; transition:transform .35s ease; }
.svc-card:hover .svc-card__icon{ transform:translateY(-3px) rotate(-4deg); }
.svc-card h3{ font-size:1.3rem; margin-bottom:10px; }
.svc-card p{ font-size:.92rem; margin-bottom:14px; }
.svc-card a.more{ font-size:.82rem; color:var(--gold-light); letter-spacing:.02em; border-bottom:1px solid var(--gold-deep); padding-bottom:2px; display:inline-block; transition:transform .2s ease; }
.svc-card a.more:hover{ border-color:var(--gold-light); transform:translateX(4px); }

/* ------------------------------------------------------ icon (svg) -- */
.icon{ width:40px; height:40px; }
.icon path, .icon circle, .icon rect, .icon line, .icon polyline{
  stroke:var(--gold-light); fill:none; stroke-width:1.3; vector-effect:non-scaling-stroke;
}

/* -------------------------------------------------------- cta band -- */
.cta-band{
  background:linear-gradient(120deg, var(--gold-deep), var(--gold) 55%, var(--gold-light));
  color:#171216;
  padding:64px 0;
}
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ color:#171216; font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:8px; }
.cta-band p{ color:#3a2f1c; margin:0; }
.cta-band .btn-line{ border-color:#171216; color:#171216; }
.cta-band .btn-line:hover{ background:#171216; color:var(--gold-light); }
.cta-band .btn-gold{ background:#171216; color:var(--gold-light); }
.cta-band .btn-gold:hover{ box-shadow:0 10px 26px rgba(23,18,22,.35); }

/* --------------------------------------------------------- numbers -- */
.stat-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--charcoal); }
.stat-strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-strip__item{ text-align:center; padding:38px 10px; border-left:1px solid var(--line); }
.stat-strip__item:first-child{ border-left:0; }
.stat-strip__item b{ display:block; font-family:var(--serif); font-size:2.4rem; color:var(--gold-light); font-weight:500; }
.stat-strip__item span{ font-size:.8rem; color:var(--muted); letter-spacing:.03em; }

/* -------------------------------------------------------- timeline -- */
.why-list{ display:grid; gap:0; }
.why-item{ display:flex; gap:22px; padding:22px 0; border-top:1px solid var(--line); }
.why-item:last-child{ border-bottom:1px solid var(--line); }
.why-item__mark{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1.3rem; min-width:34px; }
.why-item h4{ font-size:1.1rem; margin-bottom:4px; }
.why-item p{ margin:0; font-size:.92rem; }

/* ------------------------------------------------------------ quote -- */
.quote-block{
  border-left:2px solid var(--gold);
  padding:6px 0 6px 26px;
  margin:34px 0;
}
.quote-block p{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--cream); margin:0; }
.quote-block span{ font-size:.8rem; color:var(--muted); }

/* -------------------------------------------------------- list-pkg -- */
.pkg-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.pkg-cols h4{ font-size:1.2rem; margin-bottom:14px; color:var(--gold-light); }
.pkg-cols ul li{
  padding:10px 0 10px 22px;
  border-top:1px solid var(--line);
  position:relative;
  font-size:.94rem;
  color:var(--cream-dim);
}
.pkg-cols ul li::before{ content:'—'; position:absolute; left:0; color:var(--gold); }
.pkg-cols ul li:last-child{ }

/* ------------------------------------------------------------ forms -- */
.form-panel{
  border:1px solid var(--line);
  background:var(--charcoal);
  padding:38px;
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.78rem; letter-spacing:.03em; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%;
  background:var(--black);
  border:1px solid var(--line);
  color:var(--cream);
  font-family:var(--sans); font-size:.94rem;
  padding:13px 15px;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.78rem; color:var(--muted); margin-top:14px; }

/* --------------------------------------------------------- contact -- */
.contact-card{ border:1px solid var(--line); padding:26px 26px; margin-bottom:16px; transition:border-color .25s ease, transform .12s ease; transform-style:preserve-3d; will-change:transform; }
.contact-card:hover{ border-color:var(--gold-deep); }
.contact-card h4{ font-size:.78rem; letter-spacing:.08em; color:var(--gold-light); text-transform:uppercase; margin-bottom:10px; }
.contact-card p{ margin:0; font-size:.98rem; color:var(--cream); }
.contact-card a:hover{ color:var(--gold-light); }

.map-frame{ border:1px solid var(--line); height:340px; filter:grayscale(1) invert(.92) contrast(1.1); }

/* --------------------------------------------------------- location -- */
.loc-card{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.loc-card:last-child{ border-bottom:1px solid var(--line); }
.loc-card h4{ font-size:1.1rem; margin:0; color:var(--cream); font-family:var(--serif); }
.loc-card p{ margin:0; font-size:.88rem; color:var(--muted); max-width:56ch; }

/* -------------------------------------------------------------- faq -- */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  padding:20px 4px; cursor:pointer; font-family:var(--serif); font-size:1.15rem; color:var(--cream);
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--gold); font-size:1.4rem; font-family:var(--sans); }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ padding:0 4px 22px; max-width:70ch; }

/* ------------------------------------------------------------ footer -- */
.site-footer{ background:var(--charcoal); border-top:1px solid var(--line); padding:76px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.footer-grid h5{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:20px; }
.footer-grid p{ font-size:.88rem; }
.footer-grid ul li{ margin-bottom:11px; }
.footer-grid ul a{ font-size:.88rem; color:var(--cream-dim); }
.footer-grid ul a:hover{ color:var(--gold-light); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.8rem; color:var(--muted); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--gold-light); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:34px; height:34px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ border-color:var(--gold); }
.footer-social svg{ width:15px; height:15px; }
.footer-social svg path{ stroke:var(--cream-dim); }
.footer-social a:hover svg path{ stroke:var(--gold-light); }

/* ----------------------------------------------------- whatsapp fab -- */
.fab-wa{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .25s;
}
.fab-wa:hover{ transform:scale(1.08); }
.fab-wa svg{ width:26px; height:26px; }
.fab-wa svg path{ fill:#171216; }

/* ---------------------------------------------------------- helpers -- */
.text-gold{ color:var(--gold-light); }
.mt-0{ margin-top:0; }
.center{ text-align:center; }

/* ------------------------------------------------------- responsive -- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .pkg-cols{ grid-template-columns:1fr; }
  .stat-strip .wrap{ grid-template-columns:1fr 1fr; }
  .stat-strip__item:nth-child(3){ border-left:0; }
}
@media (max-width: 760px){
  .car-card, .svc-card{ clip-path:none; }
  .car-card::after{ display:none; }
  .ticker__track{ animation-duration:18s; }
  .topbar .wrap{ font-size:.72rem; }
  .topbar__tag{ display:none; }
  .nav{
    position:fixed; inset:84px 0 0 0; height:calc(100dvh - 84px);
    background:var(--black); flex-direction:column; align-items:stretch;
    padding:14px 22px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
    border-top:1px solid var(--line);
  }
  .nav.is-open{ transform:translateX(0); }
  .nav > li{ border-bottom:1px solid var(--line); }
  .nav > li > a, .nav > li > button{ width:100%; justify-content:space-between; padding:18px 4px; font-size:1rem; }
  .dropdown{ position:static; border:0; background:none; padding:0 0 10px 14px; opacity:1; visibility:visible; transform:none; display:none; }
  .nav li.is-open .dropdown{ display:block; }
  .nav-cta{ margin:18px 0 0; }
  .nav-toggle{ display:block; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .stat-strip .wrap{ grid-template-columns:1fr 1fr; }
  .cta-band .wrap{ flex-direction:column; text-align:center; }
  section{ padding:64px 0; }
  .hero{ padding:52px 0 64px; }
}


/* ==========================================================================
   v2 — section variety, patterns, interactive car-themed components
   ========================================================================== */

:root{
  --champagne:   #f3ecdd;
  --champagne-2: #fbf6ea;
  --ink:         #17130d;
  --ink-soft:    #4d4232;
  --gold-ink:    #7a5c22;
  --rule-light:  #dccfa9;
  --redline:     #b23a2e;
}

/* ------------------------------------------------ pattern: carbon weave -- */
.pattern-carbon, .section-carbon{
  background-color:#0a090b;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size:8px 8px;
  background-position:0 0, 4px 4px;
}

/* ------------------------------------ pattern: quilted leather + stitching -- */
.section-quilt{
  background-color:#131015;
  background-image:
    radial-gradient(circle at 0 0, rgba(232,207,154,.55) 1.4px, transparent 2px),
    radial-gradient(circle at 28px 28px, rgba(232,207,154,.55) 1.4px, transparent 2px),
    linear-gradient(45deg, transparent 49%, rgba(201,161,90,.20) 49.5%, rgba(201,161,90,.20) 50.5%, transparent 51%),
    linear-gradient(135deg, transparent 49%, rgba(201,161,90,.20) 49.5%, rgba(201,161,90,.20) 50.5%, transparent 51%),
    radial-gradient(ellipse at 50% 0%, rgba(201,161,90,.16), transparent 62%);
  background-size:56px 56px, 56px 56px, 28px 28px, 28px 28px, 100% 100%;
  border-top:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
}

/* -------- texture-only modifier: diamond tread, layers onto .section-cream -- */
.tex-tread{
  background-color:var(--panel-bg);
  background-image:
    linear-gradient(135deg, rgba(122,92,34,.10) 25%, transparent 25%),
    linear-gradient(225deg, rgba(122,92,34,.10) 25%, transparent 25%),
    radial-gradient(ellipse 640px 320px at 12% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  background-size:34px 34px, 34px 34px, 100% 100%, 100% 100%;
  background-position:0 0, 17px 0, 0 0, 0 0;
}

/* ------------------------------------------------------- frame / borders -- */
.frame{
  position:relative;
  border:1px solid var(--gold-deep);
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  padding:34px 30px;
}
.frame::before{
  content:''; position:absolute; inset:7px; pointer-events:none;
  border:1px solid rgba(201,161,90,.38);
}
.frame::after{
  content:''; position:absolute; left:-1px; top:-1px; width:22px; height:22px; pointer-events:none;
  border-left:3px solid var(--gold-light); border-top:3px solid var(--gold-light);
}

/* ------------------------------------------ checkered flag & road dividers -- */
.divider-checker{
  height:22px;
  background:conic-gradient(#0a090b 25%, var(--gold) 0 50%, #0a090b 0 75%, var(--gold) 0) 0 0/22px 22px;
}
.page-hero{ position:relative; }
.page-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:11px;
  background:conic-gradient(#0a090b 25%, var(--gold) 0 50%, #0a090b 0 75%, var(--gold) 0) 0 0/11px 11px;
}
.page-hero{ padding-bottom:70px; }

.divider-road{
  position:relative; height:74px; overflow:hidden;
  background:#0c0b0d;
  border-top:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep);
  cursor:pointer;
}
.divider-road::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:6px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 38px, transparent 38px 76px);
  opacity:.75;
}
.divider-road__car{
  position:absolute; bottom:12px; left:-190px; width:150px;
  transition:none;
}
.divider-road__car .car-mark path, .divider-road__car .car-mark circle{ stroke:var(--gold-light); }
.divider-road__car .beam{ fill:rgba(232,207,154,.35); stroke:none; }
.divider-road.is-driving .divider-road__car{ animation:drive 5.2s cubic-bezier(.25,.6,.35,1) forwards; }
.divider-road__hint{
  position:absolute; right:18px; top:8px; font-size:.7rem; color:var(--muted); letter-spacing:.04em;
}
@keyframes drive{ from{ left:-190px; } to{ left:calc(100% + 40px); } }

/* -------------------------------------------- brand marquee (gold band) -- */
.marquee{
  background:linear-gradient(100deg, var(--gold-deep), var(--gold) 45%, var(--gold-light));
  color:var(--ink);
  border-top:1px solid #0a090b; border-bottom:1px solid #0a090b;
  overflow:hidden; white-space:nowrap; padding:16px 0;
}
.marquee__track{ display:inline-flex; gap:44px; animation:marquee 38s linear infinite; padding-left:44px; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--ink); }
.marquee i{ font-style:normal; color:#3a2f1c; align-self:center; font-size:.9rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------------------------- hero: headlight + dashboard -- */
.hero{
  --mx:70%; --my:30%;
  background-image:
    radial-gradient(circle 340px at var(--mx) var(--my), rgba(232,207,154,.10), transparent 70%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size:100% 100%, 8px 8px, 8px 8px;
  background-position:0 0, 0 0, 4px 4px;
}
.hero.engine-on{
  background-image:
    radial-gradient(circle 420px at var(--mx) var(--my), rgba(232,207,154,.20), transparent 70%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
}
.dash.frame{ padding:26px 26px 28px; }
.dash__car{ display:block; margin:0 auto 6px; overflow:visible; }
.dash__car .beam{ fill:rgba(232,207,154,.42); stroke:none; opacity:0; transition:opacity .5s ease .15s; }
.dash__car .lamp{ fill:none; stroke:var(--gold); transition:fill .4s, stroke .4s; }
.engine-on .dash__car .beam{ opacity:1; }
.engine-on .dash__car .lamp{ fill:var(--gold-light); stroke:var(--gold-light); filter:drop-shadow(0 0 6px var(--gold-light)); }
.gauge{ width:100%; max-width:300px; display:block; margin:0 auto; }
.gauge .g-arc{ fill:none; stroke:var(--line); stroke-width:10; }
.gauge .g-red{ fill:none; stroke:var(--redline); stroke-width:10; }
.gauge .g-tick{ stroke:var(--gold); stroke-width:1.4; }
.gauge text{ fill:var(--muted); font-family:var(--sans); font-size:9px; text-anchor:middle; }
.gauge .g-needle{ stroke:var(--gold-light); stroke-width:2.4; stroke-linecap:round; }
.gauge .g-hub{ fill:var(--gold); }
.dash__read{ text-align:center; margin:-8px 0 16px; }
.dash__read b{ font-family:var(--serif); font-size:2.3rem; color:var(--gold-light); font-weight:500; }
.dash__read span{ font-size:.75rem; color:var(--muted); margin-left:6px; letter-spacing:.06em; }
.dash__actions{ display:flex; gap:10px; }
.dash__actions .btn{ flex:1; justify-content:center; padding:13px 16px; }
.dash .muted{ text-align:center; margin:14px 0 0; }

/* -------------------------------------------- number-plate stat strip -- */
.stat-strip{ border-top:1px solid var(--gold-deep); border-bottom:1px solid var(--gold-deep); padding:54px 0; }
.stat-strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.plate{
  position:relative; text-align:center;
  background:#0a0a0a;
  border:3px solid var(--gold);
  border-radius:9px;
  box-shadow:inset 0 0 0 3px #0a0a0a, inset 0 0 0 4px var(--gold-deep), 0 12px 26px rgba(0,0,0,.5);
  padding:22px 10px 16px;
  transition:transform .3s ease;
}
.plate:hover{ transform:translateY(-4px) rotate(-.6deg); }
.plate::before, .plate::after{
  content:''; position:absolute; top:9px; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold-deep));
}
.plate::before{ left:12px; } .plate::after{ right:12px; }
.plate b{ display:block; font-family:var(--sans); font-weight:600; font-size:2.5rem; letter-spacing:.12em; color:var(--gold-light); line-height:1.1; }
.plate span{ display:block; margin-top:6px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ------------------------------------------------- window-sticker spec -- */
.spec{
  background:#fffdf6; color:var(--ink);
  border:2px solid var(--ink);
  padding:26px 28px 22px;
  box-shadow:9px 9px 0 var(--gold);
  transform:rotate(.6deg);
}
.spec h3{ color:var(--ink); font-size:1.5rem; margin:0 0 4px; }
.spec__sub{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:8px; }
.spec ul li{ display:flex; align-items:baseline; gap:8px; padding:9px 0; font-size:.93rem; color:var(--ink); }
.spec ul li em{ font-style:normal; font-weight:500; }
.spec ul li i{ flex:1; border-bottom:1px dotted var(--ink); transform:translateY(-3px); }
.spec ul li b{ font-weight:500; text-align:right; color:var(--gold-ink); }
.spec__foot{ margin:12px 0 0; padding-top:10px; border-top:2px solid var(--ink); font-size:.72rem; color:var(--ink-soft); }
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }

/* --------------------------------------------------- fleet card upgrades -- */
.car-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .18s ease-out, border-color .25s ease;
  overflow:hidden;
}
.car-card:hover{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); }
.car-card::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; z-index:1;
  background:radial-gradient(circle 190px at var(--gx,50%) var(--gy,30%), rgba(232,207,154,.20), transparent 70%);
}
.car-card:hover::before{ opacity:1; }
.car-card__art .car-mark{ overflow:visible; }
.car-card__art .beam{ fill:rgba(232,207,154,.42); stroke:none; opacity:0; transition:opacity .35s; }
.car-card:hover .beam{ opacity:1; }
.car-card__art .wheel{ transform-box:fill-box; transform-origin:center; stroke-dasharray:5 4; }
.car-card:hover .wheel{ animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.car-card__plate{
  display:inline-block; margin-top:14px; padding:3px 12px;
  border:1px solid var(--gold-deep); border-radius:4px; background:#0a0a0a;
  font-size:.7rem; letter-spacing:.2em; color:var(--gold-light);
}
.section-quilt .car-card{ background:rgba(19,17,22,.94); }

/* filter chips (fleet + destinations + estimator) */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--sans); font-size:.86rem; font-weight:400; letter-spacing:.02em;
  padding:10px 20px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--cream-dim); border:1px solid var(--gold-deep);
  transition:background .2s, color .2s, border-color .2s;
}
.chip:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.chip.is-active{ background:linear-gradient(180deg, var(--gold-light), var(--gold)); color:#141014; border-color:var(--gold); }
.section-cream .chip{ color:var(--panel-text); border-color:var(--gold-deep); }
.section-cream .chip:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }
.section-cream .chip.is-active{ color:#141014; }
.filter-bar{ display:flex; justify-content:center; margin-bottom:38px; }
.car-card[hidden]{ display:none; }

/* service card gloss sweep */
.svc-card{ position:relative; overflow:hidden; }
.svc-card::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(232,207,154,.20), transparent);
  transform:skewX(-20deg); transition:left .8s ease;
}
.svc-card:hover::after{ left:140%; }
.section-carbon .svc-card{ background:rgba(9,8,10,.82); }

/* --------------------------------------------------------- estimator -- */
.estimator{ display:grid; grid-template-columns:1.2fr .8fr; gap:44px; background:var(--ink); }
.estimator fieldset{ border:0; padding:0; margin:0 0 26px; }
.estimator legend{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-light); margin-bottom:12px; padding:0; }
.estimator .chip{ color:var(--cream-dim); border-color:var(--gold-deep); }
.estimator .chip.is-active{ color:#141014; }
.estimator__result{
  border-left:1px solid var(--gold-deep); padding-left:40px;
  display:flex; flex-direction:column; justify-content:center;
}
.estimator__result small{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.estimator__result b{ font-family:var(--serif); font-size:3.6rem; font-weight:500; color:var(--gold-light); line-height:1.1; margin:6px 0; }
.estimator__result .detail{ color:var(--cream-dim); margin-bottom:22px; }
.estimator .form-note{ color:var(--muted); }

/* destination tabs */
.dest{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.dest__panel{
  background:var(--champagne-2); border:1px solid var(--rule-light); border-left:4px solid var(--gold);
  padding:30px 32px; min-height:170px;
}
.dest__panel h3{ font-size:1.6rem; margin-bottom:8px; }
.dest__panel p{ margin:0 0 16px; }

/* ---------------------------------------------- scroll progress "road" -- */
.road-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; background:transparent; }
.road-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  box-shadow:0 0 12px 2px rgba(232,207,154,.65);
}

/* ------------------------------------------------- footer / faq polish -- */
.site-footer{
  background-color:#0a090b;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size:8px 8px; background-position:0 0, 4px 4px;
  border-top:3px solid var(--gold);
}
.section-quilt .faq-item summary{ color:var(--cream); }

@media (max-width: 980px){
  .stat-strip .wrap{ grid-template-columns:1fr 1fr; }
  .stat-strip__item:nth-child(3){ border-left:0; }
  .intro-grid, .estimator, .dest{ grid-template-columns:1fr; gap:36px; }
  .estimator__result{ border-left:0; border-top:1px solid var(--gold-deep); padding:28px 0 0; }
}
@media (max-width: 760px){
  .plate b{ font-size:1.8rem; }
  .spec{ transform:none; }
  .marquee span{ font-size:1.3rem; }
}

/* ---------------------------------------------- real car photographs -- */
.car-card__art--photo{ height:210px; padding:0; background:#0c0b0e; }
.car-card__art--photo::before{ display:none; }
.car-card__photo{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter:saturate(1.05) contrast(1.03);
}
.car-card:hover .car-card__photo{ transform:scale(1.06); }
.car-card__art--photo::after{
  content:''; position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(9,8,10,.72));
}

/* ===================================================== hero image slider == */
.hero--slider{ padding-top:0; }
.hero--slider .hero__grid{ padding-top:76px; }
.hslider{ position:relative; z-index:1; background:#0a090b; border-bottom:3px solid var(--gold); }
.hslider__viewport{ position:relative; overflow:hidden; aspect-ratio:1600 / 550; max-height:640px; width:100%; }
.hslider__track{ position:absolute; inset:0; }
.hslider__slide{
  position:absolute; inset:0;
  transform:translateX(100%);
  transition:transform 1.1s cubic-bezier(.65,0,.25,1);
  will-change:transform;
}
.hslider__slide.is-active{ transform:translateX(0); }
.hslider__slide.is-prev{ transform:translateX(-100%); }
.hslider__slide.no-anim{ transition:none; }
.hslider__slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hslider__scrim{
  position:absolute; inset:auto 0 0 0; height:42%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(9,8,10,.66));
}
.hslider__caption{
  position:absolute; left:clamp(18px,4vw,64px); bottom:clamp(22px,5vw,58px); max-width:440px;
  border-left:2px solid var(--gold); padding-left:18px;
}
.hslider__caption h2{ font-size:clamp(1.5rem,2.8vw,2.3rem); margin:0 0 4px; color:var(--cream); }
.hslider__caption p{ margin:0 0 16px; color:var(--cream-dim); font-size:.95rem; }
.hslider__caption .btn{ padding:11px 22px; font-size:.84rem; }

.hslider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; cursor:pointer;
  border:1px solid var(--gold-deep); background:rgba(9,8,10,.55);
  transition:background .2s, border-color .2s;
}
.hslider__arrow:hover{ background:rgba(9,8,10,.85); border-color:var(--gold-light); }
.hslider__arrow::before{
  content:''; position:absolute; top:50%; left:50%; width:11px; height:11px;
  border-top:1.5px solid var(--gold-light); border-right:1.5px solid var(--gold-light);
}
.hslider__arrow--prev{ left:18px; }
.hslider__arrow--next{ right:18px; }
.hslider__arrow--prev::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.hslider__arrow--next::before{ transform:translate(-70%,-50%) rotate(45deg); }

.hslider__controls{
  position:absolute; right:clamp(18px,4vw,64px); bottom:clamp(14px,3vw,30px); z-index:3;
  display:flex; align-items:center; gap:16px;
}
.hslider__dots{ display:flex; gap:8px; }
.hslider__dot{ border:0; background:transparent; padding:10px 0; cursor:pointer; width:34px; }
.hslider__dot::before{
  content:''; display:block; height:3px; background:rgba(244,238,225,.38);
  transition:background .3s;
}
.hslider__dot:hover::before{ background:rgba(244,238,225,.7); }
.hslider__dot.is-active::before{ background:var(--gold-light); }
.hslider__pause{
  width:34px; height:34px; border:1px solid var(--gold-deep); background:rgba(9,8,10,.55); cursor:pointer; position:relative;
}
.hslider__pause i{ position:absolute; inset:0; }
.hslider__pause i::before, .hslider__pause i::after{
  content:''; position:absolute; top:11px; width:3px; height:12px; background:var(--gold-light);
}
.hslider__pause i::before{ left:12px; } .hslider__pause i::after{ left:19px; }
.hslider__pause[aria-pressed="true"] i::before{
  left:13px; top:10px; width:0; height:0; background:none;
  border-left:10px solid var(--gold-light); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.hslider__pause[aria-pressed="true"] i::after{ display:none; }

.hslider__progress{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3; background:rgba(255,255,255,.10); }
.hslider__progress span{
  display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}
.hslider.is-running .hslider__progress span{ animation:hs-progress 5s linear forwards; }
.hslider.is-paused .hslider__progress span{ animation-play-state:paused; }
@keyframes hs-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .hslider__progress{ display:none; }
}
@media (max-width: 760px){
  .hero--slider .hero__grid{ padding-top:44px; }
  .hslider__caption, .hslider__arrow{ display:none; }
  .hslider__controls{ gap:10px; bottom:4px; }
  .hslider__dot{ width:24px; }
  .hslider__pause{ width:28px; height:28px; }
  .hslider__pause i::before, .hslider__pause i::after{ top:8px; height:12px; }
  .hslider__pause i::before{ left:9px; } .hslider__pause i::after{ left:16px; }
  .hslider__pause[aria-pressed="true"] i::before{ left:10px; top:7px; }
}

/* ============================================ services: valet-ticket lane == */
.svc-lane{
  position:relative; isolation:isolate; overflow:hidden;
  padding:92px 0 100px;
  border-bottom:1px solid var(--gold-deep);
}
.svc-lane::before, .svc-lane::after{
  content:''; position:absolute; left:0; right:0; top:0; z-index:-1;
  clip-path:polygon(0 0, 100% 0, 100% 74%, 0 100%);
}
.svc-lane::before{ height:452px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); }
.svc-lane::after{
  height:442px;
  background-color:#0a090b;
  background-image:
    radial-gradient(ellipse 700px 260px at 50% 0%, rgba(201,161,90,.18), transparent 70%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size:100% 100%, 8px 8px, 8px 8px;
  background-position:0 0, 0 0, 4px 4px;
}
.svc-lane .section-head{ margin-bottom:46px; }
.svc-lane__more{ margin:64px 0 0; }
.btn-ink{ background:var(--ink); color:var(--gold-light); border-color:var(--ink); }
.btn-ink:hover{ transform:translateY(-2px); background:#000; box-shadow:0 10px 26px rgba(23,19,13,.35); }

.ticket-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px;
  padding-bottom:36px;
}
.ticket{
  position:relative; display:flex; flex-direction:column;
  filter:drop-shadow(0 16px 22px rgba(23,19,13,.30));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), filter .35s;
}
.ticket:hover, .ticket:focus-within{
  transform:translateY(-8px);
  filter:drop-shadow(0 26px 30px rgba(23,19,13,.42));
}
.ticket:nth-child(3n+2){ translate:0 36px; }

.ticket__top{
  position:relative; overflow:hidden; background:#0c0b0e;
  aspect-ratio:362 / 211;
  -webkit-mask:
    radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.ticket__top img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.001) translate(calc(var(--px,0) * -7px), calc(var(--py,0) * -5px));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.ticket:hover .ticket__top img{ transform:scale(1.09) translate(calc(var(--px,0) * -7px), calc(var(--py,0) * -5px)); }
.ticket__top::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(232,207,154,.26), transparent);
  transform:skewX(-20deg); transition:left .9s ease;
}
.ticket:hover .ticket__top::after{ left:140%; }
.ticket__no{
  position:absolute; right:14px; bottom:14px;
  background:#0a0a0a; color:var(--gold-light);
  border:1px solid var(--gold); border-radius:4px;
  padding:3px 11px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}

.ticket__stub{
  position:relative; flex:1; display:flex; flex-direction:column;
  background:#fffdf6; color:var(--ink);
  padding:30px 26px 18px;
  -webkit-mask:
    radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
.ticket__stub::before{
  content:''; position:absolute; top:0; left:16px; right:16px;
  border-top:2px dashed rgba(122,92,34,.55);
}
.ticket__badge{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold-ink); background:var(--champagne-2);
  display:flex; align-items:center; justify-content:center;
  margin:0 0 14px; position:relative;
}
.ticket__badge .icon{ width:24px; height:24px; }
.ticket__badge .icon path, .ticket__badge .icon circle, .ticket__badge .icon rect, .ticket__badge .icon line{ stroke:var(--gold-ink); }
.ticket__stub h3{ font-size:1.45rem; color:var(--ink); margin:0 0 8px; }
.ticket__stub p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 16px; }
.ticket__link{
  align-self:flex-start; margin-top:auto; margin-bottom:18px;
  font-size:.84rem; font-weight:500; letter-spacing:.02em; color:var(--gold-ink);
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
}
.ticket__link span{ display:inline-block; transition:transform .25s; }
.ticket:hover .ticket__link span{ transform:translateX(6px); }
.ticket{ cursor:pointer; }
.ticket__link:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:4px; }
.ticket__code{
  height:26px; opacity:.85;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 18px);
}
.ticket__micro{ margin-top:6px; font-size:.6rem; letter-spacing:.22em; color:var(--ink-soft); text-align:center; }

@media (max-width: 980px){
  .ticket-grid{ grid-template-columns:1fr 1fr; }
  .ticket:nth-child(3n+2){ translate:none; }
  .ticket:nth-child(2n){ translate:0 28px; }
}
@media (max-width: 760px){
  .svc-lane{ padding:64px 0 72px; }
  .svc-lane::before{ height:420px; } .svc-lane::after{ height:410px; }
  .ticket-grid{ grid-template-columns:1fr; gap:30px; padding-bottom:0; }
  .ticket:nth-child(2n), .ticket:nth-child(3n+2){ translate:none; }
}

/* index hero is now the image slider only */
.hero--slider-only{ padding-bottom:0; }
.hero--slider-only::after{ display:none; }

/* ===================================================== road below hero ==
   Black tarmac, gold dashed centre line, one small car looping forever.
   The car sprite (63x31) is shown at its native size; it faces left, so it
   drives right to left. */
.road-loop{
  position:relative; height:44px; overflow:hidden;
  background:#000;
  border-bottom:1px solid #16140f;
}
.road-loop::before{
  content:''; position:absolute; left:0; right:0; top:27px; height:3px;
  background:repeating-linear-gradient(90deg, #d8a42e 0 8px, transparent 8px 16px);
}
.road-loop__car{
  position:absolute; top:0; left:100%;
  width:63px; height:31px; max-width:none;
  image-rendering:auto;
  animation:road-loop-drive 18s linear infinite;
}
@keyframes road-loop-drive{
  from{ left:100%; }
  to{ left:-70px; }
}
@media (prefers-reduced-motion: reduce){
  .road-loop__car{ animation:none; left:58%; }
}