/* ============================================================
   Häus Detailing — Google Ads landing page (/quote)

   Minimal SaaS treatment: one neutral scale, hairline borders,
   no filled panels. Colour is spent on exactly two things the
   visitor has to notice — the price and the primary button.
   Everything else stays quiet on purpose.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-2: #FAFAFA;
  --ink: #111113;
  --ink-2: #363940;
  --muted: #5A5D66;   /* ~6.6:1 on white */
  --faint: #6E7178;   /* ~5.0:1 on white */
  --placeholder: #7C7F87;
  --line: #E2E4E8;
  --line-2: #C4C7CD;
  --accent: #2563EB;      /* High-converting brand blue for primary conversion CTAs */
  --accent-hover: #1D4ED8;
  --err: #B42318;
  --ok: #17864B;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --shell: 1080px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.lp {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ---------------- Header ---------------- */
.lp-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lp-bar__inner {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-bar__brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  user-select: none;
}
.lp-bar__logo {
  height: 36px;
  width: auto;
  max-width: 140px;
  display: block;
}
.lp-bar__call {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid #C4C7CD;
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-bar__call:hover { border-color: var(--ink); background: var(--bg-2); }

/* ---------------- Hero ---------------- */
.lp-hero {
  padding: 44px 0 54px;
  background: var(--bg-2);
}
.lp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

.lp-kicker {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}

.lp-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 20ch;
  margin-bottom: 16px;
}

.lp-sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 42ch;
  margin-bottom: 26px;
}

/* Three numbers, no icons, no colour — read at a glance. */
.lp-facts {
  list-style: none;
  display: flex;
  gap: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.lp-facts li {
  display: grid;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lp-facts span {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* ---------------- Hero Trust Bar ----------------
   Chips at every width. They used to be plain text with middot separators
   on desktop and chips only on phones; one treatment reads as one thing. */
.lp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.lp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04);
}
/* The numbers are the point of each chip, so only they get full ink. */
.lp-trust-item strong {
  font-weight: 600;
  color: var(--ink);
}
/* Stars read wider than text, so the chip loses a little left padding. */
.lp-trust-item--rating {
  padding-left: 10px;
}
.lp-trust-item--rating .lp-stars {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #F59E0B;
}
.lp-trust-item__check {
  flex: none;
  color: var(--ok);
}
@media (max-width: 640px) {
  /* All three will not fit one row (376px of chip against ~312px of screen),
     so they are laid out deliberately instead of left to wrap: two equal
     chips, then one across the full width. Wrapping produced a centred
     orphan on the second row. */
  .lp-hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
  }
  .lp-trust-item {
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .lp-trust-item:last-child {
    grid-column: 1 / -1;
  }
  /* Five glyphs make this the widest chip, and it has to fit half of a
     320px screen, so it runs tighter than its neighbour. */
  .lp-trust-item--rating {
    gap: 4px;
    padding: 6px 9px 6px 8px;
  }
  .lp-trust-item--rating .lp-stars {
    font-size: 10px;
    letter-spacing: 0;
  }
}

/* The rating is one line, so it hangs on the value baseline of its neighbours. */
.lp-facts__rating { align-content: end; }
.lp-facts__rating a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
}
.lp-facts__rating .lp-stars {
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--ink);
}
.lp-facts__rating em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--muted); }

/* Section gallery cards (kept for the "Recent work" grid). */
.lp-shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lp-shot img { width: 100%; height: auto; }
.lp-shot figcaption {
  padding: 9px 11px;
  font-size: 12px;
  color: var(--faint);
  border-top: 1px solid var(--line);
}

/* ---------------- Hero carousel ----------------
   Native scroll-snap does the moving: swipe works on touch with no
   JS, and the script only drives the arrows, dots and autoplay. */
.lp-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.lp-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 8px;
  /* No scroll-behavior here on purpose: with mandatory snap, Chrome cancels
     programmatic smooth scrolls and snaps back to the first slide, so the
     script animates scrollLeft frame by frame instead. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lp-carousel__track::-webkit-scrollbar { display: none; }
.lp-carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.lp-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.lp-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.lp-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.lp-carousel__caption { font-size: 11px; color: var(--faint); }
.lp-carousel__nav { display: flex; align-items: center; gap: 0; }
.lp-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.lp-arrow:hover { color: var(--ink); background: var(--bg-2); }

/* ---------------- Form ---------------- */
.lp-card {
  border: 1px solid #C4C7CD;
  border-radius: 16px;
  padding: 28px;
  scroll-margin-top: 74px;
  background: var(--bg);
  box-shadow: 0 4px 24px rgba(17, 17, 19, 0.05);
}

.lp-card__head {
  margin-bottom: 28px;
}
.lp-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.015em;
  margin-bottom: 8px;
}
/* Sized to the words and sitting on their line — a tinted box around it
   read as a separate element stacked above the heading. Grey, not accent:
   the blue on this card belongs to the price and the submit button. */
.lp-card__title-icon {
  flex: none;
  color: var(--muted);
}
.lp-card__sub { font-size: 13.5px; color: var(--muted); }

