/* ============================================================
   TEN STARS CARS — dark prestige automotive design system
   Palette: pure black/white sampled straight off their own plate-style
   logo (#000 fill, #FFF type/border — nothing coloured in the real mark),
   with a platinum/chrome accent ramp sampled from the fleet's own metal —
   grille surrounds, brushed alloys, chrome window trim — since a pure
   monochrome brand needs one derived accent for CTAs/links. Fonts are the
   client's own: Questrial + Raleway, both pulled straight from their live
   site's font-family declarations (both happen to be free Google Fonts).
   ============================================================ */

:root{
  --ink:#08080A;
  --ink-2:#0E0E10;
  --surface:#141416;
  --surface-2:#1B1B1E;
  --line:rgba(201,205,211,.16);
  --line-soft:rgba(255,255,255,.07);

  /* platinum / chrome ramp */
  --plat:#C9CDD3;
  --plat-lt:#F4F6F8;
  --plat-dp:#8A8F98;
  --plat-glow:rgba(201,205,211,.26);
  --plat-grad:linear-gradient(120deg,#8A8F98 0%,#C9CDD3 28%,#F4F6F8 52%,#C9CDD3 74%,#8A8F98 100%);

  --txt:#EDEEF0;
  --txt-mut:#9A9CA2;
  --txt-dim:#6B6D72;
  /* Cinematic refresh (17 Aug 2026): swapped the display face from Space Grotesk to
     Archivo at width 125 (the expanded axis), extrabold. Wide extended capitals are
     the type language luxury car brands use, so headlines now read like a film title
     card rather than a modern tech sans. Body copy stays Inter. The wdth axis is
     pinned at 125 in the Google Fonts request, so the served face is already
     expanded; font-stretch:125% on the headings matches that face exactly. */
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* 20 Aug 2026 — the gold accent is retired. These aliases now point at the platinum
     ramp so anything still referencing them renders silver, not gold. */
  --gold:var(--plat);
  --gold-lt:var(--plat-lt);
  --gold-dp:var(--plat-dp);
  --gold-glow:var(--plat-glow);
  --gold-grad:var(--plat-grad);

  --shell:1280px;
  --pad:clamp(20px,5vw,64px);
  --hdr:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-lux:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit}
section[id]{scroll-margin-top:96px}
@media(max-width:640px){section[id]{scroll-margin-top:88px}}

/* ---------- grain + vignette ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.46;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%);
}
main,header,footer{position:relative;z-index:2}
main{overflow-x:clip}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-stretch:125%;font-weight:600;letter-spacing:.002em;margin:0;line-height:1.12}
/* items 13/14 — every major headline reads in full capitals, sitewide, as the
   primary style. Applied via text-transform so the underlying markup/SEO text
   stays natural sentence case; only h3/h4 (card and sub-heading level) stay as
   written, so full caps reads as a headline signal rather than losing hierarchy. */
h1,h2{
  font-weight:800;text-transform:uppercase;letter-spacing:.004em;line-height:1.06;
}
/* Expanded caps eat roughly 20% more horizontal room than the old Space Grotesk at
   the same px, so the display sizes come down a step to keep the same line breaks. */
h1{font-size:clamp(29px,4.1vw,53px)}
h2{font-size:clamp(22px,2.9vw,35px)}
h3{font-size:clamp(19px,2.1vw,24px);font-weight:700}
h4{font-weight:700}
p{margin:0 0 1.1em}
.lede{font-size:clamp(17px,1.7vw,21px);color:var(--txt-mut);line-height:1.75;font-weight:300}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--plat);margin:0 0 20px;display:flex;align-items:center;gap:14px;
}
/* 20 Aug 2026 — the little rule before the eyebrow read as a stray hyphen, removed */
.eyebrow.ctr{justify-content:center}
.stars{letter-spacing:.3em;color:var(--plat-lt);font-size:12px}
.plat{
  background:var(--plat-grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:200% center}}

/* ---------- layout ---------- */
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-tight{padding:clamp(52px,7vw,92px) 0}
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* ---------- header ---------- */
.hd{
  position:fixed;top:var(--cnote-h,0px);left:0;right:0;z-index:80;height:var(--hdr);
  display:flex;align-items:center;
  transition:background .5s var(--ease),backdrop-filter .5s,height .4s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.hd.stuck{
  height:70px;background:rgba(8,8,10,.84);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line);
}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:46px;width:auto;transition:height .4s var(--ease)}
.hd.stuck .brand img{height:38px}
@media(max-width:640px){.brand img{height:36px}.hd.stuck .brand img{height:32px}}
/* 20 Aug 2026 — nav was wrapping "Our Cars" and "Weddings & Events" onto two lines at
   laptop widths. Every item is now nowrap and the row shrinks its gap and tracking
   before it is ever allowed to break. */
.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,1.35vw,22px);min-width:0}
.nav a{
  font-size:clamp(10.5px,.82vw,12px);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mut);
  font-weight:500;position:relative;padding:8px 0;transition:color .35s;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--plat-grad);transition:width .45s var(--ease-lux);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--plat-lt)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.hd-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.burger i{display:block;width:22px;height:1.5px;background:var(--plat);transition:transform .4s var(--ease),opacity .3s}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile nav */
.mnav{
  position:fixed;left:0;right:0;top:0;z-index:70;background:rgba(8,8,10,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--hdr) + 18px) var(--pad) 40px;
  transform:translateY(-102%);transition:transform .55s var(--ease-lux);
  max-height:100dvh;overflow-y:auto;border-bottom:1px solid var(--line);
}
.mnav.open{transform:translateY(0)}
.mnav a{
  display:block;padding:14px 0;font-family:var(--display);font-size:21px;color:var(--txt);
  border-bottom:1px solid var(--line-soft);
}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{margin-top:22px;width:100%;justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:2px;cursor:pointer;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  position:relative;overflow:hidden;transition:transform .4s var(--ease-lux),box-shadow .4s,color .4s;
}
/* 20 Aug 2026 — gold pulled out entirely. Primary CTAs are brushed platinum, so the
   whole site is silver, graphite, white and black. Dark graphite text sits on top. */
.btn-plat{background:var(--plat-grad);background-size:200% auto;color:#0B0B0D;box-shadow:0 6px 30px -12px var(--plat-glow);
  background-repeat:no-repeat;animation:plat-flow 7s ease-in-out infinite alternate}
.btn-plat:hover{transform:translateY(-2px);box-shadow:0 14px 42px -14px var(--plat-glow);animation-duration:2.6s}
.btn-line{border:1px solid var(--line);color:var(--txt)}
.btn-line:hover{border-color:var(--plat);color:var(--plat-lt);transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:11.5px}
@media(max-width:640px){.btn{width:100%}.btn.auto{width:auto}}

/* 31 Aug 2026 — every CTA now carries live movement rather than waiting for a
   hover. Two layers do it: the brushed platinum fill drifts across itself
   (plat-flow), and a narrow specular highlight sweeps over the top of any
   button (btn-sheen on the ::after). The outline buttons only get the sweep,
   since they have no fill to move. Both stop dead under reduced motion. */
/* pans 0% to 100% only. Going to 200% walks the background clean off its own tile
   and the repeat seam shows up as a hard vertical line across the button, so the
   drift stays inside the single tile and alternates instead, which reads like light
   rolling over brushed metal. */
