/* Skreenquip site styles. Values come from tokens.css; nothing here should
   introduce a new colour, family, spacing value, easing or duration.
   Round 4 (Oct 8): General Sans carries the page in sentence case; Barlow
   Condensed caps only for the big moments and the signatures. Red only
   for action. Square corners except pills, chips and the round carousel
   arrows. Motion is functional and uses the motion tokens.
   Round 5 (Oct 8): tighter and more grounded. Sections 96 apart (64 on
   phone), carousels in a panel, prominent action buttons, smaller Rentals,
   Parts & Service and Team, round 3's contact layout back. */

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-main-h) + var(--s-2)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-charcoal);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
main:focus { outline: none; }
address { font-style: normal; }

:focus-visible { outline: var(--focus); outline-offset: 3px; }
.surface--charcoal :focus-visible,
.surface--red :focus-visible { outline: var(--focus-inverse); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--c-charcoal); color: var(--c-white); padding: var(--s-1) var(--s-2);
  font-weight: var(--w-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--s-2); }

.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* The page grid: 12 columns, 24px gutters. */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); }

/* ---------- Surfaces: gradient + fine grain (rentals and charcoal only) ---------- */
.surface { position: relative; isolation: isolate; color: var(--c-white); }
.surface--charcoal { background-color: var(--c-charcoal); background-image: var(--grad-charcoal); }
.surface--red { background-color: var(--c-red); background-image: var(--grad-red); }
.surface::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--texture); background-size: var(--texture-size) var(--texture-size);
  opacity: var(--texture-opacity);
  mix-blend-mode: soft-light;
}

/* ---------- Placeholders (unsourced facts) ---------- */
.ph { color: var(--c-red); font-weight: var(--w-semibold); }
.ph--on-dark {
  display: inline-block; background: var(--c-white); color: var(--c-red);
  padding: var(--s-half) var(--s-1); font-size: var(--fs-small);
}

/* ---------- Type ---------- */
/* Display moment: the New and Used equipment heads (the two allowed). */
.h-display {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-display-2);
  line-height: var(--lh-tight); text-transform: uppercase; color: var(--c-charcoal);
}
/* Every other section head: the text face, sentence case, 600, charcoal. */
.h2 {
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--fs-h2);
  line-height: var(--lh-head); letter-spacing: var(--track-head); color: var(--c-charcoal);
}
.h2--inverse { color: var(--c-white); }
.h3 {
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--fs-h3);
  line-height: var(--lh-head); letter-spacing: var(--track-head); color: var(--c-charcoal);
}

/* "View all": a simple pill (Chris) */
.pill-link {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--s-2);
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--c-rule);
  font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--c-charcoal); text-decoration: none;
  white-space: nowrap;
}
.pill-link:hover { background: var(--c-charcoal); color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-charcoal); }

/* Quiet text action with an arrow (charcoal; red on hover) */
.text-arrow {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--c-charcoal); text-decoration: none;
}
.text-arrow svg { width: var(--icon); height: var(--icon); }
.text-arrow:hover { color: var(--c-red); }

/* ---------- Buttons: square, 14px labels (round 8: every state change eases, see the end of this file) ---------- */
/* .btn--go: an action button that carries the arrow; the arrow nudges on
   hover with the same spring as Learn more. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--control-h); padding: 0 var(--s-3);
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--fs-button);
  line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius);
}
.btn--md { min-height: var(--control-h-md); padding: 0 var(--s-2); }
.btn--primary { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.btn--primary:hover { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-white); }
.btn--secondary { background: transparent; color: var(--c-charcoal); border-color: var(--c-charcoal); }
.btn--secondary:hover { background: var(--c-charcoal); color: var(--c-white); border-color: var(--c-charcoal); }
.btn--inverse { background: var(--c-white); color: var(--c-red); border-color: var(--c-white); }
.btn--inverse:hover { background: var(--c-charcoal); color: var(--c-white); border-color: var(--c-charcoal); }
.btn--go svg { width: var(--icon); height: var(--icon); flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease-out); }
.btn--go:hover svg, .btn--go:focus-visible svg { transform: translateX(4px); transition: transform var(--dur-base) var(--ease-spring); }

/* ---------- Header (one tier; hides on scroll down, returns on scroll up) ----------
   Hide: a measured ease-in-out. Return: longer, but front-loaded (ease-out),
   so it arrives fast and lands softly. The floating shadow fades in on a
   layer (opacity), never as an animated box-shadow. */
.masthead { position: sticky; top: 0; z-index: 50; }
.js .masthead { transition: transform var(--dur-slow) var(--ease-out); }
.js .masthead.is-hidden { transform: translateY(-100%); transition: transform var(--dur-base) var(--ease-in-out); }
.masthead__main { position: relative; background: var(--c-white); border-bottom: 1px solid var(--c-stone); }
.masthead__main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  box-shadow: var(--shadow-header); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-exit);
}
.masthead.is-floating .masthead__main::after { opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
.masthead__main-inner {
  min-height: var(--header-main-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.masthead__logo { display: block; color: var(--c-logo-red); flex: 0 0 auto; }
.masthead__logo .logo-svg { width: 216px; height: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-4); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--cta { margin-left: var(--s-1); }
.nav__cta { white-space: nowrap; }
/* Nav (round 6): the bold display face again, as in rounds 2 and 3 (Chris:
   "I liked the bolder nav actually"). Barlow Condensed 700 caps, charcoal,
   smaller than the logo; hover is a colour change only (instant). The TALK
   TO US button speaks the same face. */
.nav__link {
  display: inline-flex; align-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav);
  text-transform: uppercase; letter-spacing: var(--track-nav);
  color: var(--c-charcoal); text-decoration: none; padding: var(--s-1) 0; line-height: 1; white-space: nowrap;
  background: none; border: 0; margin: 0;
}
.nav__cta {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav);
  text-transform: uppercase; letter-spacing: var(--track-nav);
}
.nav__link:hover, .nav__link:focus-visible, .nav__item--has-sub.is-open > .nav__trigger { color: var(--c-red); }
/* Where you are (Chris, Oct 17): the current section's link carries a red
   bar under its label on desktop, and a red left rule in the phone menu. */
.nav__link[aria-current], .nav__trigger[data-current] { position: relative; }
.nav__link[aria-current]::after, .nav__trigger[data-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--c-red);
}
/* New Equipment: label and chevron are one target; the chevron turns on open. */
.nav__trigger { gap: 6px; cursor: pointer; }
.nav__chevron { width: 12px; height: 12px; flex: 0 0 auto; position: relative; top: -1px; }
.js .nav__chevron { transition: transform var(--dur-fast) var(--ease-exit); }
.js .nav__item--has-sub.is-open .nav__chevron { transform: rotate(180deg); transition: transform var(--dur-base) var(--ease-out); }
.nav__sub {
  position: absolute; top: calc(100% + var(--s-1)); left: calc(-1 * var(--s-2)); min-width: 224px; z-index: 5;
  background: var(--c-white); box-shadow: var(--shadow-menu);
  padding: var(--s-1);
  display: none;
}
/* hover bridge so the pointer can travel from the trigger to the panel */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--s-2)); height: var(--s-2); }
.nav__sub-link {
  display: block; padding: var(--s-1) var(--s-2);
  font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--c-charcoal); text-decoration: none;
}
.nav__sub-link:hover, .nav__sub-link:focus-visible { background: var(--c-paper); color: var(--c-red); }
/* Round 5: "View all new equipment" is the action out of the menu: no
   divider, red text with the arrow, no grey row on hover. */
.nav__sub-all { margin-top: var(--s-1); }
.nav__sub-link--all {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-weight: var(--w-semibold); color: var(--c-red); white-space: nowrap;
}
.nav__sub-link--all svg { width: var(--icon); height: var(--icon); flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease-out); }
.nav__sub-link--all:hover, .nav__sub-link--all:focus-visible { background: none; color: var(--c-charcoal); }
.nav__sub-link--all:hover svg, .nav__sub-link--all:focus-visible svg { transform: translateX(4px); transition: transform var(--dur-base) var(--ease-spring); }
.no-js .nav__item--has-sub:hover .nav__sub,
.no-js .nav__item--has-sub:focus-within .nav__sub,
.nav__item--has-sub.is-open .nav__sub { display: block; }

/* Desktop dropdown motion: a fade and a short rise on open (base, ease-out),
   a quicker fade and drop on close (fast, exit curve). Visibility, not
   display, so the exit can play. */
@media (min-width: 1181px) {
  .nav__sub {
    display: block; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(var(--rise-sm));
    transition: opacity var(--dur-fast) var(--ease-exit), transform var(--dur-fast) var(--ease-exit), visibility 0s var(--dur-fast);
  }
  .no-js .nav__item--has-sub:hover .nav__sub,
  .no-js .nav__item--has-sub:focus-within .nav__sub,
  .nav__item--has-sub.is-open .nav__sub {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
  }
}

.menu-toggle {
  display: none; align-items: center; gap: var(--s-1);
  min-height: var(--control-h-md); padding: 0 var(--s-2);
  background: var(--c-white); border: 1px solid var(--c-charcoal); border-radius: var(--radius);
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--fs-button);
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; position: relative;
}
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -5px; }
.menu-toggle__bars::after { top: 5px; }

@media (max-width: 1360px) and (min-width: 1181px) {
  .nav__list { gap: var(--s-3); }
  .masthead__logo .logo-svg { width: 192px; }
}
@media (max-width: 1180px) {
  .masthead__logo .logo-svg { width: 192px; }
  .js .menu-toggle { display: inline-flex; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-white); border-top: 1px solid var(--c-stone);
    box-shadow: var(--shadow-menu); display: none;
    max-height: calc(100vh - var(--header-main-h)); overflow-y: auto;
  }
  .js .nav.is-open { display: block; animation: menu-in var(--dur-base) var(--ease-out); }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-1) var(--gutter) var(--s-3); }
  .js .nav__item { flex-wrap: wrap; border-bottom: var(--hairline); }
  .js .nav__link { flex: 1; padding: var(--s-2) 0; font-size: var(--fs-nav-menu); }
  .js .nav__trigger { justify-content: flex-start; text-align: left; }
  .js .nav__link[aria-current]::after, .js .nav__trigger[data-current]::after { left: calc(-1 * var(--gutter)); right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .js .nav__item--cta { margin-left: 0; border-bottom: 0; padding-top: var(--s-3); }
  .js .nav__cta { flex: 1 1 100%; min-height: var(--control-h); }
  .js .nav__sub { position: static; flex-basis: 100%; box-shadow: none; padding: 0 0 var(--s-2); min-width: 0; }
  .js .nav__item--has-sub.is-open .nav__sub { animation: menu-in var(--dur-base) var(--ease-out); }
  .js .nav__sub::before { display: none; }
  .js .nav__sub-link { padding: var(--s-1) 0; font-size: var(--fs-body); }
  .js .nav__sub-link:hover { background: none; }
  .js .nav__sub-all { margin-top: var(--s-half); }
  .masthead__main-inner { position: static; }
  .no-js .masthead__main-inner { flex-wrap: wrap; padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .no-js .nav__list { flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(calc(-1 * var(--rise-sm))); } }
@media (max-width: 640px) {
  .masthead__logo .logo-svg { width: 168px; }
}

/* ---------- Hero: two compositions, chosen at build time ----------
   Centred (round 5 primary): the H1, body and actions centred, the machine
   beneath at full container width, larger than the type, standing on the
   ticker. Split (round 4 alternate): text left in 5 columns, the machine
   right in 7. */
.hero { background: var(--c-paper); }
.hero__title {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-display);
  line-height: var(--lh-tight); text-transform: uppercase; color: var(--c-charcoal);
  text-wrap: balance;
}
.hero__body { margin-top: var(--s-3); font-size: var(--fs-body); color: var(--c-charcoal); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); } /* round 6: a clear gap between the two buttons */

/* Round 6: more air above, below and between (Chris). 128 above the H1,
   24 to the body, 40 to the buttons (16 apart), 80 to the machine. */
.hero--centred .hero__inner { padding-top: var(--s-16); }
.hero--centred .hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero--centred .hero__title { max-width: 24ch; }
.hero--centred .hero__body { max-width: 64ch; margin-top: var(--s-3); }
.hero--centred .hero__actions { justify-content: center; margin-top: var(--s-5); }
.hero--centred .hero__machine { margin-top: var(--s-10); aspect-ratio: 12 / 5; }
@media (max-width: 640px) {
  .hero--centred .hero__inner { padding-top: var(--s-8); }
  .hero--centred .hero__actions { margin-top: var(--s-4); }
  .hero--centred .hero__machine { aspect-ratio: 4 / 3; margin-top: var(--s-6); }
}

.hero--split .hero__inner { padding-top: var(--s-10); align-items: end; }
.hero--split .hero__text { grid-column: 1 / span 5; align-self: center; padding: 0 var(--s-4) var(--s-10) 0; }
.hero--split .hero__machine { grid-column: 6 / -1; }
@media (max-width: 900px) {
  .hero--split .hero__inner { padding-top: var(--s-6); }
  .hero--split .hero__text { grid-column: 1 / -1; padding: 0 0 var(--s-5); }
  .hero--split .hero__machine { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero__machine { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .hero__actions { align-self: stretch; }
  .hero__actions .btn { flex: 1 1 140px; }
}

/* ---------- Ticker (round 3 look; round 5: logo and line on one line,
   a shorter strip, Medium 500 type) ---------- */
.ticker { display: flex; align-items: stretch; min-height: var(--s-8); }
.ticker__fixed {
  flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: var(--s-3); /* round 6: 24, was 16 */
  padding: var(--s-1) var(--s-4) var(--s-1) max(var(--gutter), calc((100vw - var(--page-max)) / 2));
  border-right: 1px solid var(--c-rule-on-dark);
  background: inherit; position: relative; z-index: 1;
}
.ticker__logo { width: 160px; height: auto; }
.ticker__line {
  font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--c-yellow); line-height: 1; white-space: nowrap;
  padding-top: 2px; /* optical: caps sit on the logo's baseline */
}
.ticker__viewport {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-4), #000 calc(100% - var(--s-8)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-4), #000 calc(100% - var(--s-8)), transparent 100%);
}
.ticker__viewport::-webkit-scrollbar { display: none; }
.ticker__track { display: flex; align-items: center; width: max-content; padding-left: var(--s-4); }
.ticker__item { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__name {
  font-size: var(--fs-small); font-weight: var(--w-medium); letter-spacing: 0.01em;
  color: var(--c-on-dark-soft); text-decoration: none; white-space: nowrap; line-height: 1; padding: var(--s-1) 0;
}
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-yellow); margin: 0 var(--s-3); flex: 0 0 auto; }
.ticker__item[aria-hidden="true"] { display: none; }

/* The crawl is the one linear motion on the page: a marquee has to move at a
   constant speed. It eases to a stop on hover or focus (site.js ramps the
   playback rate); the CSS pause below is the fallback without that. */
@media (prefers-reduced-motion: no-preference) {
  .ticker.is-running .ticker__viewport { overflow: hidden; }
  .ticker.is-running .ticker__item[aria-hidden="true"] { display: flex; }
  .ticker.is-running .ticker__track { animation: ticker var(--ticker-duration, 60s) linear infinite; }
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 800px) {
  .ticker { flex-wrap: wrap; }
  .ticker__fixed {
    flex: 1 1 100%; justify-content: flex-start; gap: var(--s-3);
    padding: var(--s-1) var(--gutter); min-height: var(--s-6); border-right: 0; border-bottom: 1px solid var(--c-rule-on-dark);
  }
  .ticker__logo { width: 144px; }
  .ticker__viewport { min-height: var(--s-6); }
  .ticker__track { padding-left: var(--gutter); }
}

/* ---------- Sections: 96 between (round 5, was 128), 24 to 32 inside ---------- */
.section { padding: var(--s-12) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--white { background: var(--c-white); }
.section--paper { background: var(--c-paper); }
.section:focus { outline: none; }
.section-head--machines {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
@media (max-width: 640px) {
  .section { padding: var(--s-8) 0; }
  .section--tight { padding: var(--s-6) 0; }
  .section-head--machines { margin-bottom: var(--s-3); align-items: center; }
}

/* ---------- Photo placeholders: a flat stone block, a 13px label ----------
   Cards 4:3, portraits 1:1. Hover on a machine card is the photo settle
   only (no colour wash): a slight zoom that eases in over 200ms. */
.media { position: relative; overflow: hidden; background: var(--c-stone); aspect-ratio: 4 / 3; }
.media--portrait { aspect-ratio: 1 / 1; }
.media--map { aspect-ratio: 16 / 9; }
/* Round 5: machine card photos sit on a charcoal ground (brand colour in
   the cards), photo or not, so cards read against either panel tint. */
.media--photo { background: var(--c-charcoal); }
.media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Carousels (round 5: grounded in a panel, drag to scroll) ----------
   The panel is a tinted block on the section's grid; the track runs edge to
   edge inside it, so the next card peeks and is cut by the panel, not by
   the window. Title to cards (64+) is always more than cards to controls
   (24). */

.carousel__track {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--panel-pad);
  margin: 0 calc(-1 * var(--panel-pad)); padding: var(--s-1) var(--panel-pad) var(--s-2);
}
@media (max-width: 640px) {
  .carousel__track { margin: 0 calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) var(--s-2); scroll-padding-left: var(--gutter); }
}
.js .carousel__track { scrollbar-width: none; }
.js .carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -2px; }
.carousel__track.is-draggable { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.carousel__track.is-dragging a { pointer-events: none; }
.carousel__track.is-settling { scroll-snap-type: none; }
.carousel__list { display: flex; gap: var(--s-3); }
.carousel__slide {
  flex: 0 0 calc((100% - 3 * var(--s-3)) / 3.25);
  scroll-snap-align: start;
  display: flex;
}
@media (max-width: 1100px) {
  .carousel__slide { flex-basis: calc((100% - 2 * var(--s-3)) / 2.3); }
}
@media (max-width: 640px) {
  .carousel__list { gap: var(--s-2); }
  .carousel__slide { flex-basis: 86%; }
}

/* ---------- Machine cards (the only cards on the page) ---------- */

/* the deeper hover shadow is a layer that fades (opacity), not an animated shadow */

/* Round 5, new equipment: ONE headline spec, the size-defining number. */

/* Round 5, used equipment: year, hours, location in one row. */

/* Learn more: charcoal at rest; on hover the colour changes instantly and
   the arrow nudges right with a soft overshoot, and comes back quicker. */

/* Chips: one component, round 20 (end of file). */

/* Quick view pill (Boom & Bucket trigger, round 3): hidden at rest, fades in
   while the card is hovered or has focus. */

/* ---------- Quick view dialog ----------
   Opens with a fade and a short rise (base, ease-out); closes quicker (fast,
   exit curve). site.js holds the close until the exit has played. */
.qv {
  width: min(960px, calc(100% - 2 * var(--s-2))); max-height: calc(100% - 2 * var(--s-2));
  padding: 0; border: 0;
  background: var(--c-white); color: var(--c-charcoal); box-shadow: var(--shadow-dialog);
  overflow: auto;
}
.qv::backdrop { background: var(--c-scrim); }
.qv[open] { animation: qv-in var(--dur-base) var(--ease-out); }
.qv[open]::backdrop { animation: fade-in var(--dur-base) var(--ease-out); }
.qv.is-closing { animation: qv-out var(--dur-fast) var(--ease-exit) forwards; }
.qv.is-closing::backdrop { animation: fade-out var(--dur-fast) var(--ease-exit) forwards; }
@keyframes qv-in { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes qv-out { to { opacity: 0; transform: translateY(var(--rise-sm)); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.qv__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-4); }
.qv__close {
  position: absolute; top: var(--s-1); right: var(--s-1); width: var(--control-h); height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: var(--c-white); border: 0;
}
.qv__close:hover { background: var(--c-paper); }
.qv__close svg { width: 20px; height: 20px; }
.qv__media { align-self: start; }
.qv__body { display: flex; flex-direction: column; gap: var(--s-2); padding-right: var(--s-4); }
.qv__title { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-qv-title); line-height: 0.95; text-transform: uppercase; color: var(--c-charcoal); }
.qv__price { font-size: var(--fs-price); font-weight: var(--w-semibold); color: var(--c-red); }
.specs { display: grid; border-top: var(--hairline); }
.specs__row { display: grid; grid-template-columns: 144px 1fr; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: var(--hairline); font-size: var(--fs-small); }
.specs dt { color: var(--c-muted); }
.specs dd { font-weight: var(--w-medium); }
.qv__note { font-size: var(--fs-micro); color: var(--c-muted); }
.qv__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.qv__call { font-size: var(--fs-small); }
.qv__call a { font-weight: var(--w-semibold); text-decoration: none; }
.qv__call a:hover { color: var(--c-red); }
@media (max-width: 720px) {
  .qv__inner { grid-template-columns: 1fr; padding: var(--s-3) var(--s-2); gap: var(--s-3); }
  .qv__body { padding-right: 0; }
  .qv__media { margin-top: var(--s-5); }
  .specs__row { grid-template-columns: 1fr; gap: 0; }
  .qv__actions .btn { flex: 1 1 100%; }
}

/* ---------- Rentals (Chris: red gradient, texture and the 50/50 stay) ---------- */
.surface--red-deep { background-color: var(--c-red-deep); background-image: var(--grad-red-deep); }
/* Round 5: smaller (80 of padding, a 16:10 photo) and the action first:
   the button and Dan sit together on one row under the copy. */
.rentals { padding: var(--s-10) 0; }
.rentals__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.rentals__copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; }
.rentals__lead { margin-top: var(--s-2); font-size: var(--fs-body); color: var(--c-white); }
.rentals__promise { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.rentals__facts { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-white); }
.rentals__copy > .ph { margin-top: var(--s-1); }
.rentals__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.rentals__media { aspect-ratio: 16 / 10; }
@media (max-width: 900px) {
  .rentals { padding: var(--s-8) 0; }
  .rentals__inner { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------- Editorial splits (Parts & Service, Team, Contact) ----------
   One system: 5/7 on the page grid, the heading column narrow and in the
   text face, no boxes, air instead of rules, a signature closing each block. */
.split { align-items: start; }
.split__head { grid-column: 1 / span 5; padding-right: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.split__body { grid-column: 6 / -1; }
.split__lead { font-size: var(--fs-body); color: var(--c-charcoal); max-width: 36ch; }
.split__head .btn, .split__head .text-arrow { margin-top: var(--s-1); }
@media (max-width: 900px) {
  .split__head { grid-column: 1 / -1; padding-right: 0; }
  .split__body { grid-column: 1 / -1; margin-top: var(--s-4); }
}

/* Parts & Service (round 5): two plain stacks, no photos, 48 of air
   between them, each closed by a compact signature. */
.stacks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.stack { display: flex; flex-direction: column; }
.stack__text { margin-top: var(--s-1); font-size: var(--fs-body); color: var(--c-charcoal); max-width: 40ch; }
.stack__text--sub { color: var(--c-muted); font-size: var(--fs-small); }
.stock { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
@media (max-width: 640px) { .stacks { grid-template-columns: 1fr; gap: var(--s-5); } }

/* About us + Team (round 6): a 50/50 on the page grid (6 and 6). Two
   shared rows: the heads, then the photo beside the list. The list sets
   the row height and the photo fills it (cover), so the two blocks start
   and end together. Hairlines only, the same quiet rules as Our approach. */
.about-team {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12);
  grid-template-areas: "ahead thead" "photo list" "more note"; row-gap: var(--s-5); align-items: start;
}
.about-team .split__lead { max-width: 52ch; }
.about-team__more { grid-area: more; justify-self: start; margin-top: calc(var(--s-3) - var(--s-5)); }
.about-team .roster__note { grid-area: note; margin-top: calc(var(--s-3) - var(--s-5)); }
.about-team__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.about-team__head--about { grid-area: ahead; }
.about-team__head--team { grid-area: thead; }
.about-team__photo { grid-area: photo; align-self: stretch; aspect-ratio: auto; min-height: 320px; }
.about-team__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-team__list { grid-area: list; }
.roster { border-top: var(--hairline); }
.roster__row {
  display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: var(--s-2); row-gap: var(--s-half); align-items: center; padding: var(--s-2) 0; border-bottom: var(--hairline);
}
.roster__portrait { grid-row: 1 / span 2; width: var(--s-6); }
.roster__name { grid-column: 2; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign-compact); line-height: 1; text-transform: uppercase; align-self: end; }
.roster__role { grid-column: 2; font-size: var(--fs-label); color: var(--c-muted); line-height: var(--lh-snug); align-self: start; }
.roster__phone { grid-column: 3; grid-row: 1 / span 2; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign-compact); line-height: 1; color: var(--c-red); text-decoration: none; }
a.roster__phone:hover { color: var(--c-charcoal); }
.roster__note { margin-top: var(--s-2); font-size: var(--fs-small); }
@media (max-width: 1100px) { .about-team { column-gap: var(--s-6); } }
@media (max-width: 900px) {
  .about-team { grid-template-columns: 1fr; grid-template-areas: "ahead" "photo" "more" "thead" "list" "note"; row-gap: var(--s-4); }
  .about-team__more, .about-team .roster__note { margin-top: calc(var(--s-2) - var(--s-4)); }
  /* on phone the photo sizes itself (WebKit collapsed the stretched,
     aspect-ratio box with an absolute image to 0 x 0) */
  .about-team__photo { display: block; aspect-ratio: auto; min-height: 0; }
  .about-team__photo img { position: static; height: auto; aspect-ratio: 800 / 453; }
  .about-team__head--team { margin-top: var(--s-4); }
}

/* Contact (round 6: the first pass back, Chris: "the first pass was the
   best"). Round 1's 7/5 with 80 between: heading, lead and form on the
   left; the consult title, address, phone and email as plain lines, the
   map and Email us on the right, its title on the heading's line. Current
   type (General Sans heads, the phone in Barlow red), colour and square
   corners. */
.quote { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-10); align-items: start; }
.quote__main { display: flex; flex-direction: column; }
.quote__lead { margin-top: var(--s-2); font-size: var(--fs-lead); color: var(--c-charcoal); }
.quote__main .quote__form { margin-top: var(--s-5); }
.quote__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
/* the consult title sits on the H2's line: same top, a step smaller */
.quote__contact .h3 { padding-top: var(--s-half); }
.quote__details { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-lead); line-height: var(--lh-snug); }
.quote__details a { text-decoration: none; }
.quote__details .quote__email { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quote__details a.quote__email:hover { color: var(--c-red); }
/* the phone number: the display face, red, the action (round 4 rule) */
.contact__phone { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-phone-display); line-height: 1; letter-spacing: 0.01em; color: var(--c-red); padding: var(--s-1) 0; }
.quote__details a.contact__phone:hover { color: var(--c-charcoal); }
.quote__map { width: 100%; aspect-ratio: 3 / 2; }
@media (max-width: 1000px) {
  .quote { grid-template-columns: 1fr; row-gap: var(--s-8); }
}
@media (max-width: 640px) {
  .quote { row-gap: var(--s-6); }
  .quote__main .quote__form { margin-top: var(--s-4); }
  .quote__form .btn { align-self: stretch; }
  .quote__cta { align-self: stretch; }
}