.lp-form { display: grid; gap: 14px; }
#lead-form { gap: 24px; }
.lp-form__actions { display: grid; gap: 12px; }
.lp-form__actions .lp-note { margin-top: 4px; line-height: 1.6; }
#lead-form .lp-label, #lead-form .lp-price__label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
#lead-form .lp-chip {
  border: 1px solid #C4C7CD;
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 8px;
}
#lead-form .lp-chip:hover {
  border-color: #93C5FD;
}
#lead-form .lp-chip--active,
#lead-extra .lp-chip--active {
  background: #EFF6FF;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent);
}
#lead-form .lp-chip--active:hover,
#lead-extra .lp-chip--active:hover {
  background: #E0EDFE;
  color: var(--accent);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 1px var(--accent-hover);
}
#lead-form .lp-input {
  border: 1px solid #C4C7CD;
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 8px;
}
#lead-form .lp-input:focus {
  border-color: #111113;
  box-shadow: 0 0 0 3px rgba(17, 17, 19, 0.08);
}
#lead-form .lp-input--error { border-color: var(--err); }
#lead-form .lp-btn--quiet {
  border: 1px solid #C4C7CD;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14px;
  border-radius: 8px;
}
#lead-form .lp-btn--quiet:hover {
  border-color: #111113;
  background: #F9FAFB;
}
.lp-field { display: grid; gap: 9px; }
.lp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lp-chip {
  padding: 11px 12px;
  border: 1px solid #C4C7CD;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lp-chip:hover { border-color: var(--ink-2); }
.lp-chip--active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.lp-chips--days .lp-chip { font-size: 14px; }

/* ---------------- When: day + arrival window ----------------
   Two optional questions that only unfold once the one above is
   answered, so the form still reads as short on first paint. */
.lp-when { gap: 9px; }
.lp-chips--when { grid-template-columns: repeat(3, 1fr); }
.lp-chips--when .lp-chip { font-size: 14px; padding: 11px 6px; }

.lp-sublabel {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
  margin-bottom: 7px;
}

.lp-when__reveal {
  animation: lp-unfold 0.22s ease both;
}
@keyframes lp-unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-when__reveal { animation: none; }
}

/* Safari renders date inputs at their own height and vertically mis-aligned
   unless the field is told to behave like a normal text box. */
.lp-input--date {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  font-family: inherit;
}
.lp-input--date::-webkit-date-and-time-value { text-align: left; }
.lp-input--date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
.lp-input--date:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.lp-chips--time .lp-chip {
  display: grid;
  gap: 5px;
  text-align: left;
  padding: 9px 11px;
}
/* Own weight, not the parent's: the active chip sets 600 on the button
   and the title would otherwise thicken on selection. */
.lp-chip__title { font-size: 14px; font-weight: 500; }
.lp-chip__range { font-size: 12px; font-weight: 400; color: var(--faint); }
/* The active chip inside the form is a light blue tile, not a dark one,
   so the range stays ink — white text would vanish into it. */
#lead-form .lp-chip--active .lp-chip__range { color: var(--ink); }

/* Greyed and marked with a small clock, so it reads as "not available
   right now" rather than as a chip that failed to load. */
#lead-form .lp-chip--disabled,
#lead-form .lp-chip--disabled:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--placeholder);
  cursor: not-allowed;
}
.lp-chip__icon { flex: none; opacity: 0.8; }

.lp-when__hint,
.lp-when__note {
  font-size: 12px;
  color: var(--faint);
  margin-top: 7px;
}
.lp-when__note { color: var(--err); }

/* The one number that decides whether they call. */
.lp-price {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(17, 17, 19, 0.011) 5px,
    rgba(17, 17, 19, 0.011) 8px
  );
  border: 1px solid #E2E4E8;
  border-radius: 10px;
}
.lp-price__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lp-price__heading { position: relative; display: flex; align-items: center; gap: 6px; }
/* ---------------- Owner ----------------
   Centred and typographic: no border above the eyebrow (the section already
   carries its own rule) and no filled card, so the claim reads as a
   statement rather than a badge. */
.lp-owner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
/* The owner block sets the section spacing with its own title margin. */
.lp-owner__eyebrow { margin-bottom: 0; }

.lp-owner__title {
  max-width: none;
  margin: 14px 0 18px;
}
.lp-owner__text {
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
/* Width set to the sentence, not to a rule of thumb: this paragraph is
   meant to land on two lines, and a generic measure broke it over three. */
.lp-owner__text--lead { max-width: 640px; }
.lp-owner__text--sub { max-width: 600px; }
/* The consequence, a shade quieter than the claim it follows. */
.lp-owner__text + .lp-owner__text {
  margin-top: 14px;
  color: var(--muted);
}
/* The one rule that earns its place: it closes the prose and opens the
   three guarantees. */
.lp-owner__points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  max-width: 560px;
  margin: 30px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.lp-owner__points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lp-owner__check { flex: none; color: var(--ok); }

@media (max-width: 640px) {
  .lp-owner__points {
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin-top: 26px;
    padding-top: 22px;
  }
}

/* Answers "are they going to start calling me?" right where the number
   is asked for, which is where the hesitation happens. */
.lp-contact-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--faint);
}

