/* ==========================================================================
   STRETCH LIMO HIRE — Design System
   Void black + champagne gold + laser green + electric blue.
   Signature motif: the "laser burst" — echoes the real laser shows
   inside the SLH fleet, used as a divider, hover state, and hero glow.
   ========================================================================== */

:root {
  --void: #07070a;
  --panel: #100f16;
  --panel-2: #19171f;
  --panel-3: #211f29;
  --line: rgba(244, 241, 233, 0.09);
  --line-strong: rgba(244, 241, 233, 0.18);

  --ivory: #f5f2ea;
  --muted: #a29db0;
  --muted-2: #6f6a7d;

  --gold: #cfa53e;
  --gold-soft: #e9cb82;
  --green: #3dffa0;
  --blue: #45d3ff;

  --grad-underglow: linear-gradient(90deg, var(--gold), var(--green) 50%, var(--blue));

  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --container: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Diamond-plate texture, fixed behind all content, low-key so it reads as
   depth/texture rather than competing with copy or photography. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('assets/images/bg-texture-plate.jpg') center center / cover fixed no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(7,7,10,0.55), rgba(7,7,10,0.72) 40%, rgba(7,7,10,0.85) 85%);
  pointer-events: none;
}
.site-header, main, .site-footer, .wa-float {
  position: relative;
  z-index: 1;
}

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(--font-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { color: var(--muted); margin: 0 0 1em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }
.section-pad { padding: 100px 0; }
@media (max-width: 720px) { .section-pad { padding: 64px 0; } }

/* -------- Eyebrow / mono labels -------- */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--grad-underglow);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 640px;
  color: var(--muted);
}

/* -------- Buttons -------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ivory);
  color: var(--void);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(207,165,62,0.55); }
.btn-primary::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 3px; border-radius: 3px;
  background: var(--grad-underglow);
  opacity: 0.9;
}
.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 10px 18px; font-size: 0.82rem; }

/* -------- Nav -------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,7,10,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-bar {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
  padding: 7px 24px;
}
.fb-follow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
  max-width: var(--container);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: color 0.2s ease;
}
.fb-follow:hover { color: var(--ivory); }
.fb-follow img { display: block; flex-shrink: 0; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: var(--grad-underglow);
}
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle {
  display: none;
  background: none; border: none; color: var(--ivory);
  font-size: 1.6rem; cursor: pointer;
}
@media (max-width: 900px) {
  .nav-links { position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: var(--void); flex-direction: column; justify-content: flex-start;
    padding: 40px 30px; gap: 26px; transform: translateX(100%);
    transition: transform 0.35s ease; overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.2rem; }
  .nav-toggle { display: block; }
  .nav-cta .btn-primary span.full { display: none; }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 90px;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
@media (max-width: 720px) {
  .hero {
    min-height: 62vh;
    padding: 120px 0 60px;
  }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,10,0.10) 0%, rgba(7,7,10,0.28) 45%, rgba(7,7,10,0.82) 97%),
    linear-gradient(90deg, rgba(7,7,10,0.42) 0%, rgba(7,7,10,0.05) 55%);
  z-index: -1;
}
.hero-tag {
  font-family: var(--font-mono);
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  margin-bottom: 22px;
  display: inline-block;
}
.hero h1 { max-width: 15ch; margin-bottom: 0.3em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--gold-soft), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 60px; flex-wrap: wrap;
  border-top: 1px solid var(--line-strong); padding-top: 26px;
}
.hero-stats div strong {
  font-family: var(--font-display); display: block; font-size: 1.8rem; color: var(--ivory);
}
.hero-stats div span {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
}

/* -------- Laser burst (signature CSS motif) -------- */
.laser-burst {
  --size: 420px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg 6deg, rgba(207,165,62,.65) 7deg 8deg,
    transparent 9deg 22deg, rgba(61,255,160,.55) 23deg 24deg,
    transparent 25deg 38deg, rgba(69,211,255,.55) 39deg 40deg,
    transparent 41deg 54deg, rgba(207,165,62,.4) 55deg 56deg,
    transparent 57deg 70deg, rgba(61,255,160,.4) 71deg 72deg,
    transparent 73deg 86deg, rgba(69,211,255,.4) 87deg 88deg,
    transparent 89deg 102deg, rgba(207,165,62,.6) 103deg 104deg,
    transparent 105deg 118deg, rgba(61,255,160,.5) 119deg 120deg,
    transparent 121deg 134deg, rgba(69,211,255,.5) 135deg 136deg,
    transparent 137deg 150deg, rgba(207,165,62,.45) 151deg 152deg,
    transparent 153deg 166deg, rgba(61,255,160,.45) 167deg 168deg,
    transparent 169deg 182deg, rgba(69,211,255,.45) 183deg 184deg,
    transparent 185deg 198deg, rgba(207,165,62,.55) 199deg 200deg,
    transparent 201deg 214deg, rgba(61,255,160,.4) 215deg 216deg,
    transparent 217deg 230deg, rgba(69,211,255,.4) 231deg 232deg,
    transparent 233deg 246deg, rgba(207,165,62,.5) 247deg 248deg,
    transparent 249deg 262deg, rgba(61,255,160,.5) 263deg 264deg,
    transparent 265deg 278deg, rgba(69,211,255,.5) 279deg 280deg,
    transparent 281deg 294deg, rgba(207,165,62,.45) 295deg 296deg,
    transparent 297deg 310deg, rgba(61,255,160,.4) 311deg 312deg,
    transparent 313deg 326deg, rgba(69,211,255,.4) 327deg 328deg,
    transparent 329deg 342deg, rgba(207,165,62,.55) 343deg 344deg,
    transparent 345deg 360deg);
  mask-image: radial-gradient(circle, black 0%, black 22%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, black 0%, black 22%, transparent 68%);
  animation: spin 50s linear infinite;
  opacity: 0.8;
}
@keyframes spin { to { transform: rotate(360deg); } }

