/* ==========================================================================
   Las Vegas Express Detailing — homepage theme
   Palette: Platinum & Sapphire — graphite base, electric sapphire accent,
   ice-blue highlight and platinum metal. The logo keeps its own colours and
   sits on a white tile, so the mark never competes with the accent.
   Motion vocabulary is borrowed from the trade itself — specular gloss sweeps,
   ceramic-coating water beads, and polished depth.
   ========================================================================== */

:root {
  --lv-ink:        #0A0F16;
  --lv-ink-2:      #141C27;
  --lv-ink-3:      #1E2B3C;
  --lv-accent:     #2E8BFF;
  --lv-accent-lt:  #7FD4FF;
  --lv-accent-dk:  #1668D6;
  --lv-accent-2:   #8B7BFF;
  --lv-metal:      #C9D4E2;
  --lv-paper:      #F2F5F9;
  --lv-white:      #FFFFFF;
  --lv-text:       #18202B;
  --lv-muted:      #5A6779;
  --lv-muted-dk:   rgba(255, 255, 255, .72);
  --lv-line:       #E2E8F0;
  --lv-line-dk:    rgba(255, 255, 255, .12);

  --lv-radius:     18px;
  --lv-radius-sm:  12px;
  --lv-shadow:     0 18px 50px rgba(5, 9, 14, .10);
  --lv-shadow-lg:  0 30px 80px rgba(5, 9, 14, .22);

  --lv-head:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lv-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --lv-ease:       cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--lv-body);
  font-size: 1.0625rem;        /* 17px base — reads calmer than 16 at this measure */
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.002em;
  color: var(--lv-text);
  background: var(--lv-white);
  overflow-x: hidden;          /* belt-and-braces against horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* Grid columns must be free to shrink below their content's intrinsic width,
   otherwise a wide child stretches the row and pushes the page sideways. */
.lv-hero [class*="col-"],
.lv-services [class*="col-"],
.lv-footer [class*="col-"] { min-width: 0; }

h1, h2, h3, h4 {
  font-family: var(--lv-head);
  font-weight: 700;
  line-height: 1.18;
  /* Manrope is narrower than Sora, so it needs less negative tracking to sit
     tight; over-tightening closes the counters at display sizes. */
  letter-spacing: -.022em;
  color: var(--lv-ink);
  text-wrap: balance;
}

h3, h4 { letter-spacing: -.016em; }

a { text-decoration: none; }

::selection { background: rgba(46, 139, 255, .28); }

/* ==========================================================================
   Scroll reveal (IntersectionObserver driven — see assets/js/main.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .85s var(--lv-ease),
    transform .85s var(--lv-ease);
  transition-delay: var(--lv-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="zoom"] { transform: scale(.94) translateY(24px); }
[data-reveal="up"]   { transform: translateY(40px); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Nothing may stay invisible if JS never runs */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Scroll progress ---------- */
.lv-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--lv-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--lv-accent) 0%, var(--lv-accent-2) 60%, var(--lv-accent-lt) 100%);
  pointer-events: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.lv-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--lv-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1;
  cursor: pointer;
  transition: transform .3s var(--lv-ease), box-shadow .3s var(--lv-ease), color .25s;
}

/* Gloss sweep across the button — same language as the hero shine */
.lv-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--lv-ease);
}

.lv-btn:hover::after { left: 115%; }

/* Every stop must clear 4.5:1 against the ink label — ending the ramp on
   --lv-accent-dk dropped it to 3.65:1. */
.lv-btn-gold {
  background: linear-gradient(135deg, var(--lv-accent-lt) 0%, #4FA4FF 52%, var(--lv-accent) 100%);
  color: var(--lv-ink);
  box-shadow: 0 12px 30px rgba(46, 139, 255, .38);
}

.lv-btn-gold:hover {
  color: var(--lv-ink);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(46, 139, 255, .55);
}

.lv-btn-ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--lv-white);
  border: 1.5px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}

.lv-btn-ghost:hover {
  color: var(--lv-ink);
  background: var(--lv-white);
  border-color: var(--lv-white);
  transform: translateY(-3px);
}

.lv-btn-block { width: 100%; padding: 17px 26px; }

/* Magnetic pull toward the cursor (JS sets --mx/--my) */
.lv-magnetic {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .35s var(--lv-ease), box-shadow .3s var(--lv-ease);
}

.lv-magnetic:hover { transition-duration: .12s; }

/* ---------- Eyebrow ---------- */
.lv-eyebrow {
  /* inline-block (not flex) so the dot flows with the text and the label
     wraps naturally on narrow screens instead of orphaning the dot */
  display: inline-block;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(46, 139, 255, .35);
  border-radius: 999px;
  background: rgba(46, 139, 255, .1);
  color: var(--lv-accent-lt);
  font-family: var(--lv-head);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

@media (max-width: 575.98px) {
  .lv-eyebrow { font-size: .72rem; letter-spacing: .04em; padding: 7px 14px; }
}

.lv-eyebrow-dot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--lv-accent);
}

/* Live pulse ring */
.lv-eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--lv-accent);
  animation: lv-pulse 2.4s ease-out infinite;
}

@keyframes lv-pulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.lv-eyebrow-dark {
  background: rgba(30, 43, 60, .06);
  border-color: rgba(30, 43, 60, .14);
  color: var(--lv-ink-3);
}

/* ==========================================================================
   Sticky wrap — topbar + header stick together at the top of the viewport
   ========================================================================== */
.lv-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.lv-topbar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--lv-ink) 0%, var(--lv-ink-2) 50%, var(--lv-ink) 100%);
  padding: 8px 0;
  font-size: .84rem;
}

.lv-topbar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(46, 139, 255, .16), transparent);
  animation: lv-topbar-sweep 7s linear infinite;
}

@keyframes lv-topbar-sweep {
  0%   { left: -30%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

.lv-topbar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.lv-topbar-hours,
.lv-topbar-label {
  color: rgba(255, 255, 255, .66);
  font-weight: 500;
}

.lv-topbar-hours i,
.lv-topbar-label i { color: var(--lv-accent); margin-right: 5px; }

.lv-topbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .2);
}

.lv-topbar-phone {
  font-family: var(--lv-head);
  font-size: .95rem;
  font-weight: 800;
  color: var(--lv-white);
  letter-spacing: .02em;
  transition: color .2s;
}

.lv-topbar-phone:hover { color: var(--lv-accent-lt); }

/* ==========================================================================
   Header / Navbar
   ========================================================================== */
.lv-header {
  position: relative;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--lv-line);
  transition: box-shadow .3s, background .3s, border-color .3s;
}

.lv-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 34px rgba(5, 9, 14, .12);
}

.lv-navbar { padding: 7px 0; }

/* The logo art is cropped flush to the mark, so this height renders the
   emblem larger than the old 70px box did while the header sits shorter. */
.lv-logo img {
  height: 50px;
  width: auto;
  display: block;
  transition: transform .35s var(--lv-ease);
}

.lv-logo:hover img { transform: scale(1.04); }