@keyframes plat-flow{from{background-position:0% center}to{background-position:100% center}}
@keyframes btn-sheen{
  0%{transform:translateX(-140%) skewX(-18deg);opacity:0}
  12%{opacity:1}
  56%{opacity:1}
  100%{transform:translateX(240%) skewX(-18deg);opacity:0}
}
/* the band fades across its own WIDTH (to right), not down its height. A steep
   angle here reads as a hard rectangular edge on a band this tall, which is what
   the skew is for instead. */
.btn::after{
  content:"";position:absolute;top:-40%;left:0;width:44%;height:180%;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-18deg);
  animation:btn-sheen 4.6s var(--ease) infinite;
}
.btn-line::after{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%)}
.btn:hover::after{animation-duration:2.2s}
/* the sheen must never sit on top of the label or the arrow glyph */
.btn>*{position:relative;z-index:1}

.alink{
  display:inline-flex;align-items:center;gap:9px;color:var(--plat);
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  padding:8px 0;min-height:40px;
}
.alink svg{transition:transform .45s var(--ease-lux)}
.alink:hover svg{transform:translateX(6px)}
.alink:hover{color:var(--plat-lt)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:calc(var(--hdr) + var(--cnote-h,0px))}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:saturate(.68) contrast(1.08) brightness(.5)}

/* item 20 — hero background crossfade (17 Aug 2026), replacing the shaky convoy
   clip. Nine studio renders on one 58.5s loop: 6.5s per car with a 1.6s crossfade
   and a slow push in, so the background drifts rather than cuts.
   Without JS only the first slide is ever shown, as a plain static hero image —
   ts.js loads the other eight and adds .playing once they have all decoded, so the
   loop can never start on a half-loaded slide and flash black. */
.hero-fade{position:absolute;inset:0}
.hero-fade img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  /* Lighter than the old .hero-bg treatment: the convoy clip was a bright daylight
     scene that needed brightness(.5), but these renders are already on a near-black
     studio backdrop and that much knockdown lost the car entirely. */
  filter:saturate(.85) contrast(1.02) brightness(.98);
}
.hero-fade img:first-child{opacity:1}
/* 19 Aug 2026 — the Urus slide was pulled (a child was in frame), so the loop runs
   eight slides on 52s rather than nine on 58.5s. Keep the per-slide timing identical
   at 6.5s and rescale the keyframe percentages against the shorter loop. */
.hero-fade.playing img{animation:heroFade 52s linear infinite}
/* delay = index * 6.5s - 1.6s, so slide one opens already fully faded in */
.hero-fade.playing img:nth-child(1){animation-delay:-1.6s}
.hero-fade.playing img:nth-child(2){animation-delay:4.9s}
.hero-fade.playing img:nth-child(3){animation-delay:11.4s}
.hero-fade.playing img:nth-child(4){animation-delay:17.9s}
.hero-fade.playing img:nth-child(5){animation-delay:24.4s}
.hero-fade.playing img:nth-child(6){animation-delay:30.9s}
.hero-fade.playing img:nth-child(7){animation-delay:37.4s}
.hero-fade.playing img:nth-child(8){animation-delay:43.9s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.06)}
  3.08%{opacity:1}
  12.5%{opacity:1}
  15.58%{opacity:0}
  18%{transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){
  .hero-fade.playing img{animation:none;opacity:0}
  .hero-fade.playing img:first-child{opacity:1}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  /* Two scrims. The vertical one is the original mood gradient; the horizontal one
     was added with the crossfade (item 20) because the slides alternate between
     black cars and white ones — the Ghost and Bentayga are bright enough that the
     platinum half of the headline lost contrast against the bodywork. Keeping the
     copy column dark means every slide is safe to show, not just the dark ones. */
  background:
    linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.66) 34%,rgba(8,8,10,.16) 60%,transparent 78%),
    linear-gradient(180deg,rgba(8,8,10,.52) 0%,rgba(8,8,10,.24) 45%,rgba(8,8,10,.9) 100%);
}
/* Below the two-column breakpoint the copy runs full width, so a left-side scrim
   would not cover it — use a flat veil instead. */
@media(max-width:900px){
  .hero-bg::after{
    background:
      linear-gradient(180deg,rgba(8,8,10,.76) 0%,rgba(8,8,10,.56) 45%,rgba(8,8,10,.94) 100%);
  }
}
.hero .wrap{position:relative;z-index:3;width:100%;padding-block:clamp(60px,10vh,110px)}
/* item 2 — the tagline is promoted to the primary headline treatment: bold, full
   caps, large, front and center, ahead of the supporting h1 line below it. */
.hero-tag{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,27px);letter-spacing:.05em;line-height:1.3;
  color:var(--txt);margin:0 0 18px;max-width:15ch;
}
.hero-tag .plat{font-weight:700}
.hero h1{max-width:17ch}
/* 18 Aug 2026 — the hero eyebrow and supporting paragraph were cut back to a single
   statement, so the headline carries the section on its own and is sized up to suit. */
.hero h1.hero-solo{max-width:15ch;font-size:clamp(38px,6.4vw,86px);line-height:1.02}
/* Header CTA reads "Book now" and is sized so it never wraps to two lines. */
.hdr-book{padding:0 28px;min-height:50px;font-size:13.5px;letter-spacing:.12em;white-space:nowrap}
@media(max-width:640px){.hero h1.hero-solo{font-size:clamp(34px,9.4vw,46px)}}
.hero .lede{max-width:52ch;margin-top:26px}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
@media(max-width:640px){.hero-cta{flex-direction:column}.hero{min-height:auto;padding-bottom:70px}.hero-tag{font-size:clamp(16px,4.8vw,20px);max-width:24ch;letter-spacing:.03em}}

/* item 3 — mission copy as short icon dot points instead of a dense paragraph */
.mission-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.mission-list li{display:flex;align-items:flex-start;gap:15px}
.mission-list span{color:var(--txt-mut);font-size:15px;line-height:1.5;padding-top:9px}
/* 31 Aug 2026 — the glyphs were sitting low in their rings. Cause: .mi is a span,
   so it was picking up the 9px top padding meant for the copy, and border-box was
   taking that out of the circle's own height. The ring now resets its padding and
   centres with grid place-items, and the svg goes display:block so no inline
   baseline gap creeps back in. */
.mission-list .mi{
  flex:none;width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,205,211,.08);border:1px solid var(--line);color:var(--plat);
}
.mission-list .mi svg{display:block;width:20px;height:20px}
.mission-list.ctr{max-width:52ch;margin-inline:auto;text-align:left}

/* item 12 — a short label above/beside a bare phone number so the box reads as
   an invitation to call, not just a number sitting next to the primary CTA */
.phone-cta{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.phone-cta small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}

/* word cascade */
.casc{display:block;overflow:hidden}
.casc>span{display:inline-block;transform:translateY(105%);opacity:0}
.ready .casc>span{animation:cascIn 1.05s var(--ease-lux) forwards}
@keyframes cascIn{to{transform:translateY(0);opacity:1}}

/* scroll cue */
.cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
.cue span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt-dim)}
.cue i{display:block;width:1px;height:52px;background:linear-gradient(var(--plat),transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--plat-lt);animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{to{top:52px}}
@media(max-width:640px){.cue{display:none}}

/* ---------- reveal engine ---------- */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s var(--ease-lux),transform 1s var(--ease-lux),filter 1s var(--ease-lux)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv-l{opacity:0;transform:translateX(-30px);filter:blur(6px);transition:all 1.05s var(--ease-lux)}
.rv-l.in{opacity:1;transform:none;filter:blur(0)}
.rv-r{opacity:0;transform:translateX(30px);filter:blur(6px);transition:all 1.05s var(--ease-lux)}
.rv-r.in{opacity:1;transform:none;filter:blur(0)}
.rv-s{opacity:0;transform:scale(1.06);filter:blur(8px);transition:all 1.3s var(--ease-lux)}
.rv-s.in{opacity:1;transform:none;filter:blur(0)}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}[data-d="6"]{transition-delay:.54s}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .casc>span{opacity:1!important;transform:none!important;animation:none!important}
  .plat{animation:none}
}