/* ---------- Quote form (round 3's boxed fields, square per the corner rule) ---------- */
.quote__form { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: 100%; }
.field { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; }
.field > span, .field legend { font-size: var(--fs-label); font-weight: var(--w-medium); color: var(--c-muted); }
.field legend { margin-bottom: var(--s-1); }
.field input, .field textarea {
  width: 100%; min-height: var(--control-h); padding: var(--s-1) var(--s-2); font-size: var(--fs-body);
  background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius);
}
.field input:hover, .field textarea:hover { border-color: var(--c-muted); }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 0; border-color: var(--c-charcoal); }
.options__list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Footer (round 6: less cramped) ----------
   The wordmark at half its round 5 width (640 at 1440), the three actions
   as 56px buttons beside it, then one quiet row (links, email, address)
   and the legal line. No hairline (Chris, round 3). */
.site-footer { padding: var(--s-10) 0 var(--s-4); color: var(--c-on-dark-soft); font-size: var(--fs-small); }
.site-footer a { color: var(--c-on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-white); }
.site-footer__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-8); flex-wrap: wrap; }
.site-footer__biglogo { display: block; flex: 0 1 50%; color: var(--c-white); }
.site-footer a.site-footer__biglogo, .site-footer a.site-footer__biglogo:hover { color: var(--c-white); }
.site-footer__biglogo .logo-svg { width: 100%; height: auto; }
.site-footer__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.site-footer .site-footer__actions .btn--primary { color: var(--c-white); }
.site-footer__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-10);
}
.site-footer__links ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-footer__legal {
  display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-3); font-size: var(--fs-micro);
}
/* Big buttons and the outline-on-dark style (footer) */
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--s-4); font-size: var(--fs-button-lg); }
.btn--outline-inverse { background: transparent; color: var(--c-white); border-color: var(--c-line-inverse-strong); }
.site-footer a.btn--outline-inverse { color: var(--c-white); }
.site-footer a.btn--outline-inverse:hover, .btn--outline-inverse:hover { background: var(--c-white); color: var(--c-charcoal); border-color: var(--c-white); }
.site-footer a.btn--primary:hover { background: var(--c-white); color: var(--c-charcoal); border-color: var(--c-white); }
@media (max-width: 1100px) {
  .site-footer__biglogo { flex-basis: 100%; max-width: 560px; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: var(--s-8); }
  .site-footer__biglogo { max-width: 280px; }
  .site-footer__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-1); }
  .site-footer__row { flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
  .site-footer__links ul { gap: var(--s-1) var(--s-3); }
  .site-footer__contact { flex-direction: column; gap: var(--s-half); }
}

/* ---------- Section reveal ----------
   Once per element, on first scroll into view: fade and a 16px rise, items
   in a section staggered 60ms apart. Only when site.js has armed it (JS on,
   IntersectionObserver present, motion allowed); never on content already in
   view at load. */
.reveal-armed [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--rise)); }
.reveal-armed [data-reveal].is-in {
  transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
}

/* ---------- Reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Round 8: colour changes may still fade; nothing moves. */
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
  .reveal-armed [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Round 5b: content pass additions ---------- */
/* Our approach (round 6: no kicker, more considered). The heading takes
   4 columns and is balanced onto two lines; the rows take 7, one column in
   from it, so the gap between them reads as a gutter, not a hole. Each row
   is a fixed term column (the longest term plus 24) and the text, on one
   baseline. Rules are hairlines BETWEEN rows only, no charcoal rule; the
   heading's cap line sits on the first row's. */
.approach-grid { align-items: start; }
.approach-grid .split__head { grid-column: 1 / span 4; padding-right: 0; }
.approach-grid .split__body { grid-column: 6 / -1; }
.approach-grid .h2 { text-wrap: balance; }
.approach__row {
  display: grid; grid-template-columns: 192px minmax(0, 1fr); column-gap: var(--s-3);
  align-items: baseline; padding: var(--s-3) 0;
}
.approach__row + .approach__row { border-top: var(--hairline); }
.approach__row:first-child { padding-top: 0; }
.approach__row:last-child { padding-bottom: 0; }
.approach__term { font-size: var(--fs-lead); font-weight: var(--w-semibold); line-height: var(--lh-head); color: var(--c-charcoal); }
.approach__text { font-size: var(--fs-body); color: var(--c-muted); max-width: 48ch; }
@media (max-width: 900px) {
  .approach-grid .split__head, .approach-grid .split__body { grid-column: 1 / -1; }
  .approach-grid .split__body { margin-top: var(--s-4); }
}
@media (max-width: 640px) {
  .approach__row { grid-template-columns: 1fr; row-gap: var(--s-half); padding: var(--s-2) 0; }
}

/* Inventory intro line under the New equipment display head. */
.section-head__text { display: flex; flex-direction: column; gap: var(--s-2); }
.section-head__lead { font-size: var(--fs-body); color: var(--c-charcoal); max-width: 52ch; }

/* Ticker label is longer in 5b (the regional dealer label): on
   phone it may take two lines beside the logo instead of overflowing. */
@media (max-width: 800px) {
  .ticker__line { white-space: normal; line-height: 1.2; text-wrap: balance; min-width: 0; }
}

/* =====================================================================
   Round 7 (Oct 8): real photography, colour, and the screen grid.
   Rhythm down the page: paper hero with a full-bleed photo / charcoal
   ticker and screen grid / white New / paper Used / red Rentals / white
   Parts & Service / charcoal About and Team / white Contact / red Talk to
   us / charcoal footer. Red now fills whole sections (Chris: "use some
   colour"); yellow stays a small accent (ticker, grid nodes).
   ===================================================================== */

/* Photos inside .media: always cover the box. */
.media--photo > picture, .media--photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.media--photo > picture > img { object-fit: cover; }

/* ---------- Hero: the photo full bleed under the centred type ---------- */
.hero--centred { padding-bottom: 0; }
picture.hero__photo { display: block; position: relative; overflow: hidden; background: var(--c-stone); }
.hero--centred .hero__photo { margin-top: var(--s-10); aspect-ratio: 12 / 5; max-height: 640px; width: 100%; }
.hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero--split .hero__photo { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .hero--centred .hero__photo { margin: var(--s-6) 0 0; aspect-ratio: 4 / 3; }
  .hero__photo > img { object-position: 40% 60%; }
}

/* ---------- Charcoal sections: About and Team ---------- */
.surface--charcoal .h2, .surface--charcoal .split__lead { color: var(--c-white); }
.surface--charcoal .split__lead { color: var(--c-on-dark-soft); }
.surface--charcoal .ph { color: var(--c-red-on-dark); }
.about-team-section .text-arrow { color: var(--c-white); }
.about-team-section .text-arrow:hover { color: var(--c-yellow); }
.about-team-section .roster { border-top-color: var(--c-rule-on-dark); }
.about-team-section .roster__row { border-bottom-color: var(--c-rule-on-dark); }
.about-team-section .roster__name { color: var(--c-white); }
.about-team-section .roster__role { color: var(--c-on-dark-soft); }
.about-team-section .roster__portrait { background: var(--c-steel-dark); }
.about-team-section a.roster__phone { color: var(--c-white); }

/* ---------- Parts & Service: the service van over the two stacks ---------- */
.ps__photo { aspect-ratio: 2 / 1; margin-bottom: var(--s-5); }

/* ---------- Rentals: the photo replaces the stone block ---------- */
.rentals__media { box-shadow: 0 24px 48px rgba(18, 20, 22, 0.24); }

/* ---------- Quick view: the stand-in label under the photo ---------- */
.qv__media.media--photo { overflow: visible; }
.qv__photo-note {
  position: absolute; left: 0; right: 0; top: 100%; padding-top: var(--s-1);
  font-size: var(--fs-micro); color: var(--c-muted);
}

/* =====================================================================
   Round 8 (Oct 8): steel-frame linework, a warm stone container, a
   carousel with mass, gentler interactions, the hero render slot.
   ===================================================================== */
/* ---------- Gentle state changes, everywhere ----------
   Every hover and focus colour change eases over --dur-hover on
   --ease-soft (supersedes round 3's instant hovers). Buttons settle on
   press (--dur-press) and come back up slower (--dur-release). */
a, button, .option span, .field input, .field textarea {
  transition: color var(--dur-hover) var(--ease-soft), background-color var(--dur-hover) var(--ease-soft),
              border-color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft);
}

/* Arrow nudges: 4px over 320ms on the soft curve (was a springy 240ms). */
.btn--go svg, .nav__sub-link--all svg, .way svg {
  transition: transform var(--dur-release) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
}
.btn--go:hover svg, .btn--go:focus-visible svg,
.nav__sub-link--all:hover svg, .nav__sub-link--all:focus-visible svg,
.way:hover svg, .way:focus-visible svg {
  transform: translateX(var(--nudge));
  transition: transform var(--dur-nudge) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
}

/* ---------- The steel frame ----------
   A 2px solid warm-grey line around a block, and a square corner bracket
   (two 16px legs, 2px) at each corner, standing 2px clear of the frame so
   it reads as fabricated plate, not graph paper. Used on exactly two
   things: the Our approach plate and the carousel containers. */

/* Round 10 (Chris): the corner brackets are gone everywhere; the frame is the line alone. */

/* ---------- Our approach: three parts, one frame ---------- */
.approach-section { padding: var(--s-12) 0; }
.approach__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6);
  align-items: end; margin-bottom: var(--s-8);
}
.approach__title {
  font-family: var(--f-body); font-weight: var(--w-semibold); font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--c-white); max-width: 17ch; text-wrap: balance;
}
.approach__stat { justify-self: end; display: flex; align-items: flex-end; gap: var(--s-3); }
.approach__num {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-stat); line-height: 0.8;
  color: var(--c-white); letter-spacing: 0;
}
.approach__stat-text { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-on-dark-soft); max-width: 18ch; }

.approach__plate { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.approach__photo { aspect-ratio: auto; min-height: 448px; border-right: var(--frame-w) solid var(--c-frame); background: var(--c-charcoal-deep); }
.approach__photo img { object-position: 45% 55%; }
.approach__points { display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); padding: var(--s-6); }
.approach__term { font-size: var(--fs-lead); font-weight: var(--w-semibold); line-height: var(--lh-head); color: var(--c-white); }
.approach__text { margin-top: var(--s-1); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-on-dark-soft); max-width: 40ch; }

/* the ways in: pills, the frame's line weight and colour */
.approach__ways { margin-top: var(--s-6); }
.ways { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.way {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--control-h-md); padding: 0 var(--s-2) 0 var(--s-3);
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--frame-w) var(--c-frame);
  font-size: var(--fs-small); font-weight: var(--w-semibold); line-height: 1; color: var(--c-white); text-decoration: none;
  white-space: nowrap;
}
.way svg { width: var(--icon); height: var(--icon); flex: 0 0 auto; color: var(--c-on-dark-soft); }
.way:hover, .way:focus-visible { background: var(--c-white); color: var(--c-charcoal); box-shadow: inset 0 0 0 var(--frame-w) var(--c-white); }
.way:hover svg, .way:focus-visible svg { color: var(--c-charcoal); }

@media (max-width: 900px) {
  .approach__head { grid-template-columns: 1fr; row-gap: var(--s-4); margin-bottom: var(--s-6); }
  .approach__stat { justify-self: start; }
  .approach__plate { grid-template-columns: 1fr; }
  .approach__photo { min-height: 0; aspect-ratio: 5 / 3; border-right: 0; border-bottom: var(--frame-w) solid var(--c-frame); }
  .approach__points { padding: var(--s-4); gap: var(--s-4); }
}
@media (max-width: 640px) {
  .approach-section { padding: var(--s-8) 0; }
  .approach__head { margin-bottom: var(--s-5); }
  .approach__points { padding: var(--s-3) var(--s-2); gap: var(--s-3); }
  .approach__ways { margin-top: var(--s-4); }
}

/* ---------- The carousel container: warm stone, a woven-wire mesh, the frame ----------
   The cards are white with the frame's 2px outline, so the two layers
   no longer sit grey on grey. On a phone the container stays inside the
   gutter (a full-bleed band would put its rules edge to edge). */

@media (max-width: 640px) {
  .carousel__track { margin: 0 calc(-1 * var(--panel-pad)); padding: var(--s-1) var(--panel-pad) var(--s-2); scroll-padding-left: var(--panel-pad); }
}
.carousel__slide { scroll-snap-stop: normal; }

/* ---------- Machine cards: white, the frame's outline, no shadow ---------- */

/* the rubber band at the ends moves the list, never the cards */
.carousel__list.is-springing { transition: transform var(--dur-spring-back) var(--ease-out); }

/* ---------- Hero: the render slot ----------
   Round 9: filled with the J12 render (transparent), so the slot drops its
   stone fill and the machine stands straight on the paper and the ticker.
   Same box as round 8; the render is contained in it, bottom centred. */
.hero__render { position: relative; display: block; }
.hero--centred .hero__render { margin-top: var(--s-10); aspect-ratio: 12 / 5; width: 100%; }
.hero--split .hero__render { aspect-ratio: 4 / 3; }
/* fallback for a browser without aspect-ratio: the render keeps its own height */
.hero__render-picture { display: block; width: 100%; }
.hero__render-picture > img { display: block; width: 100%; height: auto; }
@supports (aspect-ratio: 1 / 1) {
  .hero__render-picture { position: absolute; inset: 0; }
  .hero__render-picture > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
}

/* ---------- New cards: brochure renders on the stone tint ----------
   Round 9: a transparent render sits contained inside the card's 4:3 box
   on --c-stone, inset 16px, a little below centre so it clears the chips.
   On-site photos (DF514, SR520) use the round 7 photo rule and cover. */

.media--render > picture { position: absolute; inset: var(--s-5) var(--s-2) var(--s-2); }
.media--render > picture > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 60%; }
@media (max-width: 640px) {
  .hero--centred .hero__render { aspect-ratio: 4 / 3; margin-top: var(--s-6); }
}

/* ---------- Reduced motion (round 8): colour may fade, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn--go:hover svg, .btn--go:focus-visible svg,
  .nav__sub-link--all:hover svg, .nav__sub-link--all:focus-visible svg,
  .way:hover svg, .way:focus-visible svg { transform: none !important; }
}
@media (max-width: 640px) {
  /* the slot bleeds to both screen edges on a phone, like the round 7 photo */
  .hero--centred .hero__render { width: auto; }
}

/* =====================================================================
   Round 10 (Oct 9): the headline integrated with the machine, the render
   colour grade (build.py, no CSS), slow smooth buttons, full-height
   carousel keys, a more physical feel.
   ===================================================================== */

/* ---------- Hero: the H1 in front of the machine ----------
   Chris: "the machine is sitting beneath the text block. Integrate the
   headline with the machine a little." The render is bigger and rises into
   the H1, whose lower line sits in front of the conveyor and body. The
   body and buttons follow beneath the machine, so nothing of it is behind
   them (with the text stacked above the render the conveyor cannot reach
   the H1 without crossing the body and buttons). The render never takes
   clicks. Source order is unchanged: H1, body, buttons, render. */
.hero--centred { overflow: hidden; }
@supports (overflow: clip) { .hero--centred { overflow: visible; overflow-x: clip; } }
.hero--centred .hero__text {
  display: grid; justify-items: center; text-align: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "machine" "body" "actions";
}
.hero--centred .hero__title { grid-area: title; position: relative; z-index: 2; }
.hero--centred .hero__body { grid-area: body; margin-top: var(--hero-render-gap); }
.hero--centred .hero__actions { grid-area: actions; }
.hero--centred .hero__render {
  grid-area: machine; position: relative; z-index: 1; pointer-events: none;
  width: var(--hero-render-w); max-width: none; aspect-ratio: auto;
  margin: calc(-1 * var(--hero-render-w) * var(--hero-rise)) 0 0;
}
.hero--centred .hero__render-picture { position: relative; inset: auto; }
.hero--centred .hero__render-picture > img { width: 100%; height: auto; object-fit: fill; }
/* a soft ground shadow under the tracks, so the machine stands on the paper */
.hero--centred .hero__render::after {
  content: ""; position: absolute; z-index: -1; left: 36%; right: 4%; bottom: -2%; height: 7%;
  background: radial-gradient(closest-side, var(--c-ground-shadow), transparent);
  opacity: var(--hero-shadow-opacity);
}
/* the H1 keeps a paper keyline where its letters cross the machine */
@supports (paint-order: stroke fill) {
  .hero--centred .hero__title { -webkit-text-stroke: var(--hero-halo) var(--c-paper); paint-order: stroke fill; }
}
.hero--centred .hero__inner { padding-top: var(--hero-pad-top); }
.hero--centred .hero__actions { margin-top: var(--s-4); }
.hero--centred { padding-bottom: var(--s-10); }

@media (max-width: 640px) {
  /* phones: the render runs to both screen edges and rises gently */
  .hero--centred .hero__inner { padding-top: var(--s-8); }
  .hero--centred { --hero-render-w: 100vw; }
  .hero--centred { --hero-rise: 0.13; padding-bottom: var(--s-6); }
  .hero--centred .hero__actions { justify-self: stretch; }
  .hero--centred .hero__render { width: calc(100% + 2 * var(--gutter)); margin-left: 0; margin-right: 0; }
  .hero--centred .hero__body { margin-top: var(--s-3); }
  .hero--centred .hero__actions { margin-top: var(--s-3); }
}

/* ---------- Buttons and CTAs: slow, smooth, physical ----------
   Round 10. Hover and focus come in over --dur-button-in and leave over
   --dur-button-out, both on --ease-button; a press goes down over
   --dur-button-press and eases back up. Keys at rest sit slightly raised
   (a small bottom shadow), rise a touch on hover and sink on press, the
   shadow collapsing into a short inset. No gradients, no gloss. */
.btn {
  box-shadow: var(--shadow-raised);
  transition: color var(--dur-button-out) var(--ease-button), background-color var(--dur-button-out) var(--ease-button),
              border-color var(--dur-button-out) var(--ease-button), box-shadow var(--dur-button-out) var(--ease-button),
              transform var(--dur-button-out) var(--ease-button);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(var(--button-lift)); box-shadow: var(--shadow-lifted);
  transition-duration: var(--dur-button-in);
}
.btn:active {
  transform: translateY(var(--button-sink)); box-shadow: var(--shadow-pressed);
  transition-duration: var(--dur-button-press);
}
/* the arrow inside an action button moves with the button's timing */
.btn--go svg { transition: transform var(--dur-button-out) var(--ease-button); }
.btn--go:hover svg, .btn--go:focus-visible svg { transform: translateX(var(--nudge)); transition: transform var(--dur-button-in) var(--ease-button); }

/* the ways-in pills (Our approach) and the quick view pill: the same timing
   and the same lift and sink; their own shadows stay (a frame line and the
   pill shadow) */
.way {
  transition: color var(--dur-button-out) var(--ease-button), background-color var(--dur-button-out) var(--ease-button),
              box-shadow var(--dur-button-out) var(--ease-button), transform var(--dur-button-out) var(--ease-button);
}
.way:hover, .way:focus-visible { transform: translateY(var(--button-lift)); transition-duration: var(--dur-button-in); }
.way:active { transform: translateY(var(--button-sink)); transition-duration: var(--dur-button-press); }
.way svg { transition: transform var(--dur-button-out) var(--ease-button), color var(--dur-button-out) var(--ease-button); }
.way:hover svg, .way:focus-visible svg { transition: transform var(--dur-button-in) var(--ease-button), color var(--dur-button-in) var(--ease-button); }
.qv__close { transition: background-color var(--dur-button-out) var(--ease-button); }
.qv__close:hover, .qv__close:focus-visible { transition-duration: var(--dur-button-in); }