/* Hamburger */
.lv-toggler {
  width: 46px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  background: var(--lv-white);
}

.lv-toggler:focus { box-shadow: 0 0 0 3px rgba(46, 139, 255, .3); }

.lv-toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--lv-ink);
  transition: transform .28s var(--lv-ease), opacity .2s ease;
}

.lv-toggler[aria-expanded="true"] .lv-toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lv-toggler[aria-expanded="true"] .lv-toggler-bar:nth-child(2) { opacity: 0; }
.lv-toggler[aria-expanded="true"] .lv-toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Bootstrap ships `.navbar-expand-xl .navbar-nav .nav-link` at specificity
   (0,3,0), which beat the old `.lv-navbar .nav-link` (0,2,0) and forced the
   padding back to its own 0.5rem — so the items ended up touching. Matching
   that specificity (and loading after Bootstrap) makes the spacing apply. */
.lv-navbar .navbar-nav .nav-link {
  position: relative;
  padding: 10px 19px;
  font-family: var(--lv-head);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lv-ink-2);
  transition: color .2s;
}

.lv-navbar .navbar-nav .nav-link:hover,
.lv-navbar .navbar-nav .nav-link.active { color: var(--lv-accent-dk); }

@media (min-width: 1200px) {
  /* hairline separating the nav links from the Contact Us CTA */
  .lv-nav-cta { position: relative; padding-left: 24px; }

  .lv-nav-cta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: var(--lv-line);
  }
}

/* Gold underline on hover (desktop only) */
@media (min-width: 1200px) {
  .lv-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 19px;
    right: 19px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--lv-ease);
  }

  .lv-navbar .navbar-nav .nav-link:hover::after,
  .lv-navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); }
}

.lv-btn-nav {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lv-ink-3) 0%, var(--lv-ink) 100%);
  color: var(--lv-white);
  font-family: var(--lv-head);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.015em;
  transition: transform .3s var(--lv-ease), box-shadow .3s var(--lv-ease), background .3s;
}

.lv-btn-nav:hover {
  color: var(--lv-ink);
  background: linear-gradient(135deg, var(--lv-accent-lt) 0%, #4FA4FF 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(46, 139, 255, .38);
}

/* Dropdowns */
/* Bootstrap gives .dropdown-menu `min-width: 10rem` and nothing else, so the
   absolutely-positioned box shrink-to-fits against its .dropdown parent (a
   ~100px nav item) and every label breaks onto two lines. `width: max-content`
   sizes the menu to its longest item instead; the clamp keeps it from ever
   going narrower than 10rem or wider than the viewport on small screens. */
.lv-dropdown {
  width: max-content;
  min-width: 11rem;
  max-width: min(20rem, calc(100vw - 32px));
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--lv-line);
  border-radius: 16px;
  box-shadow: var(--lv-shadow);
  animation: lv-dd-in .28s var(--lv-ease);
}

@keyframes lv-dd-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.lv-dropdown .dropdown-item {
  padding: 9px 14px;
  border-radius: 9px;
  font-family: var(--lv-head);
  font-size: .92rem;
  font-weight: 500;
  color: var(--lv-ink-2);
  /* nowrap is what makes max-content resolve to the full label width */
  white-space: nowrap;
  transition: background .2s, color .2s, padding-left .2s;
}

.lv-dropdown .dropdown-item:hover,
.lv-dropdown .dropdown-item:focus {
  background: rgba(46, 139, 255, .13);
  color: var(--lv-accent-dk);
  /* the 4px the label slides right on hover comes out of the right padding,
     so the box never has to grow and the widest item can't clip */
  padding-left: 18px;
  padding-right: 10px;
}

.lv-dropdown-main {
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lv-dropdown-main span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lv-accent);
  color: var(--lv-ink);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Long dropdowns must never run off the screen */
.lv-dropdown-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* room for the 6px scrollbar so it never sits on top of the labels */
  padding-right: 16px;
  scrollbar-gutter: stable;
}

.lv-dropdown-scroll::-webkit-scrollbar { width: 6px; }
.lv-dropdown-scroll::-webkit-scrollbar-thumb {
  background: rgba(30, 43, 60, .25);
  border-radius: 6px;
}

/* Collapsed (mobile / tablet) nav */
@media (max-width: 1199.98px) {
  .lv-nav-collapse {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 12px;
    padding: 8px 4px 16px;
    border-top: 1px solid var(--lv-line);
  }

  .lv-navbar .navbar-nav .nav-link { padding: 13px 6px; }

  .lv-dropdown {
    /* inside the collapsed nav the menu is static, so let it fill the
       column rather than shrink-wrap to its longest label */
    width: auto;
    max-width: none;
    margin: 4px 0 8px;
    border-radius: 12px;
    background: var(--lv-paper);
    box-shadow: none;
  }

  .lv-dropdown-scroll { max-height: 260px; }

  .lv-nav-cta { margin-top: 12px; }

  .lv-btn-nav {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .lv-logo img { height: 42px; }
  .lv-topbar-hours { display: none; }
  .lv-topbar-sep { display: none; }
}

/* ==========================================================================
   Hero
   Lit like a photograph: ONE warm key light top-right, one cool fill
   bottom-left, film grain over the top. Restraint is what reads as premium —
   competing coloured glows muddy the navy and cheapen it.
   ========================================================================== */
.lv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 168px;
  background:
    linear-gradient(168deg, #0B111A 0%, #141C27 44%, #090E15 100%);
  color: var(--lv-white);
}

.lv-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lv-hero-inner { position: relative; z-index: 2; }

/* ---- Key light / fill ---- */
.lv-aurora {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.lv-aurora-key {
  width: 720px; height: 620px;
  top: -240px; right: -180px;
  background: radial-gradient(circle,
              rgba(46, 139, 255, .30) 0%,
              rgba(46, 139, 255, .12) 42%,
              transparent 70%);
  filter: blur(60px);
  animation: lv-drift-key 24s ease-in-out infinite alternate;
}

.lv-aurora-fill {
  width: 640px; height: 560px;
  bottom: -260px; left: -200px;
  background: radial-gradient(circle,
              rgba(201, 212, 226, .13) 0%,
              rgba(201, 212, 226, .05) 45%,
              transparent 72%);
  filter: blur(70px);
  animation: lv-drift-fill 30s ease-in-out infinite alternate;
}

@keyframes lv-drift-key  { to { transform: translate3d(-56px, 46px, 0) scale(1.08); } }
@keyframes lv-drift-fill { to { transform: translate3d(52px, -38px, 0) scale(1.06); } }

/* ---- Blueprint grid, barely there ---- */
.lv-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 74% 58% at 62% 32%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 62% 32%, #000 18%, transparent 76%);
}

/* ---- One soft glare band, replacing the old hard diagonal streak ---- */
.lv-hero-glare {
  position: absolute;
  inset: -34% -24% auto -24%;
  height: 520px;
  background: linear-gradient(101deg,
              transparent 0%,
              rgba(255, 255, 255, .014) 26%,
              rgba(255, 255, 255, .032) 50%,
              rgba(255, 255, 255, .014) 74%,
              transparent 100%);
  transform: rotate(-8deg);
  filter: blur(28px);
}

/* ==========================================================================
   Brand motifs — lifted from the logo artwork
   The logo carries four signatures: twin blue/orange swoosh ribbons, a
   sunburst, four-point starburst glints, and the Vegas skyline. Reusing them
   as background furniture ties the page to the mark instead of decorating
   it with generic shapes.
   ========================================================================== */

/* ---- Swoosh ribbons ---- */
.lv-swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  opacity: .6;
  /* Fade the ribbons out across the left-hand copy column — unmasked they
     run straight through the checklist and cost legibility. */
  mask-image: linear-gradient(96deg, transparent 0%, transparent 34%, #000 66%, #000 100%);
  -webkit-mask-image: linear-gradient(96deg, transparent 0%, transparent 34%, #000 66%, #000 100%);
}

.lv-swoosh path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: lv-draw 2.6s var(--lv-ease) forwards;
}

.lv-swoosh-blue { stroke: rgba(46, 139, 255, .30); stroke-width: 24; animation-delay: .15s; }
.lv-swoosh-gold { stroke: rgba(127, 212, 255, .24); stroke-width: 15; animation-delay: .3s; }
.lv-swoosh-thin { stroke: rgba(201, 212, 226, .16); stroke-width: 6;  animation-delay: .45s; }

@keyframes lv-draw { to { stroke-dashoffset: 0; } }

/* ---- Sunburst ---- */
.lv-sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(46, 139, 255, .085) 0deg 3deg,
    transparent 3deg 9deg);
  mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: lv-sun-turn 90s linear infinite;
  pointer-events: none;
}