/* The caveat that used to hide behind a "?" — the anxiety it answers is
   the reason people stall on the price, so it is read without asking. */
.lp-price__note {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.lp-price__note strong { font-weight: 600; color: var(--ink-2); }

.lp-price__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.015em;
}
.lp-price__from {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.lp-price__amount {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.015em;
}

.lp-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #C4C7CD;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-input::placeholder { color: var(--placeholder); }
.lp-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 19, 0.07);
}
.lp-input--error { border-color: var(--err); }
.lp-input--area { resize: vertical; min-height: 62px; }

.lp-error { color: var(--err); font-size: 13.5px; }

/* ---------------- Buttons ---------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.lp-btn--primary {
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  padding: 15px 20px;
}
.lp-btn--primary:hover { background: var(--accent-hover); }

/* ---------------- Spark CTA ----------------
   Ported from the portfolio project's "Get Started" button. Only the
   effects are borrowed — the sizing stays on this page's button scale,
   since the original was a 36px-tall nav button. */
.lp-btn--spark {
  --round: 8px;
  position: relative;
  overflow: hidden;
  border: none;
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(37, 99, 235, 0.8) 0%, rgba(37, 99, 235, 0) 100%),
    linear-gradient(0deg, #2563eb, #2563eb);
  transition: background 0.3s ease, transform 0.12s ease;
}

/* Two inset layers give the edge its lit bevel. */
.lp-btn--spark::before,
.lp-btn--spark::after {
  content: "";
  position: absolute;
  inset: var(--space);
  border-radius: calc(var(--round) - var(--space));
  transition: all 0.5s ease-in-out, background 0.3s ease;
  z-index: 0;
}
.lp-btn--spark::before {
  --space: 1px;
  background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
}
.lp-btn--spark::after {
  --space: 2px;
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(37, 99, 235, 0.8) 0%, rgba(37, 99, 235, 0) 100%),
    linear-gradient(0deg, #2563eb, #2563eb);
}

.lp-btn--spark:hover {
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.1) 100%),
    linear-gradient(0deg, #1d4ed8, #1d4ed8);
}
.lp-btn--spark:hover::after {
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(29, 78, 216, 0.8) 0%, rgba(29, 78, 216, 0) 100%),
    linear-gradient(0deg, #1d4ed8, #1d4ed8);
}
.lp-btn--spark:active { transform: scale(0.98); }

/* Folded corner. Its cut-out has to match whatever sits behind the button,
   which here is the white form card. */
.lp-spark__fold {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  background: radial-gradient(100% 75% at 55%, rgba(37, 99, 235, 0.8) 0%, rgba(37, 99, 235, 0) 100%);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: 0.375rem;
  border-top-right-radius: var(--round);
  transition: all 0.5s ease-in-out;
}
.lp-spark__fold::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150%;
  height: 150%;
  transform: rotate(45deg) translateX(0%) translateY(-18px);
  background-color: var(--bg);
  pointer-events: none;
}
.lp-btn--spark:hover .lp-spark__fold {
  margin-top: -0.75rem;
  margin-right: -0.75rem;
}

