/* Homepage-only styling. The shared shell lives in site.css. */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;
 overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0}
.hero-bg .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:0;transition:opacity 1.1s ease}
.hero-bg .slide.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 46%,rgba(0,0,0,.24) 100%)}
.hero .wrap{position:relative;z-index:2;padding:70px 0}
.hero h1{font:400 clamp(2.4rem,6vw,4.4rem)/1.03 var(--serif);letter-spacing:-.02em;color:#fff;margin:6px 0 0}
.hero h1 b{font-weight:400;font-style:italic;color:var(--gold)}
.hero-lead{margin:18px 0 0;max-width:46ch;color:#CFCCC6;font-size:16px;line-height:1.75}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.book.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.stats{display:flex;flex-wrap:wrap;gap:28px;margin:34px 0 0;padding-top:22px}
.stats b{display:block;font:400 1.7rem/1 var(--serif);color:var(--gold)}
.stats span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.dots{display:flex;gap:9px;margin-top:26px}
.dot{width:44px;height:3px;padding:20px 0;border:0;background:rgba(255,255,255,.34);
 background-clip:content-box;cursor:pointer}
.dot.on{background:var(--gold);background-clip:content-box}
.hero-card{position:absolute;right:0;top:50%;transform:translateY(-50%);
 border:1px solid var(--gold);border-radius:12px;padding:16px 22px;text-align:right;
 background:rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.hero-card b{display:block;font:600 .82rem/1.2 var(--sans);letter-spacing:.06em;color:#fff}
.hero-card i{display:block;font:400 1.9rem/1.1 var(--serif);font-style:normal;color:var(--gold);margin:6px 0}
.hero-card span{font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
@media(max-width:980px){.hero-card{display:none}}

.marques{position:relative;background:#000;padding:26px 0;overflow:hidden;
}
.marques::before,.marques::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2}
.marques::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.marques::after{right:0;background:linear-gradient(270deg,#000,transparent)}
.marq-track{display:flex;align-items:center;gap:76px;width:max-content;
 animation:marqScroll 42s linear infinite}
.marques:hover .marq-track{animation-play-state:paused}
.marq-logo{width:86px;height:58px;flex:none;background:center/contain no-repeat;
 opacity:.92;transition:transform .35s,opacity .35s}
.marq-logo:hover{opacity:1;transform:scale(1.08)}
/* Cadillac crest sits high — nudge down to align with row baseline */
.marq-logo[aria-label="Cadillac"]{transform:translateY(8px)}
.marq-logo[aria-label="Cadillac"]:hover{transform:translateY(8px) scale(1.08)}
/* Rolls-Royce wordmark is narrow — scale up so it reads at parity */
.marq-logo[aria-label="Rolls-Royce"]{transform:scale(1.3);transform-origin:center}
.marq-logo[aria-label="Rolls-Royce"]:hover{transform:scale(1.38)}
/* BMW roundel fills its bbox — shrink 30% in the marquee only */
.marq-logo[aria-label="BMW"]{transform:scale(0.7);transform-origin:center}
.marq-logo[aria-label="BMW"]:hover{transform:scale(0.76)}
/* RAM wordmark — re-centre in bbox */
.marq-logo[aria-label="RAM"]{background-position:center center}
/* Jetour wordmark is a very thin strip — scale up so it reads at parity */
.marq-logo[aria-label="Jetour"]{transform:scale(0.96);transform-origin:center}
.marq-logo[aria-label="Jetour"]:hover{transform:scale(1.04)}
/* Land Rover — requested 15% larger, this one only */
.marq-logo[aria-label="Land Rover"]{transform:scale(1.15);transform-origin:center}
.marq-logo[aria-label="Land Rover"]:hover{transform:scale(1.23)}
/* Aston Martin + Bentley — requested 40% larger, these two only */
.marq-logo[aria-label="Aston Martin"]{transform:scale(1.4);transform-origin:center}
.marq-logo[aria-label="Aston Martin"]:hover{transform:scale(1.48)}
.marq-logo[aria-label="Bentley"]{transform:scale(1.4);transform-origin:center}
.marq-logo[aria-label="Bentley"]:hover{transform:scale(1.48)}
/* Chevrolet bowtie badge swapped in — requested 20% larger, this one only */
.marq-logo[aria-label="Chevrolet"]{transform:scale(1.2);transform-origin:center}
.marq-logo[aria-label="Chevrolet"]:hover{transform:scale(1.28)}
@keyframes marqScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marq-track{animation-duration:110s}}
@media(max-width:720px){
  .marques{padding:18px 0}
  .marq-track{gap:48px;animation-duration:30s}
  .marq-logo{width:62px;height:42px}
  .marques::before,.marques::after{width:56px}
}

/* The reference site gives each band 90-95px of vertical room. Ours were on 74,
   which is what made five listings in a row feel packed together. */
.cars{padding:92px 0}
.story{padding:92px 0;background:var(--ink2)}
.cars .band-head{margin-bottom:42px}
/* A little more air between the tiles as well, without changing the four-across
   layout or anything inside a tile. */
.cars .quad{gap:clamp(1.25rem, 1.8vw, 2.25rem)}

/* The listing bands get their own, wider measure. --wrap is redefined on the
   section rather than on :root, so .wrap resolves against this value inside a
   car band and against the global 1240px everywhere else — no other section
   moves. The cap is in rem so it scales with the reader's text size instead of
   being pinned to one screen. */
@media(min-width:1200px){
  .cars{--wrap:min(94vw, 108rem)}
}
@media(max-width:900px){.cars,.story{padding:64px 0}.cars .band-head{margin-bottom:30px}}
.how{padding:74px 0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.step{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;
 border:1px solid var(--gold);color:var(--gold);font:400 1rem/1 var(--serif);margin-bottom:14px}
.step h3{font:600 .98rem/1.3 var(--sans);color:var(--gold)}
.step p{margin:9px 0 0;font-size:13.5px;line-height:1.7;color:var(--dim)}
.revs{padding:74px 0}
.rev-score{text-align:right;flex:none}
.rev-score-top{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:0;
 font:400 1.9rem/1 var(--serif);color:#fff}
.rev-score-top .g-ic{width:22px;height:22px;flex:none}
.rev-score-top .rev-stars{font-size:15px;letter-spacing:2px;color:#F2B90C}
.rev-score-count{margin:6px 0 14px;font:400 12px/1 var(--sans);letter-spacing:.02em;color:var(--dim)}
.rev-cta{display:inline-block;padding:10px 20px;border-radius:999px;background:var(--gold);
 color:#12100C;font:700 12px/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:.24s}
.rev-cta:hover{background:var(--gold2)}
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.rev{margin:0;display:flex;flex-direction:column;background:#F6F5F3;border:1px solid #E4E1DC;
 border-radius:14px;padding:22px 20px}
.rev figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;
 font:700 14px/1.2 var(--sans);color:#141416}
.rev figcaption .g-ic{width:16px;height:16px;flex:none}
.rev-stars{display:block;margin:0 0 12px;font-size:13px;letter-spacing:2px;color:#F2B90C}
.rev blockquote{margin:0;font:400 .92rem/1.6 var(--sans);color:#4B4A47;
 display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev-more{display:inline-block;margin-top:10px;font:700 12.5px/1 var(--sans);color:#8A6B2E;
 text-decoration:none}
.rev-more:hover{text-decoration:underline}
.faq{padding:74px 0}
.faq-list{margin-top:26px;display:grid;gap:16px}
/* Boxed accordion rows — bordered rounded card per question, bigger question
   size — matches the .faq-group treatment on the dedicated FAQ page. Scoped
   to .faq-list so the plain <details> accordion used elsewhere (a car's own
   rental-terms FAQs) is untouched. */
.faq-list details{border:1px solid rgba(255,255,255,.14);border-radius:18px;
 padding:0;background:rgba(255,255,255,.035);overflow:hidden}
.on-paper .faq-list details{border-color:#E4E1DC;background:#fff}
/* !important beats the Theme page's own generated bare "summary{font-size}"
   / "details p{font-size}" size-role rules (css/theme.css), which would
   otherwise win since they load last. */
.faq-list summary{font-weight:700;font-size:18px !important;line-height:1.5 !important;padding:22px}
.faq-list summary::after{font-size:22px}
.faq-list details p{margin:0;padding:0 22px 22px 22px;font-size:16px !important;line-height:1.6 !important}
@media(max-width:1100px){.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .band-head:has(.rev-score){flex-direction:column;align-items:flex-start}
  .rev-score{text-align:left}
  .rev-score-top{justify-content:flex-start}
  .hero .wrap{padding:52px 0}
  .stats{gap:20px}
}
@media(max-width:560px){.rev-grid{grid-template-columns:minmax(0,1fr)}}

.enquire{padding:80px 0;background:var(--ink2);border-top:1px solid var(--line)}
.enq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
.enq-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.enq-points li{display:flex;align-items:center;gap:10px;font-size:14px;color:#DCDEE1}
.enq-points .ic{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.6;flex:none}
.enq-card{background:#0d0d0f;border:1px solid rgba(216,181,113,.35);border-radius:18px;padding:26px;
 box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
@media(max-width:900px){.enq-grid{grid-template-columns:minmax(0,1fr);gap:26px}.enquire{padding:56px 0}}
/* Fleet page: "Next step" text on the left, form on the right (text first on phones too). */
.fleet-enq .enq-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center}
.fleet-enq .enq-text .hero-cta{margin-top:26px}
.fleet-enq .enq-text .lead2{margin-top:14px}
@media(max-width:900px){.fleet-enq .enq-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- band rule, page-specific components --------------------------- */
.on-paper.story{background:var(--paper)}
.on-paper .step{background:#F6F5F3;border-color:#E4E1DC}
.on-paper .step h3{color:#8A6B2E}
.on-paper .step p{color:#5C5A56}
.on-paper .step b{border-color:#8A6B2E;color:#8A6B2E}
.on-paper .rev{background:#fff;border-color:#E4E1DC}
.on-paper .rev-score-top{color:#141416}
.on-paper .rev-score-count{color:#5C5A56}
.on-paper.enquire{background:var(--paper);border-top-color:#E4E1DC}
.on-paper .enq-points li{color:#3A3A3C}
.on-paper .enq-card{background:#101012;border-color:rgba(0,0,0,.2)}

/* car detail page on a light band */
.on-paper.figs{background:var(--paper);border-color:#E4E1DC}
.on-paper .fig b{color:#141416}
.on-paper .fig span{color:#5C5A56}
.on-paper .fig .ic{stroke:#8A6B2E}
.on-paper .feat-card{background:#F6F5F3;border-color:#E4E1DC}
.on-paper .feat-card h3{color:#8A6B2E}
.on-paper .feat-card p{color:#5C5A56}
.on-paper .spec-table>div,.on-paper .terms-grid>div{border-color:#E4E1DC}
.on-paper .spec-table dt,.on-paper .terms-grid dt{color:#8A6B2E}
.on-paper .spec-table dd,.on-paper .terms-grid dd{color:#3A3A3C}
.on-paper .prose-grid p{color:#4B4A47}
.on-paper .gal-cap{color:#5C5A56}
.on-paper .thumb{border-color:#E4E1DC}
.on-paper .buy{background:#101012;border-color:rgba(0,0,0,.18)}
@media(min-width:1200px){.sect:has(> .wrap > .quad){--wrap:min(94vw,108rem)}}
.map{padding:60px 0}
.map .sec{margin:0 0 10px}
.map .map-note{color:#c9b98a;font-size:15px;margin:0 0 24px;max-width:52ch}
.map .map-wrap{border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid var(--gold);background:#0e0e11}
.map iframe{display:block;width:100%;height:460px;background:#0e0e11 linear-gradient(100deg,#0e0e11 30%,#1a1a20 50%,#0e0e11 70%) 0 0/200% 100%;animation:mapsh 1.4s linear infinite}
@keyframes mapsh{to{background-position:-200% 0}}
@media(max-width:720px){.map iframe{height:360px}}