/* ---------- Carousel keys: full height, left and right ----------
   Chris: "an analogue kind of feel where the buttons span the whole frame
   from top to bottom". Previous owns the left column, next the right, each
   divided from the track by the frame's 2px line; the track runs between
   them, so no card passes underneath. At rest a key is the paper surface
   with a red chevron and a slightly darker bottom edge; hover fills it red
   with a white chevron; a press sinks it (inset shadow, chevron down 1px).
   Disabled is the container's own stone with a grey chevron: clearly off,
   still there. Phones (640 and under) have no keys: one card and a peek
   leave no room, and native swipe with snap carries it, as in round 8. */
.carousel__keys { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.carousel__keys[hidden] { display: none; }
.carousel__key {
  position: absolute; top: 0; bottom: 0; width: var(--key-w);
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; pointer-events: auto;
  background-color: var(--c-paper); color: var(--c-red);
  box-shadow: var(--shadow-key-raised);
  transition: color var(--dur-button-out) var(--ease-button), background-color var(--dur-button-out) var(--ease-button),
              box-shadow var(--dur-button-out) var(--ease-button);
}
.carousel__key--prev { left: 0; border-right: var(--frame-w) solid var(--c-frame); }
.carousel__key--next { right: 0; border-left: var(--frame-w) solid var(--c-frame); }
.carousel__key svg { width: var(--s-3); height: var(--s-3); transition: transform var(--dur-button-out) var(--ease-button); }
.carousel__key:hover:not(:disabled), .carousel__key:focus-visible:not(:disabled) {
  background-color: var(--c-red); color: var(--c-white); box-shadow: var(--shadow-key-lifted);
  transition-duration: var(--dur-button-in);
}
.carousel__key:active:not(:disabled) {
  box-shadow: var(--shadow-key-pressed); transition-duration: var(--dur-button-press);
}
.carousel__key:active:not(:disabled) svg { transform: translateY(var(--button-sink)); transition-duration: var(--dur-button-press); }
.carousel__key:disabled { background-color: var(--c-stone-warm); color: var(--c-rule); box-shadow: none; cursor: default; }
.carousel__key:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--s-1)); }
@media (min-width: 641px) {
  /* the track runs between the keys; its end matches its start (32 to the key) */

  .js .carousel__list::after { content: ""; flex: 0 0 calc(var(--panel-pad) - var(--s-3)); }
}
@media (max-width: 640px) {
  .carousel__keys, .carousel__keys:not([hidden]) { display: none; }
}

/* ---------- Machine cards: raised objects ----------
   A soft, warm, layered drop shadow; the outline softened to the lighter
   warm grey so it does not fight the shadow. Hover lifts the card a few
   px onto a deeper shadow on the slow button timing; a press sets it back
   down. The track has room above and below so the shadow is never cut. */

.carousel__track { padding-top: var(--s-3); padding-bottom: var(--s-6); }
@media (max-width: 640px) {
  .carousel__track { padding-top: var(--s-2); padding-bottom: var(--s-5); }
}

/* ---------- Reduced motion: colours and shadows may change, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible, .btn:active,
  .way:hover, .way:focus-visible, .way:active,
  .carousel__key:active:not(:disabled) svg { transform: none !important; }
  .btn, .carousel__key { transition-property: color, background-color, border-color, box-shadow !important; }
}

/* =====================================================================
   Round 11 (Oct 9): the hero rebalanced, a tighter caps ticker, thin red
   linework full bleed, a colour field in each machine section, contact in
   two cards, the red closing band folded into the footer.
   ===================================================================== */

/* ---------- Hero: larger H1, more overlap, the machine's mass rebalanced ----------
   The render box is still centred by the grid; it is then moved left by
   the distance between the box's centre and the yellow body's centroid,
   less --hero-mass-offset, so the yellow body sits 40px right of the page
   centre. The conveyor runs out to the left, clear of the screen edge.
   On a phone the render already runs edge to edge and is left alone. */
.hero--centred .hero__render { left: calc(var(--hero-render-w) * (0.5 - var(--hero-mass-x)) + var(--hero-mass-offset)); }
@media (max-width: 640px) { .hero--centred .hero__render { left: 0; } }

/* ---------- Ticker: machine names in the nav's voice ----------
   Barlow Condensed 700 caps at the nav size and tracking, 16px either side
   of each dot (was 24). */
.ticker__name {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav);
  text-transform: uppercase; letter-spacing: var(--track-nav);
}
.ticker__dot { margin: 0 var(--s-2); }

/* ---------- Linework: 1px red, the long lines full bleed ----------
   The frame (the Our approach plate, the two carousel containers) is a
   1px red line; its top and bottom lines carry on to both screen edges.
   Two horizontals and two short sides per block, nothing else: no lattice,
   no crossings with nodes, no cell cascade. Each section clips sideways,
   so the lines never cause a horizontal scroll. */

.approach-section, .carousel { overflow: hidden; }
@supports (overflow: clip) { .approach-section, .carousel { overflow: visible; overflow-x: clip; } }
.approach__photo { border-right: var(--line-w) solid var(--c-line-on-dark); }
.carousel__key--prev { border-right: var(--line-w) solid var(--c-line); }
.carousel__key--next { border-left: var(--line-w) solid var(--c-line); }
@media (max-width: 900px) {
  .approach__photo { border-right: 0; border-bottom: var(--line-w) solid var(--c-line-on-dark); }
}

/* ---------- Our approach: the section-heading style, one CTA ---------- */
.approach__title {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-display-2);
  line-height: var(--lh-tight); letter-spacing: var(--track-display); text-transform: uppercase;
  color: var(--c-white); max-width: none; text-wrap: balance;
}
.approach__act { margin-top: var(--s-6); }
@media (max-width: 640px) { .approach__act { margin-top: var(--s-4); } .approach__act .btn { width: 100%; } }

/* ---------- Buttons on the dark surfaces (Our approach, the footer) ----------
   Red at rest; hover goes to white (charcoal on charcoal would vanish).
   The raised key keeps its shape with a deeper black edge. */
.surface--charcoal .btn { box-shadow: var(--shadow-raised-dark); }
.surface--charcoal .btn:hover, .surface--charcoal .btn:focus-visible { box-shadow: var(--shadow-lifted-dark); }
.surface--charcoal .btn:active { box-shadow: var(--shadow-pressed-dark); }
.surface--charcoal .btn--primary:hover, .surface--charcoal .btn--primary:focus-visible { background: var(--c-white); color: var(--c-charcoal); border-color: var(--c-white); }

/* ---------- Machine sections: one colour field each ----------
   New: ochre. Used: red-oxide. The faint mesh stays, a touch stronger so
   it still reads on the darker ground. Cards stay white with their shadow;
   the render grounds inside the cards stay light stone. Keyboard focus on
   a card rings in white here (charcoal on red-oxide is only 2.2:1). */

/* ---------- Contact: two cards ----------
   The form card and the details card, raised like the machine cards (the
   soft warm shadow and the light warm-grey outline), tops aligned and the
   two the same height, 40px inside (24 on a phone). In the details card:
   the title, then address, phone and email 8 apart, the map, and Email us. */
.quote { column-gap: var(--s-4); align-items: stretch; }
.quote__card {
  background: var(--c-white); border: var(--frame-w) solid var(--c-grey-warm-light);
  box-shadow: var(--shadow-card-raised); padding: var(--s-5);
}
.quote__contact { gap: var(--s-3); }
.quote__contact .h3 { padding-top: 0; }
.quote__details { gap: var(--s-1); }
.contact__phone { padding: 0; letter-spacing: var(--track-nav); line-height: var(--lh-head); }
/* side by side, the map takes the spare height so Email us lines up with Send request */
@media (min-width: 1001px) {
  .quote__map { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}
@media (max-width: 1000px) { .quote { row-gap: var(--s-4); } }
@media (max-width: 640px) {
  .quote { row-gap: var(--s-3); }
  .quote__card { padding: var(--s-3); }
}

/* ---------- Footer: the three buttons beside the wordmark ----------
   The red closing band is gone; its buttons sit on the black footer at the
   right of the wordmark (beneath it below 1100px). */
.site-footer__top { justify-content: space-between; align-items: flex-end; }
@media (min-width: 1101px) {
  .site-footer__biglogo { flex: 1 1 360px; max-width: 640px; }
}
.site-footer a.btn--outline-inverse { border-color: var(--c-line-inverse-strong); }

/* =====================================================================
   Round 12 (Oct 9): the CD review of round 11 applied (top 10 plus the
   low-risk findings), one stroke weight site-wide, the graphite Used
   field, the hero's ground line, and the inner pages.
   ===================================================================== */
/* ---------- One stroke weight (Chris, Oct 9) and one hairline (CD item 3) ----------
   Every outline computes to 1px. Two colours only: --c-hairline for
   dividers and outlines at rest, --c-outline (charcoal) for controls and
   a card's hover edge. On charcoal, the dark-surface hairline stays
   --c-rule-on-dark. */
.quote__card { border-width: var(--line-w); border-color: var(--c-hairline); }
.field input, .field textarea { border: var(--line-w) solid var(--c-outline); }
.field input:hover, .field textarea:hover { border-color: var(--c-outline); }
/* Round 26 (Chris, Oct 17: "I hate the outline, remove it"): the menu
   button has no box; see the r26 block after the About hero. */
.btn--secondary { border-color: var(--c-outline); }

/* ---------- Carousel keys: one surface at rest (CD item 1) ---------- */
.carousel__key:disabled { background-color: var(--c-paper); color: var(--c-rule); box-shadow: var(--shadow-key-raised); cursor: default; }

/* ---------- Section heads: no lead, one alignment (CD item 2) ---------- */
.section-head--machines { align-items: center; }

/* ---------- Hero: body and buttons to scale (CD item 4) ---------- */
.hero__body { font-size: var(--fs-lead); }
.hero--centred .hero__body { max-width: 56ch; }

/* ---------- Idea 1: the machine stands on the first red line ----------
   One 1px brand-red line, full bleed, at the render's ground (the bottom
   of the tracks), so the page's linework starts in the first screen. It
   sits behind the machine and the ground shadow; the hero clips sideways. */
.hero--centred .hero__render::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -100vw; right: -100vw; bottom: calc(var(--hero-render-w) * 0.004);
  height: var(--line-w); background: var(--c-line);
}

/* ---------- Ticker label in the nav voice (CD item 5) ---------- */
.ticker__line {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav);
  letter-spacing: var(--track-nav); padding-top: 0;
}

/* ---------- Our approach: the stat aligned, the CTA inside the plate (CD item 6) ---------- */
.approach__num { line-height: var(--lh-tight); }
.approach__stat { align-items: baseline; }
.approach__point--act { padding-top: var(--s-1); }
@media (max-width: 640px) { .approach__point--act .btn { width: 100%; } }

/* ---------- Cards: one physical motion, Learn more in one place (CD item 8) ---------- */

/* ---------- Contact card: one stack, two sizes (CD item 10) ---------- */
.quote__contact .h3 { padding-top: var(--s-1); }
.quote__details { font-size: var(--fs-body); gap: var(--s-2); }
.contact__phone { letter-spacing: 0.01em; }
.quote__details .quote__email { text-decoration: none; }

/* ---------- Low-risk findings from the review ---------- */
.rentals { padding: var(--s-12) 0; }
.rentals__media { box-shadow: none; }
.qv__close svg { width: var(--s-3); height: var(--s-3); }
/* the dropdown seats on the header rule and aligns its text with the trigger */
.nav__sub { left: calc(-1 * var(--s-3)); top: calc(100% + var(--s-3) - var(--s-half)); }
.nav__sub::before { top: calc(-1 * var(--s-3)); height: var(--s-3); }
@media (min-width: 1181px) {
  .nav__sub { transition: opacity var(--dur-hover) var(--ease-soft), transform var(--dur-hover) var(--ease-soft), visibility 0s var(--dur-hover); }
  .no-js .nav__item--has-sub:hover .nav__sub,
  .no-js .nav__item--has-sub:focus-within .nav__sub,
  .nav__item--has-sub.is-open .nav__sub { transition: opacity var(--dur-hover) var(--ease-soft), transform var(--dur-hover) var(--ease-soft), visibility 0s; }
}
/* photo cards share the render cards' silhouette: the photo inset on stone as a framed print */
.media--print { background: var(--c-stone); }
.media--print > picture { position: absolute; inset: var(--s-5) var(--s-2) var(--s-2); }
.media--print > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Used field: graphite by default (Chris, Oct 9) ---------- */
.used-oxide { --c-field-used: var(--c-field-oxide); }
.used-petrol { --c-field-used: var(--c-field-petrol); }

/* ---------- Idea 2 (?dims=1 only): a dimension line under each render ---------- */
.dim { display: none; }
.dims-on .media--render > picture { bottom: var(--s-6); }
.dims-on .dim {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-half);
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-1); margin: 0;
}
.dim__line {
  display: block; height: var(--s-1);
  border-left: var(--line-w) solid var(--c-line); border-right: var(--line-w) solid var(--c-line);
  background: linear-gradient(var(--c-line), var(--c-line)) center / 100% var(--line-w) no-repeat;
}
.dim__label {
  align-self: center; font-size: var(--fs-micro); font-weight: var(--w-semibold); line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted);
}

/* ---------- Phone: the fields bleed (CD item 7), View all full width ---------- */
@media (max-width: 640px) {
  .carousel__track { margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-left: var(--gutter); }
  .section-head--machines .btn { width: 100%; }
}

/* ---------- The tile: a model with no picture yet ---------- */
.media--tile { background: var(--c-stone); }
.tile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  padding: var(--s-5) var(--s-2) var(--s-2);
}
.tile__model { font-family: var(--f-display); font-weight: 800; font-size: var(--s-8); line-height: 1; text-transform: uppercase; color: var(--c-white); }
.tile__brand { font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); }
.tile--lg .tile__model { font-size: var(--s-16); }

/* ---------- Inner pages: the page head ---------- */
.page-head { background: var(--c-paper); border-bottom: var(--line-w) solid var(--c-line); }
.page-head__inner { padding-top: var(--s-12); padding-bottom: var(--s-8); }
.page-head__title {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-display-2);
  line-height: var(--lh-tight); text-transform: uppercase; color: var(--c-charcoal); max-width: 20ch; text-wrap: balance;
}
.page-head__lead { margin-top: var(--s-3); font-size: var(--fs-lead); max-width: 56ch; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.page-head .rentals__promise { margin-top: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-1); color: var(--c-rule); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-red); }
.crumbs a[aria-current="page"] { color: var(--c-charcoal); font-weight: var(--w-medium); }
@media (max-width: 640px) {
  .page-head__inner { padding-top: var(--s-8); padding-bottom: var(--s-6); }
  .page-head__actions .btn { flex: 1 1 100%; }
}

/* filter chips: links on New, buttons (JS) on Used */
.filters ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-5); }
.filters[hidden] { display: none; }

/* ---------- Card grids (New and Used index pages) ---------- */
.grid-section { overflow-x: hidden; }
@supports (overflow: clip) { .grid-section { overflow-x: clip; } }
.grid-note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); max-width: 72ch; }

/* ---------- Product pages (new models and used units) ---------- */
.product { padding: var(--s-6) 0 var(--s-12); background: var(--c-paper); }
.product__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; }
.product__media { margin: 0; }
.product__frame { border: var(--line-w) solid var(--c-hairline); }
.product__frame.media--render > picture { inset: var(--s-6) var(--s-4) var(--s-4); }
.product__frame.media--print > picture { inset: var(--s-4); }
.dims-on .product__frame.media--render > picture { bottom: var(--s-8); }
.dims-on .dim--product { left: var(--s-4); right: var(--s-4); bottom: var(--s-2); }
.product__caption { margin-top: var(--s-1); font-size: var(--fs-micro); color: var(--c-muted); }
.product__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.product__title { margin-top: var(--s-3); font-weight: inherit; }
.product__model {
  display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 6.1vw, 88px);
  line-height: 0.88; text-transform: uppercase; color: var(--c-charcoal);
}
.product__kind { display: block; margin-top: var(--s-1); font-size: var(--fs-lead); font-weight: var(--w-medium); color: var(--c-muted); }
.product__price { margin-top: var(--s-2); font-size: var(--fs-phone-display); font-weight: var(--w-semibold); line-height: 1.2; color: var(--c-red); }
.product__summary { margin-top: var(--s-3); font-size: var(--fs-body); max-width: 60ch; }
.product__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.product__sub { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }
.product__specs-title { margin-top: var(--s-6); margin-bottom: var(--s-2); }
.product__note { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--c-muted); }
.product__note a { color: var(--c-charcoal); text-decoration: underline; text-decoration-thickness: var(--line-w); text-underline-offset: 3px; }
.product__note a:hover { color: var(--c-red); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); margin-top: var(--s-3); }
.tiles__item { background: var(--c-white); border: var(--line-w) solid var(--c-hairline); padding: var(--s-2); }
.tiles dt { font-size: var(--fs-micro); font-weight: var(--w-medium); color: var(--c-muted); }
.tiles dd { margin-top: var(--s-half); font-size: var(--fs-body); font-weight: var(--w-semibold); }
.highlights { margin-top: var(--s-3); border-top: var(--hairline); }
.highlights li { padding: var(--s-1) 0; border-bottom: var(--hairline); font-size: var(--fs-small); }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border: var(--line-w) solid var(--c-hairline); }
.gallery__slide { scroll-snap-align: start; }
.gallery__pager { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.gallery__pager a {
  display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm);
  box-shadow: inset 0 0 0 var(--line-w) var(--c-outline); font-size: var(--fs-small); font-weight: var(--w-semibold); text-decoration: none;
}
.gallery__pager a:hover { background: var(--c-charcoal); color: var(--c-white); }
@media (max-width: 900px) {
  .product__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
}
@media (max-width: 640px) {
  .product { padding: var(--s-4) 0 var(--s-8); }
  .product__actions .btn { flex: 1 1 100%; }
  .specs__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Editorial pieces on the inner pages ---------- */
.prose { margin-top: var(--s-3); font-size: var(--fs-body); max-width: 60ch; }
.prose--sub { color: var(--c-muted); font-size: var(--fs-small); }
.inline-link { color: inherit; text-decoration: underline; text-decoration-thickness: var(--line-w); text-underline-offset: 3px; }
.inline-link:hover { color: var(--c-red); }
.surface--charcoal .inline-link:hover { color: var(--c-yellow); }
.split__body > .roster { margin-top: var(--s-5); }
.steps { margin-top: var(--s-5); border-top: var(--hairline); counter-reset: step; }
.steps__item { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); column-gap: var(--s-2); padding: var(--s-3) 0; border-bottom: var(--hairline); counter-increment: step; }
.steps__item::before { content: counter(step); grid-row: 1 / span 2; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-phone-display); line-height: 1; color: var(--c-red); }
.steps__term { font-size: var(--fs-lead); font-weight: var(--w-semibold); line-height: var(--lh-head); }
.steps__text { margin-top: var(--s-half); color: var(--c-muted); max-width: 52ch; }
.link-rows { border-top: var(--hairline); }
.link-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: var(--hairline); text-decoration: none; }
.link-row__label { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-phone-display); line-height: 1; text-transform: uppercase; }
.link-row__meta { margin-left: auto; font-size: var(--fs-small); color: var(--c-muted); }
.link-row svg { width: var(--icon); height: var(--icon); flex: 0 0 auto; }
.link-row:hover { color: var(--c-red); }
.legal { max-width: 72ch; }
.legal .h3 + p { margin-top: var(--s-1); }
.legal p + .h3 { margin-top: var(--s-5); }
.legal__meta { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--c-muted); }
.dealer__logo { width: 200px; height: auto; margin-bottom: var(--s-3); }

/* About: intro, Bill, the team by need */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-10); align-items: center; }
.about-intro__photo { aspect-ratio: 16 / 10; }
.about-intro__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--hairline); }
.facts dt { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-phone-display); line-height: 1; text-transform: uppercase; }
.facts dd { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-muted); }
.bill { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: var(--s-8); align-items: center; }
.bill__photo { aspect-ratio: 4 / 5; }
.bill__text { margin-top: var(--s-2); font-size: var(--fs-lead); color: var(--c-on-dark-soft); max-width: 40ch; }
.surface--charcoal .bill .h2 { color: var(--c-white); }
.team-groups { display: grid; gap: var(--s-5); }
.team-group__need { margin-bottom: var(--s-1); font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .bill { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .bill__photo { max-width: 320px; }
}
@media (max-width: 640px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Team roster: portraits (Dan Hunting's photos, Oct 8) ---------- */
.roster__row { grid-template-columns: var(--s-6) minmax(0, 1fr); }
.roster__portrait { background: var(--c-stone); }
.roster__portrait.media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.roster__initial {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign); line-height: 1; color: var(--c-muted);
}
.about-team-section .roster__initial { color: var(--c-on-dark-soft); }
.roster--lg .roster__row { grid-template-columns: var(--s-12) minmax(0, 1fr); column-gap: var(--s-3); }
.roster--lg .roster__portrait { width: var(--s-12); }
.roster--lg .roster__name { font-size: var(--fs-sign); }
.roster--lg .roster__role { font-size: var(--fs-small); }
@media (max-width: 640px) {
  .roster--lg .roster__row { grid-template-columns: var(--s-8) minmax(0, 1fr); }
  .roster--lg .roster__portrait { width: var(--s-8); }
}

/* ---------- The map (Google embed, lazy; the styled block shows until it loads) ---------- */
.quote__map.map { display: flex; flex-direction: column; gap: var(--s-1); aspect-ratio: auto; }
.map__frame-wrap { position: relative; aspect-ratio: 3 / 2; background: var(--c-stone); border: var(--line-w) solid var(--c-hairline); overflow: hidden; }
.map__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); color: var(--c-muted); font-size: var(--fs-small); }
.map__pin { width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 var(--s-1) rgba(208, 2, 27, 0.16); }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__link { align-self: flex-start; }
@media (min-width: 1001px) {
  .quote__map.map { flex: 1 1 auto; min-height: 0; }
  .map__frame-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery { scroll-behavior: auto; }
}

/* Chips, not pills (Oct 9): superseded by the round 20 chip component (end of file). */
.option { padding: var(--s-1) 0; }
.options__list { gap: 0 var(--s-1); }
@media (min-width: 901px) {
  /* the picture stays in view beside a long spec list */
  .product__media { position: sticky; top: calc(var(--header-main-h) + var(--s-3)); }
}

/* ---------- Flat buttons (Chris, Oct 9: match the landing page) ----------
   Supersedes the round 10 raised keys for buttons. Primary: solid red, no
   shadow, no border. Secondary: transparent with the 1px charcoal outline
   (white on dark). Hover is a colour change only on the slow tokens (520ms
   in, 400ms out); no lift or sink; a press darkens a step. The carousel
   keys keep their full-height strip form without shadows. Cards keep their
   soft raised shadow (not ruled on). */