/* Embers drifting up from the bottom edge. */
.lp-spark__points {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.lp-spark__points i {
  position: absolute;
  bottom: -10px;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 9999px;
  pointer-events: none;
  animation: lp-floating-points infinite ease-in-out;
}
@keyframes lp-floating-points {
  0% { transform: translateY(0); }
  85% { opacity: 0; }
  100% { transform: translateY(-62px); opacity: 0; }
}
.lp-spark__points i:nth-child(1)  { left: 10%; opacity: 1;   animation-duration: 2.35s; animation-delay: 0.2s; }
.lp-spark__points i:nth-child(2)  { left: 30%; opacity: 0.7; animation-duration: 2.5s;  animation-delay: 0.5s; }
.lp-spark__points i:nth-child(3)  { left: 25%; opacity: 0.8; animation-duration: 2.2s;  animation-delay: 0.1s; }
.lp-spark__points i:nth-child(4)  { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
.lp-spark__points i:nth-child(5)  { left: 50%; opacity: 1;   animation-duration: 1.9s; }
.lp-spark__points i:nth-child(6)  { left: 75%; opacity: 0.5; animation-duration: 1.5s;  animation-delay: 1.5s; }
.lp-spark__points i:nth-child(7)  { left: 88%; opacity: 0.9; animation-duration: 2.2s;  animation-delay: 0.2s; }
.lp-spark__points i:nth-child(8)  { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
.lp-spark__points i:nth-child(9)  { left: 98%; opacity: 0.6; animation-duration: 2.6s;  animation-delay: 0.1s; }
.lp-spark__points i:nth-child(10) { left: 65%; opacity: 1;   animation-duration: 2.5s;  animation-delay: 0.2s; }

.lp-spark__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  color: #fff;
}
.lp-spark__icon {
  /* Path length of the sparkle, so the stroke finishes exactly with the
     animation. Retune this if the icon's path changes. */
  --dash: 64;
  flex: none;
  transition: fill 0.1s linear;
}
.lp-btn--spark:focus .lp-spark__icon { fill: #fff; }
.lp-btn--spark:hover .lp-spark__icon {
  fill: transparent;
  animation: lp-spark-dash 1s linear forwards, lp-spark-fill 0.1s linear forwards 0.95s;
}
@keyframes lp-spark-dash {
  from { stroke-dasharray: 0 0 0 0; }
  to { stroke-dasharray: var(--dash) var(--dash) 0 0; }
}
@keyframes lp-spark-fill {
  to { fill: #fff; }
}

/* The embers are decoration; nobody should have to sit through them. */
@media (prefers-reduced-motion: reduce) {
  .lp-spark__points { display: none; }
  .lp-btn--spark,
  .lp-btn--spark::before,
  .lp-btn--spark::after,
  .lp-spark__fold { transition: none; }
  .lp-btn--spark:hover .lp-spark__icon { animation: none; fill: #fff; }
}
.lp-btn--primary[disabled] { opacity: 0.5; cursor: default; }
.lp-btn--quiet {
  background: #FFFFFF;
  border: 1px solid #C4C7CD;
  color: var(--ink);
  font-weight: 500;
}
.lp-btn--quiet:hover {
  background: #F9FAFB;
  border-color: #111113;
}

.lp-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* ---------------- Success ---------------- */
.lp-success { display: grid; gap: 14px; }
.lp-success__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lp-success__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.lp-success__text { font-size: 15px; color: var(--ink-2); }
.lp-success__text strong { color: var(--ink); }
.lp-form--extra { gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.lp-extra-done { font-size: 13.5px; color: var(--ok); text-align: center; }

/* ---------------- Modern Sections & Packaging ---------------- */
.lp-section {
  padding: 68px 0;
  border-top: 1px solid var(--line);
}
.lp-section--alt {
  background: var(--bg-2);
}

.lp-section__header {
  margin-bottom: 36px;
}
.lp-section__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
/* Section labels as bordered pills with a mark. Started life on the owner
   block; the rest of the page's eyebrows read as the same kind of label,
   so they share it. */
.lp-section__eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.lp-section__eyebrow--pill svg { flex: none; color: var(--accent); }
.lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ink);
}
.lp-section__desc {
  font-size: 15.5px;
  color: var(--muted);
  max-width: 800px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------------- Packages Vehicle Picker ---------------- */
.lp-packages-nav {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 32px;
}
.lp-packages-picker {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 5px;
  gap: 6px;
  max-width: 100%;
}
.lp-packages-picker__btn {
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.lp-packages-picker__btn:hover {
  color: var(--ink);
  background: rgba(17, 17, 19, 0.05);
}
.lp-packages-picker__btn--active {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(17, 17, 19, 0.14);
}
.lp-packages-picker__btn--active:hover {
  background: var(--ink);
  color: #FFFFFF;
}
@media (max-width: 640px) {
  .lp-packages-nav {
    margin-top: 20px;
    margin-bottom: 24px;
  }
  .lp-packages-picker {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .lp-packages-picker__btn {
    padding: 11px 10px;
    font-size: 13.5px;
    text-align: center;
    white-space: normal;
  }
}

/* ---------------- Package Cards ---------------- */
.lp-pack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .lp-pack-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

.lp-pack-card {
  background: var(--bg);
  border: 1px solid #C4C7CD;
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-pack-card:hover {
  border-color: var(--ink-2);
  box-shadow: 0 12px 32px rgba(17, 17, 19, 0.06);
}
.lp-pack-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  position: relative;
}
.lp-pack-card--featured:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(17, 17, 19, 0.06);
}

.lp-pack-card__head {
  margin-bottom: 24px;
}
/* Both cards offer the same kind of choice, so their buttons match in size —
   --primary is bigger by default because it is the form's submit, and that
   emphasis has no place here. Colour alone marks the recommended pack. */
.lp-pack-card .lp-btn {
  padding: 14px 20px;
  font-size: 15.5px;
}

.lp-pack-card__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid #C4C7CD;
  margin-bottom: 12px;
}
/* Only on the featured card, which already carries the accent ring — so the
   badge reads as part of that emphasis rather than a third use of colour. */
.lp-pack-card--featured .lp-pack-card__tag {
  background: #EFF6FF;
  color: var(--accent);
  border-color: var(--accent);
}
.lp-pack-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.lp-pack-card__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
  min-height: 42px;
}
.lp-pack-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.lp-pack-card__from {
  font-size: 14px;
  color: var(--faint);
}
.lp-pack-card__amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lp-pack-card__unit {
  font-size: 13.5px;
  color: var(--faint);
}

/* Side-by-side comparison on /services: the claim "mobile is not a downgrade"
   is easier to judge as two columns than as a paragraph. */
.services-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 940px;
  margin: 8px auto 0;
}
.services-compare__col {
  padding: 26px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.services-compare__col--ours {
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.07);
}
.services-compare__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.services-compare__list {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.services-compare__list li {
  position: relative;
  padding-left: 20px;
}
.services-compare__list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.services-compare__list--muted {
  color: var(--muted);
}
.services-compare__list--muted li::before {
  background: var(--line-2);
}

/* Pill rows that sit under a centred heading rather than in a left-aligned
   card. */
.lp-cities-pills--center {
  justify-content: center;
}

/* Secondary link under the pack CTA: sends readers (and crawlers) to the
   dedicated pack page instead of only into the booking flow. */
.lp-pack-card__details {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lp-pack-card__details:hover,
.lp-pack-card__details:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* The add-ons a given city asks for most — three cards with their own links
   into the matching add-on pages. */
.location-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.location-jobs__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.location-jobs__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.location-jobs__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.location-jobs__link {
  margin-top: auto;
  padding-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.location-jobs__link:hover,
.location-jobs__link:focus-visible {
  text-decoration: underline;
}
.location-jobs__note {
  margin-top: 22px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}

/* Links out to the neighbouring city pages, so each location page is part of
   the cluster rather than a dead end. */
.location-nearby__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.location-nearby__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.location-nearby__card:hover,
.location-nearby__card:focus-visible {
  border-color: var(--ink-2);
  box-shadow: 0 12px 32px rgba(17, 17, 19, 0.06);
}
.location-nearby__name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.location-nearby__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.location-nearby__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
}
.location-nearby__all {
  margin-top: 24px;
  text-align: center;
  font-size: 14.5px;
}

.lp-pack-card__features {
  list-style: none;
  display: grid;
  gap: 13px;
  margin-bottom: 30px;
  font-size: 14.5px;
  color: var(--ink-2);
  flex-grow: 1;
}
.lp-pack-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.lp-pack-card--featured .lp-pack-card__head {
  margin-bottom: 16px;
}
.lp-pack-card__included-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 9px 12px;
  margin-bottom: 4px;
  background: rgba(37, 99, 235, 0.05);
  border-radius: 8px;
  border-bottom: 0;
}
.lp-pack-card__included-note strong {
  font-weight: 600;
  color: var(--ink);
}
.lp-included-icon { flex: none; color: var(--accent); }
.lp-check-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink);
  margin-top: 2px;
}

/* ---------------- Minimalist Package Reassurance ---------------- */
.lp-pack-reassurance {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 680px) {
  .lp-pack-reassurance {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.lp-pack-reassurance__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid #C4C7CD;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.lp-pack-reassurance__item strong {
  color: var(--ink);
}
.lp-reassurance-icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--ink);
  margin-top: 2px;
}

/* ---------------- Add-Ons Minimalist Grid ---------------- */
.lp-addons {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.lp-addons__header {
  margin-bottom: 20px;
}
.lp-addons__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.lp-addons__subtitle {
  font-size: 13.5px;
  color: var(--muted);
}
.lp-addons__table {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 40px;
  border-top: 1px solid var(--line);
}
@media (min-width: 680px) {
  .lp-addons__table {
    grid-template-columns: 1fr 1fr;
  }
}
.lp-addon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lp-addon-row__name {
  color: var(--ink);
  font-weight: 500;
}
.lp-addon-row__price {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------- Before & After Gallery Showcase Carousel ---------------- */
.lp-section--gallery {
  background: var(--bg);
  padding: 80px 0 90px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.lp-section__header--center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}
.lp-section__header--center .lp-section__desc {
  margin: 0 auto;
}

/* Full screen width showcase container */
.lp-showcase {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: visible;
}

/* Track holding the carousel slides */
.lp-showcase__track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 20px 0 24px;
}
.lp-showcase__track::-webkit-scrollbar {
  display: none;
}

/* Individual slide */
.lp-showcase__slide {
  flex: 0 0 82vw;
  max-width: 760px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0 8px;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.45;
  transform: scale(0.93);
  filter: blur(0.5px);
  cursor: pointer;
}

@media (min-width: 768px) {
  .lp-showcase__slide {
    flex: 0 0 65vw;
    max-width: 800px;
    padding: 0 10px;
  }
}

@media (min-width: 1200px) {
  .lp-showcase__slide {
    flex: 0 0 55vw;
    max-width: 860px;
    padding: 0 12px;
  }
}

/* Active center slide */
.lp-showcase__slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  cursor: default;
}

/* Button card */
.lp-showcase__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}

