/* pages-b1.css -- page-only CSS for lane B1 (13 Oct 2026):
   chauffeur-driven-luxury-car-rental.html, employee-transportation.html, long-term-car-lease.html.
   Loaded AFTER css/site.css. Uses site.css variables only; nothing in site.css is changed. */

/* the marker that follows an H1 (kept visible, sits directly under the title) */
.b1 .h1-note { margin: -.1em 0 14px; max-width: 640px; }
.b1 .page-hero .btn-row { margin-top: 24px; }

/* overview: text left, picture right; keep the picture a sensible shape */
.b1 .split figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.b1 .lead { color: var(--text); }

/* key features: each bullet is one line of copy next to its icon tile */
.b1 .feature-list { align-items: stretch; }
.b1 .feature-list .feature { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--dark-3); align-items: center; }
.b1 .feature .feat-line { margin: 0; color: var(--text); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }

/* why RamCabz block lives on a light band: stack the icon above the text on narrow screens only if needed */
.b1 .why-grid .feature { grid-template-columns: 56px 1fr; }
.b1 .section--light .feature p { color: var(--ink-muted); }
.b1 .section--light .feature h3 { color: var(--ink); }
.b1 .section--light .section-head h2 { color: var(--ink); }

@media (max-width: 700px) {
  .b1 .feature-list .feature { padding: 16px; gap: 12px; grid-template-columns: 48px 1fr; }
  .b1 .feature-list .icon-tile { width: 48px; height: 48px; }
  .b1 .why-grid .feature { grid-template-columns: 48px 1fr; gap: 12px; }
  .b1 .why-grid .icon-tile { width: 48px; height: 48px; }
}