/* Parts & Service page, round 28 (2026-10-17). Loaded only on
   /parts-and-service/ (templates/parts_service.html, block head). Every
   token comes from tokens.css; every shared class (page head, split, incl,
   team-grid, photo band, buttons) from site.css. 8px grid throughout; 4
   only inside components. */

/* ---------- Shared: the small caps label (the machine page's label, here
   on the body face at 12/16 with the chip tracking) ---------- */
.ps-label {
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-muted);
}

/* ---------- 1. Hero (round 32, Chris: "start the same as the rentals
   page"): the shared Rentals hero (site.css) with the Kamloops photo. Only
   the focal point and the button pair are this page's: desktop, the hill's
   foot (the slab sits over the even slope at the bottom left); phones, the
   4:3 crop on the ridge. The two asks side by side, 16 apart; on phones
   they stack, full width. ---------- */
.ps-hero .h15-rentals-band__bg img { object-position: 50% 100%; }
/* Round 34 (Chris: "This card can be styled the same as other cards. It's
   way too huge right now."): the Rentals card, h1 class and lead class. The
   h1 is the Rentals title scaled to 0.71 (90 becomes 64 at 1440, 56 becomes
   40 on phones), because this title is 41 characters to Rentals' 17: at
   the Rentals size it ran to five lines; at this size it is three, and the
   card is about the Rentals card's height. */
.ps-hero .ps-hero__title { font-size: clamp(40px, 4.44vw, 64px); }
.ps-hero__act { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) {
  .ps-hero .h15-rentals-band__bg img { object-position: 40% 60%; }
  .ps-hero__act { flex-direction: column; }
}

/* ---------- 2. Service (round 34, Chris: "remove this photo, and center
   the other card"): the Rentals "Every rental includes" card alone,
   centred. Round 37 (Chris: "Put this card on a different background that
   doesn't clash with the rock texture below it"): out of the rock zone, on
   its own flat field, the About hero's locked deep red and grade
   (--grad-red-deep) with no grain, so no texture touches the rock contact
   zone. The section's height is its padding (96, 80 to 989, 64 on phones),
   not the textured band's min-height. The lead line is gone (Chris:
   "Remove this line"), so the paragraph sits the card's own 16 under the
   title, as on the Rentals card. ---------- */
.ps-svc { min-height: 0; background-color: var(--c-red-deep); background-image: var(--grad-red-deep); }
.ps-svc__copy { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---------- 2 and 3. The sections: Home's display heads in the split's
   head column; copy, the red-rule list and the tiles in the body. Groups:
   40 after the photo, 32 between copy and list, 48 before the tiles. ---------- */
.ps-section .split__head .h-display { margin-bottom: 0; }
.ps-copy { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 60ch; }
.ps__photo + .ps-copy { margin-top: 0; }

/* The parts counter board: the stocked items in display caps on hairlines,
   two columns from 641 up (CSS columns, so the list balances 5 and 4; a
   browser without columns shows one), one column on phones. Each row is 56
   on the grid: 24 type, 16 above and below, the hairline inside. */
.ps-board__list {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
  columns: 2; column-gap: var(--s-4);
  border-top: var(--hairline);
}
.ps-board__list li {
  break-inside: avoid; page-break-inside: avoid;
  padding: var(--s-2) 0; border-bottom: var(--hairline);
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign); line-height: 1;
  text-transform: uppercase; color: var(--c-charcoal);
}
.ps-board + .ps-copy { margin-top: var(--s-4); }
@media (max-width: 640px) {
  .ps-board__list { columns: 1; }
}
/* Round 41 (CD #7): three columns of three from 1024, so no item sits alone */
@media (min-width: 1024px) {
  .ps-board__list { columns: 3; }
}