/* M5 Rentals — built around the logo: deep navy, white, serif wordmark */

/* Self-hosted variable fonts (OFL, licences in /fonts). Subset to Latin, ~87KB total. */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/manrope.woff2') format('woff2');
}

:root {
  --navy-deep: #010c23;
  --navy: #012359;
  --navy-mid: #0a3170;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --white: #ffffff;
  --soft: rgba(255,255,255,.78);
  --dim: rgba(255,255,255,.58);
  --wa: #25d366;
  --wa-dark: #1da851;
  --danger: #ff8a80;
  --ok: #7ee2a8;
  --radius: 12px;
  --maxw: 1040px;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--white);
  background: var(--navy-deep);
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, #0b3a86 0%, var(--navy) 35%, var(--navy-deep) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--white); outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { margin: 0 0 .4em; color: var(--white); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 7.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--soft); max-width: 34em; }
.dim { color: var(--dim); }
.small { font-size: .9rem; }
.eyebrow {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  letter-spacing: .32em; font-size: .85rem; color: var(--soft); margin: 0 0 18px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem; border-radius: 999px;
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; font-family: var(--sans); line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-primary:hover { background: #e7eefc; border-color: #e7eefc; }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--white); }
.btn-wa { background: var(--wa); color: #04301a; border-color: var(--wa); }
.btn-wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.1rem; }

/* Header: logo + one action */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(1,12,35,.78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 64px; width: auto; display: block; }
.brand span { font-family: var(--serif); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: .95rem; }
.header-actions { display: flex; gap: .55rem; align-items: center; }
.header-actions .btn { padding: .6rem 1.1rem; font-size: .92rem; }
.lang-toggle {
  font: inherit; font-weight: 800; font-size: .85rem; letter-spacing: .04em;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--white);
  border-radius: 999px; padding: .45rem .75rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; line-height: 1;
}
.lang-toggle:hover { border-color: var(--white); }
@media (max-width: 560px) { .site-header .wrap { height: 72px; } .brand img { height: 52px; } .header-actions .btn-primary { padding: .55rem .9rem; } }

/* Sections */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding: 84px 0 64px; text-align: center; }
.hero .wrap { max-width: 860px; }
.hero h1 { margin-bottom: .45em; }
.hero .lead { margin: 0 auto 32px; font-size: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 0; }
.hero-actions .btn { min-width: 220px; }
@media (max-width: 480px) { .hero { padding: 56px 0 48px; } .hero-actions .btn { width: 100%; } }

/* Receipts strip */
.receipts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.receipts li { padding: 15px 16px; font-weight: 700; font-size: .9rem; letter-spacing: .01em; position: relative; }
.receipts li + li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line-strong); }
@media (max-width: 700px) {
  .receipts { display: grid; grid-template-columns: 1fr 1fr; }
  .receipts li { padding: 12px 8px; text-align: center; font-size: .9rem; }
  .receipts li + li::before { display: none; }
  .receipts li:nth-child(odd) { border-right: 1px solid var(--line); }
  .receipts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* The deal */
.deal { display: grid; gap: 48px; grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 860px) { .deal { grid-template-columns: 1fr; gap: 32px; } }
.deal-list { list-style: none; padding: 0; margin: 0; }
.deal-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.deal-list li:first-child { border-top: 1px solid var(--line); }
.deal-list svg { width: 26px; height: 26px; margin-top: 1px; }
.deal-list strong { display: block; font-size: 1.05rem; }
.deal-list span { color: var(--soft); font-size: .97rem; }

/* Straight answers (objections) */
.answers { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .answers { grid-template-columns: 1fr; } }
.answer { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: rgba(255,255,255,.03); }
.answer h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin-bottom: .3em; }
.answer p { margin: 0; color: var(--soft); font-size: .98rem; }