.btn, .surface--charcoal .btn {
  box-shadow: none; transform: none;
  transition: color var(--dur-button-out) var(--ease-button), background-color var(--dur-button-out) var(--ease-button),
              border-color var(--dur-button-out) var(--ease-button);
}
.btn:hover, .btn:focus-visible, .surface--charcoal .btn:hover, .surface--charcoal .btn:focus-visible {
  box-shadow: none; transform: none; transition-duration: var(--dur-button-in);
}
.btn:active, .surface--charcoal .btn:active { box-shadow: none; transform: none; transition-duration: var(--dur-button-press); }
.btn--primary { border-color: transparent; }
.btn--primary:hover, .btn--primary:focus-visible { border-color: transparent; }
.btn--primary:active { background-color: var(--c-red-deep); color: var(--c-white); }
.btn--secondary:active { background-color: var(--c-charcoal-deep); border-color: var(--c-charcoal-deep); color: var(--c-white); }
.btn--inverse { border-color: transparent; }
.btn--inverse:active { background-color: var(--c-charcoal-deep); color: var(--c-white); }
.surface--charcoal .btn--primary:active, .site-footer a.btn--primary:active { background-color: var(--c-stone); color: var(--c-charcoal); }
.btn--outline-inverse, .site-footer a.btn--outline-inverse { border-color: var(--c-white); }
.btn--outline-inverse:active, .site-footer a.btn--outline-inverse:active { background-color: var(--c-stone); border-color: var(--c-stone); color: var(--c-charcoal); }
.carousel__key, .carousel__key:hover:not(:disabled), .carousel__key:focus-visible:not(:disabled),
.carousel__key:active:not(:disabled), .carousel__key:disabled { box-shadow: none; }
.carousel__key:active:not(:disabled) { background-color: var(--c-red-deep); }
.carousel__key:active:not(:disabled) svg { transform: none; }

/* Round 12.2: the hero body sets in two even lines at 1440 and never leaves a single word alone on a phone */
.hero--centred .hero__body { max-width: 72ch; text-wrap: balance; }
@supports not (text-wrap: balance) { .hero--centred .hero__body { max-width: 66ch; } }

/* ---------- Round 12.3: every button speaks like TALK TO US (Chris, Oct 9:
   "I like the bold text as the button") ----------
   The header button's label style on every button and size: Barlow
   Condensed 700 caps, 16px, nav tracking, line-height 1. Flat fills and
   outlines from 12.1 stay. Heights stay one per size (40 / 48 / 56). The
   arrows that already exist sit at the caps height (12px). Chips (filters,
   form options, Quick view) are not buttons and keep their own style. */
.btn, .btn--lg, .btn--md, .nav__cta, .menu-toggle {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav);
  letter-spacing: var(--track-nav); text-transform: uppercase; line-height: 1;
}
.btn--go svg { width: 12px; height: 12px; }

/* ---------- Round 12.4 (Chris, hero screenshot) ----------
   "Drop the red line here": the ground line under the machine is gone in
   every hero (the soft ground shadow stays, back at 0.72). "Give that
   text underneath a heavier weight": the hero body at Medium 500. */
.hero--centred .hero__render::before { content: none; display: none; }
.hero__body { font-weight: var(--w-medium); }

/* ?hero=big: "an alt where the hero text is way bigger". The H1 about 1.7x
   at 1440 (136px against 78), fluid down to 48px at 430 so a phone stays at
   three lines with "&" kept on line one (the non-breaking space). The
   machine is a little smaller and rises further, so the big type still
   overlaps it, and its yellow body still sits right of centre (the same
   mass offset formula). */
.hero-big .hero--centred .hero__title { font-size: clamp(48px, 9.45vw, 136px); max-width: none; }
.hero-big .hero--centred { --hero-render-w: min(880px, 61vw); --hero-rise: 0.3; }
.hero-big .hero--centred .hero__inner { padding-top: var(--s-12); }
@media (max-width: 640px) {
  .hero-big .hero--centred { --hero-render-w: 100vw; --hero-rise: 0.13; }
  .hero-big .hero--centred .hero__inner { padding-top: var(--s-8); }
}

/* ---------- Round 12.5 (Chris, on ?hero=big) ----------
   1. The H1 sits in front of the machine on a drop shadow, not a keyline:
      a close contact shadow, a mid one and a wide soft one, warm-dark
      (the brown-black of the card shadows), offset down. No outline.
      On ?hero=big, and on the default hero behind ?hero=shadow. */
.hero-big .hero--centred .hero__title,
.hero-shadow .hero--centred .hero__title {
  -webkit-text-stroke: 0; paint-order: normal;
  text-shadow: 0 1px 1px rgba(var(--shadow-rgb), 0.30), 0 4px 10px rgba(var(--shadow-rgb), 0.30), 0 16px 32px rgba(var(--shadow-rgb), 0.26);
}
/* 2. A more visible ground shadow: a denser contact under the tracks and
      a slightly wider soft spread. */
.hero--centred .hero__render::after {
  left: 32%; right: 2%; bottom: -3%; height: 9%;
  background: radial-gradient(closest-side, rgba(18, 20, 22, 0.44), rgba(18, 20, 22, 0.20) 55%, transparent);
  opacity: 0.9;
}
/* 3. More space in the hero (both heroes): 160 above the H1 (was 128),
      40 machine to paragraph (32), 40 paragraph to buttons (32), 96 below
      the hero (80). */
.hero--centred { --hero-pad-top: calc(var(--s-16) + var(--s-4)); --hero-render-gap: var(--s-5); padding-bottom: var(--s-12); }
.hero--centred .hero__inner { padding-top: var(--hero-pad-top); }
.hero--centred .hero__actions { margin-top: var(--s-5); }
.hero-big .hero--centred .hero__inner { padding-top: var(--hero-pad-top); }
@media (max-width: 640px) {
  .hero--centred { --hero-pad-top: var(--s-10); padding-bottom: var(--s-8); }
  .hero-big .hero--centred .hero__inner { padding-top: var(--hero-pad-top); }
  .hero--centred .hero__body { margin-top: var(--s-4); }
  .hero--centred .hero__actions { margin-top: var(--s-4); }
}
/* 4. "The buttons are too big, a little less padding": the large size steps
      down to the standard 48px with 24px sides, everywhere it is used. */
.btn--lg { min-height: var(--control-h); padding: 0 var(--s-3); }

/* ---------- Round 12.6: ?hero=weave (an experiment) ----------
   Three layers in one grid cell: the full render (back), the H1 with its
   12.5 drop shadow (middle), and the same render cut to the right-hand
   body (front). Both renders share the cell, width, margin and left
   offset, so they stay pixel-registered at every width. The front layer
   casts a soft shadow onto the letters. Phones fall back to the plain
   big hero (the weave crowds a 48px H1). */
.hero__render--front { display: none; }
@media (min-width: 641px) {
  .hero-weave .hero--centred .hero__render--front {
    display: block; z-index: 3;
    filter: drop-shadow(0 6px 10px rgba(var(--shadow-rgb), 0.32));
  }
  .hero-weave .hero--centred .hero__render--front::after { content: none; }
}

/* =====================================================================
   Round 13 (Oct 9): the landing page's standards applied to Home and
   every page (Chris: "The landing page has outpaced the home page. Take
   our standards from that and apply to the home page", then "apply all
   changes to Skreenquip"). Values copied from featured-2026-10 rounds 3
   and 4 (page.css, tokens.css), not imported.
   ===================================================================== */
/* ---------- 1. No decorative lines (Chris: "lose all the lines") ----------
   The round 11 red linework (frames, their full-bleed top and bottom lines,
   the carousel key dividers, the Our approach divider, the page-head line)
   is off by default and comes back with ?lines=1 (html.lines-on) for
   comparison only. Other decorative rules go too: the header's bottom rule,
   the ticker divider, the frames round product pictures, the gallery and
   the map, the card's inner dividers, the facts and steps rules. Rules
   that structure data stay: spec tables, the team roster, the link rows. */

html:not(.lines-on) .carousel__key--prev { border-right: 0; }
html:not(.lines-on) .carousel__key--next { border-left: 0; }
html:not(.lines-on) .approach__photo { border: 0; }
html:not(.lines-on) .page-head { border-bottom: 0; }
.masthead__main { border-bottom: 0; }
.ticker__fixed { border-right: 0; border-bottom: 0; }
.product__frame, .gallery, .map__frame-wrap { border: 0; }
.facts { border-top: 0; padding-top: 0; }
.steps { border-top: 0; }
.steps__item { border-bottom: 0; padding: var(--s-2) 0; }

/* ---------- 2. Colour bands, alternating, no lines ----------
   The landing's rhythm: the nav in warm slate #f0eee8 with a white title
   band under it (Home: the hero; inner pages: the page head), then the
   warm off-white page #fbf9f5 and the slate alternating section by
   section. Section classes keep their names: --white is now the page
   tone, --paper the slate. Charcoal, red Rentals and the graphite and
   ochre fields stay. */
body { background: var(--c-page); }
.masthead__main { background: var(--c-page-alt); }
.menu-toggle { background: transparent; }
.section--white { background: var(--c-page); }
.section--paper { background: var(--c-page-alt); }
.hero, .page-head { background: var(--c-white); }
@supports (paint-order: stroke fill) {
  .hero--centred .hero__title { -webkit-text-stroke-color: var(--c-white); }
}
.product { background: var(--c-page); }
.quote__card { background: var(--c-white); border-color: var(--c-card-edge); }

/* ---------- 3. Chips: superseded by the round 20 chip component (end of file) ---------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ---------- 4. Buttons as the landing ----------
   Already flat, TALK TO US labels, 1px outlines, 48px (rounds 12.1 to
   12.5). Round 13 takes the landing's press: the current colour darkens. */
.btn:active, .carousel__key:active:not(:disabled) { filter: var(--press-darken); }
.btn--primary:active { background-color: var(--c-red); }
.btn--secondary:active { background-color: var(--c-charcoal); border-color: var(--c-charcoal); }
.btn--inverse:active { background-color: var(--c-charcoal); }

/* ---------- 5. Machine cards (the landing grid card) ----------
   One target: the model link's ::after covers the card. A quiet "View"
   with the arrow; no underline; on card hover or focus it turns red and
   the arrow nudges. No Quick view pill, no spec row, no type line, no
   location row. The edge is the warm hairline #c9c4bb at rest and on
   hover (a charcoal edge vanishes on graphite), the soft shadow and 4px
   lift stay, keyboard focus rings the card in white on the fields. */

/* The price tag (landing round 4): a swing tag in solid brand red, the left
   end cut to a point, a punched eyelet that shows what is behind it (a
   mask), the price in the button face. 32px on cards, 40px on the unit
   page. White on #d0021b is 5.7:1. */
.price-tag {
  --tag-h: 32px; --tag-point: 12px; --tag-hole: 3px;
  display: inline-flex; align-items: center; min-height: var(--tag-h);
  padding: 0 var(--s-2) 0 calc(var(--tag-point) + var(--s-2));
  background: var(--c-red); color: var(--c-white);
  font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(var(--tag-point) 0, 100% 0, 100% 100%, var(--tag-point) 100%, 0 50%);
  -webkit-mask: radial-gradient(circle var(--tag-hole) at calc(var(--tag-point) + 1px) 50%, transparent 96%, #000 100%);
          mask: radial-gradient(circle var(--tag-hole) at calc(var(--tag-point) + 1px) 50%, transparent 96%, #000 100%);
}
.price-tag--lg { --tag-h: 40px; --tag-point: 16px; --tag-hole: 4px; font-size: 21.6px; }
@media (max-width: 640px) { .price-tag--lg { font-size: 19.8px; } }

/* Fields: flat, no mesh (the landing's graphite field). */

.carousel__key { background-color: var(--c-page-alt); }
.carousel__key:disabled { background-color: var(--c-page-alt); }

/* The quick view: the landing's 1px outline. */
.qv { border: var(--stroke); }
.qv__body .pills { margin-bottom: calc(-1 * var(--s-1)); }

/* ---------- 6. Callouts: the bare red check ----------
   White boxes with the 1px charcoal outline, 12px inside, 16px apart; the
   check is 20px with a 2px round stroke, centred on the title line. */
.highlights { display: grid; gap: var(--s-2); margin-top: var(--s-3); width: 100%; border-top: 0; }
.highlight {
  display: grid; grid-template-columns: var(--s-3) minmax(0, 1fr); column-gap: var(--s-2); align-items: start;
  padding: 12px var(--s-2) 12px 12px; background: var(--c-white); border: var(--stroke);
}
.highlights li.highlight { padding: 12px var(--s-2) 12px 12px; border: var(--stroke); font-size: inherit; }
.highlight__mark { width: 20px; height: 20px; color: var(--c-red); }
.highlight p { font-size: var(--fs-small); line-height: var(--lh-snug); }
.highlight strong { display: block; font-size: var(--fs-lead); font-weight: var(--w-semibold); line-height: var(--lh-head); margin-bottom: var(--s-half); }

/* ---------- 7. Specs as an accordion, closed by default ----------
   Native details and summary, so it works without JS. */
.product__info { display: flex; flex-direction: column; align-items: flex-start; }
.product__chips { gap: var(--s-1); }
.product__price { margin-top: var(--s-3); font-size: inherit; line-height: 1; }
.product__actions { width: 100%; }
.specs-acc { margin-top: var(--s-5); width: 100%; }
.specs-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--control-h);
  cursor: pointer; list-style: none; color: var(--c-muted);
}
.specs-acc__summary::-webkit-details-marker { display: none; }
.specs-acc__summary::marker { content: ""; }
.specs-acc__summary:hover { color: var(--c-charcoal); }
.specs-acc__chevron { width: var(--icon); height: var(--icon); flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
.specs-acc[open] > .specs-acc__summary .specs-acc__chevron { transform: rotate(180deg); }
.specs-acc__body { overflow: hidden; }
.specs__title { font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); }
.specs-acc .specs { margin-top: var(--s-1); width: 100%; }

/* ---------- 8. The final call to action: a floating red card ----------
   The landing's contact card on every page: solid brand red, no gradient
   or texture, square, the cards' soft shadow, in a normal band that
   alternates with the section above. The subtext at Medium 500, pure
   white, one step up. */
.cta-section { padding: var(--s-12) 0; background: var(--c-page); }
.cta-section--slate { background: var(--c-page-alt); }
.cta-band {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  color: var(--c-white); background: var(--c-red); border-radius: var(--radius);
  box-shadow: var(--shadow-card-raised); padding: var(--s-8);
}
.cta-band :focus-visible { outline: var(--focus-inverse); }
.cta-band__title { text-wrap: balance; font-family: var(--f-body); font-weight: var(--w-semibold); font-size: var(--fs-h2-xl); line-height: 1.08; letter-spacing: -0.02em; color: var(--c-white); }
.cta-band__lead { margin-top: var(--s-2); max-width: 44ch; color: var(--c-white); font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn--outline-inverse { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.cta-band .btn--outline-inverse:hover, .cta-band .btn--outline-inverse:focus-visible { background: var(--c-white); color: var(--c-red); border-color: var(--c-white); }
@media (min-width: 990px) {
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); }
  .cta-band__actions { flex: 0 0 auto; }
}
@media (max-width: 989px) { .cta-band { padding: var(--s-5); } }
@media (max-width: 640px) {
  .cta-section { padding: var(--s-8) 0; }
  .cta-band { padding: var(--s-4) var(--s-3); }
  .cta-band__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-1); }
  .cta-band .btn { white-space: normal; text-align: center; padding: 0 var(--s-2); }
}
/* the footer keeps the wordmark, links and legal */
.site-footer__top { display: block; }

/* Body text on red and on the dark surfaces at the heavier weight: Medium
   500 (on red, pure white). */
.surface--red p, .rentals__lead, .rentals__facts { font-weight: var(--w-medium); color: var(--c-white); }
.surface--charcoal .split__lead, .approach__text, .approach__stat-text, .bill__text,
.surface--charcoal .roster__role, .site-footer { font-weight: var(--w-medium); }

/* ---------- Reduced motion: colours may change, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .specs-acc__chevron { transition: none !important; }
}

/* =====================================================================
   Round 14 (2026-10-14): Home follows the landing page exactly where it
   can (Chris). Values copied, not imported, from featured-2026-10/dist
   (page.css and tokens.css as of Oct 14). The type scale is in tokens.css;
   this block pins what the tokens cannot reach. Every row and its reason:
   RECONCILE-r14.md.
   ===================================================================== */

/* ---------- 1. Buttons stay 16px (the landing pins every .btn to 16px; the
   round 12.3 rule read the nav size, which the 0.9 cut now shrinks) ---------- */
.btn, .btn--lg, .btn--md, .nav__cta, .menu-toggle { font-size: 16px; }

/* ---------- 2. Header: the landing's 16px gap and logo sizes ---------- */
.masthead__main-inner { gap: var(--s-2); }
@media (max-width: 1180px) { .masthead__logo .logo-svg { width: 216px; } }
@media (max-width: 640px) { .masthead__logo .logo-svg { width: 152px; } }
@media (max-width: 380px) { .masthead__logo .logo-svg { width: 120px; } }

/* ---------- 3. Hero: the landing's nameplate band and title ----------
   The white band 48 above and below (32 on phones). The H1 in the
   nameplate's type: Barlow 800 caps, line-height 0.86, no tracking, 16
   above and 8 below inside the title, sized to the content width exactly
   as the nameplate (width / 6.1 x 0.56, 22.4 to 121px; container units
   where supported, a vw sum as the fallback). The J12 render, its keyline
   and the ?hero= switches are unchanged. Body in the landing's lead
   style, 24 under the render; buttons 32 under the body, 16 apart, full
   width and stacked on phones (the landing's feature buttons). */
.hero--centred { padding-bottom: var(--s-6); --hero-pad-top: var(--s-6); --hero-render-gap: var(--s-3); }
.hero--centred .hero__inner { padding-top: var(--hero-pad-top); container-type: inline-size; }
.hero--centred .hero__title {
  max-width: none; padding: var(--s-2) 0 var(--s-1);
  line-height: 0.86; letter-spacing: 0;
  font-size: clamp(22.4px, calc(min(var(--page-max), 100vw - 2 * var(--gutter)) / var(--np-em) * var(--np-scale)), 121px);
}
@supports (width: 1cqi) {
  .hero--centred .hero__title { font-size: clamp(22.4px, calc(100cqi / var(--np-em) * var(--np-scale)), 121px); }
}
.hero__body, .hero--centred .hero__body { font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.hero--centred .hero__body { margin-top: var(--hero-render-gap); }
.hero--centred .hero__actions { margin-top: var(--s-4); gap: var(--s-2); }
@media (max-width: 640px) {
  .hero--centred { padding-bottom: var(--s-4); --hero-pad-top: var(--s-4); }
  .hero--centred .hero__body { margin-top: var(--s-3); }
  .hero--centred .hero__actions { margin-top: var(--s-4); width: 100%; }
  .hero--centred .hero__actions .btn { flex: 1 1 100%; }
}
/* ?hero=big keeps its own size and spacing (round 12.4) */
.hero-big .hero--centred .hero__title { font-size: clamp(48px, 9.45vw, 136px); line-height: var(--lh-tight); padding: 0; }

/* ---------- 4. Machine titles: the landing's sizes ---------- */

.product__model { font-size: var(--fs-ftitle); line-height: 0.9; }

/* ---------- 5. Sections and grids ---------- */

/* the landing grid: 4 columns from 1200, 3 to 900, 2 to 560, then 1 */

/* ---------- 6. CTA card: the landing's large buttons (56px, 32 sides) ---------- */
.cta-band .btn { min-height: var(--control-h-lg); padding: 0 var(--s-4); }
@media (max-width: 640px) { .cta-band .btn { padding: 0 var(--s-2); } }

/* ---------- 7. Footer: the landing's footer, with the site's links,
   address and legal line kept. 64 above, 32 below, one grid with 32
   between rows, the wordmark at 280px (200 at 760), General Sans 12.6px
   Regular in the soft warm grey, legal 12px. ---------- */
.site-footer { padding: var(--s-8) 0 var(--s-4); font-size: var(--fs-small); font-weight: var(--w-regular); color: var(--c-on-dark-soft); }
.site-footer__inner { display: grid; gap: var(--s-4); }
.site-footer__top { display: block; }
.site-footer__biglogo, .site-footer a.site-footer__biglogo { display: block; width: auto; max-width: none; flex: none; justify-self: start; }
.site-footer__biglogo .logo-svg { width: 280px; height: auto; }
.site-footer__row { margin-top: 0; }
.site-footer__legal { margin-top: 0; font-size: var(--fs-micro); }
@media (max-width: 760px) { .site-footer__biglogo .logo-svg { width: 200px; } }
@media (max-width: 640px) {
  .site-footer { padding-top: var(--s-8); }
  .site-footer__row { margin-top: 0; }
}

/* ---------- 8. Spec rows keep two columns on phones (the landing: 120px labels, 16 between) ---------- */
@media (max-width: 640px) { .specs__row { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-2); } }

/* =====================================================================
   Round 15 (2026-10-14): Home from Chris's own Figma edit ("Home – v4
   Chris' Edit", 111:1544, 1440 only). Every block below is Home only
   (h15- classes, .page-home, .card--landing, .roster--home, .h15-quote);
   inner pages are untouched. Tablet and phone follow the site's patterns:
   50/50 plates and the hero stack under 990 (image or render after the
   copy on the hero, before it on the plates), carousels swipe, the roster
   and the form go to one column. 8px grid throughout.
   ===================================================================== */
:root { --fs-h2-plate: clamp(28px, 2.57vw, 37px); --c-ticker: #fcc000; --c-section-dark: var(--c-charcoal); }

/* ---------- Header: white on Home (Chris's frame) ---------- */
/* r15.6: the Home header takes the hero's warm tone (see Round 15.6 below) */
.page-home .masthead__main { background: var(--c-page-alt); }

/* ---------- Shared type for the round 15 sections ---------- */
.h15-h2 {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h2-plate);
  line-height: 1.08; text-transform: uppercase; letter-spacing: 0; text-wrap: balance;
}
.h15-lead { font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.h15-small { font-size: var(--fs-small); font-weight: var(--w-regular); line-height: 1.5; color: var(--c-muted); max-width: 293px; }

/* ---------- Bands ---------- */
.h15-band { padding: var(--s-12) 0; }
.h15-band--dark { background: var(--c-section-dark); color: var(--c-white); }
.h15-band--page { background: var(--c-page); }
.h15-band--dark :focus-visible { outline: var(--focus-inverse); }
@media (max-width: 640px) { .h15-band { padding: var(--s-8) 0; } }

/* ---------- 1. Hero: H1 and buttons left, the J12 right ---------- */
.h15-hero { background: var(--c-white); padding: var(--s-12) 0; overflow: hidden; }  /* r15.6: warm, below */
@supports (overflow: clip) { .h15-hero { overflow: clip; } }
.h15-hero__inner {
  display: grid; grid-template-columns: minmax(0, 465fr) minmax(0, 795fr);
  align-items: center; column-gap: var(--s-2);
}
.h15-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.h15-hero__title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(48px, 6.25vw, 90px); line-height: 0.92; color: var(--c-charcoal);
}
.h15-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.h15-hero__machine { position: relative; justify-self: end; width: 100%; max-width: 780px; }
.h15-hero__machine::after {
  /* the ground shadow (Figma: a blurred #121416 ellipse at 20%, the render's width) */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2%; height: 6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18, 20, 22, 0.32), rgba(18, 20, 22, 0.12) 60%, transparent);
}
.h15-hero__picture { position: relative; z-index: 1; display: block; }
.h15-hero__picture > img { display: block; width: 100%; height: auto; }
@media (max-width: 989px) {
  .h15-hero { padding: var(--s-8) 0 var(--s-6); }
  .h15-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  /* stacked, the H1 keeps Chris's four lines: one size fits SPECIALISTS to the column */
  .h15-hero__title { font-size: min(19vw, 90px); }
  .h15-hero__machine { justify-self: center; }
}
@media (max-width: 640px) {
  .h15-hero { padding: var(--s-6) 0 var(--s-5); }
  .h15-hero__text { gap: var(--s-4); }
  .h15-hero__actions { width: 100%; flex-direction: column; gap: var(--s-2); }
  .h15-hero__actions .btn { width: 100%; }
}
/* Round 15.2 (Chris, Oct 14): "almost full screen with the ticker at the
   bottom". From 990 the header gains 8 top and 8 bottom (site wide, the
   header is shared), and header + hero + ticker fill the first screen.
   min-height only, so a short screen falls back to content height; capped
   at 1000 so tall screens stay sane. vh first, svh where supported. */
