/* ==========================================================
   EveryLittle Bit Detailing — Fleet services page
   Builds on styles.css (variables, header, buttons, cards, footer).
   ========================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Hero with photo ---------- */
/* Mobile: photo banner on top, copy below. Desktop: copy left, vans on the right with a soft fade. */
.fleet-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(700px 420px at 0% 100%, rgba(43,108,255,.2), transparent 65%), var(--bg);
  padding: 0 0 52px;
  border-bottom: 1px solid var(--line);
}
.fleet-hero-photo { position: relative; display: block; aspect-ratio: 16 / 10; max-height: 340px; width: 100%; overflow: hidden; }
.fleet-hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,15,.35) 0%, rgba(7,7,15,0) 30%, rgba(7,7,15,0) 62%, #07070f 100%),
    linear-gradient(120deg, rgba(43,108,255,.22), rgba(124,58,237,.22));
}
.fleet-hero-img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%;
  filter: saturate(.8) brightness(.92);
}
.fleet-hero-shade { display: none; }
.fleet-hero-inner { position: relative; margin-top: -28px; }
.fleet-hero .nowrap { white-space: nowrap; }
.fleet-hero .eyebrow { color: var(--blue-bright); }
.fleet-hero h1 { color: #fff; font-size: clamp(2.1rem, 8.4vw, 3.6rem); font-weight: 800; max-width: 17ch; }
.fleet-hero h1 .accent {
  display: block;
  background: linear-gradient(90deg, var(--blue-bright), #b79aff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fleet-hero-sub { color: #dfe4f7; font-size: clamp(1.05rem, 3.4vw, 1.2rem); max-width: 44ch; margin-top: 14px; }
.fleet-hero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.fleet-hero-ctas .fleet-start { grid-column: 1 / -1; }
.fleet-hero-points { margin-top: 22px; }

/* Header CTA label by width */
.header-book .hb-full, .header-book .hb-mid { display: none; }
@media (min-width: 600px) { .header-book .hb-short { display: none; } .header-book .hb-mid { display: inline; } }
@media (min-width: 1200px) { .header-book .hb-mid { display: none; } .header-book .hb-full { display: inline; } }

/* ---------- Three points ---------- */
.fleet-why { padding-top: 48px; padding-bottom: 48px; }
.fleet-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.fleet-point { padding: 24px 22px; box-shadow: none; }
.fleet-point-num {
  display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .95rem; letter-spacing: .06em;
  background: linear-gradient(90deg, var(--blue-bright), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.fleet-point h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.fleet-point p { color: var(--muted); }

/* ---------- Route care ---------- */
.fleet-route { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fleet-route-inner { display: grid; gap: 8px; }
.fleet-time {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(77,159,255,.1); border: 1px solid rgba(77,159,255,.3);
  color: #cfe2ff; font-weight: 600; font-size: .95rem;
}
.fleet-time .icon { color: var(--blue-bright); }
.fleet-checklist { margin: 0; gap: 12px; }
.fleet-checklist li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px 14px 44px; color: #e4e8f8; font-size: 1rem;
}
.fleet-checklist li::before {
  left: 16px; top: 50%; width: 16px; height: 16px; border-radius: 5px; transform: translateY(-50%);
}
.fleet-checklist li::after {
  content: ""; position: absolute; left: 21px; top: 50%; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translate(0, -62%) rotate(45deg);
}

/* ---------- Rates table (cards on small screens) ---------- */
.rate-table-wrap { max-width: 920px; margin: 0 auto; }
.rate-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rate-table tbody { display: grid; gap: 14px; }
.rate-table tr {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.rate-table tbody th {
  grid-column: 1 / -1; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff; padding: 0 2px 4px;
}
.rate-table td {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 10px 12px; text-align: left;
  font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; color: #fff; line-height: 1.1;
}
.rate-table td::before {
  content: attr(data-label); display: block; margin-bottom: 6px;
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.rate-table td.quoted { font-size: 1rem; font-weight: 700; color: #d7c4ff; }
.rate-table th, .rate-table td { min-width: 0; }
@media (max-width: 374px) {
  .rate-table tr { padding: 12px; gap: 6px; }
  .rate-table td { padding: 8px 8px 10px; font-size: 1.25rem; }
  .rate-table td::before { font-size: .62rem; letter-spacing: .02em; }
  .rate-table td.quoted { font-size: .9rem; }
}
.rate-foot { max-width: 920px; margin: 18px auto 0; color: var(--muted); font-size: .95rem; text-align: center; }

/* ---------- When a unit needs more ---------- */
.fleet-more { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-list { list-style: none; padding: 0; margin: 0 auto; max-width: 920px; display: grid; gap: 12px; }
.more-item { display: grid; gap: 10px; padding: 20px 22px; box-shadow: none; }
.more-item h3 { font-size: 1.15rem; font-weight: 700; }
.more-item p { color: var(--muted); margin-top: 4px; }
.more-price { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 !important; }
.more-price span {
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--blue-bright);
  white-space: nowrap;
}
.more-price span + span::before { content: "\00B7"; color: var(--muted); margin-right: 8px; }
.more-price-quote span { color: #d7c4ff; }
.fleet-retail { max-width: 920px; margin-left: auto; margin-right: auto; border-left-color: var(--blue); }

/* ---------- Notes + CTA ---------- */
.fleet-cta-buttons { max-width: 620px; }
.fleet-cta-buttons .fleet-start { grid-column: 1 / -1; }
.fleet-notes .know-list h3 { font-size: 1.05rem; }
.fleet-cta-phone { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blue); }
.fleet-cta-fine { font-size: .92rem !important; margin-top: 18px !important; color: #7f88a8; }

/* Mobile bar: two buttons on this page */
.fleet-bar { grid-template-columns: 1.6fr 1fr; }

/* ---------- Larger screens ---------- */
@media (min-width: 560px) {
  .fleet-hero-ctas { grid-template-columns: max-content max-content; }
  .fleet-hero-ctas .fleet-start { grid-column: 1 / -1; justify-self: start; }
  .fleet-points { grid-template-columns: repeat(3, 1fr); }
  .fleet-checklist { grid-template-columns: 1fr 1fr; }
  .more-item { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .more-price { justify-content: flex-end; max-width: 300px; }
}
@media (min-width: 760px) {
  .rate-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .rate-table tbody { display: table-row-group; }
  .rate-table tr { display: table-row; background: none; border: 0; padding: 0; box-shadow: none; }
  .rate-table {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
  }
  .rate-table th, .rate-table td {
    display: table-cell; padding: 18px 22px; border: 0; border-radius: 0; background: none;
    border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle;
  }
  .rate-table tbody tr:last-child th, .rate-table tbody tr:last-child td { border-bottom: 0; }
  .rate-table thead th {
    background: var(--surface-2);
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .rate-table th:first-child { text-align: left; }
  .rate-table tbody th { font-size: 1.08rem; padding-left: 22px; }
  .rate-table td { font-size: 1.6rem; }
  .rate-table td::before { display: none; }
  .rate-table tbody tr:hover { background: rgba(77,159,255,.05); }
}
@media (min-width: 900px) {
  .fleet-hero { min-height: 600px; padding: 96px 0 88px; display: flex; align-items: center; }
  .fleet-hero-photo {
    position: absolute; top: 0; right: 0; bottom: 0; width: 64%; max-height: none; aspect-ratio: auto; z-index: -1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.8) 34%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.8) 34%, #000 48%);
  }
  .fleet-hero-photo::after {
    background:
      linear-gradient(180deg, rgba(7,7,15,.7) 0%, rgba(7,7,15,.3) 36%, rgba(7,7,15,0) 58%, rgba(7,7,15,.6) 100%),
      linear-gradient(120deg, rgba(43,108,255,.25), rgba(124,58,237,.25));
  }
  .fleet-hero-img { object-position: 70% 72%; }
  .fleet-hero-inner { margin-top: 0; }
  .fleet-hero-copy { max-width: 560px; }
  .fleet-hero-ctas { grid-template-columns: max-content max-content max-content; }
  .fleet-hero-ctas .fleet-start { grid-column: auto; }
  .fleet-why { padding-top: 64px; padding-bottom: 64px; }
  .fleet-point { padding: 28px; }
  .fleet-route-inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
  .fleet-route .section-head-left { margin: 0; }
}