.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;background:var(--plat-grad);box-shadow:0 0 14px var(--plat-glow)}

/* ---------- stat band ---------- */
.stats{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(201,205,211,.05),transparent)}
.stats .grid{gap:0}
.stats .g3{grid-template-columns:repeat(3,1fr)}
.stat{padding:clamp(30px,4.4vw,54px) clamp(14px,2vw,28px);text-align:center;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(32px,4.6vw,54px);font-weight:500;line-height:1}
.stat small{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-mut)}
@media(max-width:860px){.stats .g4{grid-template-columns:repeat(2,1fr)}.stats .g4 .stat:nth-child(2){border-right:0}.stats .g4 .stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}}
@media(max-width:640px){.stats .g3{grid-template-columns:repeat(2,1fr)}.stats .g3 .stat:nth-child(2){border-right:0}.stats .g3 .stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}.stats .g3 .stat:nth-child(3){grid-column:1/-1;border-right:0}}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(165deg,var(--surface),var(--ink-2));
  border:1px solid var(--line-soft);border-radius:3px;padding:clamp(26px,3.4vw,40px);
  position:relative;overflow:hidden;transition:border-color .55s,transform .55s var(--ease-lux),background .55s;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--plat-grad);opacity:0;transition:opacity .55s;
}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:12px}
.card p{color:var(--txt-mut);font-size:15.5px;margin-bottom:0}
.card .num{
  font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--plat-dp);
  display:block;margin-bottom:18px;
}

/* ---------- vehicle cards ---------- */
.vcard{
  border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;background:var(--ink-2);
  transition:border-color .5s,transform .5s var(--ease-lux);
  /* Column flex so the price/VIEW row can be pinned to the bottom of every card.
     The expanded display face wraps the longer vehicle names onto two lines, and
     without this the meta rows sit at different heights across a row of cards. */
  display:flex;flex-direction:column;
}
.vcard:hover{border-color:var(--plat);transform:translateY(-5px)}
.vcard .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface);flex:none}
.vcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-lux)}
.vcard:hover .shot img{transform:scale(1.06)}
.vcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.vcard .name{font-family:var(--display);font-size:17px;margin:0 0 5px;line-height:1.25}
.vcard .sub{font-size:13px;color:var(--txt-mut);margin:0 0 14px;min-height:1.2em}
.vcard .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft);margin-top:auto}
.vcard .price{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--plat)}
.tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--plat-grad);color:#0A0A0B;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:2px;
}
.tag.dark{background:rgba(8,8,10,.82);color:var(--plat-lt);border:1px solid var(--line)}
.tag.mock{background:rgba(8,8,10,.86);color:var(--txt-mut);border:1px solid var(--line-soft)}

/* honest placeholder for a real fleet vehicle with no real photography supplied yet —
   never substitute a photo of a different car */
.ph-tile{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(160deg,var(--surface),var(--ink-2));color:var(--txt-dim);text-align:center;padding:18px;
}
.ph-tile svg{width:34px;height:34px;opacity:.55}
.ph-tile span{font-size:11px;letter-spacing:.08em;line-height:1.5}
.vcard .shot .ph-tile{position:absolute;inset:0}

/* body-style filter chips (inventory) */
.fchips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,4vw,44px)}
.fchip{
  border:1px solid var(--line-soft);border-radius:100px;padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center;font-size:12.5px;letter-spacing:.06em;color:var(--txt-mut);cursor:pointer;
  transition:all .35s;background:rgba(255,255,255,.02);
}
.fchip:hover{border-color:var(--line);color:var(--txt)}
.fchip.on{border-color:var(--plat);color:var(--plat-lt);background:rgba(201,205,211,.1)}

/* ---------- spec table (vehicle detail) ---------- */
.spec{border-top:1px solid var(--line-soft)}
.spec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.spec-row span:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.spec-row span:last-child{font-family:var(--display);font-size:16px;color:var(--txt)}

/* ---------- gallery ---------- */
.gtabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,40px)}
.gtab{
  border:1px solid var(--line-soft);border-radius:100px;padding:12px 22px;min-height:46px;
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-mut);cursor:pointer;transition:all .35s;background:rgba(255,255,255,.02);
}
.gtab.on{border-color:var(--plat);color:var(--plat-lt);background:rgba(201,205,211,.1)}
.gwrap{display:none}
.gwrap.on{display:block}
.gitem{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3;background:var(--surface)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-lux)}
.gitem:hover img{transform:scale(1.07)}
.gitem .cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.94));
  font-size:12px;color:var(--txt-mut);line-height:1.4;
}
.gitem .cap b{display:block;color:var(--txt);font-size:12.5px;font-weight:500;margin-bottom:2px}

/* ---------- real photo masonry (17 Aug 2026) ----------
   Ten Stars' own library is mostly phone portrait. Dropping it into the 4/3
   .gitem grid cropped heads off couples and artists, so real photography gets a
   CSS-columns masonry instead: every frame keeps its native aspect, nothing is
   cropped, portrait and landscape sit in the same wall. */
.mgrid{column-count:3;column-gap:14px}
.mgrid .mitem{
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;
  position:relative;border-radius:3px;overflow:hidden;background:var(--surface);
}
.mgrid .mitem img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-lux)}
.mgrid .mitem:hover img{transform:scale(1.05)}
.mgrid .mitem .cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.94));
  font-size:12px;color:var(--txt-mut);line-height:1.4;
}
.mgrid .mitem .cap b{display:block;color:var(--txt);font-size:12.5px;font-weight:500;margin-bottom:2px}
.mgrid.m2{column-count:2}
@media(max-width:900px){.mgrid{column-count:2}}
@media(max-width:560px){.mgrid,.mgrid.m2{column-count:1}}

/* ---------- team / people ---------- */
.tcard{position:relative;overflow:hidden;border-radius:3px;background:var(--surface);border:1px solid var(--line-soft);transition:border-color .5s,transform .5s var(--ease-lux)}
.tcard:hover{border-color:var(--plat);transform:translateY(-5px)}
.tcard .shot{aspect-ratio:4/5;overflow:hidden;position:relative}
.tcard .shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.9);transition:filter .8s var(--ease),transform 1.1s var(--ease-lux)}
.tcard:hover .shot img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.05)}
.tcard .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(8,8,10,.92) 100%)}
.tcard .who{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2}
.tcard .who b{display:block;font-family:var(--display);font-size:19px;font-weight:500;line-height:1.25}
.tcard .who small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--plat)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
/* Grid children default to min-width:auto, so a nowrap rate table inside the right hand
   column forces the track wider than the viewport and the values get clipped off screen
   (body is overflow-x hidden). min-width:0 lets the track shrink and hands the scrolling
   to .rtable-wrap where it belongs. */
.split>*{min-width:0}
.split.rev{grid-template-columns:1fr 1.05fr}
.split .art{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3.2}
.split .art img{width:100%;height:100%;object-fit:cover}
.split .art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr}}