@media (min-width: 990px) {
  :root { --header-main-h: 88px; }
  .h15-hero {
    --h15-fill: calc(100vh - var(--header-main-h) - var(--s-8));
    display: grid; align-content: center;
    padding: var(--s-8) 0;
    min-height: min(var(--h15-fill), 1000px);
  }
  @supports (height: 100svh) {
    .h15-hero { --h15-fill: calc(100svh - var(--header-main-h) - var(--s-8)); }
  }
  /* Round 15.2b (Chris, Oct 14): the J12 much larger, the H1 smaller, the
     hero height unchanged. Text and render share one grid cell: the text
     keeps the content edge, the render sits right and behind it, bleeds to
     the viewport edge, and is sized by the hero's height (2000 x 1073) so
     it can never push the ticker down. */
  .h15-hero {
    --h15-h: min(var(--h15-fill), 1000px);
    --h15-t: clamp(40px, 4.45vw, 64px);  /* the H1 size */
    --h15-edge: max(var(--gutter), calc((100vw - var(--page-max)) / 2));  /* the content edge */
  }
  .h15-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero"; }
  .h15-hero__text, .h15-hero__machine { grid-area: hero; }
  .h15-hero__text { position: relative; z-index: 2; justify-self: start; }
  .h15-hero__title { font-size: var(--h15-t); max-width: 5em; }
  .h15-hero__machine {
    z-index: 1; justify-self: end; max-width: none;
    /* the smallest of: 76vw, 1160, what the hero's height allows, and what
       keeps its left edge (the conveyor head) clear of the H1's widest line
       (SPECIALISTS, about 4.65em) plus 16, so the render never sits under
       the headline or the buttons. */
    width: var(--h15-w);
    margin-right: calc((100% - 100vw) / 2 + var(--h15-shift));
    transform: translateY(calc(var(--h15-w) * -0.0322));
  }
  /* Round 15.3 (Chris, Oct 14: "the machine DIV overlaps the TEXT DIV ...
     No overlap you can see ... negative margin to scootch the machine
     further to the LEFT"). Same render size as 15.2; its box moves left by
     --h15-shift (the full content edge, so no bleed past the TALK TO US
     line; on very wide screens the edge less 24). The render rises 6% of
     its height and the text drops 14%, which tucks the headline under the
     conveyor arm: the box overlaps the text column, the artwork never does
     (QA: at least 24px of white between any opaque pixel and any letter or
     button, qa/hero_gap.py). The ground shadow sits under the tracks only
     (render x 48.5 to 89%, track bottom at 98% of its height), with a very
     faint one under the raised conveyor. */
  .h15-hero {
    --h15-w: min(76vw, 1160px, calc((var(--h15-h) - 2 * var(--s-8)) * 1.86),
                 calc(100vw - var(--h15-edge) - 4.65 * var(--h15-t) - var(--s-2)));
    --h15-shift: min(var(--h15-edge), max(128px, calc(var(--h15-edge) - var(--s-3))));
  }
  .h15-hero__text { transform: translateY(calc(var(--h15-w) * 0.0751)); }
  .h15-hero__machine::after {
    /* r15.8 (Chris, Oct 15): "a little more shadow under the machine" on the cream */
    left: 40%; right: 4%; top: 94%; bottom: auto; height: 9%;
    background: radial-gradient(closest-side, rgba(18, 20, 22, 0.40), rgba(18, 20, 22, 0.14) 60%, transparent);
  }
  .h15-hero__machine::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 22%; width: 24%; top: 96%; height: 4%;
    background: radial-gradient(closest-side, rgba(18, 20, 22, 0.035), transparent);
  }
}

/* ---------- 2. Ticker: yellow, red type, ochre dots, no logo ---------- */
.h15-ticker { background: var(--c-ticker); color: var(--c-red-deepest); min-height: var(--s-8); }
.h15-ticker .ticker__fixed {
  background: var(--c-ticker); gap: 0;
  padding: var(--s-1) var(--s-4) var(--s-1) max(var(--gutter), calc((100vw - var(--page-max)) / 2));
}
.h15-ticker .ticker__line { color: var(--c-red-deep); font-size: 16px; letter-spacing: var(--track-nav); }
.h15-ticker .ticker__name {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav); letter-spacing: var(--track-nav);
  text-transform: uppercase; color: var(--c-red-deepest);
}
.h15-ticker .ticker__dot { background: var(--c-field-ochre); margin: 0 var(--s-2); }
.h15-ticker .ticker__viewport { -webkit-mask-image: none; mask-image: none; }
.h15-ticker :focus-visible { outline: 3px solid var(--c-charcoal); outline-offset: 2px; }
@media (max-width: 800px) {
  .h15-ticker .ticker__fixed { padding: var(--s-1) var(--gutter); border-bottom: 0; }
}

/* ---------- 3. The 50/50 plate (Our approach, Parts & service) ----------
   Figma: a 605 x 390 photo, 96 between, a 397 copy column, the pair
   centred in the 1280 container. The copy column is vertically centred. */
.h15-plate {
  display: grid; grid-template-columns: minmax(0, 605fr) minmax(0, 397fr);
  column-gap: var(--s-12); align-items: center; max-width: 1098px; margin: 0 auto;
}
.h15-plate__media { aspect-ratio: 605 / 390; }
.h15-plate__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h15-plate__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.h15-plate__act { padding-top: var(--s-3); }
@media (max-width: 1199px) { .h15-plate { column-gap: var(--s-8); } }
@media (max-width: 989px) {
  .h15-plate { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); max-width: 640px; }
}
@media (max-width: 640px) {
  .h15-plate { row-gap: var(--s-4); }
  .h15-plate__act { width: 100%; padding-top: var(--s-2); }
  .h15-plate__act .btn { width: 100%; }
}

/* ---------- 4. Machine cards: the October landing card ---------- */

/* ---------- 5. Rentals: one centred column, then the photo ---------- */
.h15-rentals__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-10); }
.h15-rentals__copy { display: flex; flex-direction: column; align-items: center; max-width: 602px; text-align: center; }
.h15-rentals__title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(56px, 6.25vw, 90px); line-height: 0.86;
}
.h15-rentals__sub { margin-top: var(--s-3); }
.h15-rentals__lead { margin-top: var(--s-5); }
.h15-rentals__copy > .btn { margin-top: var(--s-5); }
.h15-rentals__media { width: 100%; max-width: 806px; aspect-ratio: 806 / 276; }
.h15-rentals__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
@media (max-width: 749px) {
  .h15-rentals__inner { gap: var(--s-6); }
  .h15-rentals__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .h15-rentals__lead, .h15-rentals__copy > .btn { margin-top: var(--s-4); }
  .h15-rentals__copy { align-self: stretch; }
  .h15-rentals__copy > .btn { width: 100%; }
}

/* ---------- 6. About us + Our Team ---------- */
.h15-about__inner { display: grid; grid-template-columns: minmax(0, 397px) minmax(0, 1fr); column-gap: var(--s-12); align-items: start; }
.h15-about__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.h15-about__team-title { color: var(--c-white); padding-bottom: var(--s-5); }
.roster--home { border-top: var(--line-w) solid var(--c-rule-on-dark); }
.roster--home .roster__row {
  grid-template-columns: var(--s-6) minmax(0, 1fr); column-gap: var(--s-2); row-gap: var(--s-half);
  padding: var(--s-2) 0; border-bottom: var(--line-w) solid var(--c-rule-on-dark);
}
.roster--home .roster__portrait { width: var(--s-6); height: var(--s-6); background: var(--c-steel-dark); }
.roster--home .roster__initial { font-size: 24px; color: var(--c-on-dark-soft); }
.roster--home .roster__name { font-size: 20px; line-height: 1; color: var(--c-white); }
.roster--home .roster__role { font-size: var(--fs-micro); font-weight: var(--w-medium); line-height: var(--lh-snug); color: var(--c-on-dark-soft); }
@media (max-width: 1199px) { .h15-about__inner { column-gap: var(--s-8); } }
@media (max-width: 989px) {
  .h15-about__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
  .h15-about__intro { max-width: 560px; }
}
@media (max-width: 640px) {
  .h15-about__inner { row-gap: var(--s-6); }
  .h15-about__intro .h15-plate__act { width: 100%; }
  .h15-about__intro .btn { width: 100%; }
  .h15-about__team-title { padding-bottom: var(--s-3); }
}

/* ---------- 7. Quote: the deep red band, white cards ----------
   Chris: "Maybe we make this the red section? Nice and deep?" The cards
   keep their own type colour and the standard (charcoal) focus ring. */
.h15-quote .quote__card { color: var(--c-charcoal); border-color: transparent; }
.h15-quote .quote__card :focus-visible { outline: var(--focus); }
.h15-quote .option input:focus-visible + span { outline: var(--focus); }
.h15-quote .field input:focus-visible, .h15-quote .field textarea:focus-visible { outline: var(--focus); outline-offset: 0; }
.h15-quote .quote__card p, .h15-quote .quote__card .quote__lead { color: var(--c-charcoal); }
.h15-quote .quote__lead { font-weight: var(--w-regular); }

/* Tablet: the landing card needs about 272px for its title and price row */
@media (min-width: 641px) and (max-width: 1100px) {
  .page-home .carousel__slide { flex-basis: max(calc((100% - 2 * var(--s-3)) / 2.3), 272px); }
}
/* Quote on Home: side by side from 990 (the site breakpoint), the map
   taking the spare height; stacked, the map is a 16:9 strip */
@media (min-width: 990px) {
  .h15-quote .quote { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .h15-quote .quote__map.map { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .h15-quote .map__frame-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}
@media (max-width: 989px) {
  .h15-quote .map__frame-wrap { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Round 15.1 (2026-10-14): Home used equipment is the October landing grid
   (featured-2026-10 page.css, "More used equipment"), not a carousel.
   Values copied from the landing: graphite flat field, 32px padding (16px
   at 640 and under), 24px gaps (16px at 560 and under), 4 / 3 / 2 / 1
   columns at >1200 / 901-1200 / 561-900 / 560 and under.
   The first four show; "See more" (JS only) opens the rest in place.
   ========================================================================== */

/* See more: collapsed hides the fifth card on; without JS nothing collapses. */

.h15-more__foot { display: flex; justify-content: center; margin-top: var(--s-4); }
.h15-more__foot[hidden] { display: none; }
@media (max-width: 640px) {
  .h15-more__foot { margin-top: var(--s-2); }
  .h15-more__foot .btn { width: 100%; }
}
@keyframes h15-reveal { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
/* The landing runs titles-full: card titles at 24px (its --fs-ctitle-full). */

/* ==========================================================================
   Round 15.2 (Chris, Oct 14): New equipment "styled more like the used
   equipment": the same grid, card, See more and graphite field as Used
   (r15.3, Chris: "make the background here black like the used section").
   New has no price, so the swing tag becomes the Get a Quote action.
   ========================================================================== */

/* The quote tag sits above the card's stretched link so it is its own target. */

/* ==========================================================================
   Round 15.3 (Chris, Oct 14: "CTA hover is broken on Skreenquip home page:
   fades to black on black background"). The shared hover turns a primary
   or inverse button charcoal, which vanishes on the Home charcoal bands and
   the graphite equipment fields. On those, hover follows the site's
   dark-surface rule (.surface--charcoal, the footer): primary goes white
   with a charcoal label; inverse (white at rest) goes brand red with a
   white label. The press still darkens a step (brightness 0.86).
   ========================================================================== */
.h15-band--dark .btn--primary:hover, .h15-band--dark .btn--primary:focus-visible {
  background-color: var(--c-white); color: var(--c-charcoal); border-color: var(--c-white);
}
.h15-band--dark .btn--primary:active { background-color: var(--c-stone); color: var(--c-charcoal); }
.h15-band--dark .btn--inverse:hover, .h15-band--dark .btn--inverse:focus-visible {
  background-color: var(--c-red); color: var(--c-white); border-color: var(--c-red);
}
.h15-band--dark .btn--inverse:active { background-color: var(--c-red); color: var(--c-white); }

/* Round 15.4: the NEW quick view (the used dialog without the unit rows). */
.qv__media.media--render, .qv__media.media--print { background: var(--c-stone); }
.qv__lead { font-size: var(--fs-small); line-height: var(--lh-snug); }
.qv__suited { font-size: var(--fs-small); line-height: var(--lh-snug); }
.qv__suited-label { display: block; color: var(--c-muted); }

/* ==========================================================================
   Round 15.5 (Chris, Oct 15): Our approach becomes a full-bleed crushed
   gravel texture (Pexels 5799727) with one centred charcoal card on top.
   The photo is saved ungraded; the grade is here: desaturated, then a
   charcoal overlay (a flat wash plus a soft vignette) so the texture reads
   as stone, never as a beach or a driveway, and the card always separates.
   No outlines, the site's square corners, the card shadow for dark grounds.
   Text measure 640 (card 768 with 64 sides). 8px grid throughout.
   ========================================================================== */
.h15-tex {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  padding: var(--s-12) 0;
  background-color: var(--c-charcoal);
}
@media (min-width: 990px) { .h15-tex { min-height: clamp(560px, 46vw, 720px); } }
.h15-tex__bg, .h15-tex__bg::after { position: absolute; inset: 0; z-index: -1; }
.h15-tex__bg picture, .h15-tex__bg img { display: block; width: 100%; height: 100%; }
.h15-tex__bg img { object-fit: cover; object-position: 50% 50%; filter: saturate(0.55); }
.h15-tex__bg::after {
  content: ""; z-index: 0;
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(18, 20, 22, 0) 0%, rgba(18, 20, 22, 0.40) 100%),
    linear-gradient(rgba(34, 34, 34, 0.50), rgba(34, 34, 34, 0.50));
}
.h15-tex__inner { width: 100%; display: flex; justify-content: center; }
.h15-tex__card {
  width: 100%; max-width: 768px; padding: var(--s-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  text-align: center; color: var(--c-white);
  background: var(--c-charcoal); border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), 0 16px 48px rgba(0, 0, 0, 0.48);
}
.h15-tex__card > * { max-width: 640px; }
.h15-kicker {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-size: var(--fs-label); font-weight: var(--w-semibold); line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-on-dark-soft);
}
/* the brand red as a 24 x 4 rule above the label (red text on charcoal is
   2.8:1, under AA; the rule is decoration, so red carries the brand there) */
.h15-kicker::before { content: ""; width: var(--s-3); height: var(--s-half); background: var(--c-red); }
.h15-tex .h15-kicker { margin-bottom: var(--s-1); }
.h15-tex__act { padding-top: var(--s-3); }
.h15-tex .btn { box-shadow: var(--shadow-raised-dark); }
@media (max-width: 989px) {
  .h15-tex { padding: var(--s-10) 0; }
  .h15-tex__card { padding: var(--s-6) var(--s-5); }
}
@media (max-width: 640px) {
  .h15-tex { padding: var(--s-8) 0; }
  .h15-tex__card { padding: var(--s-5) var(--s-3); }
  .h15-tex__act { width: 100%; padding-top: var(--s-2); }
  .h15-tex__act .btn { width: 100%; }
}

/* ==========================================================================
   Round 15.6 (2026-10-15)
   ========================================================================== */

/* ---------- Home hero: warm (Chris: "do the warm white") ----------
   The hero and the Home header are one surface in --c-page-alt (#f0eee8,
   the nav colour on every inner page), so there is no seam. Toward the
   bottom a very soft warm, darker "studio floor" (the ochre field token,
   #a86c00, at 0 to 8% over the lower half) for the J12's ground shadow.
   A plain overlay gradient, no color-mix, so every browser gets it. The
   header's shadow still appears only once the page scrolls. */
.h15-hero {
  background-color: var(--c-page-alt);
  background-image: linear-gradient(180deg, rgba(168, 108, 0, 0) 45%, rgba(168, 108, 0, 0.08) 100%);
}

/* ---------- Collection headers: H1 and chips, close to the nav ----------
   /used-equipment/, /new-equipment/ and the three categories: no
   breadcrumb, no lead (Chris, Oct 15). 48 above the H1 (32 on phones),
   24 to the chips, 48 to the cards. */
.page-head--collection .page-head__inner { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.page-head--collection .filters ul { margin-top: var(--s-3); }
.grid-section--collection { padding-top: var(--s-6); }
@media (max-width: 640px) {
  .page-head--collection .page-head__inner { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .grid-section--collection { padding-top: var(--s-4); }
}

/* ---------- Home New equipment: three labelled rows on one field ---------- */
.h15-rows { display: flex; flex-direction: column; gap: var(--s-6); }
.h15-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.h15-row__title { color: var(--c-white); }
.h15-row__all { color: var(--c-white); }
.h15-row__all:hover, .h15-row__all:focus-visible { color: var(--c-ticker); }
.h15-rows :focus-visible { outline-color: var(--c-white); }
@media (max-width: 640px) {
  .h15-rows { gap: var(--s-5); }
  .h15-row__head { margin-bottom: var(--s-2); }
}

/* ---------- Home Used: See more (the component's grid, collapsed) ---------- */
.machine-grid.is-collapsed > .machine-grid__item:nth-child(n + 5) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .machine-grid__item.is-revealed { animation: h15-reveal var(--dur-slow) ease-out both; }
}
.h15-more .machine-panel .btn--inverse:hover, .h15-more .machine-panel .btn--inverse:focus-visible {
  background-color: var(--c-red); color: var(--c-white); border-color: var(--c-red);
}
.h15-more .machine-panel .btn--inverse:active { background-color: var(--c-red); color: var(--c-white); }

/* ==========================================================================
   Round 15.8 (Chris, Oct 15): the textured section holds two cards, About
   (charcoal, unchanged) and the Anaconda dealer card in the ticker's
   Anaconda yellow (--c-ticker), charcoal type. Equal height and padding,
   content top-aligned, the two buttons bottom-aligned on one line.
   24 apart (16 stacked), 1088 wide in all, About first on phones.
   ========================================================================== */
.h15-tex__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
  width: 100%; max-width: 1088px; margin: 0 auto; align-items: stretch;
}
.h15-tex__cards .h15-tex__card { max-width: none; height: 100%; padding: var(--s-6); justify-content: flex-start; }
.h15-tex__cards .h15-tex__card > * { max-width: 456px; }
.h15-tex__cards .h15-tex__act { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.h15-tex__card--dealer { background: var(--c-ticker); color: var(--c-charcoal); }
.h15-dealer__logo { display: block; width: 200px; height: auto; margin-bottom: var(--s-1); }
@media (max-width: 989px) {
  .h15-tex__cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: var(--s-2); }
  .h15-tex__cards .h15-tex__card { padding: var(--s-6) var(--s-5); }
}
@media (max-width: 640px) {
  .h15-tex__cards .h15-tex__card { padding: var(--s-5) var(--s-3); }
  .h15-dealer__logo { width: 160px; }
  .h15-tex__cards .h15-tex__act { width: 100%; }
}
/* the dealer button: charcoal on yellow (white label 15.9:1), red on hover (5.67:1) */
.btn--dealer { background: var(--c-charcoal); color: var(--c-white); border-color: var(--c-charcoal); }
.h15-tex .btn--dealer:hover, .h15-tex .btn--dealer:focus-visible { background-color: var(--c-red-deep); border-color: var(--c-red-deep); color: var(--c-white); }
.h15-tex .btn--dealer:active { background-color: var(--c-red-deepest); border-color: var(--c-red-deepest); }
.h15-tex__card--dealer :focus-visible { outline: var(--focus); }
.h15-dealer__link {
  font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--c-charcoal);
  text-decoration: underline; text-decoration-thickness: var(--line-w); text-underline-offset: 3px;
}
.h15-dealer__link:hover { color: var(--c-red-deepest); }

/* ---------- Round 15.8 (Chris: "cards that are like metallic somehow or
   feel like they are riveted on"): equipment plates bolted to the rock.
   CSS only. About: gunmetal, faint brushed lines, top-to-bottom falloff.
   Anaconda: the yellow as painted steel, a whisper of the same. A 1px
   bevel, a drop shadow onto the rock, 3px cut corners, and four rivets
   (one pseudo-element, four radial-gradient domes, 20px in from each
   edge, clear of the 48 / 40 / 24 padding). Since round 16 these show
   only with ?plates=riveted; ?plates=off shows the flat r15.8 cards; without gradient support the cards keep their flat colours. ---------- */
html.plates-riveted .h15-tex__cards .h15-tex__card {
  position: relative; border-radius: 3px;
  background-color: #26282a;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.16) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.36), 0 16px 48px rgba(0, 0, 0, 0.5);
}
html.plates-riveted .h15-tex__cards .h15-tex__card--dealer {
  background-color: var(--c-ticker);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.05) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset -1px -1px 0 rgba(106, 76, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.36), 0 16px 48px rgba(0, 0, 0, 0.5);
}
html.plates-riveted .h15-tex__cards .h15-tex__card::after {
  /* each rivet: a round dome (closest-side, so it is a true circle) with a
     dark ring, plus a small highlight up and to the left */
  content: ""; position: absolute; inset: 20px; pointer-events: none;
  --rivet-hi: radial-gradient(circle closest-side at 40% 36%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 34%);
  --rivet: radial-gradient(circle closest-side, #a3a8ad 0, #7b8086 46%, #4a4e53 74%, #1d1f21 88%, rgba(0, 0, 0, 0) 100%);
  background:
    var(--rivet-hi) left top / 12px 12px no-repeat, var(--rivet) left top / 12px 12px no-repeat,
    var(--rivet-hi) right top / 12px 12px no-repeat, var(--rivet) right top / 12px 12px no-repeat,
    var(--rivet-hi) left bottom / 12px 12px no-repeat, var(--rivet) left bottom / 12px 12px no-repeat,
    var(--rivet-hi) right bottom / 12px 12px no-repeat, var(--rivet) right bottom / 12px 12px no-repeat;
}
html.plates-riveted .h15-tex__cards .h15-tex__card--dealer::after {
  /* painted over with the plate: yellow heads, a deeper ochre ring */
  --rivet: radial-gradient(circle closest-side, #ffd84f 0, #f2b800 46%, #c48f00 74%, #6e5000 88%, rgba(0, 0, 0, 0) 100%);
}
/* the kicker as etched type: a 1px dark shadow under the light letters */
html.plates-riveted .h15-tex__cards .h15-kicker { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85); }

/* ---------- Round 16 (Chris, Oct 17: "the details of these panels make
   the site feel a little cheap ... kind of 90's. I like the panels on rock
   texture though"). Direction B, the default: flat slabs in the two
   existing tokens (charcoal, Anaconda yellow), square corners, no rivets,
   no brushing, no bevel, no red dash. One deep soft shadow lifts each slab
   off the rock. Everything left-aligned, the button bottom-left, and a row
   of stamped-fact chips under it (the site's chip: chip--inverse on
   charcoal, the quiet chip on yellow). Groups: 16 inside (kicker or logo
   24 to the H2), 40 or more from the copy to the button, 32 from the
   button to the chips. ?plates=riveted and ?plates=off keep the r15.8
   looks, without the chips. ---------- */
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-tex__card {
  align-items: flex-start; text-align: left;
  position: relative; border-radius: 0; background-image: none; box-shadow: none;
}
/* the shadow sits on a layer behind both slabs (z-index -1 in the section's
   isolated stack, above the rock), so the yellow slab's shadow does not
   fall across the charcoal one */
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-tex__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.56);
}
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-tex__card--dealer { background-color: var(--c-ticker); }
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-kicker { align-items: flex-start; }
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-kicker::before { content: none; display: none; }
html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-tex__act { align-items: flex-start; padding-top: var(--s-3); }
/* Round 17 (Chris, Oct 17): the fact chip rows and their reserved two
   lines are gone; the buttons stay level through the act group's auto top
   margin in the equal-height slabs. */