.divider {
  display: flex; align-items: center; justify-content: center;
  height: 130px; position: relative; overflow: hidden;
}
.divider .laser-burst { --size: 300px; }

/* -------- Underglow strip (mimics the LED chassis lighting) -------- */
.underglow {
  height: 3px; width: 100%;
  background: var(--grad-underglow);
  opacity: 0.5;
  filter: blur(0.3px);
}

/* -------- Marquee strip -------- */
.marquee-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  padding: 16px 0;
}
.marquee-track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: scroll-left 32s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.78rem; color: var(--muted-2);
}
.marquee-track span strong { color: var(--gold-soft); }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------- Section header -------- */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: 50px; flex-wrap: wrap;
}
.section-head p { margin: 0; }

/* -------- Cards -------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #000; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-media .underglow { position: absolute; bottom: 0; left: 0; opacity: 0; transition: opacity .35s ease; }
.card:hover .card-media .underglow { opacity: 1; }
.card-body { padding: 26px; }
.card-body h3 { margin-bottom: 8px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.tag {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--line-strong);
  padding: 5px 10px; border-radius: 999px;
}
.card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.card-price { font-family: var(--font-mono); color: var(--green); font-size: 0.85rem; }

/* -------- Grids -------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* -------- Experience tiles -------- */
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}
.tile:hover { border-color: var(--gold); transform: translateY(-4px); }
.tile .num {
  font-family: var(--font-mono); color: var(--muted-2); font-size: 0.8rem; margin-bottom: 18px; display: block;
}
.tile a.tile-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 0.85rem; font-weight: 700; color: var(--gold-soft);
}
.tile a.tile-link:hover { color: var(--green); }

/* -------- Stat strip -------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 30px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 50px 0;
}
.stat-strip div strong {
  font-family: var(--font-display); font-size: clamp(2rem,3.5vw,2.8rem); display: block; color: var(--ivory);
}
.stat-strip div span { color: var(--muted); font-size: 0.88rem; }
@media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2,1fr); } }

/* -------- Timeline (about page) -------- */
.timeline { position: relative; padding-left: 34px; border-left: 2px solid var(--line-strong); }
.timeline-item { position: relative; padding-bottom: 44px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -41px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--void); border: 2px solid var(--gold);
}
.timeline-item .yr {
  font-family: var(--font-mono); color: var(--gold-soft); letter-spacing: 0.1em;
  font-size: 0.82rem; text-transform: uppercase; margin-bottom: 6px; display: block;
}

/* -------- CTA banner -------- */
.cta-banner {
  border-radius: 24px;
  padding: 70px 50px;
  background: radial-gradient(circle at 15% 20%, rgba(207,165,62,0.16), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(69,211,255,0.14), transparent 45%),
              var(--panel-2);
  border: 1px solid var(--line-strong);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { max-width: 18ch; margin: 0 auto 18px; }
.cta-banner .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* -------- Split section -------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split img { border-radius: var(--radius); }

/* -------- Forms -------- */
.form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
}
.field { margin-bottom: 20px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--void); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 13px 15px; color: var(--ivory);
  font-family: var(--font-body); font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.8rem; color: var(--muted-2); margin-top: 14px; }

/* -------- Contact tiles (quote page) -------- */
.contact-tile {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 16px;
}
.contact-tile .ic {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-3); color: var(--gold-soft); font-size: 1.2rem;
}
.contact-tile h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; }
.contact-tile p { margin: 0; font-size: 0.88rem; }

/* -------- FAQ -------- */
details.faq {
  border-bottom: 1px solid var(--line); padding: 20px 0;
}
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--gold-soft); }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin-top: 12px; }

/* -------- Breadcrumb -------- */
.breadcrumb {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted-2); padding: 22px 0 0;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold-soft); }

/* -------- Footer -------- */
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 80px 0 30px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; color: var(--gold-soft); margin-bottom: 18px;
}
.footer-grid li { margin-bottom: 11px; }
.footer-grid a { color: var(--muted); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--ivory); }
.footer-bottom {
  margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem; color: var(--muted-2);
}

/* -------- Floating WhatsApp -------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #07070a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(37,211,102,0.6), 0 0 0 3px rgba(7,7,10,0.55);
  font-size: 1.6rem;
  transition: transform 0.25s ease;
}
.wa-float:hover { transform: scale(1.08); }
@media (max-width: 640px) {
  .wa-float {
    width: 48px; height: 48px;
    bottom: 18px; right: 16px;
    font-size: 1.3rem;
    box-shadow: 0 8px 22px -6px rgba(37,211,102,0.6), 0 0 0 3px rgba(7,7,10,0.65);
  }
}

/* -------- Reveal on scroll -------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* -------- Gallery masonry-ish -------- */
.gallery { columns: 3 260px; column-gap: 20px; }
.gallery img { width: 100%; margin-bottom: 20px; border-radius: var(--radius-sm); break-inside: avoid; }
@media (max-width: 720px) { .gallery { columns: 2 180px; } }

/* -------- Utility -------- */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.badge-strip { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.badge-strip .badge {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.badge-strip .badge::before { content: "\2713"; color: var(--green); }