.framed{position:relative}
.framed::before{
  content:"";position:absolute;inset:-14px -14px 14px 14px;border:1px solid var(--line);
  border-radius:3px;pointer-events:none;z-index:-1;
}
@media(max-width:640px){.framed::before{display:none}}

/* ---------- accordion (FAQ) ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc-i{border-bottom:1px solid var(--line-soft)}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;text-align:left;cursor:pointer;font-family:var(--display);
  font-size:clamp(17px,1.9vw,21px);color:var(--txt);transition:color .4s;min-height:56px;
}
.acc-q:hover{color:var(--plat-lt)}
.acc-q i{flex:none;width:26px;height:26px;position:relative}
.acc-q i::before,.acc-q i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--plat);transition:transform .45s var(--ease-lux),opacity .3s}
.acc-q i::before{width:14px;height:1.5px}
.acc-q i::after{width:1.5px;height:14px}
.acc-i.open .acc-q i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-a{overflow:hidden;height:0;transition:height .55s var(--ease-lux)}
.acc-a div{padding:0 0 28px;color:var(--txt-mut);max-width:76ch}

/* ---------- forms ---------- */
.form-card{
  background:linear-gradient(170deg,var(--surface),var(--ink-2));
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.form-logo{
  padding:26px 20px 22px;text-align:center;
  background:linear-gradient(180deg,rgba(201,205,211,.1),transparent);
  border-bottom:1px solid var(--line-soft);
}
.form-logo img{height:34px;width:auto;margin:0 auto 10px}
.form-logo small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-mut)}
.form-body{padding:clamp(22px,3vw,34px)}
.fr{margin-bottom:18px}
.fr label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mut);margin-bottom:9px}
.fr input,.fr select,.fr textarea{
  width:100%;min-height:52px;padding:14px 16px;background:rgba(0,0,0,.34);
  border:1px solid var(--line-soft);border-radius:2px;color:var(--txt);
  font:inherit;font-size:16px;transition:border-color .4s,background .4s;
}
.fr textarea{min-height:128px;resize:vertical;line-height:1.6}
.fr input:focus,.fr select:focus,.fr textarea:focus{outline:0;border-color:var(--plat);background:rgba(0,0,0,.55)}
.fr input::placeholder,.fr textarea::placeholder{color:var(--txt-dim)}
.fr select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9CDD3' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.f2{grid-template-columns:1fr;gap:0}}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1px solid var(--line-soft);border-radius:2px;padding:11px 17px;min-height:44px;
  display:inline-flex;align-items:center;font-size:13px;color:var(--txt-mut);cursor:pointer;
  transition:all .35s;background:rgba(0,0,0,.24);
}
.chip:hover{border-color:var(--line);color:var(--txt)}
.chip.on{border-color:var(--plat);color:var(--plat-lt);background:rgba(201,205,211,.1)}
.fnote{font-size:12.5px;color:var(--txt-dim);margin-top:14px;line-height:1.6}
.fok{display:none;text-align:center;padding:30px 10px}
.fok.show{display:block}
.fok b{display:block;font-family:var(--display);font-size:24px;color:var(--plat-lt);margin-bottom:10px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),var(--ink));padding:clamp(56px,7vw,88px) 0 0}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,54px)}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-top{grid-template-columns:1fr;gap:34px}}
.ft h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--plat);margin:0 0 20px;font-weight:600}
.ft a,.ft p{color:var(--txt-mut);font-size:14.5px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:2px}
.ft ul a{display:inline-block;padding:7px 0;min-height:40px;transition:color .35s}
.ft ul a:hover{color:var(--plat-lt)}
.ft p a{display:inline-block;padding:10px 0;min-height:42px;transition:color .35s}
.ft p a:hover{color:var(--plat-lt)}
/* 20 Aug 2026 — footer mark was too small to read the plate lettering, scaled up */
.ft-logo img{height:clamp(58px,6vw,78px);width:auto;margin-bottom:26px}
.ft-bar{
  margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-soft);
  padding:24px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ft-bar small{color:var(--txt-dim);font-size:12.5px}
.attr{color:var(--txt-dim);font-size:12.5px}
.attr b{color:var(--plat);font-weight:700}
.socials{display:flex;gap:8px;margin-top:22px}
.socials a{
  width:42px;height:42px;border:1px solid var(--line-soft);border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:all .4s;
}
.socials a:hover{border-color:var(--plat);color:var(--plat-lt)}
.socials svg{width:16px;height:16px}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;padding:calc(var(--hdr) + var(--cnote-h,0px) + clamp(60px,9vw,120px)) 0 clamp(48px,7vw,92px);overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(1.06) brightness(.58)}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.7) 0%,rgba(8,8,10,.8) 55%,rgba(8,8,10,.96) 100%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{max-width:20ch}
.phero .lede{max-width:60ch;margin-top:20px}
.crumb{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:22px}
.crumb a{color:var(--txt-mut);padding:11px 0;display:inline-block;min-height:42px}
.crumb a:hover{color:var(--plat)}

/* item 18 — top concept-disclosure banner removed entirely (12 Aug 2026). The
   --cnote-h custom property still has a 0px fallback everywhere it's read, so
   removing the banner element leaves no layout gap. Footer disclosure line stays. */

/* ---------- misc ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line-soft);padding:18px 0;background:rgba(201,205,211,.03)}
.marq-t{display:flex;white-space:nowrap;animation:marq 46s linear infinite;width:max-content}
.marq-t span{font-family:var(--display);font-size:16px;color:var(--txt-dim);letter-spacing:.05em}
.marq-t span::after{content:"★";margin-left:52px;color:var(--plat-dp);font-size:11px}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-t{animation:none}}

.quote{max-width:60ch;margin:0 auto;text-align:center}
.quote p{font-family:var(--display);font-size:clamp(21px,2.6vw,32px);line-height:1.5;color:var(--txt)}
.quote cite{display:block;margin-top:24px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--plat)}

.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--plat)}
.pill.mock{color:var(--txt-mut);border-color:var(--line-soft)}

/* ---------- item 19 — full bleed cinematic fleet video ---------- */
.video-feature{position:relative;width:100%;aspect-ratio:16/8;overflow:hidden;background:var(--ink)}
/* 19 Aug 2026 — the clip is knocked well back so it reads as a mood plate behind
   the statement rather than a hero video competing with it. */