@media (max-width: 640px) {
  html:not(.plates-off):not(.plates-riveted) .h15-tex__cards .h15-tex__act { align-items: stretch; }
}

/* Round 15.8: Home New rows on the cream: charcoal heads, AA links */
.machine-panel--new .h15-row__title { color: var(--c-charcoal); }
.machine-panel--new .h15-row__all { color: var(--c-charcoal); }
.machine-panel--new .h15-row__all:hover, .machine-panel--new .h15-row__all:focus-visible { color: var(--c-red-deep); }
.machine-panel--new.h15-rows :focus-visible { outline-color: var(--c-charcoal); }

/* =====================================================================
   Round 17 (2026-10-17)
   ===================================================================== */

/* ---------- New equipment dropdown (Chris chose this, Oct 17; ?menu=old
   shows the round 16 white dropdown). Desktop only: the phone menu stays
   the simple list. Items in the nav's condensed caps with a model count
   chip on the right; on hover or focus a short Skreenquip-yellow bar
   slides in at the left. ---------- */
.nav__sub-count { display: none; }
@media (min-width: 1181px) {
  html:not(.menu-old) .nav__sub { min-width: 272px; padding: var(--s-1); }
  html:not(.menu-old) .nav__sub-link {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: 12px var(--s-2);
    font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav); line-height: 1;
    text-transform: uppercase; letter-spacing: var(--track-nav);
    color: var(--c-charcoal);
    transition: background-color var(--dur-hover) var(--ease-soft);
  }
  html:not(.menu-old) .nav__sub-link:not(.nav__sub-link--all)::before {
    content: ""; position: absolute; left: 0; top: var(--s-1); bottom: var(--s-1); width: 4px;
    background: var(--c-yellow);
    transform: translateX(-100%);
    transition: transform var(--dur-fast) var(--ease-exit);
  }
  html:not(.menu-old) .nav__sub-link:not(.nav__sub-link--all):hover,
  html:not(.menu-old) .nav__sub-link:not(.nav__sub-link--all):focus-visible { background: var(--c-paper); color: var(--c-charcoal); }
  html:not(.menu-old) .nav__sub-link:not(.nav__sub-link--all):hover::before,
  html:not(.menu-old) .nav__sub-link:not(.nav__sub-link--all):focus-visible::before,
  html:not(.menu-old) .nav__sub-link[aria-current="page"]::before {
    transform: none; transition: transform var(--dur-base) var(--ease-out);
  }
  html:not(.menu-old) .nav__sub-link:focus-visible { outline-offset: -3px; }
  html:not(.menu-old) .nav__sub-count {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    min-height: var(--chip-h); padding: 0 var(--s-1); border-radius: var(--radius-chip);
    background: var(--c-chip-quiet); color: var(--c-charcoal);
    font-family: var(--f-display); font-weight: 700; font-size: var(--fs-chip); line-height: 1;
    letter-spacing: var(--track-nav); text-transform: uppercase; white-space: nowrap;
  }
  html:not(.menu-old) .nav__sub-all { margin-top: var(--s-1); }
  html:not(.menu-old) .nav__sub-link--all {
    display: inline-flex; justify-content: flex-start; gap: var(--s-1);
    color: var(--c-red);
  }
  html:not(.menu-old) .nav__sub-link--all:hover,
  html:not(.menu-old) .nav__sub-link--all:focus-visible { background: none; color: var(--c-charcoal); }
}
@media (min-width: 1181px) and (prefers-reduced-motion: reduce) {
  html:not(.menu-old) .nav__sub-link::before,
  html:not(.menu-old) .nav__sub-link:hover::before,
  html:not(.menu-old) .nav__sub-link:focus-visible::before { transition: none !important; }
}

/* ---------- Quick view (New and Used share it; Chris, Oct 17): no type
   chip; the title and its subtitle (or price) one tight group (8); 32 from
   that group to the buttons; 24 from "Or call" to the specs; the two
   buttons one step smaller (40 high, 16 side padding, 14.4px label), still
   the current flat style. The body's flex gap is 16, so the margins below
   add to or take from it. ---------- */
.qv__title + .qv__lead, .qv__title + .qv__price { margin-top: calc(var(--s-1) - var(--s-2)); }
.qv__body > .qv__actions { margin-top: var(--s-2); }
.qv__call + .specs--qv { margin-top: var(--s-1); }
.qv__actions .btn { min-height: var(--control-h-md); padding: 0 var(--s-2); font-size: var(--fs-nav); }

/* ---------- Header nav (Chris, Oct 17): the desktop nav links one small
   step larger, 14.4 to 16px (the tracking is in em, so it scales with
   them). Header height and alignment unchanged; the phone menu keeps its
   own size. ---------- */
@media (min-width: 1181px) {
  .nav__list > .nav__item > .nav__link { font-size: 16px; }
}

/* =====================================================================
   Round 18 (2026-10-17)
   ===================================================================== */

/* ---------- New equipment dropdown: the model count is plain text (Chris:
   the chips "feel AI"). No chip box: body face, sentence case, 13px,
   regular, muted (#5f5f5c: 7.0:1 on white, 6.4:1 on the paper hover),
   right-aligned on the category name's baseline. With the row on hover or
   focus it goes to the ink colour. ---------- */
@media (min-width: 1181px) {
  html:not(.menu-old) .nav__sub-link { align-items: baseline; }
  html:not(.menu-old) .nav__sub-count {
    display: inline; min-height: 0; padding: 0; border-radius: 0; background: none;
    margin-left: auto; text-align: right;
    font-family: var(--f-body); font-weight: var(--w-regular); font-size: 13px; line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    color: var(--c-muted);
    transition: color var(--dur-hover) var(--ease-soft);
  }
  html:not(.menu-old) .nav__sub-link:hover .nav__sub-count,
  html:not(.menu-old) .nav__sub-link:focus-visible .nav__sub-count { color: var(--c-charcoal); }
}

/* ---------- PUSH buttons (Chris approved the round 17 state sheet: "Roll
   it out!"). Solid variants only: primary red, dealer, inverse. The two
   outline styles stay flat (a base under a hollow face reads as a heavy
   underline). The face holds its colour in every state; hover sinks 2px
   onto a 2px base, pressed sinks the full 4px. Focus keeps the site's
   ring. The !important flags are scoped to these three variants: they
   retire the older per-context hover colour swaps (dark bands, footer,
   dealer slab, closing band) that would otherwise fight the push. ---------- */
.btn--primary { --face: var(--c-red); --text: var(--c-white); --basec: var(--c-red-deep); }
.btn--dealer { --face: var(--c-dealer-face); --text: var(--c-white); --basec: var(--c-dealer-base); }
.btn--inverse { --face: var(--c-white); --text: var(--c-red); --basec: var(--c-hairline); }
.btn--md, .qv__actions .btn { --push-h: var(--control-h-md); }
.cta-band .btn { --push-h: var(--control-h-lg); }
@media (max-width: 1180px) { .js .nav__cta { --push-h: var(--control-h); } }
.btn.btn--primary, .btn.btn--dealer, .btn.btn--inverse {
  min-height: calc(var(--push-h, var(--control-h)) - var(--push-base)) !important;
  margin-bottom: var(--push-base);
  background-color: var(--face) !important; color: var(--text) !important; border-color: transparent !important;
  box-shadow: 0 var(--push-base) 0 0 var(--basec) !important;
  filter: none !important;
  transform: translateY(0);
  transition: transform var(--dur-button-out) var(--ease-button), box-shadow var(--dur-button-out) var(--ease-button),
              filter var(--dur-button-out) var(--ease-button);
}
.btn.btn--primary:hover, .btn.btn--primary:focus-visible,
.btn.btn--dealer:hover, .btn.btn--dealer:focus-visible,
.btn.btn--inverse:hover, .btn.btn--inverse:focus-visible {
  transform: translateY(var(--push-hover)) !important;
  box-shadow: 0 calc(var(--push-base) - var(--push-hover)) 0 0 var(--basec) !important;
  transition-duration: var(--dur-button-in);
}
.btn.btn--primary:active, .btn.btn--dealer:active, .btn.btn--inverse:active {
  transform: translateY(var(--push-base)) !important;
  box-shadow: 0 0 0 0 var(--basec) !important;
  transition-duration: var(--dur-button-press);
}
.h15-tex__card--dealer .btn--dealer:focus-visible { outline: var(--focus); }

/* the price tag's push rules live at the end of machine-card.css (it loads after this file) */

/* Reduced motion: nothing moves. Hover and focus darken the face a step,
   a press two steps; the base stays at full depth. */
@media (prefers-reduced-motion: reduce) {
  .btn.btn--primary, .btn.btn--dealer, .btn.btn--inverse { transition: none !important; }
  .btn.btn--primary:hover, .btn.btn--primary:focus-visible, .btn.btn--primary:active,
  .btn.btn--dealer:hover, .btn.btn--dealer:focus-visible, .btn.btn--dealer:active,
  .btn.btn--inverse:hover, .btn.btn--inverse:focus-visible, .btn.btn--inverse:active {
    transform: none !important; box-shadow: 0 var(--push-base) 0 0 var(--basec) !important;
  }
  .btn.btn--primary:hover, .btn.btn--primary:focus-visible,
  .btn.btn--dealer:hover, .btn.btn--dealer:focus-visible,
  .btn.btn--inverse:hover, .btn.btn--inverse:focus-visible { filter: brightness(0.92) !important; }
  .btn.btn--primary:active, .btn.btn--dealer:active, .btn.btn--inverse:active { filter: brightness(0.84) !important; }
}

/* ---------- Quick view (New and Used share it; Chris, Oct 17, round 18):
   24 more above the title (it sat tight to the top edge); title to
   subtitle (or price) 16; subtitle to buttons 24. The spec table spans the
   full width under the photo and the title block (label 200, value the
   rest, 15px) so every value sits on one line at desktop sizes. "Suited
   to" is a small eyebrow heading, 32 below the table, 8 above its text.
   Phones keep the stacked layout. ---------- */
.qv__body { padding-top: var(--s-3); }
.qv__title + .qv__lead, .qv__title + .qv__price { margin-top: 0; }
.qv__body > .qv__actions { margin-top: var(--s-1); }
.qv__more { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; }
.qv__more .specs--qv { margin-top: 0; }
.qv__more .qv__note { margin-top: var(--s-2); }
.qv__suited { margin-top: var(--s-4); font-size: 15px; line-height: var(--lh-snug); }
.qv__suited .qv__suited-label {
  display: block; margin: 0 0 var(--s-1);
  font-family: var(--f-body); font-size: var(--fs-label); font-weight: var(--w-semibold); line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted);
}
.qv__suited p { margin: 0; font-size: 15px; font-weight: var(--w-regular); color: var(--c-charcoal); }
@media (min-width: 721px) {
  .qv__more .specs__row { grid-template-columns: 200px minmax(0, 1fr); font-size: 15px; }
}
@media (max-width: 720px) {
  .qv__body { padding-top: 0; }
}

/* ---------- Home hero (Chris approved the CD critique fixes, Oct 17,
   round 18). The H1 at 80px (1440), the render resized by the existing
   --h15-w formula. The group sits on one ground line: the track bottom and
   the buttons' bottom edge (the push base) both 64 above the hero's bottom
   edge, by layout (bottom-aligned in the shared cell), replacing the two
   fractional transforms. Leading 0.925 (74px at 80). The floor gradient
   starts at 60%, under the tracks. Both CTAs push at equal weight: Buy in
   red, Rent in the charcoal push, 56 tall, 18px labels, 32 side padding,
   16 apart. Phones: H1 min(18vw, 76px), the buttons side by side. ---------- */
.h15-hero { background-image: linear-gradient(180deg, rgba(168, 108, 0, 0) 60%, rgba(168, 108, 0, 0.08) 100%); }
.h15-hero__actions { gap: var(--s-2); }
.h15-hero__actions .btn { --push-h: var(--control-h-lg); padding: 0 var(--s-4); font-size: 18px; }
@media (min-width: 990px) {
  .h15-hero {
    --h15-t: clamp(40px, 5.5556vw, 80px);  /* 80 at 1440 (5.55vw gives 79.92) */
    align-content: end; padding-bottom: var(--s-8);
  }
  .h15-hero__inner { align-items: end; }
  .h15-hero__title { line-height: 0.925; }
  .h15-hero__text { transform: none; align-self: end; }
  /* the track bottom is at 99% of the render's height: drop the box by
     that last 1% so the tracks stand on the line */
  .h15-hero__machine { align-self: end; transform: translateY(calc(var(--h15-w) * 0.5365 * 0.01)); }
}
@media (max-width: 640px) {
  .h15-hero__title { font-size: min(18vw, 76px); line-height: 0.925; }
  .h15-hero__actions { flex-direction: row; flex-wrap: nowrap; }
  .h15-hero__actions .btn { width: auto; flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); }
}

/* ==========================================================================
   Round 19 (Chris, Oct 17, approved to try): Home Rentals becomes a
   full-bleed field photo band (Anaconda's C12R, brochure p2, full frame)
   with one charcoal slab in the rock band's Direction B style: flat, square,
   one soft lift shadow, everything left-aligned, the button bottom-left.
   Desktop: the slab sits bottom-left, over the ground in front of the
   loader, so the machine stays clear. 989 and under: the photo, then the
   slab lifted 64 over its bottom edge. 8px grid throughout.
   ========================================================================== */
.h15-rentals-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(640px, 52vw, 760px); padding: var(--s-8) 0;
}
.h15-rentals-band__bg { position: absolute; inset: 0; z-index: -1; background: var(--c-charcoal); }
.h15-rentals-band__bg picture, .h15-rentals-band__bg img { display: block; width: 100%; height: 100%; }
.h15-rentals-band__bg img { object-fit: cover; object-position: 50% 40%; }
.h15-rentals-band__inner { width: 100%; }
.h15-rentals-band__slab {
  max-width: 544px; padding: var(--s-6);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: var(--c-charcoal); color: var(--c-white); border-radius: 0;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.56);
}
.h15-rentals-band .h15-rentals__sub { margin-top: var(--s-2); }
.h15-rentals-band .h15-rentals__lead { margin-top: var(--s-3); }
.h15-rentals-band__act { padding-top: var(--s-5); }
.h15-rentals-band .btn { box-shadow: var(--shadow-raised-dark); }
@media (max-width: 989px) {
  .h15-rentals-band { display: block; min-height: 0; padding: 0 0 var(--s-8); background: var(--c-charcoal); }
  .h15-rentals-band__bg { position: relative; inset: auto; z-index: auto; aspect-ratio: 16 / 9; }
  @supports not (aspect-ratio: 1 / 1) { .h15-rentals-band__bg { height: 56.25vw; } }
  .h15-rentals-band__inner { position: relative; margin-top: calc(-1 * var(--s-8)); }
  .h15-rentals-band__slab { max-width: 640px; }
}
@media (max-width: 640px) {
  .h15-rentals-band__bg { aspect-ratio: 4 / 3; }
  @supports not (aspect-ratio: 1 / 1) { .h15-rentals-band__bg { height: 75vw; } }
  .h15-rentals-band__slab { padding: var(--s-5) var(--s-3); }
  .h15-rentals-band__act { width: 100%; padding-top: var(--s-4); }
  .h15-rentals-band__act .btn { width: 100%; }
}

/* ---------- Round 19 hero (Chris, Oct 17: "I don't like the machine
   touching the text at all ... the whole content block in the hero sits
   too low now. Bring it up into the center of the hero from top to
   bottom."). Desktop only: the H1 + buttons group is centred in the hero
   (header bottom to ticker top; the hero's padding is 64 top and bottom,
   so the content box shares its centre). The r18 ground-line alignment is
   dropped. The J12 keeps its tracks on its floor shadow at the bottom and
   moves right (--h15-shift, smaller = further right, 0 = its box's right
   edge on the viewport edge) until its visible pixels clear the text group
   by 40 or more (qa/hero_gap.py measures the alpha silhouette). Phones
   unchanged. ---------- */
@media (min-width: 990px) {
  .h15-hero { align-content: stretch; }
  .h15-hero__inner { align-items: stretch; }
  .h15-hero__text { align-self: center; }
  .h15-hero__machine { align-self: end; }
  /* The box's right edge on the viewport edge (shift 0: never cropped, the
     render has no transparent margin). Where that still leaves under 40,
     the render scales down by the minimum: the width formula's clearance
     term grows from 16 to 32 (56 under 1100, where the conveyor head comes
     closest to the buttons). r19 QA, chromium: 1440 972 to 956 wide (0.984). */
  .h15-hero {
    --h15-shift: 0px;
    --h15-clear: var(--s-4);
    --h15-w: min(76vw, 1160px, calc((var(--h15-h) - 2 * var(--s-8)) * 1.86),
                 calc(100vw - var(--h15-edge) - 4.65 * var(--h15-t) - var(--h15-clear)));
  }
}
@media (min-width: 990px) and (max-width: 1099px) {
  .h15-hero { --h15-clear: 56px; }
}

/* Round 19 (Chris approved the push nudge, Oct 17): the header Get a Quote
   face sat 2px above the nav items' centre line, because its 4px push base
   (margin-bottom) is part of the centred box. A matching 4px top margin
   centres the face itself. Desktop header only; push and sink unchanged. */
@media (min-width: 1181px) {
  .nav__cta.btn--primary { margin-top: var(--push-base); }
}

/* ---------- Round 19 (Chris, Oct 17, reviewing /used-equipment/): the
   contact section (form card + consult card) sits on the graphite field
   (--c-field-graphite #33312e) for contrast, on every page that has it
   except Home, which keeps its approved deep red. The cards keep their
   styles; the frame goes (as on Home's dark field) and the shadow becomes
   the round 16 slab lift. No text sits on the field itself. ---------- */
/* Round 19.1 (Chris, Oct 17): graphite read wrong above the dark rock band.
   The field is now Home's own deep red (the same surface classes on the
   section: surface surface--red surface--red-deep, set in the templates),
   no graphite. The cards keep their own type colour and the charcoal focus
   ring, exactly as Home's .h15-quote cards do (Home's layout rules are not
   borrowed). */
.quote-field .quote__card { color: var(--c-charcoal); }
.quote-field .quote__card :focus-visible { outline: var(--focus); }
.quote-field .option input:focus-visible + span { outline: var(--focus); }
.quote-field .field input:focus-visible, .quote-field .field textarea:focus-visible { outline: var(--focus); outline-offset: 0; }
.quote-field .quote__card p, .quote-field .quote__card .quote__lead { color: var(--c-charcoal); font-weight: var(--w-regular); }
.quote-field .quote__card { border-color: transparent; box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.56); }

/* ---------- Round 19: the closing band on rock. The section shows the
   Home About band's rock-face texture with the same grade (desaturated,
   charcoal wash, vignette); the red card becomes a slab like the About
   and Anaconda slabs: square, one soft lift shadow. ---------- */
.cta-section--rock { position: relative; isolation: isolate; overflow: hidden; background-color: var(--c-charcoal); }
.cta-section__bg, .cta-section__bg::after { position: absolute; inset: 0; z-index: -1; }
.cta-section__bg picture, .cta-section__bg img { display: block; width: 100%; height: 100%; }
.cta-section__bg img { object-fit: cover; object-position: 50% 50%; filter: saturate(0.55); }
.cta-section__bg::after {
  content: ""; z-index: 0;
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(18, 20, 22, 0) 0%, rgba(18, 20, 22, 0.40) 100%),
    linear-gradient(rgba(34, 34, 34, 0.50), rgba(34, 34, 34, 0.50));
}
.cta-section--rock .cta-band { border-radius: 0; box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.56); }

/* Round 19 (Chris, Oct 17): every text link that ends in an arrow nudges it
   exactly as the action buttons do (.btn--go above: --nudge, out on
   --dur-button-out, in on --dur-button-in, --ease-button), on hover and on
   keyboard focus. One shared rule: text-arrow links (Ask about renting it,
   Rentals, Parts and service, Ask about the engine, Get a quote, the
   brochure links, Open in Google Maps), the Rentals category rows, the
   machine page works-with links, the dropdown's View All New Equipment, and
   the proof card's "Read it" line (on card hover or focus). */
.text-arrow svg, .link-row svg, .mp-works__link svg, .nav__sub-link--all svg, .mp-proof__go svg {
  transition: transform var(--dur-button-out) var(--ease-button) !important;
}
.text-arrow:hover svg, .text-arrow:focus-visible svg,
.link-row:hover svg, .link-row:focus-visible svg,
.mp-works__link:hover svg, .mp-works__link:focus-visible svg,
.nav__sub-link--all:hover svg, .nav__sub-link--all:focus-visible svg,
.mp-proof__card:hover .mp-proof__go svg, .mp-proof__card:focus-visible .mp-proof__go svg {
  transform: translateX(var(--nudge));
  transition: transform var(--dur-button-in) var(--ease-button) !important;
}
@media (prefers-reduced-motion: reduce) {
  .text-arrow svg, .link-row svg, .mp-works__link svg, .nav__sub-link--all svg, .mp-proof__go svg { transform: none !important; }
}

/* ==========================================================================
   Round 19.1 (2026-10-17)
   ========================================================================== */

/* Show More sits on the left edge of the grid (Chris), desktop and phone.
   The spacing above is unchanged. */
.h15-more__foot { justify-content: flex-start; }

/* Ticker. The track carried its own 32px start inset (16 under 800) as
   padding, so translateX(-50%) moved one set plus half that inset and the
   loop jumped 16px (8) at the wrap. The inset moves to the viewport, so the
   track is exactly two sets and -50% lands on the same spot. With no mask
   (round 15) the viewport's left edge was a hard cut, so any frame taken
   after the crawl started showed the first item's J sliced off ("12 JAW
   CRUSHER"). A 16px fade inside the 32px inset lets names leave softly; at
   rest every name starts clear of it. */
.ticker__track { padding-left: 0; }
.h15-ticker .ticker__viewport {
  padding-left: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-2));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-2));
}
@media (max-width: 800px) {
  .h15-ticker .ticker__viewport { padding-left: var(--gutter); }
}

/* ==========================================================================
   Round 19.2 (2026-10-17)
   ========================================================================== */

/* Chris: "Let's make the 'Didn't find what you're looking for' module the
   SAME red gradient treatment as the section above it." On Used, About,
   Contact, Parts and Service and Rentals the contact section and the closing
   band now sit inside one wrapper (.red-close) carrying Home's deep red
   surface classes, so one gradient and one texture span both: no restart,
   no seam. The two sections inside go transparent. The closing module loses
   its slab (no fill, no shadow, no box padding at the sides, so its text
   lines up with the card edges above); content, layout and buttons stay.
   Pages without a contact section keep the red slab on rock. */
.red-close > .quote-field { background: none; }
.red-close > .quote-field::before { content: none; }
.red-close > .quote-field { padding-bottom: 0; }
.cta-section--on-red { background: none; padding: var(--s-8) 0 var(--s-12); }
.cta-section--on-red .cta-band { background: none; box-shadow: none; border-radius: 0; padding: 0; }
@media (max-width: 640px) {
  .cta-section--on-red { padding: var(--s-6) 0 var(--s-8); }
}