@keyframes lv-sun-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- Four-point starburst glints ---- */
.lv-spark {
  position: absolute;
  background: var(--lv-accent-lt);
  clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(127, 212, 255, .8));
  animation: lv-twinkle 5s var(--lv-ease) infinite;
}

@keyframes lv-twinkle {
  0%, 100%  { opacity: 0;   transform: scale(.4) rotate(0deg); }
  45%       { opacity: .95; transform: scale(1) rotate(45deg); }
  70%       { opacity: .2;  transform: scale(.7) rotate(70deg); }
}

.lv-spark-1 { width: 14px; height: 14px; top: 14%; left: 62%; animation-delay: .2s; }
.lv-spark-2 { width: 12px; height: 12px; top: 30%; left: 93%; animation-delay: 1.4s; }
.lv-spark-3 { width: 16px; height: 16px; top: 66%; left: 82%; animation-delay: 2.6s; }
.lv-spark-4 { width: 10px; height: 10px; top: 22%; left: 74%; animation-delay: 3.4s; }
.lv-spark-5 { width: 13px; height: 13px; top: 80%; left: 68%; animation-delay: 1.9s; }
.lv-spark-6 { width: 11px; height: 11px; top: 50%; left: 88%; animation-delay: 4.1s; }

/* ---- Vegas skyline ---- */
.lv-skyline {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

.lv-skyline-hero {
  bottom: 88px;
  height: 150px;
  opacity: .68;
}

.lv-skyline-hero path { fill: rgba(6, 10, 16, .78); }

/* Footer ridge: the skyline rises out of the top edge of the footer */
/* Sits inside the footer's reserved top padding rather than above its edge,
   so the footer can keep overflow:hidden. */
.lv-skyline-footer {
  top: 0;
  height: 118px;
  opacity: .5;
}

.lv-skyline-footer path { fill: rgba(4, 7, 12, .85); }

/* Oversized, very faint logo watermark */
.lv-footer-watermark {
  position: absolute;
  right: -140px;
  bottom: -170px;
  width: 560px;
  height: 476px;
  opacity: .09;
  /* Dedicated alpha asset — the logo PNG has a solid white background, so using
     it directly painted a visible rectangle. This is white line-art on
     transparency, for the dark footer. */
  background: url("../img/Las-Vegas-Express-Detailing-Watermark.png") right bottom / contain no-repeat;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .lv-footer-watermark { display: none; }
}

.lv-spark-f1 { width: 14px; height: 14px; top: 26%; left: 38%; animation-delay: 1.1s; }
.lv-spark-f2 { width: 10px; height: 10px; top: 68%; left: 62%; animation-delay: 3.2s; }

/* ---- Film grain: the detail that separates "flat dark" from "photographed" ---- */
.lv-grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Ceramic-coating beads ---- */
.lv-beads { position: absolute; inset: 0; }

.lv-bead {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .02) 72%);
  opacity: 0;
  animation: lv-bead-rise linear infinite;
}

@keyframes lv-bead-rise {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  14%  { opacity: .5; }
  82%  { opacity: .3; }
  100% { transform: translateY(-112vh) scale(1.1); opacity: 0; }
}

/* ---- Kicker: label + hairline rule running off toward the margin ---- */
.lv-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.lv-kicker .lv-eyebrow { margin-bottom: 0; }

.lv-kicker-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  background: linear-gradient(90deg, rgba(46, 139, 255, .45), transparent);
}

/* ---- Headline ---- */
.lv-hero-h1 {
  margin-bottom: 0;
  color: var(--lv-white);
  font-size: clamp(2.1rem, 5.1vw, 3.55rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.lv-hero-h1 .lv-line { display: block; }

/* Weight contrast inside one line reads far more considered than a
   single heavy slab: the place-name carries the weight, the service
   name recedes into a light cut. */
.lv-h1-strong {
  font-weight: 700;
  color: var(--lv-white);
}

.lv-h1-light {
  font-weight: 300;
  color: rgba(255, 255, 255, .93);
  letter-spacing: -.03em;
}

.lv-hero-h1-sub {
  margin-top: 16px;
  background: linear-gradient(100deg, var(--lv-accent-lt) 0%, var(--lv-accent) 34%, var(--lv-metal) 64%, var(--lv-accent-lt) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  font-weight: 600;
  letter-spacing: .005em;
  animation: lv-sheen 7s linear infinite;
}

@keyframes lv-sheen { to { background-position: 220% center; } }

/* The leading en-dash reads as a typographic lead-in mark, not a stray glyph */
.lv-h1-dash {
  display: inline-block;
  margin-right: .35em;
  transform: scaleX(1.9);
  transform-origin: left center;
}

/* ---- Hairline between the title block and the body copy ---- */
.lv-hero-rule {
  display: block;
  width: 84px;
  height: 1px;
  margin: 30px 0 26px;
  background: linear-gradient(90deg, rgba(46, 139, 255, .8), rgba(46, 139, 255, .08));
}

.lv-hero-lead {
  margin-bottom: 16px;
  max-width: 58ch;
  color: rgba(255, 255, 255, .72);
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.85;
}

/* ---- Checklist: hairline markers, not filled badges ---- */
.lv-hero-checks {
  list-style: none;
  margin: 30px 0 30px;
  padding: 0;
  display: grid;
  gap: 0;
}

.lv-hero-checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .88);
  font-size: .975rem;
  font-weight: 400;
  line-height: 1.5;
}

.lv-hero-checks li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }

.lv-hero-checks i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(46, 139, 255, .5);
  background: transparent;
  color: var(--lv-accent);
  font-size: .74rem;
  transition: background .3s var(--lv-ease), color .3s, border-color .3s;
}

.lv-hero-checks li:hover i {
  background: var(--lv-accent);
  border-color: var(--lv-accent);
  color: var(--lv-ink);
}

/* ---- Callout ---- */
.lv-hero-callout {
  position: relative;
  margin: 0 0 30px;
  padding: 17px 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid var(--lv-accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(46, 139, 255, .07), rgba(255, 255, 255, .015));
  color: rgba(255, 255, 255, .9);
  font-size: 1.01rem;
  font-weight: 400;
  line-height: 1.7;
  backdrop-filter: blur(6px);
}

.lv-hero-callout a {
  color: var(--lv-accent-lt);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(127, 212, 255, .35);
}

.lv-hero-callout a:hover { border-bottom-color: var(--lv-accent-lt); }

.lv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---- Hero image ---- */
.lv-hero-media {
  position: relative;
  padding: 18px;
  transform-style: preserve-3d;
  transition: transform .5s var(--lv-ease);
}

.lv-hero-media-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .07) inset,
    0 40px 90px -20px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateZ(40px);
}

.lv-hero-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* the square source crops to 4:3 — bias upward so the technician and the
     branded van stay in frame instead of losing their heads */
  object-position: 50% 42%;
}

.lv-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 9, 14, .18) 0%, transparent 26%, transparent 62%, rgba(5, 9, 14, .55) 100%);
}

/* Specular gloss sweep — the shine a polish pass leaves behind */
.lv-shine {
  position: absolute;
  top: -60%;
  left: -70%;
  width: 42%;
  height: 220%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 36%,
    rgba(255, 255, 255, .3) 50%,
    rgba(255, 255, 255, .05) 64%,
    transparent 100%);
  transform: rotate(14deg);
  animation: lv-shine-sweep 7.5s var(--lv-ease) infinite;
  mix-blend-mode: screen;
}

@keyframes lv-shine-sweep {
  0%   { left: -70%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* ---- Technical corner brackets: precision framing, no coloured rings ---- */
.lv-corner {
  position: absolute;
  z-index: 1;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(46, 139, 255, .62);
  transform: translateZ(14px);
}

.lv-corner-tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.lv-corner-tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 8px 0 0; }
.lv-corner-bl { bottom: 0; left: 0;  border-right: 0; border-top: 0;    border-radius: 0 0 0 8px; }
.lv-corner-br { bottom: 0; right: 0; border-left: 0;  border-top: 0;    border-radius: 0 0 8px 0; }

/* ---- Floating chips: hairline glass, not solid stickers ---- */
.lv-hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(15, 22, 32, .74);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transform: translateZ(70px);
}

.lv-hero-chip i {
  font-size: 1.05rem;
  color: var(--lv-accent);
}

.lv-chip-count {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(46, 139, 255, .45);
  background: rgba(46, 139, 255, .12);
  color: var(--lv-accent-lt);
  font-family: var(--lv-head);
  font-size: .95rem;
  font-weight: 700;
}

.lv-hero-chip strong {
  display: block;
  font-family: var(--lv-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--lv-white);
  line-height: 1.25;
}

.lv-hero-chip small {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.lv-hero-chip-rating   { top: 30px;    left: -20px;  animation: lv-float 7s ease-in-out infinite; }
.lv-hero-chip-hours    { bottom: 96px; right: -18px; animation: lv-float 8.5s ease-in-out infinite .8s; }
.lv-hero-chip-services { bottom: 12px; left: 54px;   animation: lv-float 7.8s ease-in-out infinite .4s; }

@keyframes lv-float {
  0%, 100% { transform: translateZ(70px) translateY(0); }
  50%      { transform: translateZ(70px) translateY(-8px); }
}

/* ---- Scroll cue ---- */
.lv-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 128px;
  z-index: 3;
  width: 1px;
  height: 54px;
  margin-left: -.5px;
  overflow: hidden;
  background: rgba(255, 255, 255, .13);
}

.lv-scroll-cue span {
  position: absolute;
  top: -54px;
  left: 0;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, var(--lv-accent));
  animation: lv-cue 2.6s var(--lv-ease) infinite;
}

@keyframes lv-cue {
  0%        { transform: translateY(0); }
  70%, 100% { transform: translateY(108px); }
}

/* ---- Sculpted divider into the light section ---- */
.lv-hero-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  line-height: 0;
}

.lv-hero-divider svg {
  display: block;
  width: 100%;
  height: 110px;
}

.lv-hero-divider path { fill: var(--lv-paper); }

@media (max-width: 1199.98px) {
  .lv-hero { padding: 68px 0 150px; }
}

@media (max-width: 991.98px) {
  .lv-kicker-rule { display: none; }
  .lv-hero { padding: 52px 0 132px; }
  .lv-hero-media { max-width: min(540px, 100%); width: 100%; margin: 0 auto 34px; }
  .lv-hero-divider svg { height: 70px; }
  .lv-scroll-cue { display: none; }
}

@media (max-width: 575.98px) {
  .lv-hero { padding: 38px 0 96px; }
  .lv-hero-media { padding: 0; }

  /* Corner brackets are a large-screen refinement — at phone width they only
     crowd the frame and collide with the floating chips. */
  .lv-corner { display: none; }

  /* Square crop restores the vertical room the chips need, so they stop
     landing on the technician's face. */
  .lv-hero-media-frame img { aspect-ratio: 1 / 1; }

  .lv-kicker { gap: 12px; margin-bottom: 22px; }
  .lv-hero-rule { margin: 24px 0 22px; }

  .lv-hero-chip { padding: 9px 12px; gap: 9px; border-radius: 11px; }
  .lv-hero-chip i { font-size: .95rem; }
  .lv-chip-count { width: 26px; height: 26px; font-size: .82rem; }
  .lv-hero-chip strong { font-size: .73rem; }
  .lv-hero-chip small { font-size: .62rem; }
  .lv-hero-chip-rating   { top: 14px;    left: 10px; }
  .lv-hero-chip-hours    { bottom: 14px; right: 10px; }
  .lv-hero-chip-services { display: none; }

  .lv-hero-divider svg { height: 48px; }
  .lv-hero-actions { gap: 10px; }
  .lv-hero-actions .lv-btn { width: 100%; }
}

/* ==========================================================================
   Services + quote form
   ========================================================================== */
.lv-services {
  position: relative;
  overflow: hidden;
  padding: 40px 0 96px;
  background: var(--lv-paper);
}

.lv-services-swoosh {
  position: absolute;
  right: -6%;
  bottom: 4%;
  width: 62%;
  height: auto;
  fill: none;
  opacity: .5;
  pointer-events: none;
}

.lv-services-swoosh .a { stroke: rgba(46, 139, 255, .15); stroke-width: 18; stroke-linecap: round; }
.lv-services-swoosh .b { stroke: rgba(127, 212, 255, .20); stroke-width: 10; stroke-linecap: round; }