.video-feature video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.6) contrast(1.04) brightness(.44);
}
.video-feature::after{
  content:"";position:absolute;inset:0;
  /* Heavier veil overall, and the last third runs to solid black so the section
     dissolves into the page below instead of ending on a hard edge. */
  background:
    linear-gradient(0deg,#08080A 0%,rgba(8,8,10,.98) 12%,rgba(8,8,10,.62) 34%,rgba(8,8,10,.5) 62%,rgba(8,8,10,.72) 100%),
    radial-gradient(78% 62% at 50% 46%,transparent 0%,rgba(8,8,10,.5) 100%);
}
/* The statement sits centred in the plate, at headline scale. */
.video-feature-cap{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(24px,4vw,52px) var(--pad);
}
.video-feature-cap h2{font-size:clamp(30px,5.6vw,74px);line-height:1.04;max-width:18ch}
@media(max-width:640px){
  .video-feature{aspect-ratio:9/13}
  .video-feature-cap h2{font-size:clamp(28px,8.4vw,40px)}
}

/* ---------- item 10 — rotating fade testimonial carousel ---------- */
.tcarousel{max-width:760px;margin:0 auto}
.tcarousel-stage{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--surface);box-shadow:0 34px 80px -24px rgba(0,0,0,.6)}
.tcarousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease-lux);pointer-events:none}
.tcarousel-slide.on{opacity:1;pointer-events:auto;z-index:1}
.tcarousel-slide img{width:100%;height:100%;object-fit:cover}
.tcarousel-cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,4vw,40px) clamp(20px,4vw,34px) clamp(18px,3vw,28px);
  background:linear-gradient(0deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.55) 55%,transparent 100%);
}
.tcarousel-cap p{font-family:var(--display);font-size:clamp(16px,2vw,20px);line-height:1.45;color:var(--txt);margin:0 0 10px;text-transform:none}
.tcarousel-cap cite{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--plat)}
.tcarousel-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.tdot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .35s,transform .35s;padding:0;flex:none}
.tdot.on{background:var(--plat-grad);transform:scale(1.25)}
.tdot:hover{background:var(--plat-dp)}
@media(max-width:640px){.tcarousel-stage{aspect-ratio:3/4}}
@media(prefers-reduced-motion:reduce){.tcarousel-slide{transition:none}}

@media(max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
  .hd-cta .btn{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:10px}

  .grid.dense{grid-template-columns:repeat(2,1fr)!important;gap:11px}
  .dense .vcard .body{padding:13px 13px 16px}
  .dense .vcard .name{font-size:15px;line-height:1.25}
  .dense .vcard .sub{font-size:11px;margin-bottom:10px}
  .dense .vcard .meta{padding-top:10px;flex-direction:column;align-items:flex-start;gap:4px}
  .dense .vcard .price{font-size:10.5px}
  .dense .vcard .meta .alink{font-size:10px;padding:4px 0;min-height:28px}
  .dense .tcard .who{padding:12px}
  .dense .tcard .who b{font-size:15px}
  .dense .tcard .who small{font-size:8.5px;letter-spacing:.1em;margin-top:3px}
  .dense .gitem .cap{padding:10px 12px 9px;font-size:10.5px}
  .dense .gitem .cap b{font-size:11px}
}

/* ============================================================
   LIQUID GLASS + PERSISTENT SIDE ENQUIRY FORM
   ============================================================ */

.glass{
  position:relative;
  border-radius:22px;
  background:
    linear-gradient(152deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 42%,rgba(201,205,211,.08) 100%);
  backdrop-filter:blur(30px) saturate(165%);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:
    0 34px 80px -24px rgba(0,0,0,.78),
    0 2px 10px -4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.085),
    inset 0 -22px 44px -30px rgba(201,205,211,.42);
  isolation:isolate;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(130% 78% at 12% -6%,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 38%,transparent 62%),
    radial-gradient(90% 60% at 100% 105%,rgba(201,205,211,.14),transparent 60%);
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,transparent 34%,transparent 62%,rgba(201,205,211,.38) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;
}
.glass>*{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:linear-gradient(165deg,rgba(24,24,28,.96),rgba(10,10,13,.97))}
}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,486px);
  gap:clamp(28px,4vw,56px);align-items:center;width:100%;
}
.phero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(28px,4vw,56px);align-items:center;width:100%;
}
@media(max-width:1040px){
  .hero-grid,.phero-grid{grid-template-columns:1fr;gap:clamp(30px,6vw,44px)}
}

.sform{padding:clamp(22px,2.4vw,30px);min-width:0}
.sform-hd{text-align:center;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.11)}
.sform-hd img{height:34px;width:auto;margin:0 auto 12px}
.sform-hd b{
  display:block;font-family:var(--display);font-weight:500;font-size:20px;color:var(--txt);line-height:1.25;
}
.sform-hd small{
  display:block;margin-top:7px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--plat-lt);
}
.sform .fr{margin-bottom:13px}
.sform .fr label{
  display:block;font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(237,238,240,.72);margin-bottom:7px;
}
.sform .fr input,.sform .fr select,.sform .fr textarea{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--txt);
  background:rgba(8,8,10,.42);border:1px solid rgba(255,255,255,.14);border-radius:11px;
  transition:border-color .38s,background .38s,box-shadow .38s;
}
.sform .fr textarea{min-height:74px;resize:vertical;line-height:1.55}
.sform .fr input::placeholder,.sform .fr textarea::placeholder{color:rgba(237,238,240,.38)}
.sform .fr input:focus,.sform .fr select:focus,.sform .fr textarea:focus{
  outline:0;border-color:var(--plat);background:rgba(8,8,10,.6);
  box-shadow:0 0 0 3px rgba(201,205,211,.16);
}
.sform .fr select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F4F6F8' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.sform .f2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:420px){.sform .f2{grid-template-columns:1fr;gap:0}}
.sform .btn{width:100%;border-radius:11px;margin-top:5px}
.sform .fnote{font-size:11.5px;color:rgba(237,238,240,.5);margin:12px 0 0;line-height:1.55;text-align:center}
.sform .fok{display:none;text-align:center;padding:16px 4px}
.sform .fok.show{display:block}
.sform .fok b{display:block;font-family:var(--display);font-size:23px;color:var(--plat-lt);margin-bottom:9px}
.sform .fok p{color:rgba(237,238,240,.72);font-size:14px;margin:0}
/* 20 Aug 2026 — inner pages lead with information, not a form. The hero side panel is
   now a call to action card: same glass shell, buttons instead of fields. The band below
   closes the page the same way. */
.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,48px);flex-wrap:wrap;
  padding:clamp(30px,4vw,52px);border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(165deg,var(--surface),var(--ink-2));
}
.cta-band-acts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.cta-band-acts{width:100%}.cta-band-acts .btn{flex:1 1 200px}}
.scta-copy{color:rgba(237,238,240,.72);font-size:14.5px;line-height:1.6;margin:0 0 18px;text-align:center}
.scta-acts{display:grid;gap:10px}
.scta-acts .btn{width:100%;border-radius:11px;margin-top:0}
.sform .trust{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,238,240,.5);
}
.sform .trust svg{width:13px;height:13px;color:var(--plat);flex:none}

@media(max-width:1040px){
  .hero .hero-cta{display:none}
  .hero{min-height:auto;padding-bottom:clamp(40px,8vw,64px)}
  .sform{padding:clamp(20px,4vw,26px)}
}
@media(min-width:1041px) and (max-height:940px){
  .sform{padding:22px 24px}
  .sform-hd{padding-bottom:14px;margin-bottom:16px}
  .sform-hd img{height:30px;margin-bottom:9px}
  .sform-hd b{font-size:18px}
  .sform .fr{margin-bottom:11px}
  .sform .fr input,.sform .fr select{min-height:44px;padding:10px 13px}
  .sform .fr label{margin-bottom:5px}
  .sform .btn{min-height:48px}
  .hero .wrap{padding-block:clamp(30px,5vh,60px)}
}

@media(max-width:640px){
  .hero h1{font-size:clamp(29px,7.7vw,38px)}
  .hero .lede{font-size:15.5px;line-height:1.62;margin-top:16px}
  .hero .eyebrow{letter-spacing:.18em;font-size:10px;margin-bottom:16px}
  .phero h1{font-size:clamp(27px,7.5vw,36px)}
  .phero .lede{font-size:15.5px;line-height:1.62}
}