/* Round 19.2 (Chris): one gap between stacked equipment groups, everywhere
   they stack (Home New rows, /new-equipment/). Was 48 / 40 on Home (too
   little) and 144 / 96 on /new-equipment/ (too much), measured from the end
   of a group (its last card row or Show More) to the next group heading.
   Now 96 at desktop and 64 at 640 and under, from one token. Heading to its
   own cards is unchanged (tight: the heading belongs to its row). */
:root { --group-gap: var(--s-12); }
@media (max-width: 640px) { :root { --group-gap: var(--s-8); } }
.h15-rows { gap: var(--group-gap); }
.grid-section--group-more { padding-bottom: 0; }
.grid-section--group-more + .grid-section--group { padding-top: var(--group-gap); }

/* =====================================================================
   Round 20 (2026-10-17)
   ===================================================================== */

/* ---------- ONE chip, site-wide (Chris: "whatever chip style you use for
   the new equipment section and details pages gets pushed to all other
   sections on the site"). A stamped tag, not a pill: square corners, no
   fill, a 1px rule in the text colour at 35%, 12px caps tracked 0.08em,
   weight 600, 4 by 8 inside, 16 line: 24px high. The rule is an inset
   shadow so the chip stays 24px on the 8 grid. On a dark ground the same,
   in white. Controls (the filters, the form's "I want to") are the same
   chip: the rule goes to 100% on hover, the selected one is filled
   charcoal with white text, focus shows the site ring. Every chip on the
   site uses these rules and no others: .chip (labels: the machine page's
   Anaconda tag, Where it fits, used unit type/year/hours, used cards'
   year/hours, the quick view make chip, the Rentals promise), .stock li
   (Parts: stocked items), .filter (New and Used collection filters) and
   .option span (the contact form's "I want to"). ---------- */
:root {
  --chip-ink: var(--c-charcoal);
  --chip-rule: rgba(34, 34, 34, 0.35);
  --chip-rule-hover: rgba(34, 34, 34, 1);
}
.surface--charcoal, .surface--red, .chip--inverse, .on-dark {
  --chip-ink: var(--c-white);
  --chip-rule: rgba(255, 255, 255, 0.35);
  --chip-rule-hover: rgba(255, 255, 255, 1);
}
.quote__card, .machine-card, .qv { --chip-ink: var(--c-charcoal); --chip-rule: rgba(34, 34, 34, 0.35); --chip-rule-hover: rgba(34, 34, 34, 1); }
.chip, .stock li, .stock--lg li, .filter, .option span {
  display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px;
  border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--chip-rule);
  font-family: var(--f-body); font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--chip-ink); text-decoration: none;
}
.chip { pointer-events: none; }
/* controls: the same tag; a larger hit area without a larger tag */
.filter { position: relative; cursor: pointer; }
.filter::after { content: ""; position: absolute; inset: -8px -4px; }
.filter:hover, .option:hover span { box-shadow: inset 0 0 0 1px var(--chip-rule-hover); background: transparent; }
.filter.is-active, .filter.is-active:hover, .filter[aria-pressed="true"], .option input:checked + span {
  background: #222; color: var(--c-white); box-shadow: inset 0 0 0 1px #222;
}
.filter:focus-visible, .option input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.surface--charcoal .filter:focus-visible, .surface--red .filter:focus-visible { outline: var(--focus-inverse); }
@media (prefers-reduced-motion: reduce) { .filter, .option span { transition: none; } }

/* ---------- Home Rentals band, round 20 (Chris chose photo 03): the
   Fraser River canyon at sunset. Layout and slab unchanged. Desktop and
   tablet: focal point 50% x 62% y (more canyon, less sky). Phones (640 and
   under): a square photo, cut at the sides with the full height kept, so
   the river bends and the terraces sit above the slab's 64 overlap. */
.h15-rentals-band__bg img { object-position: 50% 62%; }
@media (max-width: 640px) {
  .h15-rentals-band__bg { aspect-ratio: 1 / 1; }
  @supports not (aspect-ratio: 1 / 1) { .h15-rentals-band__bg { height: 100vw; } }
  .h15-rentals-band__bg img { object-position: 58% 50%; }
}

/* ---------- Home Parts & Service, round 20 (Chris): the Rentals photo band
   mirrored. Same band, slab, padding, shadow and type; the slab sits
   bottom-RIGHT. The note line goes light on the charcoal slab (white at
   72%, 8.8:1 on #222). Desktop focal point: the hillside's foot, so the
   ridge and trees read at the left and the even slope sits under the slab.
   Phones: the same stack as Rentals (photo, then the slab lifted over it). */
.h15-rentals-band--right .h15-rentals-band__slab { margin-left: auto; }
.h15-rentals-band--right .h15-rentals-band__bg img { object-position: 30% 100%; }
.h15-rentals-band__note { margin-top: var(--s-2); max-width: none; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 989px) {
  .h15-rentals-band--right .h15-rentals-band__slab { margin-left: 0; }
}
@media (max-width: 640px) {
  .h15-rentals-band--right .h15-rentals-band__bg img { object-position: 30% 50%; }
}

/* ---------- Footer, round 20 (Chris): the header and hero colour scheme.
   Cream ground (--c-page-alt, the header's), the red wordmark as in the
   header, ink links and text, muted small print (the address, the legal
   line, Privacy), hover red as in the header nav. Layout and content
   unchanged. AA: ink #222 on #f0eee8 13.7:1; muted #5f5f5c on #f0eee8
   5.5:1; logo red #cd0e1b on #f0eee8 4.9:1. Every page ends on the red
   contact zone or the rock closing band above the footer, so the edge is
   clear and no rule is added. ---------- */
.site-footer { background: var(--c-page-alt); background-image: none; color: var(--c-charcoal); }
.site-footer a { color: var(--c-charcoal); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--c-red); }
.site-footer :focus-visible { outline: var(--focus); }
.site-footer__biglogo, .site-footer a.site-footer__biglogo, .site-footer a.site-footer__biglogo:hover { color: var(--c-logo-red); }
.site-footer__contact span, .site-footer__legal, .site-footer__legal p, .site-footer__legal a { color: var(--c-muted); }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--c-red); }

/* ==========================================================================
   Round 21 hero (Chris's Figma direction, 121:1582 in ETWMZaIzYbwgd3AbyKfeEh,
   frames 1440 / 1024 / 768 / 430). One column at every width: the J12, the
   headline under it, the buttons under that. Centred from 1024 up, left
   aligned below (one switch, at 1024). New class names (h21-) so none of
   the r15 to r19 hero layers apply. Kept from the r18/r19 hero: the warm
   cream ground and studio floor, the J12 render and its floor shadow, the
   push buttons (56 tall, 18px labels, 32 side padding, 16 apart).
   Pattern's approved tweaks: the desktop headline two steps up (Chris's
   frame 43.6, here 56 at 1440 and 48 at 1024, still one line); on phones
   the buttons sit below the headline, full width, side by side.
   ========================================================================== */
.h21-hero {
  position: relative; overflow: hidden;
  background-color: var(--c-page-alt);
  background-image: linear-gradient(180deg, rgba(168, 108, 0, 0) 60%, rgba(168, 108, 0, 0.08) 100%);
  padding: var(--s-4) 0 var(--s-6);
}
@supports (overflow: clip) { .h21-hero { overflow: clip; } }
.h21-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.h21-hero__machine { position: relative; flex: none; }
.h21-hero__machine::after {
  /* the floor shadow under the tracks (Figma: x 40 to 96%, top 94%, 9% high) */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 40%; right: 4%; top: 94%; height: 9%;
  background: radial-gradient(closest-side, rgba(18, 20, 22, 0.40), rgba(18, 20, 22, 0.14) 60%, transparent);
}
.h21-hero__machine::before {
  /* the faint conveyor shadow (Figma: x 22 to 46%, top 96%) */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 22%; width: 24%; top: 96%; height: 4%;
  background: radial-gradient(closest-side, rgba(18, 20, 22, 0.035), transparent);
}
.h21-hero__picture { position: relative; z-index: 1; display: block; }
.h21-hero__picture > img { display: block; width: 100%; height: auto; }
.h21-hero__title {
  position: relative; z-index: 2;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  line-height: 0.92; color: var(--c-charcoal);
}
.h21-hero__actions { position: relative; z-index: 2; display: flex; gap: var(--s-2); }
.h21-hero__actions .btn { --push-h: var(--control-h-lg); padding: 0 var(--s-4); font-size: 18px; }

/* Phones, 640 and under (Chris's 430 frame): the render 113% of the
   viewport, 20 from the left edge, bleeding off the right. The headline
   on four lines (his 42 at 430), then both buttons full width, side by side. */
@media (max-width: 640px) {
  .h21-hero { padding: var(--s-2) 0 var(--s-5); }
  .h21-hero__machine { width: 113.3vw; margin-left: calc(4.65vw - var(--gutter)); }
  .h21-hero__title { margin-top: var(--s-5); font-size: clamp(32px, 9.84vw, 56px); max-width: 5.2em; }
  .h21-hero__actions { width: 100%; margin-top: var(--s-4); }
  .h21-hero__actions .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); }
}
/* Tablet portrait, 641 to 1023 (Chris's 768 frame): the render 105% of the
   viewport, bleeding right; the headline tucks up beside the tracks, under
   the conveyor, left aligned, as in his frame, held at least 40 clear of
   the artwork (qa/hero21_gap.py measures the alpha silhouette). */
@media (min-width: 641px) and (max-width: 1023px) {
  .h21-hero { padding: var(--s-2) 0 var(--s-8); }
  .h21-hero__machine { width: 105vw; margin-left: calc(8.07vw - var(--gutter)); }
  .h21-hero__title { margin-top: calc(-13.5vw + max(0px, (768px - 100vw) * 0.075)); font-size: 7.6vw; max-width: 5.2em; }
  .h21-hero__actions { margin-top: var(--s-5); }
}
/* 1024 and up (Chris's 1440 and 1024 frames): everything centred. The
   header, hero and ticker still fill the first screen (min-height only):
   the render takes 60.4% of the viewport (his 870 at 1440), capped at 960
   and by what the screen's height allows, never under 560. */
@media (min-width: 1024px) {
  .h21-hero {
    --h21-fill: calc(100vh - var(--header-main-h) - var(--s-8));
    display: grid; align-content: center;
    min-height: min(var(--h21-fill), 1000px);
    padding: var(--s-6) 0;
  }
  @supports (height: 100svh) { .h21-hero { --h21-fill: calc(100svh - var(--header-main-h) - var(--s-8)); } }
  .h21-hero__inner { align-items: center; text-align: center; }
  .h21-hero__machine { width: clamp(560px, min(60.4vw, calc((min(var(--h21-fill), 1000px) - 296px) * 1.864)), 960px); }
  .h21-hero__title {
    margin-top: var(--s-6); white-space: nowrap;
    font-size: clamp(40px, calc((100vw - 2 * var(--gutter)) / 19.5), 56px);
  }
  .h21-hero__actions { margin-top: var(--s-4); justify-content: center; }
}

/* ==========================================================================
   Round 21 (Chris, Oct 17): the contact zone moves from the deep red
   gradient onto the rock face of Home section 2. One wrapper (.rock-zone)
   carries the same picture and the same grade (.h15-tex__bg: saturation
   0.55, a 50% charcoal wash, the vignette) behind the contact section and,
   where there is one, the closing module: one continuous field, no seam.
   Home, Used, About, Parts & Service, Rentals and Contact. The sections
   inside go transparent and lose the red grain. The white cards keep their
   styles and the slab lift; the closing module stays unboxed (round 19.2).
   Machine pages keep their red slab on rock (unchanged).
   ========================================================================== */
.rock-zone { position: relative; isolation: isolate; overflow: hidden; background-color: var(--c-charcoal); background-image: none; }
.rock-zone::before, .rock-zone > .surface::before { content: none; }
.rock-zone > .surface { background: none; }
.rock-zone :focus-visible { outline: var(--focus-inverse); }
.rock-zone .quote__card :focus-visible { outline: var(--focus); }
.rock-zone .h15-quote .quote__card, .rock-zone .quote-field .quote__card { box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.56); }

/* ==========================================================================
   Round 21: About (Chris, Oct 17)
   ========================================================================== */
/* 1. Hero. The field (below) is the round 24 red; what sits on it is the
   round 33 50/50 (Bill's card and the charcoal card), at the end of this
   file. */
/* Round 24 (Chris: "a little more dynamic"): the field is the contact
   zones' deep red gradient (--grad-red-deep, as surface surface--red
   surface--red-deep) with the same grain. ?aboutbg= tries other fields:
   rock (the site's rock face and grade, as Home section 2), newsprint
   (graphite with a tone on tone dot screen, build.py write_about_bg_tiles),
   steel (dark brushed graphite plate) and yellow (= ?bill=yellow). The h1
   is white on every dark field (charcoal on yellow). */
.about-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--c-red-deep); background-image: var(--grad-red-deep); color: var(--c-white);
}
/* Red is the field (Chris, Oct 17: rock tried, "I like the red background
   behind Bill more"); ?aboutbg=rock, newsprint, steel, yellow stay as options */
html.aboutbg-rock:not(.bill-yellow) .about-hero { background-color: var(--c-charcoal); background-image: none; }
.about-hero::before, .about-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html:not(.aboutbg-rock) .about-hero::before {
  background-image: var(--texture); background-size: var(--texture-size) var(--texture-size);
  opacity: var(--texture-opacity); mix-blend-mode: soft-light;
}
html:not(.aboutbg-rock):not(.aboutbg-steel) .about-hero::after { content: none; }
html.bill-yellow .about-hero { background-color: var(--c-yellow); background-image: none; }
html.bill-yellow .about-hero::before { content: none; }
html.aboutbg-newsprint:not(.bill-yellow) .about-hero {
  background-color: #33312e;
  background-image: url("/static/img/about/about-bg-newsprint-480.png");
  background-image: image-set(url("/static/img/about/about-bg-newsprint-480.webp") type("image/webp"), url("/static/img/about/about-bg-newsprint-480.png") type("image/png"));
  background-size: 240px 240px;
}
html.aboutbg-steel:not(.bill-yellow) .about-hero {
  background-color: #3a3b3d;
  background-image: url("/static/img/about/about-bg-steel-512.png");
  background-image: image-set(url("/static/img/about/about-bg-steel-512.webp") type("image/webp"), url("/static/img/about/about-bg-steel-512.png") type("image/png"));
  background-size: 512px 512px;
}
/* a soft diagonal sheen across the plate */
html.aboutbg-steel:not(.bill-yellow) .about-hero::after {
  content: "";
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24));
}
/* the rock face: the same file the contact zone below loads (1920), the
   same grade (saturation 0.55, charcoal wash, vignette) */
html.aboutbg-rock:not(.bill-yellow) .about-hero::before {
  opacity: 1; mix-blend-mode: normal; filter: saturate(0.55);
  background: var(--c-charcoal) url("/static/img/site/texture-rock-face-1920.jpg") 50% 50% / cover no-repeat;
  background-image: image-set(url("/static/img/site/texture-rock-face-1920.avif") type("image/avif"), url("/static/img/site/texture-rock-face-1920.webp") type("image/webp"), url("/static/img/site/texture-rock-face-1920.jpg") type("image/jpeg"));
}
html.aboutbg-rock:not(.bill-yellow) .about-hero::after {
  content: "";
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(18, 20, 22, 0) 0%, rgba(18, 20, 22, 0.40) 100%),
    linear-gradient(rgba(34, 34, 34, 0.50), rgba(34, 34, 34, 0.50));
}
.about-hero :focus-visible { outline: var(--focus-inverse); }
/* Round 26 (Chris, Oct 17: "I hate the outline, remove it"): the MENU
   button loses its box on every state; the icon and label stay where they
   were. No background, no border, no shadow. The tap target grows to 48
   tall (invisible now, so the bar is not taller); the site's focus ring
   (:focus-visible, 3px charcoal, 3 offset) still marks it for keyboards. */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle[aria-expanded="true"] { border: 0; background: transparent; box-shadow: none; }
.menu-toggle { min-height: var(--control-h); min-width: 48px; }

/* 3. Our Team: the heading and Chris's line at the left (4 of 12), a grid
   of 2:3 portraits at the right, name and title only. Round 24 (Chris):
   the portraits at half the r23 width, six across in one row from 641
   (16 apart), two on phones. A missing portrait is a stone tile with the
   initial (the "Photo to come" flag was removed in round 45c). */
.ab-team__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); align-items: start; }
.ab-team__lead { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 40ch; }
.team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
.team-grid__photo { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--c-stone); }
@supports not (aspect-ratio: 1 / 1) { .team-grid__photo { height: 0; padding-bottom: 150%; } }
.team-grid__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-grid__photo--none { display: flex; align-items: center; justify-content: center; }
.team-grid__initial { font-family: var(--f-display); font-weight: 800; font-size: 96px; line-height: 1; color: var(--c-muted); }
.team-grid__name {
  margin-top: var(--s-2); font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign);
  line-height: 1; text-transform: uppercase; color: var(--c-charcoal);
}
.team-grid__title { margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-muted); }
/* Round 24: the half-size About tiles (scoped to the grid; the Rentals
   contact reuses these classes at its own size) */
.team-grid .team-grid__initial { font-size: 48px; }
/* Round 45c (Chris): no "Photo to come" flag on any placeholder tile; the initial alone */
.team-grid .team-grid__name { font-size: 20px; }
@media (max-width: 989px) {
  .ab-team__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
}
@media (max-width: 640px) {
  /* Oct 17 (Chris): three across on phones, at the desktop tile type sizes */
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
}

/* 4. The Anaconda slab alone on the rock face: one slab, the same width it
   has on Home (half of 1088 less the gap), centred. */
.h15-tex__cards--one { grid-template-columns: minmax(0, 1fr); max-width: 532px; }
@media (max-width: 989px) { .h15-tex__cards--one { max-width: 640px; } }
/* On About the Anaconda slab sat at the top of the rock contact zone in r23. */
.rock-zone > .h15-tex--in-zone { background: none; min-height: 0; padding-bottom: 0; }

/* ==========================================================================
   Round 21: Rentals, from known facts (Chris: "just go with what we know")
   ========================================================================== */
/* What's included: a two-column list, each item behind a short red rule
   (the site's arrow-free list marker), then the four terms as the About
   facts. */
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.incl__item { position: relative; padding-left: var(--s-3); font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.incl__item::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--s-2); height: 2px; background: var(--c-red); }
.rent-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-6); }
.rent-terms dd { color: var(--c-muted); }
@media (max-width: 989px) { .rent-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .incl { grid-template-columns: minmax(0, 1fr); }
  .rent-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
}
/* What it's for: a row per use, the label then the models as the site's
   interactive chips (.filter), each linking to its Where it fits. */
.uses { display: grid; gap: var(--s-4); }
.uses__row { display: grid; grid-template-columns: 192px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding-bottom: var(--s-4); border-bottom: var(--hairline); }
.uses__row:last-child { border-bottom: 0; padding-bottom: 0; }
.uses__label { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign); line-height: 1; text-transform: uppercase; color: var(--c-charcoal); }
.uses__models { display: flex; flex-wrap: wrap; gap: var(--s-1); }
@media (max-width: 640px) {
  .uses__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
}
/* Not sure what you need? The four questions read as text without JS; with
   JS each gets a field and the button adds the answers to the form below.
   Beside it, the rentals contact. */
.needs-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; }
.needs__lead { margin-top: var(--s-2); }
.needs__list { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); counter-reset: need; }
.needs__item { counter-increment: need; display: flex; flex-direction: column; gap: var(--s-1); }
.needs__label { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sign); line-height: 1; text-transform: uppercase; color: var(--c-charcoal); }
.needs__label::before { content: counter(need) ". "; color: var(--c-red); }
.needs__hint { font-size: var(--fs-small); color: var(--c-muted); line-height: var(--lh-snug); }
.needs__input {
  width: 100%; min-height: var(--control-h); padding: 0 var(--s-2); margin-top: var(--s-1);
  font: inherit; font-size: var(--fs-body); color: var(--c-charcoal); background: var(--c-white);
  border: 1px solid var(--c-charcoal); border-radius: 0;
}
.needs__input[hidden] { display: none; }
.needs__input:focus-visible { outline: var(--focus); outline-offset: 0; }
.needs__nojs { margin-top: var(--s-4); font-size: var(--fs-body); }
.needs__act { margin-top: var(--s-4); }
.needs__act[hidden] { display: none; }
.rent-contact { padding: var(--s-5); background: var(--c-page-alt); }
.rent-contact__kicker { font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); }
.rent-contact__row { margin-top: var(--s-3); display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-3); align-items: end; }
.rent-contact__photo { width: 112px; }
.rent-contact__photo .team-grid__initial { font-size: 56px; }
.rent-contact__name { margin-top: 0; }
.rent-contact__phone { display: inline-block; margin-top: var(--s-2); text-decoration: none; }
@media (max-width: 989px) {
  .needs-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
}
@media (max-width: 640px) {
  .needs__list { grid-template-columns: minmax(0, 1fr); }
  .rent-contact { padding: var(--s-4) var(--s-3); }
  .needs__act .btn { width: 100%; }
}

/* ==========================================================================
   Round 22 variant ?hero=bleed, the DEFAULT from round 23 (Chris, Oct 17:
   the html element carries .hero-bleed in the source; ?hero=centred
   removes it to bring back the r21 centred hero above): the r21 TABLET
   framing at every width. The J12
   large, bleeding off the right edge; the headline on four lines at the
   content edge, tucked up under the conveyor beside the tracks; the push
   buttons below it, left aligned. The machine never touches the text (40
   or more, qa/hero_bleed_r22.py measures the alpha silhouette).
   ========================================================================== */
@media (max-width: 1023px) {
  .hero-bleed .h21-hero { padding: var(--s-2) 0 var(--s-6); }
  .hero-bleed .h21-hero__machine { width: 105vw; margin-left: calc(8.07vw - var(--gutter)); }
  .hero-bleed .h21-hero__title { margin-top: calc(-13.5vw + max(0px, (768px - 100vw) * 0.08)); font-size: 7.6vw; max-width: 5.2em; }
  .hero-bleed .h21-hero__actions { margin-top: var(--s-5); }
}
@media (max-width: 640px) {
  .hero-bleed .h21-hero__actions { margin-top: var(--s-4); }
}
/* 1024 and up, round 23 (Chris: the bleed framing is the default, the
   machine larger from 1440 up). One unit, --u, is 1vw capped by the
   screen's height so header, hero and buttons fit the first screen. The
   render is --mw u wide. Its left edge sits --mx u right of the content
   edge (the headline's left), so headline and machine keep one fixed
   geometry in u at every width and the clearance never shrinks; on screens
   wider than that geometry fills, the machine moves right instead so it
   always runs --mb u off the right edge. The image BOX may overlap the
   headline (Chris: "if the div overhangs the text that's okay"); its
   visible pixels never do (qa/hero_r23.py measures the alpha silhouette). */