.lp-showcase__media {
  position: relative;
  overflow: hidden;
  border: 1px solid #C4C7CD;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
  background: #F3F4F6;
  width: 100%;
  box-shadow: 0 6px 20px rgba(17, 17, 19, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
}

.lp-showcase__slide.is-active .lp-showcase__media {
  box-shadow: 0 20px 48px -12px rgba(17, 17, 19, 0.16);
  border-color: #A1A4AB;
}

.lp-showcase__card:hover .lp-showcase__media {
  border-color: #111113;
}

.lp-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-showcase__card:hover .lp-showcase__media img {
  transform: scale(1.025);
}

.lp-showcase__overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.lp-showcase__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(17, 17, 19, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font);
}

.lp-showcase__zoom-hint {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111113;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lp-showcase__card:hover .lp-showcase__zoom-hint {
  opacity: 1;
  transform: scale(1);
}

.lp-showcase__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  font-family: var(--font);
}

.lp-showcase__title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.lp-showcase__action {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.lp-showcase__card:hover .lp-showcase__action {
  color: #111113;
  transform: translateX(2px);
}

/* Showcase carousel controls: arrows + dots */
.lp-showcase__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  padding: 0 24px;
}

.lp-showcase__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #C4C7CD;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(17, 17, 19, 0.04);
}

