/* Fleet Services page. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Short sections: the site-wide section padding is built for long pages. */
.fleet > section:not(.page-hero) { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.fleet .section-head { margin-bottom: var(--space-3); }
.fl-sub { opacity: 0.8; margin: 0.4rem 0 0; }
.fleet .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The four facts under the heading. */
.fleet > section.fl-strip { padding: var(--space-3) 0; background: var(--surface); border-bottom: 1px solid var(--surface-border); }
.fl-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.fl-strip-grid div { display: flex; flex-direction: column; }
.fl-strip-grid strong { font-size: 1.35rem; color: #B36A00; }
.fl-strip-grid span { font-size: 0.88rem; opacity: 0.8; }
@media (max-width: 760px) { .fl-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Services. */
.fl-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.fl-service {
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: #fff;
  padding: var(--space-3);
  border-top: 3px solid var(--accent);
}
.fl-service h3 { font-size: 1.08rem; margin: 0.5rem 0 0.35rem; }
.fl-service p { margin: 0; font-size: 0.94rem; line-height: 1.55; opacity: 0.85; }
.fl-tag {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9A5B00; background: #FFF6E6; border-radius: 999px; padding: 0.15rem 0.55rem;
}
.fl-tag-only { background: #2F2E2E; color: #fff; }

/* Comparison. */
.fl-table { overflow-x: auto; border: 1px solid var(--surface-border); border-radius: 12px; max-width: 900px; }
.fl-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.fl-table th, .fl-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--surface-border); text-align: center; }
.fl-table tbody th { text-align: left; font-weight: 600; background: var(--surface); width: 40%; }
.fl-table thead th { background: #2F2E2E; color: #fff; font-size: 0.85rem; }
.fl-table thead th.fl-us { background: var(--accent); color: #2F2E2E; }
.fl-table td.fl-us { background: #FFF6E6; }
.fl-table tbody tr:last-child th, .fl-table tbody tr:last-child td { border-bottom: 0; }
.fl-yes { color: #15803d; font-weight: 800; font-size: 1.15rem; }
.fl-no { color: #b91c1c; font-weight: 800; font-size: 1.05rem; }
.fl-varies { font-size: 0.8rem; color: #6b6862; }
@media (max-width: 560px) {
  .fl-table table { font-size: 0.8rem; }
  .fl-table th, .fl-table td { padding: 0.55rem 0.4rem; }
  .fl-table thead th { font-size: 0.72rem; }
  .fl-table tbody th { width: 38%; }
}

/* Steps. */
.fl-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.fl-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-3) 3.4rem;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--surface);
  line-height: 1.55;
  font-size: 0.95rem;
}
.fl-steps li::before {
  content: counter(step);
  position: absolute; left: 1rem; top: var(--space-3);
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: #2F2E2E; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.fl-steps strong { display: block; margin-bottom: 0.2rem; }

/* Quote form tick boxes. */
.fl-checks { border: 0; padding: 0; margin: 0 0 var(--space-2); }
.fl-checks legend { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.92rem; }
.fl-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1rem; }
@media (max-width: 600px) { .fl-check-grid { grid-template-columns: 1fr; } }
.fl-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.35; cursor: pointer; }
.fl-check input { margin-top: 0.15rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: #FF9E00; }
#quote { scroll-margin-top: 80px; }

.fl-short { display: none; }

/* Fleets we work with: names, not logos (logos need each client's OK). */
.fleet > section.fl-clients { padding: var(--space-3) 0 0; }
.fl-clients .eyebrow { display: block; margin-bottom: 0.6rem; }
.fl-client-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fl-client-list li {
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Phones: the same page, tightened. Ten full service cards stacked one per
   row ran past three screens, so on a phone they sit two across as tiles
   (name and tag), and the detail stays for wider screens. */
@media (max-width: 600px) {
  .fleet > section:not(.page-hero) { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .fleet > section.fl-clients { padding-top: var(--space-2); }
  .fl-strip-grid strong { font-size: 1.1rem; }
  .fl-strip-grid span { font-size: 0.8rem; }

  .fl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .fl-service { padding: 0.8rem 0.75rem; border-top-width: 3px; }
  .fl-service h3 { font-size: 0.92rem; line-height: 1.25; margin: 0.4rem 0 0; }
  .fl-service p { display: none; }
  .fl-tag { font-size: 0.6rem; padding: 0.1rem 0.45rem; }

  /* Fixed column widths so the table always fits the screen: the label
     column takes half, the three answers share the rest. Headers may wrap
     to two short lines rather than push the table wider than the phone. */
  .fl-table table { table-layout: fixed; font-size: 0.75rem; }
  .fl-table th, .fl-table td { padding: 0.5rem 0.3rem; }
  .fl-table thead th { font-size: 0.7rem; line-height: 1.2; white-space: nowrap; }
  .fl-table thead th:first-child { width: 52%; }
  .fl-table tbody th { font-size: 0.75rem; line-height: 1.3; padding-left: 0.6rem; }
  .fl-yes, .fl-no { font-size: 0.95rem; }
  /* Short column names on a phone so all three always show in full. */
  .fl-long { display: none; }
  .fl-short { display: inline; }

  .fl-steps { gap: 0.6rem; }
  .fl-steps li { padding: 0.9rem 0.9rem 0.9rem 3rem; font-size: 0.9rem; }
  .fl-steps li::before { left: 0.8rem; top: 0.9rem; }

  .fl-check-grid { gap: 0.35rem; }
  .fl-client-list li { font-size: 0.88rem; padding: 0.45rem 0.75rem; }
}