@media (min-width: 1024px) {
  .hero-bleed .h21-hero {
    --mw: 91; --mx: 6; --mb: 11; --tf: 5.75; --tm: 22; --hu: 57.5;
    --cl: max(var(--gutter), (100vw - var(--page-max)) / 2);
    --u: min(1vw, calc((100vh - var(--header-main-h)) / var(--hu)));
    display: block; min-height: 0;
    padding: calc(1.1 * var(--u)) 0 calc(3.3 * var(--u));
  }
  @supports (height: 100svh) { .hero-bleed .h21-hero { --u: min(1vw, calc((100svh - var(--header-main-h)) / var(--hu))); } }
  .hero-bleed .h21-hero__inner { align-items: flex-start; text-align: left; }
  .hero-bleed .h21-hero__machine {
    width: calc(var(--mw) * var(--u));
    margin-left: max(calc(var(--mx) * var(--u)), calc(100vw - (var(--mw) - var(--mb)) * var(--u) - var(--cl)));
  }
  .hero-bleed .h21-hero__title {
    margin-top: calc(-1 * var(--tm) * var(--u)); white-space: normal; max-width: 5.2em;
    font-size: calc(var(--tf) * var(--u));
  }
  .hero-bleed .h21-hero__actions { margin-top: var(--s-5); justify-content: flex-start; }
}
/* Round 37 (Chris, Oct 18: "I can't see the ticker in my viewport" at full
   screen on a 16 inch MacBook Pro). From 1024 the header, the hero AND the
   ticker fit the first screen: the unit --u is capped by the height left
   after the header, the ticker (64) and the hero's fixed px (the buttons'
   40 margin and 56 height), over the hero's height in u (52.5: 4.4 of
   padding, the render's 48.8, the four headline lines' 21.2, less the 22
   tuck). The composition is unchanged; everything scales together. Floor
   8px, so a very short window keeps a usable hero (headline 46, render
   728): below a first screen of about 668 tall (88 + 96 + 64 + 52.5 x 8)
   the ticker may fall under the fold. */
@media (min-width: 1024px) {
  .hero-bleed .h21-hero {
    --ha: 52.5; --tk: var(--s-8);
    --hb: calc(var(--s-5) + var(--control-h-lg));
    --u: max(8px, min(1vw, calc((100vh - var(--header-main-h) - var(--tk) - var(--hb)) / var(--ha))));
  }
  @supports (height: 100svh) {
    .hero-bleed .h21-hero { --u: max(8px, min(1vw, calc((100svh - var(--header-main-h) - var(--tk) - var(--hb)) / var(--ha)))); }
  }
}

/* Round 39 (Chris, Oct 18: "Bring this a little higher" [the headline and
   buttons] and "The machine can still be a bit bigger but still centered
   from top to bottom"). From 1024 the hero keeps round 37's height (header
   + hero + ticker fit the first screen, same --u), but the J12 leaves the
   flow: it is --ms times its round 23 width, centred top to bottom in the
   hero (its box is its silhouette), and still runs off the right edge. The
   headline and buttons sit at the hero's foot, --lift u higher than round
   37. The 40px clearance between the machine's visible pixels and any text
   or button is kept (qa/qa_r39.py, alpha silhouette). */
@media (min-width: 1024px) {
  .hero-bleed .h21-hero {
    --ms: 1.12; --lift: 4; --mx2: 25; --mb2: 8;
    --mw2: calc(var(--mw) * var(--ms));
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: calc(var(--ha) * var(--u) + var(--hb) - 2px);
    padding: 0 0 calc((3.3 + var(--lift)) * var(--u));
  }
  .hero-bleed .h21-hero__inner { position: static; }
  .hero-bleed .h21-hero__machine {
    position: absolute; top: 50%; z-index: 1; margin: 0;
    width: calc(var(--mw2) * var(--u));
    left: max(calc(var(--cl) + var(--mx2) * var(--u)), calc(100vw - (var(--mw2) - var(--mb2)) * var(--u)));
    transform: translateY(-50%);
  }
  .hero-bleed .h21-hero__title { margin-top: 0; }
}

/* Round 39 (Chris, Oct 18, phones: "make the space in the ticker a little
   less between elements top and bottom"): 640 and under, the label row and
   the crawl row go from 48 to 40 each, so the strip is 80 (was 96) and the
   space above the label, between the label and the crawl, and below the
   crawl each tighten by 8 overall. 641 to 800 (the same stacked layout on
   tablets) and desktop are unchanged. */
@media (max-width: 640px) {
  .h15-ticker .ticker__fixed { min-height: var(--s-5); }
  .h15-ticker .ticker__viewport { min-height: var(--s-5); }
}

/* ==========================================================================
   Round 29 (Chris, Oct 18): the contact section cleaned up.
   Details card: the heading, then phone and email as one group in one
   style (the email's: body size, regular weight, General Sans, no
   underline), then the address directly over the map (unchanged style).
   Tight inside a group (8), more between groups (32). The "Open in Google
   Maps" link and the Email Us button are gone; the map's fallback block is
   now the link to Google Maps and looks exactly as before. On keyboard
   focus it rises over the loaded map so the focus ring is never hidden.
   ========================================================================== */
.quote__details { gap: var(--s-4); }
.quote__reach { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.quote__details a.quote__phone:hover { color: var(--c-red); }
.quote__contact > .quote__details + .quote__map { margin-top: calc(var(--s-1) - var(--s-3)); }
a.map__fallback { text-decoration: none; }
a.map__fallback:focus-visible { z-index: 1; outline-offset: calc(-1 * var(--s-half)); }

/* ==========================================================================
   Rounds 31 and 32 (Oct 18): two Rentals components become shared, so the
   Parts & Service page can use them as they are (moved here from
   rentals.css, unchanged apart from the hero links, which round 31 removed).
   1. The Rentals hero: the Home Rentals band continued, white h1, the soft
      sub-title, a 4:3 photo on phones. The photo's focal point stays in
      each page's own stylesheet.
   2. The dark list card on the rock (Rentals "Every rental includes"):
      left-aligned, 64 padding, the red-dash list in two columns from 641,
      one on phones.
   ========================================================================== */
.rentals-hero .h15-rentals__title { color: var(--c-white); }
.rentals-hero .h15-rentals__sub { color: var(--c-on-dark-soft); }
@media (max-width: 640px) {
  .rentals-hero .h15-rentals-band__bg { aspect-ratio: 4 / 3; }
  @supports not (aspect-ratio: 1 / 1) { .rentals-hero .h15-rentals-band__bg { height: 75vw; } }
}

.rincl .h15-tex__cards { max-width: 768px; }
.rincl .rincl__card { align-items: flex-start; text-align: left; padding: var(--s-8); }
.rincl .rincl__card > * { max-width: none; }
.rincl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.rincl__list li { position: relative; padding-left: var(--s-3); font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.rincl__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--s-2); height: 2px; background: var(--c-red); }
.rincl .rincl__act { align-items: flex-start; padding-top: var(--s-4); }
/* Round 43 (Dan, Oct 19): the stay-until-confident line under the list. */
.rincl__stay { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: var(--lh-snug); }
@media (max-width: 989px) {
  .rincl .rincl__card { padding: var(--s-6) var(--s-5); }
}
@media (max-width: 640px) {
  .rincl .rincl__card { padding: var(--s-5) var(--s-3); }
  .rincl__list { grid-template-columns: minmax(0, 1fr); }
  .rincl .rincl__act .btn { width: 100%; }
}

/* ==========================================================================
   Round 33 (Chris, Oct 18): "Let's put Bill within his own card like a
   polaroid or an old photo or a cutout of newspaper. That way we can do a
   simpler 50/50 kind of layout." Supersedes the rounds 30 and 30B layout
   (Bill behind the counter, the card anchored to him) and the floating name
   clipping: the name is now the caption inside Bill's card.
   From 960: two equal columns inside the content column (32 apart to 1100,
   48 from 1101), Bill's card centred in the left one, the charcoal card
   filling the right one, the two vertically centred to each other.
   959 and under: Bill's card, then the charcoal card, one centred column
   (the card capped at 720, as the round 26 tablet column was).
   Round 36 (Chris, Oct 18): newspaper chosen; the polaroid and print
   styles and the ?billcard switch are gone. Bill's card is a newspaper
   clipping at -2deg (-1deg on phones) with a calm scissor-cut edge (1 to
   2px deep, long straight runs); the text card is a matching clipping at
   +1.5deg (+0.75deg on phones).
   The photo window shows the cut-out from x 0 (its straight cut through
   the outstretched forearm, so the arm leaves the frame there) to the
   right with room to spare, and from just above his head to its straight
   bottom cut, which is the window's bottom edge. Nothing covers him.
   ========================================================================== */
.about-hero { padding: var(--s-6) 0 var(--s-8); }
.about-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
@media (max-width: 640px) {
  .about-hero { padding: var(--s-5) 0 var(--s-8); }
  .about-hero__inner { gap: var(--s-5); }
}
@media (min-width: 960px) {
  .about-hero { padding: var(--s-10) 0; }
  .about-hero__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; justify-items: center; }
}
@media (min-width: 1101px) { .about-hero__inner { column-gap: var(--s-6); } }

/* Round 36 (Chris, Oct 18: "Make the text in the card next to this in a
   matching style, also slightly tilted"): the text card is a second
   newspaper clipping, the same newsprint, cut edge and paper shadow as
   Bill's, tilted the other way (+1.5deg; +0.75deg on phones). Dark ink on
   the paper; a 2px ink column rule under the heading. Wording unchanged.
   The outer box carries the tilt and the shadow (a drop-shadow, so it
   follows the cut edge); the paper inside carries the edge. */
.about-card {
  --ac-rot: 1.5deg;
  position: relative; width: 100%; max-width: 720px;
  transform: rotate(var(--ac-rot));
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.48));
}
.about-card__paper {
  padding: var(--s-6); color: #212121;
  clip-path: polygon(
    0 1px, 15.8% 1px, 16.0% 1px, 19.3% 2px,
    40.7% 2px, 71.4% 1.5px, 75.0% 1.5px, 86.2% 1.5px,
    88.0% 1px, 89.3% 1px, calc(100% - 1px) 0, calc(100% - 1px) 21.4%,
    calc(100% - 1px) 23.8%, calc(100% - 1px) 31.8%, calc(100% - 1px) 50.2%, calc(100% - 1.5px) 53.2%,
    calc(100% - 1px) 56.1%, calc(100% - 1.5px) 62.9%, calc(100% - 1px) 80.9%, calc(100% - 1px) 84.7%,
    calc(100% - 1px) 85.2%, calc(100% - 1px) 93.7%, 100% calc(100% - 1.5px), 94% calc(100% - 1px),
    82.2% calc(100% - 1.5px), 76% calc(100% - 1px), 75.2% calc(100% - 1.5px), 73.3% calc(100% - 1.5px),
    72.5% calc(100% - 1.5px), 36.9% calc(100% - 1.5px), 27.2% calc(100% - 1.5px), 17% calc(100% - 2px),
    1px 100%, 2px 94.3%, 2px 86.7%, 2px 70.3%,
    2px 67.5%, 2px 56.3%, 2px 49.7%, 2px 29%,
    1px 27.7%, 1.5px 25%, 1.5px 15.9%, 1.5px 11.8%);
}
.about-card h1 { color: inherit; padding-bottom: var(--s-2); border-bottom: 2px solid currentColor; }
.about-card__body { margin-top: var(--s-2); font-size: var(--fs-lead); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.about-card__close { margin-top: var(--s-2); font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-snug); }
@media (min-width: 960px) { .about-card { max-width: none; } }
@media (min-width: 960px) and (max-width: 1100px) {
  .about-card__paper { padding: var(--s-4); }
  .about-card__body, .about-card__close { font-size: 16px; }
}
@media (max-width: 640px) {
  .about-card { --ac-rot: 0.75deg; }
  .about-card__paper { padding: var(--s-5) var(--s-3); }
}

/* the newsprint both clippings share: the site's newsprint tile and a
   faint 4px dot screen. Round 38 (Chris, Oct 18: "make this paper LESS old
   looking and yellow. A little more neutral."; "Turn the opacity on the
   dots down by like 50%"): a flat cool white veil at 0.45 over the warm
   tile (236 230 216 plus grain) brings the paper to a near neutral
   #efeeea with the grain kept at about half strength; the dot screen goes
   from 0.07 to 0.035. No blend modes, so every engine renders it alike. */
.billcard__paper, .about-card__paper {
  background-color: #efeeea;
  background-image: radial-gradient(circle, rgba(20, 19, 18, 0.035) 0.8px, transparent 1.2px), linear-gradient(rgba(243, 248, 255, 0.45), rgba(243, 248, 255, 0.45)), url("/static/img/about/newsprint-512.png");
  background-size: 4px 4px, auto, 256px 256px;
}

/* Bill's card. The figure carries the rotation and the paper shadow (the
   round 30 lift, 0 32 48 at 0.48, as a drop-shadow so it follows the torn
   edge); the paper inside carries the edge, the frame and the caption. */
.billcard {
  --bc-rot: -2deg; --bc-ar: 0.807; --bc-img-w: 102.04%;
  margin: 0; width: min(100%, 400px);
  transform: rotate(var(--bc-rot));
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.48));
}
@media (min-width: 960px) { .billcard { width: min(100%, 448px); } }
@media (min-width: 1280px) { .billcard { width: min(100%, 480px); } }
.billcard__paper { position: relative; color: #141312; }
.billcard__win { position: relative; overflow: hidden; aspect-ratio: var(--bc-ar); }
@supports not (aspect-ratio: 1 / 1) { .billcard__win { height: 0; padding-bottom: calc(100% / var(--bc-ar)); } }
.billcard__win picture { display: block; }
/* anchored at the window's bottom-left; the width sets the crop */
.billcard__win img { position: absolute; left: 0; bottom: 0; display: block; width: var(--bc-img-w); max-width: none; height: auto; }
.billcard__cap {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 20px; line-height: 1; letter-spacing: 0.02em;
}

/* The newspaper clipping: newsprint, cut on all four sides (round 36: 1 to
   2px deep, long straight runs, a neat scissor cut rather than a torn
   page; inside the 24px paper margin), a caption under the photo. The photo area is a light dot screen so the cut-out (cream
   paper outline, black dots) reads as a printed photo. Window: x 0 to
   0.98, y 0.03 to 1 of the cut-out (0.807 wide to tall). */
.billcard__paper {
  padding: var(--s-3) var(--s-3) var(--s-2);
  clip-path: polygon(
    0 1px, 4.0% 1px, 26.8% 2px, 34.2% 1px,
    61.7% 1px, 76.7% 1px, 84.5% 1px, 88.5% 1.5px,
    92.3% 1.5px, 94.5% 1px, calc(100% - 1px) 0, calc(100% - 1px) 4.3%,
    calc(100% - 1px) 22.7%, calc(100% - 1.5px) 31.1%, calc(100% - 1.5px) 49.2%, calc(100% - 1.5px) 51.3%,
    calc(100% - 1.5px) 54.5%, calc(100% - 1.5px) 58.6%, calc(100% - 1.5px) 68.5%, calc(100% - 1px) 69.6%,
    calc(100% - 2px) 86.9%, calc(100% - 2px) 95.7%, 100% calc(100% - 1.5px), 79.7% calc(100% - 2px),
    68.2% calc(100% - 2px), 54.4% calc(100% - 2px), 49.3% calc(100% - 1px), 43.8% calc(100% - 1px),
    29.3% calc(100% - 1px), 29.1% calc(100% - 1px), 18.2% calc(100% - 1px), 4.4% calc(100% - 2px),
    1px 100%, 1px 79.3%, 1px 68.8%, 1px 52.4%,
    1px 46.3%, 2px 37.1%, 1.5px 29.4%, 1.5px 24.9%,
    1px 23%, 1.5px 14.2%, 2px 12.3%, 2px 7.7%);
}
/* Round 38 (Chris: "Do that in the background here too"): the photo
   window's grey goes neutral (#ddd6c6 to #dad9d5, the same lightness) and
   its dot screen from 0.2 to 0.1. Bill's halftone itself is unchanged. */
.billcard__win { background-color: #dad9d5; background-image: radial-gradient(circle, rgba(20, 19, 18, 0.1) 1px, transparent 1.4px); background-size: 4px 4px; }
.billcard__cap { margin-top: var(--s-2); }
@media (max-width: 640px) {
  .billcard { --bc-rot: -1deg; }
  .billcard__paper { padding: var(--s-2) var(--s-2) var(--s-2); }
  .billcard__cap { margin-top: var(--s-2); font-size: 18px; }
}

/* ==========================================================================
   About Anaconda section. Round 33 (Chris, Oct 18: "two textures back to
   back"); round 36 (Chris, Oct 18: "Remove this photo on the about page.
   The yellow banner is excellent for Anaconda."): the Lillooet photo and
   the ?anaconda=band variant are gone. One flat Anaconda yellow section
   (--c-ticker) between Our Team (paper) and the rock contact zone, the
   dealer content in one row from 1200 (logo, heading, the sentence with
   the announcement link under it, the button), the logo then two columns
   from 641, stacked on phones. Padding 80 (64 to 959, 48 on phones).
   ========================================================================== */
.about-ana { background: var(--c-ticker); color: var(--c-charcoal); padding: var(--s-10) 0; }
@media (max-width: 959px) { .about-ana { padding: var(--s-8) 0; } }
.about-ana :focus-visible { outline: var(--focus); }
.about-ana__row { display: flex; flex-direction: column; align-items: flex-start; }
.about-ana__logo { margin: 0; }
.about-ana__title { margin-top: var(--s-2); }
.about-ana__text .h15-lead { margin-top: var(--s-2); }
.about-ana .h15-dealer__more { margin-top: var(--s-1); }
.about-ana__act { margin-top: var(--s-4); }
.about-ana .btn--dealer:hover, .about-ana .btn--dealer:focus-visible { background-color: var(--c-red-deep); border-color: var(--c-red-deep); color: var(--c-white); }
.about-ana .btn--dealer:active { background-color: var(--c-red-deepest); border-color: var(--c-red-deepest); }
@media (max-width: 640px) {
  .about-ana { padding: var(--s-6) 0; }
  .about-ana__act, .about-ana__act .btn { width: 100%; }
}
/* 641 to 1199: the logo, then two columns (heading | sentence, link, button) */
@media (min-width: 641px) {
  .about-ana__row {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "logo logo" "title text" "title act"; column-gap: var(--s-6); row-gap: var(--s-3); align-items: start;
  }
  .about-ana__logo { grid-area: logo; width: 160px; }
  .about-ana__title { grid-area: title; margin: 0; font-size: 28px; }
  .about-ana__text { grid-area: text; }
  .about-ana__text .h15-lead { margin: 0; font-size: 16px; }
  .about-ana__act { grid-area: act; margin: 0; }
}
/* 1200 and up: one row */
@media (min-width: 1200px) {
  .about-ana__row {
    grid-template-columns: auto minmax(0, 264px) minmax(0, 1fr) auto;
    grid-template-areas: "logo title text act"; column-gap: var(--s-4); align-items: center;
  }
  .about-ana__act { margin: 0; }
}

/* ==========================================================================
   Round 41 (2026-10-19): the final fix round before the private share
   (sweep-2026-10-18/SUMMARY.md, BUILD-REPORT-r41.md). Appended last so each
   rule wins over the older ones at equal specificity. 8px grid; 4 only
   inside components. Tap-target fixes extend the hit area with padding and
   a matching negative margin, so nothing moves on screen.
   ========================================================================== */

/* UI #3: the phone menu holds the page still while it is open */
html.menu-locked, html.menu-locked body { overflow: hidden; }

/* UI #4: 16px in every field, so iOS Safari never zooms into the form */
.field input, .field textarea, .rj__input { font-size: 16px; }

/* UI #5: required markers and inline errors */
.field__req { font-weight: var(--w-regular, 400); }
.field__error { margin: 0; font-size: var(--fs-small); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--c-red); }
.field__error[hidden] { display: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-red); box-shadow: inset 0 0 0 1px var(--c-red); }

/* UI #6 to #11: tap targets of at least 44px, no visual change */
.site-footer__links a, .site-footer__contact a, .site-footer__legal a,
.crumbs a, .quote__details a.quote__phone, .quote__details a.quote__email {
  display: inline-block; padding-block: 14px; margin-block: -14px;
}
.masthead__logo { padding-block: 12px; margin-block: -12px; }
.filter::after { inset: -10px -4px; }
.machine-card__quote::after { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }
.gallery__pager a { width: var(--control-h); height: var(--control-h); }

/* CD #1: Home and New equipment rows, 901 to 1200 (three columns): three
   cards before Show More, never three plus an orphan */
@media (min-width: 901px) and (max-width: 1200px) {
  .machine-grid.is-collapsed > .machine-grid__item:nth-child(4) { display: none; }
}

/* CD #3: Home Rentals and Parts & Service photos no longer touch; a 64px
   cream seam between the two bands (desktop and tablet, where both are
   full-bleed photos) */
@media (min-width: 990px) {
  .page-home .h15-rentals-band + .h15-rentals-band--right { border-top: var(--s-8) solid var(--c-page-alt); }
}

/* CD #2: Home phone Parts & Service card gets a floor. Under 990 the photo
   runs behind the whole band and 48px below the card, so the charcoal card
   sits on photo and About Us starts as its own section. */
@media (max-width: 989px) {
  .page-home .h15-rentals-band--right { padding: calc(56.25vw - var(--s-8)) 0 var(--s-6); background: var(--c-charcoal); }
  .page-home .h15-rentals-band--right .h15-rentals-band__bg { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; height: auto; }
  .page-home .h15-rentals-band--right .h15-rentals-band__inner { margin-top: 0; }
}
@media (max-width: 640px) {
  .page-home .h15-rentals-band--right { padding-top: calc(100vw - var(--s-8)); }
}

/* CD #4: phone "View all" is the outline button; desktop keeps the push */
.section-head__all--phone { display: none; }
@media (max-width: 640px) {
  .section-head__all--wide { display: none; }
  .section-head__all--phone { display: inline-flex; }
}

/* CD #5 and #6: Home "Our team" on its own, the heading in the section's
   Barlow caps, one link to the About page */
.h15-about--team .h15-about__inner { grid-template-columns: minmax(0, 1fr); }
.h15-about__team-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-5); }
.h15-about--team .h15-about__team-title { padding-bottom: 0; }
.h15-about__team-link { color: var(--c-white); }
.h15-about__team-link:hover, .h15-about__team-link:focus-visible { color: var(--c-yellow); }
.h15-about__team-link:focus-visible { outline: var(--focus-inverse); outline-offset: 2px; }
@media (max-width: 640px) {
  .h15-about__team-head { padding-bottom: var(--s-3); }
}

/* Round 45b (Chris, Oct 20: "We can't have one photo floating down here.
   Find a better solution that looks great without making the section
   taller."): supersedes the LOCKED six across / three across for the About
   team grid. Seven people, one row, never a second row.
   - 641 and up: all seven in one row of equal tiles, 16px apart, same 2:3
     photo, name and title below. From 990 the text column narrows to 260px
     (32px to the tiles), from 1200 to 320px (48px) so the row fits beside it and the section is no
     taller than it was with six (measured in BUILD-REPORT-r45.md, 45b).
   - 640 and under (phones): one row that scrolls sideways with native scroll-snap, no
     scrollbar, each tile 40% of the viewport so the next one peeks. The row
     runs to the screen edge and snaps on the gutter. */
.team-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
@media (min-width: 990px) {
  .ab-team__inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: var(--s-4); }
}
@media (min-width: 1200px) {
  .ab-team__inner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: var(--s-6); }
}
@media (max-width: 640px) {
  .team-grid {
    display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid > .team-grid__item { flex: 0 0 40vw; min-width: 0; scroll-snap-align: start; }
}
/* 45b: the narrower text column split the phone number at its hyphen */
.ab-team__lead a[href^="tel:"] { white-space: nowrap; }