.lp-showcase__arrow:hover {
  background: #F9FAFB;
  border-color: #111113;
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(17, 17, 19, 0.1);
}

.lp-showcase__arrow:active {
  transform: scale(0.96);
}

.lp-showcase__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-showcase__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D1D5DB;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
}

.lp-showcase__dot.is-active {
  width: 24px;
  border-radius: 10px;
  background: #111113;
}

/* ---------------- Gallery Lightbox Modal ---------------- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gallery-lightbox[hidden] {
  display: none !important;
}
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 19, 0.88);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.gallery-lightbox__panel {
  position: relative;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.gallery-lightbox__img {
  width: 100%;
  height: auto;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  background: #000;
  display: block;
}
.gallery-lightbox__caption {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.gallery-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gallery-lightbox__close:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* ---------------- How It Works (Modern Flow Timeline) ---------------- */
/* Three steps read as a sequence, so they sit on one line with numbered
   nodes instead of being three separate cards. Boxes made them look like
   unrelated tiles, and the card treatment is already doing duty below in
   the reviews — two identical grids in a row flattened the page. */
.lp-steps-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* The rule runs between the centres of the first and last node. */
.lp-steps-timeline::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 16.666%;
  right: 16.666%;
  height: 1px;
  background: var(--line-2);
}

.lp-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-step-item__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.lp-step-item__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 9px;
  letter-spacing: 0.005em;
  line-height: 1.3;
}

.lp-step-item__text {
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .lp-steps-timeline {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* A horizontal rule makes no sense once the steps stack. */
  .lp-steps-timeline::before { display: none; }
  .lp-step-item__node { margin-bottom: 14px; }
}

/* ---------------- Targeted cleaning ----------------
   A secondary offer, so it is one wide hairline panel rather than a third
   package card: no shadow, no accent, quiet CTA. */
.lp-targeted {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: center;
  margin-top: 36px;
  padding: 26px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.lp-targeted__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  /* Matches the step headings rather than the big display type above. */
  letter-spacing: 0.005em;
  margin: 6px 0 10px;
}
.lp-targeted__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
.lp-targeted__note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--faint);
}

/* The number matters, but it is a floor rather than a price, so it stays
   smaller than the package figures above. */
.lp-targeted__offer {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.lp-targeted__price-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.lp-targeted__price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 6px;
  color: var(--ink);
}
.lp-targeted__price-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.lp-targeted__offer .lp-btn {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .lp-targeted {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }
  .lp-targeted__offer {
    justify-items: start;
    text-align: left;
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--line);
    width: 100%;
  }
}

/* ---------------- Reviews ---------------- */
.lp-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid #C4C7CD;
  border-radius: 20px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(17, 17, 19, 0.03);
}
.lp-rating-pill .lp-google-icon {
  flex-shrink: 0;
}
.lp-rating-pill .lp-stars {
  color: #F59E0B;
  font-size: 14px;
  letter-spacing: 2px;
}
.lp-rating-pill__dot {
  color: #D1D5DB;
}

/* Column flow rather than a grid: quotes differ wildly in length, and the
   browser balances the two columns far better than fixed cells, which left
   dead space under whichever card was shorter. */
.lp-reviews-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 860px) {
  .lp-reviews-bento {
    display: block;
    columns: 2;
    column-gap: 22px;
  }
  .lp-reviews-bento .lp-review-card {
    break-inside: avoid;
    margin-bottom: 22px;
  }
  /* Forces the split after the second card instead of letting the browser
     balance it, so each review stays in the column it was placed in. */
  .lp-reviews-bento .lp-review-card:nth-child(2) {
    break-after: column;
    margin-bottom: 0;
  }
}

.lp-review-card {
  background: var(--bg);
  border: 1px solid #C4C7CD;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(17, 17, 19, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-review-card:hover {
  border-color: #9CA3AF;
  box-shadow: 0 4px 14px rgba(17, 17, 19, 0.05);
}

.lp-review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.lp-review-card__stars {
  color: #F59E0B;
  font-size: 15px;
  letter-spacing: 2px;
}

.lp-review-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #4B5563;
}

.lp-review-card__quote {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.62;
  font-style: normal;
  margin-bottom: 20px;
  flex-grow: 1;
}






.lp-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #F0F1F3;
}

.lp-review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  color: #374151;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.lp-review-card__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp-review-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.lp-review-card__sub {
  font-size: 12px;
  color: var(--muted);
}

.lp-reviews-cta {
  text-align: center;
  margin-top: 32px;
}

.lp-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid #C4C7CD;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Keeps the arrow welded to the last word: on a phone the line broke
   before it and left the arrow alone on its own row. */
.lp-link-pill__tail { white-space: nowrap; }

/* Trimmed just enough to hold one line on a 360px screen (293px of pill
   against 312px of room). Narrower than that it wraps, but the arrow now
   goes over with "Google" instead of alone. */
@media (max-width: 640px) {
  .lp-link-pill {
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

.lp-link-pill:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(17, 17, 19, 0.06);
}

/* ---------------- Service Area & FAQ Split ---------------- */
.lp-faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 861px) {
  .lp-faq-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
  }
}