.lv-services-orb {
  position: absolute;
  top: 6%;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 139, 255, .16) 0%, transparent 68%);
  pointer-events: none;
}

.lv-h2 {
  position: relative;
  margin-bottom: 18px;
  font-size: clamp(1.75rem, 3.6vw, 2.55rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.026em;
}

.lv-section-lead {
  max-width: 60ch;
  margin-bottom: 36px;
  color: var(--lv-muted);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
}

.lv-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.lv-service-card-wide { grid-column: 1 / -1; }

.lv-service-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: 0 6px 22px rgba(5, 9, 14, .05);
  transition: transform .4s var(--lv-ease), box-shadow .4s var(--lv-ease), border-color .4s;
}

/* Cursor-tracking spotlight (JS sets --mx/--my per card) */
.lv-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(46, 139, 255, .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.lv-spotlight:hover::before { opacity: 1; }

.lv-service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(46, 139, 255, .55);
  box-shadow: 0 26px 60px rgba(5, 9, 14, .14);
}

.lv-service-index {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 4;
  font-family: var(--lv-head);
  font-size: 1.5rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 12px rgba(5, 9, 14, .5);
  letter-spacing: -.04em;
  transition: color .35s, transform .35s var(--lv-ease);
}

.lv-service-card:hover .lv-service-index {
  color: var(--lv-accent);
  transform: scale(1.12);
}

.lv-service-thumb {
  position: relative;
  overflow: hidden;
  background: var(--lv-ink-2);
}

.lv-service-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .7s var(--lv-ease);
}

.lv-service-card:hover .lv-service-thumb img { transform: scale(1.08); }

.lv-service-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(5, 9, 14, .42) 100%);
  pointer-events: none;
}

/* Gloss wipe across the photo on hover */
.lv-thumb-sheen {
  position: absolute;
  top: -50%;
  left: -75%;
  z-index: 2;
  width: 50%;
  height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: rotate(16deg);
  transition: left .8s var(--lv-ease);
  pointer-events: none;
}

.lv-service-card:hover .lv-thumb-sheen { left: 130%; }

.lv-service-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.lv-service-body h3 {
  margin-bottom: 11px;
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

.lv-service-body p {
  flex: 1 1 auto;
  margin-bottom: 18px;
  color: var(--lv-muted);
  font-size: .955rem;
  font-weight: 400;
  line-height: 1.75;
}

.lv-service-link {
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  font-family: var(--lv-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--lv-accent-dk);
  transition: gap .3s var(--lv-ease), color .25s;
}

.lv-service-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--lv-ease);
}

.lv-service-link:hover { gap: 13px; color: var(--lv-accent-2); }
.lv-service-link:hover::after { transform: scaleX(1); }

/* The wide fifth card lays out side-by-side so it doesn't tower.
   Declared after the base card rules — an earlier `.lv-service-card-wide`
   ties on specificity with `.lv-service-card` and loses to source order. */
@media (min-width: 576px) {
  .lv-service-grid .lv-service-card-wide {
    flex-direction: row;
    align-items: stretch;
  }

  .lv-service-grid .lv-service-card-wide .lv-service-thumb {
    flex: 0 0 42%;
    position: relative;
  }

  /* Absolute fill so the photo matches the body height instead of driving it */
  .lv-service-grid .lv-service-card-wide .lv-service-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .lv-service-grid .lv-service-card-wide .lv-service-body {
    justify-content: center;
    padding: 28px 30px;
  }

  /* Don't stretch the paragraph — that is what strands the link at the bottom */
  .lv-service-grid .lv-service-card-wide .lv-service-body p { flex: 0 1 auto; }

  /* The thumb is on the LEFT here, so the badge must move with it —
     top-right would put white-on-white text over the body panel. */
  .lv-service-grid .lv-service-card-wide .lv-service-index {
    right: auto;
    left: 16px;
  }
}

/* ---------- Quote form ---------- */
.lv-form-sticky { position: relative; }

@media (min-width: 992px) {
  .lv-form-sticky { position: sticky; top: 88px; }
}

/* Rotating conic gradient border */
.lv-form-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(520px 260px at 88% -8%, rgba(46, 139, 255, .24) 0%, transparent 62%),
    linear-gradient(160deg, var(--lv-ink-2) 0%, var(--lv-ink) 100%);
  box-shadow: var(--lv-shadow-lg);
}

.lv-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--lv-angle, 0deg),
              rgba(46, 139, 255, .9), rgba(139, 123, 255, .5),
              rgba(255, 255, 255, .08), rgba(46, 139, 255, .9));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: lv-rotate-border 9s linear infinite;
}

@property --lv-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes lv-rotate-border {
  to { --lv-angle: 360deg; }
}

.lv-form-head {
  padding: 30px 28px 4px;
  text-align: center;
}

.lv-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(46, 139, 255, .35);
  border-radius: 999px;
  background: rgba(46, 139, 255, .12);
  color: var(--lv-accent-lt);
  font-family: var(--lv-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lv-form-badge i { animation: lv-bolt 2.6s ease-in-out infinite; }

@keyframes lv-bolt {
  0%, 88%, 100% { opacity: 1; transform: none; }
  92%           { opacity: .35; transform: scale(1.25); }
}

.lv-form-title {
  margin-bottom: 11px;
  color: var(--lv-white);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.026em;
}

.lv-form-sub {
  margin-bottom: 0;
  color: rgba(255, 255, 255, .66);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.7;
}

.lv-quote-form { padding: 24px 28px 28px; }

.lv-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .82);
  font-family: var(--lv-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.lv-label span { color: var(--lv-accent); }

.lv-input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: var(--lv-white);
  font-family: var(--lv-body);
  font-size: .95rem;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--lv-ease);
}

.lv-input::placeholder { color: rgba(255, 255, 255, .38); }

.lv-input:focus {
  outline: 0;
  border-color: rgba(46, 139, 255, .7);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(46, 139, 255, .2);
  transform: translateY(-1px);
}

.lv-textarea { resize: vertical; min-height: 110px; }

.lv-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lv-captcha-row img {
  flex: 0 0 auto;
  width: 110px;
  height: auto;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12);
}

.lv-captcha-row .lv-input { flex: 1 1 auto; min-width: 0; }

.lv-captcha-refresh {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  color: var(--lv-accent);
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s, transform .3s var(--lv-ease);
}

.lv-captcha-refresh:hover { background: rgba(46, 139, 255, .16); transform: rotate(-90deg); }
.lv-captcha-refresh.is-loading i { animation: lv-spin .7s linear infinite; }

@keyframes lv-spin { to { transform: rotate(360deg); } }

#response:not(:empty) {
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  animation: lv-dd-in .35s var(--lv-ease);
}

#response .error { margin: 0; color: #FF9C86; }
#response .success { margin: 0; color: #7BE3A6; }

.lv-form-foot {
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .24);
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
  text-align: center;
}

.lv-form-foot i { color: var(--lv-accent); margin-right: 5px; }

.lv-form-foot a {
  color: var(--lv-accent-lt);
  font-weight: 700;
  white-space: nowrap;
}