.qbar{
  position:fixed;left:0;right:0;bottom:0;z-index:92;display:none;
  gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 40%,rgba(201,205,211,.08));
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -18px 44px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(102%);transition:transform .5s var(--ease-lux);
}
.qbar.up{transform:translateY(0)}
.qbar a,.qbar button{
  flex:1;min-width:0;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;cursor:pointer;
}
.qbar .q-primary{background:var(--plat-grad);background-size:200% auto;color:#0B0B0D;flex:1.5}
.qbar .q-call{border:1px solid rgba(255,255,255,.2);color:var(--txt);background:rgba(8,8,10,.34)}
.qbar svg{width:16px;height:16px;flex:none}
@media(max-width:1040px){
  .qbar{display:flex}
  .chat{bottom:calc(74px + env(safe-area-inset-bottom))}
}
@keyframes sformPing{0%,100%{box-shadow:0 34px 80px -24px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.085)}
  45%{box-shadow:0 34px 80px -24px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(201,205,211,.7),0 0 0 4px rgba(201,205,211,.16)}}
.sform.ping{animation:sformPing 1.5s var(--ease) 1}
@keyframes hqPing{0%,100%{box-shadow:0 0 0 0 rgba(201,205,211,0)}45%{box-shadow:0 0 0 6px rgba(201,205,211,.35)}}
.hq.ping{animation:hqPing 1.5s var(--ease) 1;border-radius:22px}
@media(prefers-reduced-motion:reduce){.qbar{transition:none}.sform.ping{animation:none}.hq.ping{animation:none}}

/* ============================================================
   18 Aug 2026 — real rate cards, client video
   ============================================================ */

/* Rate tables. The wrapper is the scroller (min-width:0 so it can actually shrink
   inside a grid/flex parent), never the page body. */
.rtable-wrap{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.rtable{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap}
.rtable.wide{min-width:760px}
/* The full self drive card carries 13 columns. On a wide screen let it break out past
   the 1280px shell rather than sit permanently scrolled, clamped so it never causes a
   horizontal scroll on the page body itself. */
@media(min-width:1360px){
  .rtable-wrap.out{width:min(1520px,calc(100vw - 48px));margin-left:calc(50% - min(760px,calc(50vw - 24px)));}
}
.rtable th{
  font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);text-align:right;padding:14px 11px;border-bottom:1px solid var(--line);background:var(--ink-2);
}
.rtable th:first-child,.rtable td:first-child{text-align:left}
.rtable td{padding:13px 11px;text-align:right;color:var(--txt);border-bottom:1px solid var(--line-soft)}
.rtable tbody tr:last-child td{border-bottom:0}
.rtable tbody tr:hover td{background:var(--surface-2)}
.rtable td.veh,.rtable th.veh{text-align:left}
.rtable td.veh{color:var(--txt);font-family:var(--display);white-space:normal;min-width:168px}
.rtable td.veh a{color:var(--txt)}
.rtable td.veh a:hover{color:var(--plat)}
/* 20 Aug 2026 — rate rows carry the car's studio shot so the schedule reads visually */
.rtable td.veh a,.vrow{display:flex;align-items:center;gap:13px}
.vthumb{
  flex:none;width:76px;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--ink);
  border:1px solid var(--line-soft);
}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-lux)}
.rtable tbody tr:hover .vthumb img{transform:scale(1.07)}
.vname{min-width:0}
@media(max-width:640px){.vthumb{width:60px}}
@media(max-width:560px){
  .rtable{font-size:12.5px}
  .rtable th,.rtable td{padding:11px 11px}
}

/* Terms strip under a schedule heading */
.terms{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.terms span{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mut);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--surface);
}

/* Client filmed video. Portrait phone footage, so it is boxed rather than full bleed. */
.cvid{margin:0;max-width:360px}
.cvid video{
  width:100%;display:block;border-radius:4px;border:1px solid var(--line);
  background:var(--ink);aspect-ratio:9/16;object-fit:cover;
}
.cvid figcaption{margin-top:10px;font-size:12.5px;color:var(--txt-mut);line-height:1.55}
.cvid figcaption b{display:block;color:var(--txt);font-size:13px;font-weight:500;margin-bottom:2px}
.split .cvid{margin-top:22px}
.wrap>.cvid{margin-top:28px}
.vgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.vgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.vgrid,.vgrid.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.vgrid,.vgrid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------- closing CTA card, faded photo crossfade (18 Aug 2026) ----------
   Five real fleet frames on one 40s loop, 8s each with a 1.6s crossfade, held at
   low opacity behind a scrim so it reads as texture rather than a photo. Honours
   reduced motion by freezing on the first frame. */