.lp-service-area__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lp-service-area__head .lp-h2 {
  margin-bottom: 0;
}
.lp-pin-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  flex: none;
  transform: translateY(-2px);
}
.lp-service-area__desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.lp-cities-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.lp-city-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-2);
  border: 1px solid #C4C7CD;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.lp-service-area__note {
  font-size: 13.5px;
  color: var(--faint);
  margin-bottom: 20px;
}
.lp-service-area__btn {
  width: auto;
  display: inline-flex;
}

.lp-faq-container .lp-h2 {
  margin-bottom: 20px;
}
.lp-accordion {
  display: grid;
  gap: 12px;
}
.lp-faq-item {
  border: 1px solid #C4C7CD;
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.lp-faq-item[open] {
  border-color: var(--ink-2);
}
.lp-faq-summary {
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  user-select: none;
}
.lp-faq-summary::-webkit-details-marker {
  display: none;
}
.lp-faq-chevron {
  width: 18px;
  height: 18px;
  color: var(--faint);
  transition: transform 0.2s ease;
  flex: none;
}
.lp-faq-item[open] .lp-faq-chevron {
  transform: rotate(180deg);
  color: var(--ink);
}
.lp-faq-content {
  padding: 0 20px 18px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------------- Final Closing Banner ---------------- */
.lp-closing-banner {
  padding: 72px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
/* Wide enough to hold the headline on one line (it needs 635px at 36px);
   the paragraph keeps its own shorter measure below. */
.lp-closing-banner__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.lp-closing-banner__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.lp-closing-banner__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--ink);
}
.lp-closing-banner__sub {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
}
.lp-closing-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.lp-closing-banner__btn {
  min-width: 220px;
  width: auto;
}
.lp-closing-banner__call {
  min-width: 200px;
  width: auto;
}
/* Once they stack, two different widths look like a mistake rather than a
   hierarchy, so both go full width. */
@media (max-width: 520px) {
  .lp-closing-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-closing-banner__btn,
  .lp-closing-banner__call {
    width: 100%;
    min-width: 0;
  }
}
/* Each promise wraps as a unit, so a lone tick never ends a line. */
.lp-closing-banner__guarantee span { white-space: nowrap; }

.lp-closing-banner__guarantee {
  font-size: 13px;
  color: var(--faint);
}

/* ---------------- Footer ---------------- */
.lp-footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--faint);
}
.lp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  align-items: center;
}
.lp-footer a {
  text-decoration: none;
}
.lp-footer a:hover {
  color: var(--ink);
}
.lp-footer__links {
  display: flex;
  gap: 18px;
}

/* ---------------- Sticky Mobile Bar ---------------- */
.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.lp-sticky a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.lp-sticky__call {
  border: 1px solid #C4C7CD;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-sticky__call:hover {
  border-color: #111113;
  background: #F9FAFB;
}
.lp-sticky__quote {
  color: #fff;
  flex: 1.7 !important;
}
/* The sticky bar is translucent white, so the folded corner's cut-out
   matches it rather than the page behind. */