.lv-form-foot a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .lv-services { padding: 30px 0 70px; }
}

@media (max-width: 767.98px) {
  .lv-service-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 575.98px) {
  .lv-services { padding: 22px 0 56px; }
  .lv-form-head { padding: 24px 20px 4px; }
  .lv-quote-form { padding: 20px 20px 24px; }
  .lv-form-foot { padding: 14px 20px; }
  .lv-captcha-row { flex-wrap: wrap; }
  .lv-captcha-row .lv-input { flex: 1 1 100%; }
}

/* ==========================================================================
   Reasons section (dark)
   ========================================================================== */
.lv-reasons {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(168deg, #090E15 0%, var(--lv-ink-2) 52%, #080C12 100%);
  color: var(--lv-white);
}

.lv-reasons-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lv-reasons-inner  { position: relative; z-index: 2; }

.lv-aurora-r {
  width: 620px; height: 540px;
  top: -220px; right: -160px;
  animation-duration: 27s;
}

.lv-aurora-i {
  width: 620px; height: 540px;
  bottom: -240px; left: -170px;
  animation-duration: 32s;
}

.lv-spark-r1 { width: 13px; height: 13px; top: 18%; left: 88%; animation-delay: .6s; }
.lv-spark-r2 { width: 10px; height: 10px; top: 72%; left: 94%; animation-delay: 2.9s; }
.lv-spark-i1 { width: 12px; height: 12px; top: 14%; left: 91%; animation-delay: 1.7s; }

/* Headings + copy on the dark bands */
.lv-h2-light { color: var(--lv-white); }

.lv-lead-dark {
  max-width: 62ch;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .72);
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.85;
}

.lv-lead-cue {
  margin-top: 22px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .88);
  font-weight: 500;
}

.lv-lead-close {
  margin-top: 24px;
  margin-bottom: 0;
  padding-left: 18px;
  border-left: 2px solid var(--lv-accent);
}

/* Framed photo, reusing the hero's bracket language */
.lv-shot {
  position: relative;
  padding: 16px;
  transform-style: preserve-3d;
  transition: transform .5s var(--lv-ease);
}

.lv-shot-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .07) inset,
    0 36px 80px -22px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .08);
}

.lv-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Reasons list */
.lv-reason-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.lv-reason-grid li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .3s, background .3s, transform .3s var(--lv-ease);
}

.lv-reason-grid li:hover {
  border-color: rgba(46, 139, 255, .45);
  background: rgba(46, 139, 255, .1);
  transform: translateX(4px);
}

.lv-reason-grid i {
  flex: 0 0 auto;
  color: var(--lv-accent-lt);
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .lv-reasons { padding: 66px 0; }
  .lv-shot { max-width: min(520px, 100%); margin: 0 auto 30px; }
}

@media (max-width: 575.98px) {
  .lv-reasons { padding: 52px 0; }
  .lv-shot { padding: 0; }
  .lv-reason-grid { grid-template-columns: 1fr; gap: 9px; }
}

/* ==========================================================================
   Packages section (light)
   ========================================================================== */
.lv-packages {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(680px 340px at 12% 6%, rgba(46, 139, 255, .07) 0%, transparent 62%),
    var(--lv-paper);
}

.lv-pack-swoosh { right: auto; left: -8%; bottom: auto; top: 2%; opacity: .45; }

.lv-pack-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-bottom: 46px;
}

.lv-pack-head .lv-section-lead { margin-bottom: 0; }

.lv-pack-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.lv-pack-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 34px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: 0 6px 22px rgba(5, 9, 14, .05);
  transition: transform .4s var(--lv-ease), box-shadow .4s var(--lv-ease), border-color .4s;
}

.lv-pack-card:hover {
  transform: translateY(-8px);
  border-color: rgba(46, 139, 255, .5);
  box-shadow: 0 26px 60px rgba(5, 9, 14, .12);
}

/* Middle tier reads as the natural default */
.lv-pack-card-mid {
  border-color: rgba(46, 139, 255, .35);
  box-shadow: 0 12px 40px rgba(46, 139, 255, .12);
}

/* Three bars showing where each package sits on the intensity scale */
.lv-pack-tier {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 26px;
  margin-bottom: 18px;
}

.lv-pack-tier i {
  display: block;
  width: 9px;
  border-radius: 3px;
  background: var(--lv-line);
  transition: background .35s var(--lv-ease);
}

.lv-pack-tier i:nth-child(1) { height: 11px; }
.lv-pack-tier i:nth-child(2) { height: 18px; }
.lv-pack-tier i:nth-child(3) { height: 26px; }

.lv-pack-tier i.on { background: linear-gradient(180deg, var(--lv-accent-lt), var(--lv-accent)); }

.lv-pack-card h3 {
  margin-bottom: 14px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

.lv-pack-card p {
  margin-bottom: 12px;
  color: var(--lv-muted);
  font-size: .955rem;
  font-weight: 400;
  line-height: 1.78;
}

.lv-pack-card p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .lv-packages { padding: 66px 0; }
  .lv-pack-grid { grid-template-columns: 1fr; gap: 18px; }
  .lv-pack-head { margin-bottom: 34px; }
}

@media (max-width: 575.98px) {
  .lv-packages { padding: 52px 0; }
  .lv-pack-card { padding: 26px 22px 28px; }
}

/* ==========================================================================
   What's Included section (dark)
   ========================================================================== */
.lv-included {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(168deg, #080C12 0%, var(--lv-ink-2) 48%, #090E15 100%);
  color: var(--lv-white);
}

.lv-included-inner { position: relative; z-index: 2; }

.lv-incl-head {
  max-width: 760px;
  margin-bottom: 42px;
}

.lv-incl-head .lv-lead-dark { margin-bottom: 0; }

.lv-incl-panel {
  height: 100%;
  padding: 30px 30px 32px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(10px);
  transition: border-color .35s, background .35s;
}

.lv-incl-panel:hover {
  border-color: rgba(46, 139, 255, .38);
  background: rgba(46, 139, 255, .06);
}

.lv-incl-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.lv-incl-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(46, 139, 255, .4);
  background: rgba(46, 139, 255, .12);
  color: var(--lv-accent-lt);
  font-size: 1.1rem;
}

/* A label, not a heading — the source document does not mark these as headings,
   so promoting them to <h3> would invent hierarchy that isn't in the copy. */
.lv-incl-label {
  margin: 0;
  font-family: var(--lv-head);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--lv-white);
}

.lv-incl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
}

.lv-incl-list li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, .82);
  font-size: .94rem;
  line-height: 1.6;
}

.lv-incl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--lv-accent);
  transform: rotate(45deg);
}

.lv-incl-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 78ch;
  margin: 30px 0 0;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid var(--lv-accent);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(46, 139, 255, .07), rgba(255, 255, 255, .015));
  color: rgba(255, 255, 255, .82);
  font-size: .97rem;
  line-height: 1.72;
}

.lv-incl-note i { color: var(--lv-accent-lt); font-size: 1.05rem; margin-top: .18em; }