.ctacard{position:relative;overflow:hidden;isolation:isolate}
.ctacard-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ctacard-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  filter:saturate(.6) brightness(.55);
  animation:ctaFade 40s linear infinite;
}
.ctacard-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,14,.78) 0%,rgba(12,12,14,.7) 50%,rgba(12,12,14,.86) 100%);
}
.ctacard-bg img:nth-child(1){animation-delay:-1.6s}
.ctacard-bg img:nth-child(2){animation-delay:6.4s}
.ctacard-bg img:nth-child(3){animation-delay:14.4s}
.ctacard-bg img:nth-child(4){animation-delay:22.4s}
.ctacard-bg img:nth-child(5){animation-delay:30.4s}
.ctacard-in{position:relative;z-index:2}
@keyframes ctaFade{
  0%{opacity:0;transform:scale(1.05)}
  4%{opacity:.5}
  16%{opacity:.5}
  20%{opacity:0}
  24%{transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
  .ctacard-bg img{animation:none;opacity:0}
  .ctacard-bg img:first-child{opacity:.5}
}

/* ============================================================
   19 Aug 2026 — hero quiz sized up for this build
   The quiz is the primary conversion on Ten Stars, so it runs much larger here
   than the shared hero-quiz.css default: a wider hero column and every control
   scaled with it, so it reads as the second half of the hero rather than a side
   card. hero-quiz.css loads AFTER this file, so each rule is qualified with
   .hero .hq / .hq.hq to out-specify the shared defaults.
   ============================================================ */
/* Desktop only: below the two column breakpoint the hero must stay single column,
   and this block loads after the base breakpoint rule, so it has to opt in rather
   than override it. */
@media(min-width:1041px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
  .hero .hq-anchor{min-height:600px}
}
.hq.hq{max-width:600px;--hq-r:30px}
/* The quiz column takes real width off the headline, so the display size comes down
   a step here or "standard" runs past the copy column and clips. Desktop only, so
   the small screen sizing set further up still stands. */
@media(min-width:641px){
  .hero h1.hero-solo{font-size:clamp(36px,4.6vw,62px);max-width:13ch}
}
.hero .hq-brand{padding:26px 28px 24px}
.hero .hq-brand img{max-height:68px}
.hero .hq-live{padding:30px 32px 32px}
.hero .hq-prog{gap:7px;margin-bottom:22px}
.hero .hq-prog i{height:4px}
.hero .hq-step{font-size:12.5px;margin-bottom:12px}
.hero .hq-q{font-size:30px}
.hero .hq-hint{font-size:17px;margin-top:10px}
.hero .hq-opts{gap:12px;margin:26px 0 6px}
.hero .hq-opt{padding:20px 22px;border-radius:19px;font-size:18.5px;gap:15px}
.hero .hq-dot{width:22px;height:22px}
.hero .hq-fields{gap:16px;margin:26px 0 6px}
.hero .hq-f label{font-size:12px}
.hero .hq-f input{padding:18px 19px;border-radius:17px;font-size:18px}
.hero .hq-foot{margin-top:24px;gap:14px}
.hero .hq-back{font-size:15.5px}
.hero .hq-next{padding:20px 36px;font-size:17px}
.hero .hq-priv{margin-top:18px;font-size:13px}
.hero .hq-res{padding:32px}
.hero .hq-res h3{font-size:30px}
.hero .hq-res > p{font-size:18px}
.hero .hq-list{gap:11px;margin:20px 0 22px}
.hero .hq-list li{font-size:17px}
.hero .hq-list svg{width:19px;height:19px}
.hero .hq-again{padding:20px 28px;font-size:17px}
.hero .hq-disc{font-size:13px}
@media(max-width:1040px){
  .hq.hq{max-width:none}
  .hero .hq-anchor{min-height:0}
}
@media(max-width:640px){
  .hero .hq-live{padding:22px 20px 24px}
  .hero .hq-brand{padding:20px 20px 18px}
  .hero .hq-q{font-size:24px}
  .hero .hq-hint{font-size:15.5px}
  .hero .hq-opt{padding:17px 17px;font-size:17px}
  .hero .hq-next{padding:18px 30px;font-size:16px}
}

/* ============================================================
   19 Aug 2026 — "Our cars at events" runs as one slideshow rather than a tiled
   mosaic, so each photo gets the full width and its own caption instead of
   competing for attention six at a time.
   ============================================================ */
.wshow{position:relative;max-width:1040px;margin:0 auto}
.wshow-stage{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;
  background:var(--surface);box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}
.wshow-slide{
  position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transition:opacity 1.1s var(--ease-lux);
}
.wshow-slide.on{opacity:1;pointer-events:auto;z-index:1}
.wshow-slide img{width:100%;height:100%;object-fit:cover}
.wshow-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(26px,5vw,52px) clamp(20px,4vw,38px) clamp(18px,3vw,28px);
  background:linear-gradient(0deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.6) 55%,transparent 100%);
}
.wshow-cap b{
  display:block;font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:clamp(16px,2vw,22px);color:var(--txt);line-height:1.2;
}
.wshow-cap span{
  display:block;margin-top:7px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plat);
}
.wshow-arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;cursor:pointer;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--txt);background:rgba(8,8,10,.5);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .35s,border-color .35s,transform .45s var(--ease-lux);
}
.wshow-arw:hover{background:rgba(8,8,10,.78);border-color:var(--plat-dp)}
.wshow-arw.prev{left:clamp(10px,2vw,20px)}
.wshow-arw.next{right:clamp(10px,2vw,20px)}
.wshow-arw.prev:hover{transform:translateY(-50%) translateX(-3px)}
.wshow-arw.next:hover{transform:translateY(-50%) translateX(3px)}
.wshow-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.wdot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;padding:0;flex:none;transition:background .35s,transform .35s}
.wdot.on{background:var(--plat-grad);transform:scale(1.25)}
.wdot:hover{background:var(--plat-dp)}
@media(max-width:640px){
  .wshow-stage{aspect-ratio:4/5}
  .wshow-arw{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.wshow-slide{transition:none}}

/* ============================================================
   19 Aug 2026 — the vertical clips play inside one iPhone cutout and hand over to
   each other, rather than sitting four across as raw players. The frame is built
   to the real device proportions: a 19.5:9 screen inside a 12px bezel, so it reads
   as a phone and not a generic rounded rectangle.
   ============================================================ */
.pshow{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.phone{
  position:relative;width:100%;max-width:340px;margin-inline:auto;
  padding:12px;border-radius:56px;
  background:linear-gradient(150deg,#3A3B40 0%,#0D0D10 22%,#26272B 52%,#0D0D10 78%,#43444A 100%);
  box-shadow:
    0 46px 100px -32px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.07);
}
.phone-screen{
  position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:45px;
  background:#000;
}
.pslide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s var(--ease-lux);
}
.pslide.on{opacity:1;z-index:1}
.phone-island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:3;
  width:31%;height:26px;border-radius:100px;background:#000;
}
.pshow-side{position:relative;min-height:150px}
.pcap{
  position:absolute;inset:auto 0 auto 0;top:0;opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux);
  transform:translateY(10px);
}
.pcap.on{opacity:1;pointer-events:auto;transform:none}
.pcap b{
  display:block;font-family:var(--display);font-stretch:125%;font-weight:800;
  text-transform:uppercase;font-size:clamp(22px,2.9vw,35px);line-height:1.08;color:var(--txt);
}
.pcap span{display:block;margin-top:14px;font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--txt-mut);max-width:34ch}
.pshow-dots{display:flex;gap:9px;position:absolute;left:0;bottom:-8px}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;padding:0;flex:none;transition:background .35s,transform .35s}
.pdot.on{background:var(--plat-grad);transform:scale(1.25)}
.pdot:hover{background:var(--plat-dp)}
@media(max-width:900px){
  .pshow{grid-template-columns:1fr;gap:34px;justify-items:center;text-align:center}
  .pshow-side{width:100%;min-height:190px}
  .pcap span{margin-inline:auto}
  .pshow-dots{left:50%;transform:translateX(-50%);bottom:-14px}
}
@media(prefers-reduced-motion:reduce){.pslide,.pcap{transition:none}}

/* Captioned feature image (19 Aug 2026) — used where a photo needs naming, e.g. the
   entertainment content shot. The caption sits inside the frame on a scrim so it
   reads as part of the picture rather than a stray line of body copy. */
figure.art.capped{margin:0}
figure.art.capped figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(30px,6vw,54px) clamp(18px,3vw,26px) clamp(16px,2.4vw,22px);
  background:linear-gradient(0deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.58) 58%,transparent 100%);
}
figure.art.capped figcaption b{
  display:block;font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:clamp(15px,1.7vw,19px);line-height:1.2;color:var(--txt);
}
figure.art.capped figcaption span{
  display:block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plat);
}

/* ============================================================
   19 Aug 2026 — marque ticker: real manufacturer marks instead of set text, in the
   platinum gradient rather than flat white, and moved to the top of the page under
   the menu so the badges are the first thing under the nav. The marks are painted
   by masking the platinum gradient with each logo, so they pick up the same
   shimmer as every other .plat element and stay one colour family.
   ============================================================ */
.marq-top{
  margin-top:calc(var(--hdr) + var(--cnote-h,0px));
  padding:16px 0;position:relative;z-index:4;
}
/* The strip takes the header offset, so the hero no longer needs it and gives back
   the strip's height to stay a single screen tall. */
.marq-top + .hero{padding-top:0;min-height:calc(100svh - var(--hdr) - 70px)}
.marq-t .mq{
  flex:none;display:block;width:36px;height:36px;opacity:.92;
  background:var(--plat-grad);background-size:200% auto;
  animation:shimmer 7s linear infinite;
  -webkit-mask:var(--m) center/contain no-repeat;
  mask:var(--m) center/contain no-repeat;
}
.mq-rollsroyce{--m:url("/tenstarscars/img/marques/rollsroyce.svg")}
.mq-mercedes{--m:url("/tenstarscars/img/marques/mercedes.svg")}
.mq-bentley{--m:url("/tenstarscars/img/marques/bentley.svg")}
.mq-porsche{--m:url("/tenstarscars/img/marques/porsche.svg")}
.mq-bmw{--m:url("/tenstarscars/img/marques/bmw.svg")}
.mq-landrover{--m:url("/tenstarscars/img/marques/landrover.svg")}
.mq-audi{--m:url("/tenstarscars/img/marques/audi.svg")}
/* Land Rover and Bentley are wordmark shapes, so they need the extra width their
   aspect asks for or they render as a sliver. */