.lp-sticky__quote .lp-spark__fold::after { background-color: #FFFFFF; }

/* ---------------- Responsive ---------------- */
@media (min-width: 861px) {
  .lp-hero__grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: min-content 1fr;
    gap: 20px 48px;
    align-items: start;
  }
  .lp-hero__copy .lp-facts,
  .lp-hero__copy .lp-hero-trust {
    margin-bottom: 0;
  }
  .lp-card {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .lp-carousel {
    grid-column: 1;
    grid-row: 2;
  }
  .lp-hero__cta {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

.lp-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}
.lp-carousel__bar {
  flex-wrap: wrap;
}
.lp-chip {
  min-height: 44px;
}
.lp-btn:focus-visible,
.lp-chip:focus-visible,
.lp-dot:focus-visible,
.lp-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  /* Mobile: header scrolls away with the page instead of sticking. */
  .lp-bar {
    position: static;
    backdrop-filter: none;
    background: #fff;
  }
  .lp-bar__inner {
    height: 60px;
    justify-content: center;
  }
  .lp-bar__call {
    display: none !important;
  }
  .lp-bar__brand {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .lp-sticky {
    display: flex;
  }
  body.lp {
    padding-bottom: 76px;
  }
  .lp-hero {
    padding: 38px 0 48px;
  }
  .lp-hero__copy {
    order: 0;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }
  .lp-kicker {
    margin-bottom: 14px;
    font-size: 13.5px;
  }
  .lp-h1 {
    font-size: clamp(32px, 8.5vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }
  .lp-sub {
    font-size: 16px;
    line-height: 1.6;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 26px;
  }
  .lp-hero-trust {
    justify-content: center;
    margin-bottom: 0;
    padding-bottom: 22px;
    gap: 10px 14px;
  }
  .lp-card {
    order: 1;
    padding: 28px 22px;
    border-radius: 16px;
  }
  .lp-contact {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .lp-carousel {
    order: 2;
  }
  .lp-carousel__bar {
    padding: 8px 0;
  }
  .lp-hero__grid {
    gap: 36px;
  }
  .lp-facts {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 18px 26px;
  }
  .lp-hero__cta {
    display: none !important;
  }
  .lp-section {
    padding: 64px 0;
  }
  .lp-section__header {
    margin-bottom: 36px;
  }
  body:has(.lp-input:focus) .lp-sticky {
    display: none;
  }
}

@media (max-width: 480px) {
  .lp-shell {
    padding-left: 18px;
    padding-right: 18px;
  }
  .lp-hero {
    padding: 34px 0 42px;
  }
  .lp-hero__grid {
    gap: 32px;
  }
  .lp-h1 {
    font-size: clamp(30px, 8.5vw, 35px);
    line-height: 1.14;
    margin-bottom: 16px;
  }
  .lp-sub {
    font-size: 15.5px;
    line-height: 1.58;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }
  .lp-hero-trust {
    font-size: 13.5px;
    padding-bottom: 20px;
    gap: 8px 12px;
  }
  .lp-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .lp-card__head {
    margin-bottom: 22px;
  }
  #lead-form {
    gap: 20px;
  }
  .lp-chip {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13.5px;
  }
  .lp-section {
    padding: 56px 0;
  }
  .lp-section__header {
    margin-bottom: 30px;
  }
  .lp-pack-card {
    padding: 26px 18px;
    border-radius: 16px;
  }
  .lp-pricing-guide {
    padding: 18px 14px;
  }
}

/* ============================================================
   Quote Submitted Confirmation Page (/quote/submitted)
   ============================================================ */
.lp--submitted {
  background: var(--bg-2);
}
.lp-submitted-main {
  padding: 40px 0 80px;
  min-height: calc(100vh - 140px);
}
.lp-submitted-shell {
  max-width: 760px;
  margin: 0 auto;
}
.lp-submitted-card {
  background: var(--bg);
  border: 1px solid #C4C7CD;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(17, 17, 19, 0.04);
}
.lp-submitted-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.lp-submitted-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #DCFCE7;
  border: 1px solid #BBF7D0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-submitted-header__copy {
  flex: 1;
  min-width: 260px;
}
.lp-submitted-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #16A34A;
  margin-bottom: 6px;
}
.lp-submitted-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 8px;
}
.lp-submitted-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}
.lp-submitted-ref {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 10px 16px;
  border-radius: 10px;
  margin-left: auto;
}
.lp-submitted-ref__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lp-submitted-ref__code {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* Summary Grid */
.lp-submitted-summary {
  background: var(--bg-2);
  border: 1px solid #C4C7CD;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 28px;
}
.lp-submitted-summary__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 16px;
}
.lp-submitted-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.lp-submitted-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lp-submitted-summary__label {
  font-size: 12px;
  color: var(--muted);
}
.lp-submitted-summary__val {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.lp-submitted-summary__val--price {
  font-size: 17px;
  color: var(--ink);
}

/* Timeline */
.lp-submitted-timeline {
  margin-bottom: 30px;
}
.lp-submitted-timeline__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.lp-submitted-timeline__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lp-submitted-timeline__item {
  background: var(--bg);
  border: 1px solid #C4C7CD;
  border-radius: 12px;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-submitted-timeline__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
}
.lp-submitted-timeline__info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.lp-submitted-timeline__info p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* Optional Enrichment Box */
.lp-submitted-extra {
  border: 1px dashed #C4C7CD;
  border-radius: 12px;
  padding: 22px 24px;
  background: #FCFCFD;
  margin-bottom: 28px;
}
.lp-submitted-extra__pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #4B5563;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.lp-submitted-extra__heading {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.lp-submitted-extra__desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.lp-submitted-extra__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.lp-submitted-extra__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.lp-submitted-extra__saved {
  font-size: 13.5px;
  font-weight: 500;
  color: #16A34A;
}
.lp-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235A5D66'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
  appearance: none;
}

/* Urgent Callout */
.lp-submitted-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #F8FAFC;
  border: 1px solid #C4C7CD;
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lp-submitted-callout__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-submitted-callout__copy {
  flex: 1;
  min-width: 220px;
}
.lp-submitted-callout__copy strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.lp-submitted-callout__copy p {
  font-size: 12.5px;
  color: var(--muted);
}
.lp-submitted-callout__btn {
  margin-left: auto;
  width: auto;
  min-width: 180px;
  text-decoration: none;
}

/* Footer Nav */
.lp-submitted-footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.lp-link-subtle {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lp-link-subtle:hover {
  color: var(--ink);
  text-decoration: underline;
}
.lp-submitted-footer-sep {
  color: #C4C7CD;
}

@media (max-width: 640px) {
  .lp-submitted-main {
    padding: 24px 0 60px;
  }
  .lp-submitted-card {
    padding: 22px 18px;
    border-radius: 14px;
  }
  .lp-submitted-header {
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .lp-submitted-ref {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
  }
  .lp-submitted-summary__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lp-submitted-timeline__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lp-submitted-extra__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lp-submitted-callout__btn {
    width: 100%;
    margin-left: 0;
  }
  .lp-submitted-footer-nav {
    flex-direction: column;
    gap: 8px;
  }
  .lp-submitted-footer-sep {
    display: none;
  }
}