@media (max-width: 991.98px) {
  .lv-included { padding: 66px 0; }
  .lv-incl-head { margin-bottom: 32px; }
}

@media (max-width: 575.98px) {
  .lv-included { padding: 52px 0; }
  .lv-incl-panel { padding: 24px 20px 26px; }
  .lv-incl-list { grid-template-columns: 1fr; gap: 8px; }
  .lv-incl-note { padding: 16px 18px; }
}

/* ==========================================================================
   Shared content bands (sections 6-13)
   ========================================================================== */
.lv-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
}

.lv-band-inner { position: relative; z-index: 2; }

.lv-band-light {
  background:
    radial-gradient(680px 340px at 88% 8%, rgba(46, 139, 255, .07) 0%, transparent 62%),
    var(--lv-paper);
}

.lv-band-dark {
  background: linear-gradient(168deg, #080C12 0%, var(--lv-ink-2) 50%, #090E15 100%);
  color: var(--lv-white);
}

.lv-band-head {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-bottom: 42px;
}

.lv-band-head .lv-section-lead:last-child,
.lv-band-head .lv-lead-dark:last-child { margin-bottom: 0; }

.lv-lead-cue-light {
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--lv-ink-3);
  font-weight: 500;
}

.lv-band-note {
  position: relative;
  z-index: 2;
  max-width: 76ch;
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--lv-accent);
  color: var(--lv-muted);
  font-size: 1rem;
  line-height: 1.78;
}

.lv-band-note-flush { margin-top: 30px; }

@media (max-width: 991.98px) {
  .lv-band { padding: 66px 0; }
  .lv-band-head { margin-bottom: 32px; }
}

@media (max-width: 575.98px) {
  .lv-band { padding: 52px 0; }
}

/* ---- Vehicle-type chips ---- */
.lv-chip-row {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lv-chip-row li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--lv-line);
  border-radius: 999px;
  background: var(--lv-white);
  box-shadow: 0 4px 16px rgba(5, 9, 14, .04);
  font-family: var(--lv-head);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--lv-ink-2);
  transition: transform .3s var(--lv-ease), border-color .3s, box-shadow .3s, color .3s;
}

.lv-chip-row li:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 139, 255, .5);
  box-shadow: 0 14px 32px rgba(46, 139, 255, .16);
  color: var(--lv-accent-dk);
}

.lv-chip-row i { color: var(--lv-accent); font-size: 1.1rem; }

/* ---- Condition cards ---- */
.lv-cond-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.lv-cond-card { display: flex; flex-direction: column; }

.lv-cond-title {
  margin: 0;
  color: var(--lv-white);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.lv-cond-lead {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
  line-height: 1.7;
}

.lv-cond-lead-solo { margin-bottom: 0; }

/* single-column variant of the diamond-bullet list */
.lv-incl-list-1 { grid-template-columns: 1fr; }

@media (max-width: 991.98px) {
  .lv-cond-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Numbered pricing factors ---- */
.lv-num-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: lvnum;
}

.lv-num-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  background: var(--lv-white);
  box-shadow: 0 4px 16px rgba(5, 9, 14, .04);
  font-size: 1rem;
  color: var(--lv-ink-2);
  transition: transform .3s var(--lv-ease), border-color .3s, box-shadow .3s;
}

.lv-num-list li:hover {
  transform: translateX(6px);
  border-color: rgba(46, 139, 255, .45);
  box-shadow: 0 14px 30px rgba(46, 139, 255, .12);
}

.lv-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, rgba(46, 139, 255, .16), rgba(127, 212, 255, .1));
  border: 1px solid rgba(46, 139, 255, .3);
  color: var(--lv-accent-dk);
  font-family: var(--lv-head);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---- Three-column reason grid variant ---- */
@media (min-width: 992px) {
  .lv-reason-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Why-choose grid ---- */
.lv-why-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.lv-why-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  box-shadow: 0 6px 22px rgba(5, 9, 14, .05);
  transition: transform .35s var(--lv-ease), border-color .35s, box-shadow .35s;
}

.lv-why-item:hover {
  transform: translateY(-5px);
  border-color: rgba(46, 139, 255, .45);
  box-shadow: 0 22px 50px rgba(5, 9, 14, .1);
}

.lv-why-item-wide { grid-column: 1 / -1; }

.lv-why-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(46, 139, 255, .14), rgba(127, 212, 255, .09));
  border: 1px solid rgba(46, 139, 255, .28);
  color: var(--lv-accent-dk);
  font-size: 1.15rem;
}

/* The document writes these as label + sentence in one paragraph, not as
   headings — <strong> keeps the emphasis without inventing hierarchy. */
.lv-why-item p {
  margin: 0;
  color: var(--lv-muted);
  font-size: .97rem;
  line-height: 1.75;
}

.lv-why-item strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--lv-head);
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--lv-ink);
}

.lv-why-item a { color: var(--lv-accent-dk); font-weight: 600; white-space: nowrap; }
.lv-why-item a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .lv-why-grid { grid-template-columns: 1fr; }
  .lv-why-item { padding: 22px 20px; gap: 14px; }
}

/* ---- Service-area grid ---- */
.lv-areas-grid {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lv-areas-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--lv-line);
  border-radius: 12px;
  background: var(--lv-white);
  color: var(--lv-ink-2);
  font-size: .95rem;
  transition: transform .3s var(--lv-ease), border-color .3s, box-shadow .3s, color .3s;
}

.lv-areas-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 139, 255, .5);
  box-shadow: 0 14px 30px rgba(46, 139, 255, .14);
  color: var(--lv-accent-dk);
}

.lv-areas-grid i { color: var(--lv-accent); font-size: .95rem; }

.lv-area-main {
  border-color: rgba(46, 139, 255, .45) !important;
  background: linear-gradient(140deg, rgba(46, 139, 255, .1), rgba(127, 212, 255, .05)) !important;
  font-weight: 600;
}

@media (max-width: 991.98px) { .lv-areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .lv-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .lv-areas-grid { grid-template-columns: 1fr; } }

/* ---- Reviews ---- */
.lv-review-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.lv-review {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px 26px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(10px);
  transition: transform .35s var(--lv-ease), border-color .35s, background .35s;
}

.lv-review:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 139, 255, .38);
  background: rgba(46, 139, 255, .06);
}

.lv-quote-mark {
  font-family: var(--lv-head);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: .8;
  color: var(--lv-accent);
  opacity: .5;
}

.lv-review blockquote {
  flex: 1 1 auto;
  margin: 14px 0 20px;
  color: rgba(255, 255, 255, .86);
  font-size: 1rem;
  line-height: 1.8;
}

.lv-review figcaption {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--lv-accent-lt);
  font-family: var(--lv-head);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* The "Verified Google Review" link inherits the caption colour instead of the
   browser's default blue, which is unreadable on the dark review card. */
.lv-review-link {
  color: inherit;
  border-bottom: 1px solid rgba(127, 212, 255, .35);
  transition: color .25s, border-color .25s;
}

.lv-review-link:hover { color: var(--lv-white); border-bottom-color: rgba(255, 255, 255, .6); }