/* Cars — auto-sliding */
.cars-head { text-align: center; }
.cars-head .lead { margin: 0 auto; }
.drag-carousel { margin-top: 36px; }
.drag-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; padding-bottom: 4px;
}
.drag-track::-webkit-scrollbar { display: none; }
.drag-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.drag-track .car { scroll-snap-align: start; }
.drag-track .car:last-child { margin-right: 0; }
.drag-track img { pointer-events: none; }
.carousel-nav { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.carousel-nav button {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: transparent; color: var(--white); font-size: 1.2rem; cursor: pointer; font-family: var(--sans);
}
.carousel-nav button:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.car { flex: 0 0 320px; margin-right: 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.03); }
@media (max-width: 480px) { .car { flex-basis: 260px; } }
.car-photo { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #eceef2; }
.car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-photo svg { width: 78%; height: auto; }
.car-name { padding: 14px 18px 16px; text-align: center; }
.car-name strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.car-name span { color: var(--dim); font-size: .9rem; white-space: nowrap; }

/* Contact */
.form-layout { display: grid; gap: 44px; grid-template-columns: .9fr 1.1fr; align-items: start; }
@media (max-width: 860px) { .form-layout { grid-template-columns: 1fr; } }
.contact-side h2 { margin-bottom: .35em; }
.contact-side .btn { margin-top: 6px; }
form.lead-form, .thanks { background: var(--white); color: #0f1b33; border-radius: 16px; padding: 30px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; font: inherit; border: 1.5px solid #cfd6e4;
  border-radius: 10px; background: #fff; color: #0f1b33;
}
.field input:focus, .field textarea:focus { border-color: var(--navy); outline: none; }
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: .85rem; color: #5b6573; margin-top: 4px; }
.consent { font-size: .85rem; color: #5b6573; margin: 6px 0 18px; }
.consent a { color: var(--navy); }
form.lead-form .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); width: 100%; }
form.lead-form .btn-primary:hover { background: var(--navy-mid); border-color: var(--navy-mid); }
.form-status { margin-top: 14px; font-weight: 600; }
.form-status.err { color: #b42318; }
.honeypot { position: absolute; left: -9999px; }
.thanks { display: none; text-align: center; }
.thanks h3 { font-family: var(--serif); font-size: 1.7rem; color: var(--navy); font-weight: 600; }
.thanks p { color: #5b6573; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 90px; font-size: .95rem; color: var(--dim); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer img { height: 72px; width: auto; display: block; margin-bottom: 12px; }
.site-footer p { margin: 0 0 .4em; }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  background: var(--wa); color: #04301a; text-decoration: none; font-weight: 800;
  padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.wa-float:hover { background: var(--wa-dark); color: #fff; }
.wa-float svg { width: 26px; height: 26px; }
@media (max-width: 480px) { .wa-float span { display: none; } .wa-float { padding: 14px; } }

/* Legal pages */
.legal { padding: 48px 0 90px; }
.legal .wrap { max-width: 740px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.5rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.5em; }
.legal p, .legal li { color: var(--soft); }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: .4em; }
.legal strong { color: var(--white); }
.legal .notice { border: 1px solid var(--line-strong); padding: 14px 18px; border-radius: 10px; margin: 20px 0; font-size: .95rem; }

/* Social icons in header */
.social { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; font-size: 15px; }
.social:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
@media (max-width: 560px) { .social { width: 34px; height: 34px; font-size: 14px; } .header-actions { gap: .4rem; } }

/* three-step process */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; background: rgba(255,255,255,.03); }
.step-num { font-family: var(--serif); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--soft); opacity: .55; display: block; margin-bottom: 12px; }
.step-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: .3em; }
.step-card p { margin: 0; color: var(--soft); font-size: .98rem; }

/* WhatsApp button in the header, beside the logo */
.header-left { display: flex; align-items: center; gap: 18px; }
.header-wa {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  background: var(--wa); color: #04301a; border: 2px solid var(--wa);
  border-radius: 999px; padding: .5rem 1.1rem; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.header-wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }
.header-wa svg { width: 21px; height: 21px; flex: none; }
@media (max-width: 900px) { .site-header .social { display: none; } }
/* Small screens: keep the logo, WhatsApp and the language toggle.
   The hero's Reserve button sits just below, so the header one can go. */
@media (max-width: 700px) {
  .header-left { gap: 10px; }
  .header-wa { padding: .45rem .9rem; font-size: .92rem; }
  .header-actions .btn-primary { display: none; }
}
@media (max-width: 380px) { .header-wa span { display: none; } .header-wa { padding: .5rem .7rem; } }

/* Stats strip under the hero */
.stats {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats li { padding: 26px 18px; text-align: center; position: relative; }
.stats li + li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.stats strong {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em;
  color: var(--white); margin-bottom: 6px;
}
.stats span { display: block; font-size: .9rem; color: var(--dim); line-height: 1.35; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li { padding: 20px 12px; }
  .stats li:nth-child(n+3)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  }
  .stats li:nth-child(odd)::before { display: none; }
}

/* Plain lists inside the "what's included" cards */
ul.plain { list-style: none; margin: 14px 0 0; padding: 0; }
ul.plain li { position: relative; padding-left: 20px; margin-bottom: 9px; color: var(--dim); line-height: 1.5; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--white); opacity: .55; }

/* Platform chips */
ul.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; }
ul.chips li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem 1.05rem;
  font-size: .95rem; font-weight: 700; color: var(--white); background: rgba(255,255,255,.04);
}

