/* GEMCAP · the four service pages (trucking, cruise, expedited, logistics). Only what pages.css does not already have.
   Same tokens; hover only under (hover: hover) and (pointer: fine); nothing animates. */

/* proof strip with three figures: one column on phones, three across from 768px */
.figs--3 { grid-template-columns: minmax(0, 1fr); margin-block: 0 var(--space-6); }
@media (min-width: 768px) { .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-10); } }
.strip-foot { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); align-items: center; }

/* "join the team" box beside the drivers copy: white on the tinted section, a real card */
.joinbox { display: grid; gap: var(--space-4); align-content: start; padding: clamp(20px, 3vw, 32px); background: var(--color-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.joinbox h3 { font-size: var(--text-h3); }
.joinbox p { color: var(--color-ink-muted); }
.joinbox .btn { justify-self: start; }

/* a short paragraph that sits above a tick list inside a split column */
.split__text > .lead-in { color: var(--color-ink); font-weight: 600; }