.lv-review-link i { font-size: .72em; margin-left: 3px; opacity: .8; }

@media (max-width: 991.98px) { .lv-review-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ==========================================================================
   Schedule / CTA band
   ========================================================================== */
.lv-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(900px 480px at 16% 0%, rgba(46, 139, 255, .1) 0%, transparent 62%),
    linear-gradient(150deg, #FFFFFF 0%, var(--lv-paper) 52%, #EDF2F8 100%);
  color: var(--lv-text);
}

/* On the light band the heading, copy and facts all flip to ink */
.lv-cta .lv-h2-light { color: var(--lv-ink); }

.lv-cta .lv-lead-dark { color: var(--lv-muted); }

.lv-cta .lv-eyebrow {
  background: rgba(46, 139, 255, .08);
  border-color: rgba(46, 139, 255, .28);
  color: var(--lv-accent-dk);
}

.lv-cta-glow {
  position: absolute;
  right: -160px;
  bottom: -200px;
  width: 620px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 139, 255, .14) 0%, transparent 68%);
  filter: blur(60px);
  pointer-events: none;
}

/* Sparkles and grain are tuned for dark grounds; both muddy a white band */
.lv-cta .lv-spark,
.lv-cta .lv-grain { display: none; }

/* The ghost button is white-on-dark by default — needs an ink outline here */
.lv-cta .lv-btn-ghost {
  color: var(--lv-ink);
  background: rgba(255, 255, 255, .7);
  border-color: rgba(10, 15, 22, .18);
}

.lv-cta .lv-btn-ghost:hover {
  color: var(--lv-white);
  background: var(--lv-ink);
  border-color: var(--lv-ink);
}

.lv-cta-inner { position: relative; z-index: 2; }

.lv-spark-c1 { width: 14px; height: 14px; top: 18%; left: 52%; animation-delay: .7s; }
.lv-spark-c2 { width: 11px; height: 11px; top: 74%; left: 46%; animation-delay: 2.8s; }

.lv-inline-link {
  color: var(--lv-accent-dk);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(22, 104, 214, .35);
}

.lv-inline-link:hover { color: var(--lv-accent-dk); border-bottom-color: var(--lv-accent-dk); }

.lv-cta-facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.lv-cta-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--lv-muted);
  font-size: .93rem;
}

.lv-cta-facts i { color: var(--lv-accent-dk); }

.lv-map {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--lv-line);
  box-shadow: 0 26px 60px -20px rgba(5, 9, 14, .22);
  background: var(--lv-white);
  line-height: 0;
}

.lv-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(.35) contrast(1.05);
}

@media (max-width: 991.98px) {
  .lv-cta { padding: 66px 0; }
  .lv-map iframe { height: 320px; }
}

@media (max-width: 575.98px) {
  .lv-cta { padding: 52px 0; }
  .lv-map iframe { height: 260px; }
  .lv-cta-facts { gap: 10px 0; flex-direction: column; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lv-footer {
  position: relative;
  /* must clip: the offset watermark and skyline would otherwise widen the page */
  overflow: hidden;
  padding: 132px 0 0;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(30, 43, 60, .85) 0%, transparent 60%),
    linear-gradient(180deg, var(--lv-ink) 0%, #070B11 100%);
  color: rgba(255, 255, 255, .74);
}

.lv-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2), var(--lv-accent), var(--lv-accent-2));
  background-size: 200% auto;
  animation: lv-sheen 8s linear infinite;
}

.lv-footer .container { position: relative; z-index: 2; }

.lv-footer-top { padding-bottom: 46px; }

.lv-footer-logo {
  display: inline-block;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--lv-white);
  transition: transform .35s var(--lv-ease), box-shadow .35s;
}

.lv-footer-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(46, 139, 255, .3);
}

.lv-footer-logo img { height: 66px; width: auto; display: block; }

.lv-footer-tagline {
  margin-bottom: 20px;
  max-width: 42ch;
  font-size: .94rem;
  line-height: 1.75;
}

.lv-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lv-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .94rem;
}

.lv-footer-contact i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(46, 139, 255, .14);
  color: var(--lv-accent);
  font-size: .86rem;
  transition: background .25s, color .25s;
}

.lv-footer-contact li:hover i { background: var(--lv-accent); color: var(--lv-ink); }

.lv-footer-contact a { color: rgba(255, 255, 255, .84); transition: color .2s; }
.lv-footer-contact a:hover { color: var(--lv-accent-lt); }

.lv-footer-heading {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 12px;
  color: var(--lv-white);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.lv-footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lv-accent), var(--lv-accent-2));
}

/* ~20 areas → two sub-columns */
.lv-footer-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 24px;
}

.lv-footer-areas li {
  break-inside: avoid;
  margin-bottom: 9px;
}

.lv-footer-areas a {
  color: rgba(255, 255, 255, .74);
  font-size: .92rem;
  transition: color .2s, padding-left .25s var(--lv-ease);
}

.lv-footer-areas a:hover {
  color: var(--lv-accent-lt);
  padding-left: 5px;
}

.lv-footer-area-main {
  color: var(--lv-white) !important;
  font-weight: 700;
}

.lv-footer-area-main span {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lv-accent);
  color: var(--lv-ink);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lv-footer-links {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.lv-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .76);
  font-size: .94rem;
  transition: color .2s, gap .25s var(--lv-ease);
}

.lv-footer-links i { color: var(--lv-accent); font-size: .72rem; }
.lv-footer-links a:hover { color: var(--lv-accent-lt); gap: 12px; }

.lv-footer-call { width: 100%; }

.lv-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--lv-line-dk);
}

.lv-copyright {
  margin: 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}

.lv-footer-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
}

.lv-footer-legal a {
  color: rgba(255, 255, 255, .7);
  font-size: .88rem;
  transition: color .2s;
}

.lv-footer-legal a:hover { color: var(--lv-accent-lt); }

@media (max-width: 991.98px) {
  .lv-footer { padding-top: 104px; }
  .lv-skyline-footer { height: 86px; }
  .lv-footer-top { padding-bottom: 32px; }
}

@media (max-width: 575.98px) {
  .lv-footer-areas { columns: 1; }
  .lv-footer-bottom { justify-content: center; text-align: center; }
  .lv-footer-legal { justify-content: center; }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.lv-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lv-accent-lt), #4FA4FF);
  color: var(--lv-ink);
  font-size: 1.65rem;
  box-shadow: 0 10px 26px rgba(46, 139, 255, .42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.85);
  transition: opacity .3s, transform .3s var(--lv-ease), visibility .3s;
}

.lv-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lv-to-top:hover { color: var(--lv-ink); transform: translateY(-3px); }

/* ==========================================================================
   Reduced motion — kill every ambient animation, keep the layout intact
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lv-shine, .lv-thumb-sheen, .lv-beads, .lv-topbar::after,
  .lv-spark, .lv-scroll-cue { display: none; }

  /* the swoosh must end up drawn, not stuck at zero length */
  .lv-swoosh path { stroke-dashoffset: 0; }
}