/* Social icons are inline SVG now (no icon-font download) */
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* Sticky reserve bar — mobile only, hides while the booking form is on screen */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(1,12,35,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(0); transition: transform .25s ease;
}
.sticky-cta .btn { width: 100%; justify-content: center; }
.sticky-cta.is-hidden { transform: translateY(110%); }
@media (max-width: 700px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* FAQ accordion */
details.answer { padding: 0; }
details.answer summary {
  list-style: none; cursor: pointer; padding: 20px 52px 20px 22px; position: relative;
  display: block;
}
details.answer summary::-webkit-details-marker { display: none; }
details.answer summary h3 { margin: 0; }
details.answer summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: translateY(-70%) rotate(45deg); opacity: .7; transition: transform .2s ease;
}
details.answer[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details.answer p { margin: 0; padding: 0 22px 22px; }
details.answer summary:hover h3 { color: #fff; }

/* Footer NAP */
.site-footer address { font-style: normal; }

/* Merged deal section: the included / not-included cards stack in the right column */
.deal .answers { grid-template-columns: 1fr; gap: 14px; margin-top: 0 !important; }
@media (max-width: 860px) { .deal .answers { margin-top: 8px !important; } }

/* Hero hook line under the keyword H1 */
.hero .hook {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--white);
  margin: 0 auto 14px; max-width: 26ch;
}
#answers .answers { align-items: start; }

/* Quick-answers strip: four cells in one row, 2×2 on phones */
.stats.quick strong { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.stats.quick li { padding: 24px 18px; }
.stats strong, .hero .hook, h1, h2 { font-variant-numeric: lining-nums; }

/* ── Hero photo background ───────────────────────────────────────────────
   The fleet-and-skyline shot sits behind the hero copy. The file itself is
   already darkened and navy-tinted so it reads as part of the page rather
   than a photo dropped on top of it; the scrim below only handles text
   contrast and the fade into the navy at the bottom edge.
   ::before = photo, ::after = scrim, both behind the hero's own content. */
:root { --header-h: 84px; }
@media (max-width: 560px) { :root { --header-h: 72px; } }

.hero {
  position: relative;
  isolation: isolate;
  padding: 96px 0 124px;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.hero > .wrap { width: 100%; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(var(--header-h) * -1);   /* run up behind the translucent header */
  pointer-events: none;
}
.hero::before {
  z-index: -2;
  background: url("/hero/kansas-city-rental-fleet.webp?v=3") center bottom / cover no-repeat;
}
.hero::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 72% 58% at 50% 40%, rgba(1,12,35,.54) 0%, rgba(1,12,35,0) 72%),
    linear-gradient(180deg,
      rgba(1,12,35,.70) 0%,
      rgba(1,12,35,.34) 26%,
      rgba(1,35,89,.38) 52%,
      rgba(1,12,35,.80) 88%,
      var(--navy-deep) 100%);
}

/* Narrow screens: cover would zoom past the fleet, so the shot sits as a
   band along the bottom of the hero and the navy carries the top. The top
   edge of the photo is faded in the file itself, so it dissolves cleanly. */
@media (max-width: 900px) {
  .hero { padding: 72px 0 150px; min-height: 520px; }
  .hero::before {
    background-image: url("/hero/kansas-city-rental-fleet-sm.webp?v=3");
    background-size: 118% auto;
    background-position: 50% 100%;
  }
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(1,12,35,.44) 0%,
        rgba(1,12,35,.44) 55%,
        rgba(1,12,35,.21) 76%,
        rgba(1,12,35,.34) 100%);
  }
}
/* Phones: the portrait shot, sized to cover. The hero ends just below the
   second button so the photo never runs on past the copy, and the lead gets
   extra breathing room underneath so the fleet lands in the gap above the
   buttons instead of behind them. */
@media (max-width: 520px) {
  .hero { padding: 52px 0 40px; min-height: 0; }
  .hero .lead { margin-bottom: 124px; }
  .hero::before {
    background-image: url("/hero/kansas-city-rental-fleet-mobile.webp?v=3");
    background-size: cover;
    background-position: 50% 100%;
  }
  /* Same scrim values as the desktop hero — the radial behind the headline
     and the same stops down the page — so the two read as one treatment.
     Only the positions move, to follow where the fleet sits in this crop. */
  .hero::after {
    background:
      radial-gradient(ellipse 104% 44% at 50% 30%, rgba(1,12,35,.54) 0%, rgba(1,12,35,0) 72%),
      linear-gradient(180deg,
        rgba(1,12,35,.70) 0%,
        rgba(1,12,35,.34) 26%,
        rgba(1,35,89,.38) 52%,
        rgba(1,12,35,.42) 78%,
        rgba(1,12,35,.80) 94%,
        var(--navy-deep) 100%);
  }
}

/* A little weight behind the headline so the sunset band never fights it */
.hero h1, .hero .hook { text-shadow: 0 2px 18px rgba(1,12,35,.55); }