.mq-landrover,.mq-bentley,.mq-porsche{width:46px}
@media(max-width:640px){
  .marq-top{padding:13px 0}
  .marq-t{gap:38px}
  .marq-t .mq{width:30px;height:30px}
  .mq-landrover,.mq-bentley,.mq-porsche{width:38px}
  .marq-top + .hero{min-height:0}
}
@media(prefers-reduced-motion:reduce){.marq-t .mq{animation:none}}

/* 19 Aug 2026 — the closing CTA runs full bleed rather than sitting in a card in
   the middle of the page, so the fleet montage behind it reads at full width. */
.ctasec{padding-inline:0}
.wrap-bleed{max-width:none;padding-inline:0}
.ctasec .ctacard{border-radius:0;border-inline:0}
/* The Book now button and the phone box sat on different baselines because only one
   of them carried a label above it. Both are wrapped in .phone-cta now (the second
   label is a spacer) so the two buttons line up on the same row. */
.cta-row{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:32px}
.cta-row .phone-cta small{min-height:1em}
.cta-row .btn{min-width:210px;justify-content:center}
@media(max-width:640px){.cta-row .btn{min-width:min(100%,260px)}}

/* ============================================================
   19 Aug 2026 — client feedback: twelve reviews rotating three at a time over a
   night drive video plate, instead of three fixed cards on flat black.
   ============================================================ */
.fbsec{position:relative;overflow:hidden;isolation:isolate}
.fbsec-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.fbsec-bg video,.fbsec-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) brightness(.4);
}
.fbsec-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,#08080A 0%,rgba(8,8,10,.78) 22%,rgba(8,8,10,.72) 78%,#08080A 100%);
}
.fbsec-in{position:relative;z-index:2}
.rrot{position:relative}
/* Every page occupies the same grid cell, so the stage is as tall as the TALLEST
   page and a longer review never spills out of the box. */
.rrot-stage{display:grid}
.rrot-page{
  grid-area:1/1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);
  align-items:stretch;
  opacity:0;pointer-events:none;transition:opacity 1s var(--ease-lux);
}
.rrot-page.on{opacity:1;pointer-events:auto;z-index:1}
.rrot .card{
  background:rgba(20,20,22,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.rrot .rq{color:var(--txt);font-size:16px;line-height:1.62;margin:0}
.rrot .rw{color:var(--txt-mut);font-size:13px;margin:14px 0 0}
.rrot .rw b{color:var(--txt);font-weight:500}
.rrot-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.rdot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;padding:0;flex:none;transition:background .35s,transform .35s}
.rdot.on{background:var(--plat-grad);transform:scale(1.25)}
.rdot:hover{background:var(--plat-dp)}
@media(max-width:900px){
  .rrot-page{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rrot-page{transition:none}}

/* 19 Aug 2026 — the ticker halves are explicit sets, each wide enough to cover an
   ultrawide screen, so the -50% loop never exposes a gap on the right. */
.marq-t{gap:0}
.marq-set{display:flex;gap:120px;padding-right:120px;flex:none}
/* Slower drift and a soft fade at both ends, so badges arrive and leave rather than
   popping off the edge of the strip. */
.marq-top{
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.marq-top .marq-t{animation-duration:150s}
@media(max-width:640px){
  .marq-set{gap:66px;padding-right:66px}
  .marq-top .marq-t{animation-duration:90s}
  .marq-top{
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
}

/* The clip reel is centred as a unit rather than pinned left with dead space beside it. */
.pshow{justify-content:center;max-width:1080px;margin-inline:auto}

/* ---------- Behind The Prestige episode player (20 Aug 2026) ----------
   Premium wrapper around the client's own YouTube series. The featured episode
   mounts itself muted once the block is on screen; picking another episode from
   the rail mounts it with sound, since that is a real user gesture. */
.btp{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:linear-gradient(165deg,var(--surface),var(--ink-2))}
.btp-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.btp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.btp-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -80px 90px -60px rgba(0,0,0,.9);
}
.btp-stage.live .btp-poster{display:none}
.btp-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line-soft);
}
.btp-bar b{display:block;font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(16px,1.7vw,21px);color:var(--txt)}
.btp-bar small{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--plat);margin-top:6px}
.btp-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
@media(max-width:900px){.btp-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.btp-rail{grid-template-columns:1fr}}
.btp-ep{
  display:flex;align-items:center;gap:13px;padding:13px;border:0;cursor:pointer;text-align:left;
  background:var(--ink-2);color:var(--txt-mut);transition:background .35s,color .35s;min-height:76px;
}
.btp-ep:hover{background:var(--surface);color:var(--txt)}
.btp-ep.on{background:var(--surface-2);color:var(--txt)}
.btp-thumb{position:relative;flex:none;width:96px;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:#000}
.btp-thumb img{width:100%;height:100%;object-fit:cover}
.btp-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:.85;transition:opacity .3s,transform .4s var(--ease-lux);
}
.btp-play svg{width:24px;height:24px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.btp-ep:hover .btp-play{opacity:1;transform:scale(1.12)}
.btp-ep.on .btp-play{opacity:0}
.btp-ep-txt b{display:block;font-size:14.5px;font-weight:500;color:inherit;line-height:1.3}
.btp-ep-txt small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--plat);margin-top:5px}

/* ---------- real photography strip (20 Aug 2026) ----------
   Bands of the client's own photographs, pulled off tenstarscars.com.au, placed
   through the service pages so the site is not carrying generated imagery alone. */
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:22px}
@media(max-width:820px){.pstrip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pstrip{grid-template-columns:1fr}}
.pstrip-item{margin:0;position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.pstrip-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease-lux)}
.pstrip-item:hover img{transform:scale(1.05)}
.pstrip-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.92));
  font-size:12.5px;letter-spacing:.05em;color:var(--txt);
}

/* 20 Aug 2026 — the shared hero quiz ships with a warm terracotta accent. Ten Stars is
   silver, graphite, white and black only, so point its accent at the platinum ramp.
   The accent is declared on .hq itself, so the override has to be doubled to outrank it. */
.hq.hq{--hq-accent:#C9CDD3;--hq-on-accent:#0B0B0D}

/* 31 Aug 2026 — the chat bubble now shines the same way the CTAs do. Its rules live
   inline on every page, so these are scoped through .chat to outrank them from here
   and keep the change to this one shared file. The svg is position:absolute inside
   the fab, so the sweep is pinned behind it with a z-index rather than after it. */
.chat .chat-fab{overflow:hidden;position:relative;background-repeat:no-repeat;animation:plat-flow 7s ease-in-out infinite alternate}
.chat .chat-fab:hover{animation-duration:2.6s}
.chat .chat-fab::after{
  content:"";position:absolute;top:-40%;left:0;width:46%;height:180%;pointer-events:none;z-index:0;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-18deg);
  animation:btn-sheen 4.6s var(--ease) infinite;
}
.chat .chat-fab svg{z-index:1}
/* the mobile sticky bar's primary action is a CTA too, so it drifts as well */
.qbar .q-primary{background-repeat:no-repeat;animation:plat-flow 7s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
  .btn-plat,.btn-plat:hover,.chat .chat-fab,.chat .chat-fab:hover,.qbar .q-primary{animation:none}
  .btn::after,.chat .chat-fab::after{animation:none;opacity:0}
}