/* ==========================================================================
   Machine page (round 15.7, 2026-10-15): the 22 New Anaconda model pages.
   Loaded by templates/new_model.html only. Cards on the page are the shared
   component (machine-card.css). 8px grid; spacing shows grouping: 8 to 16
   inside a group, 24 to 32 between related blocks, 80 between sections (64
   under 990), and every heading has at least twice as much space above as
   below.
   ========================================================================== */
.page-machine .mp { --mp-band: var(--s-10); }
@media (max-width: 989px) { .page-machine .mp { --mp-band: var(--s-8); } }

/* ---------- Type ---------- */
.mp-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; color: var(--c-charcoal); margin-bottom: var(--s-3);
}
.mp-h3 {
  font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase;
  color: var(--c-charcoal); margin-bottom: var(--s-2);
}
.mp-label {
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-muted); line-height: 1; margin-bottom: var(--s-1);
}
.mp-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 64ch; }
.mp-lead + .mp-lead { margin-top: var(--s-2); }
.mp-note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); max-width: 72ch; }
.mp-note a, .mp-muted a { color: var(--c-charcoal); text-decoration: underline; text-decoration-thickness: var(--line-w); text-underline-offset: 3px; }
.mp-note a:hover { color: var(--c-red); }
.mp-muted { font-size: var(--fs-small); color: var(--c-muted); }

/* ---------- Bands ---------- */
.mp-band { padding: var(--mp-band) 0; background: var(--c-page); }
.mp-band--alt { background: var(--c-page-alt); }
.mp-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; }
@media (max-width: 989px) { .mp-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } }
.mp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }

/* ---------- 1. Hero ---------- */
.mp-hero { background: var(--c-white); padding: var(--s-5) 0 var(--mp-band); }
.mp-hero .crumbs ol { margin-bottom: var(--s-3); }
.mp-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; }
@media (max-width: 989px) { .mp-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); } }
.mp-hero__info { display: flex; flex-direction: column; align-items: flex-start; }
.mp-hero__title { margin-top: var(--s-2); font-weight: inherit; }
.mp-hero__model {
  display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 6.1vw, 88px); line-height: 0.88; color: var(--c-charcoal);
}
.mp-hero__kind {
  display: block; margin-top: var(--s-1); font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 24px; line-height: 1; color: var(--c-muted);
}
.mp-hero__job { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 40ch; }
.mp-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); width: 100%; margin-top: var(--s-4); }
.mp-key__item { padding-top: var(--s-2); border-top: var(--hairline); }
.mp-key dt { font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); line-height: 1.33; }
.mp-key dd { margin-top: var(--s-1); font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.08; color: var(--c-charcoal); }
.mp-key dd .u-i { display: block; font-family: var(--f-body); font-weight: var(--w-medium); font-size: var(--fs-small); color: var(--c-muted); }
.mp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.mp-hero__rent { margin-top: var(--s-2); }
@media (max-width: 640px) {
  .mp-hero { padding-top: var(--s-3); }
  .mp-key { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .mp-hero__actions { width: 100%; }
  .mp-hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Gallery: scroll-snap stage (works without JS), thumbnails with JS ---------- */
.mp-gallery { min-width: 0; }
.mp-gallery__stage {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  aspect-ratio: 3 / 2; background: var(--c-stone); scrollbar-width: none;
}
@supports not (aspect-ratio: 1 / 1) { .mp-gallery__stage { height: 66.6667vw; max-height: 560px; } }
.mp-gallery__stage::-webkit-scrollbar { display: none; }
.mp-gallery__stage:focus-visible { outline: var(--focus); outline-offset: 3px; }
.mp-gallery__slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; overflow: hidden; }
.mp-gallery__slide > picture, .mp-gallery__slide > picture > img { display: block; width: 100%; height: 100%; }
.mp-gallery__slide > picture > img { object-fit: cover; }
.mp-gallery__slide--render > picture { position: absolute; inset: var(--s-4); width: auto; height: auto; }
.mp-gallery__slide--render > picture > img { object-fit: contain; }
.mp-gallery__similar {
  position: absolute; left: var(--s-1); bottom: var(--s-1); padding: var(--s-half) var(--s-1);
  background: var(--c-charcoal); color: var(--c-white); font-size: var(--fs-micro); font-weight: var(--w-semibold); line-height: 1.33;
}
.mp-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.mp-gallery__thumbs[hidden] { display: none; }
.mp-gallery__thumb {
  width: 96px; height: 72px; padding: 0; border: 0; background: var(--c-stone); cursor: pointer;
  box-shadow: inset 0 0 0 2px transparent; position: relative; overflow: hidden;
}
.mp-gallery__thumb picture, .mp-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-gallery__thumb--render img { object-fit: contain; padding: var(--s-1); }
.mp-gallery__thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px transparent; }
.mp-gallery__thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 3px var(--c-charcoal); }
.mp-gallery__thumb:hover::after { box-shadow: inset 0 0 0 2px var(--c-red); }
.mp-gallery__thumb:focus-visible { outline: var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .mp-gallery__thumb { width: 64px; height: 48px; } }

/* ---------- 2. Video: lite embeds ---------- */
.mp-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.mp-videos:not(.mp-videos--more) { max-width: 880px; }
.mp-videos--more { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.mp-videos--more .mp-video--primary { grid-row: span 2; }
@media (max-width: 989px) {
  .mp-videos--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-videos--more .mp-video--primary { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) { .mp-videos--more { grid-template-columns: minmax(0, 1fr); } }
.mp-video { margin: 0; min-width: 0; }
.mp-video__lite, .mp-video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--c-charcoal); border: 0; }
@supports not (aspect-ratio: 1 / 1) { .mp-video__lite, .mp-video iframe { height: 0; padding-top: 56.25%; } }
.mp-video__lite picture, .mp-video__lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-video__play {
  position: absolute; left: 50%; top: 50%; width: var(--s-8); height: var(--s-8); margin: calc(-1 * var(--s-4)) 0 0 calc(-1 * var(--s-4));
  display: grid; place-items: center; background: var(--c-red); color: var(--c-white); border-radius: 50%;
  transition: background-color var(--dur-button-out) var(--ease-button);
}
.mp-video__play svg { width: var(--s-4); height: var(--s-4); }
.mp-video:not(.mp-video--primary) .mp-video__play { width: var(--s-6); height: var(--s-6); margin: calc(-1 * var(--s-3)) 0 0 calc(-1 * var(--s-3)); }
.mp-video:not(.mp-video--primary) .mp-video__play svg { width: var(--s-3); height: var(--s-3); }
.mp-video__lite:hover .mp-video__play, .mp-video__lite:focus-visible .mp-video__play { background: var(--c-red-deep); transition-duration: var(--dur-button-in); }
.mp-video__lite:focus-visible { outline: var(--focus); outline-offset: 3px; }
.mp-video__cap { margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-snug); }
.mp-video__label { display: block; font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-red-deep); }
.mp-video__title { color: var(--c-charcoal); }

/* ---------- 3 and 4. What it does, where it fits ---------- */
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mp-chips + .mp-label { margin-top: var(--s-4); }
.mp-works { border-top: var(--hairline); }
.mp-works__link {
  display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) 0; border-bottom: var(--hairline);
  text-decoration: none; color: var(--c-charcoal);
}
.mp-works__model { font-family: var(--f-display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.mp-works__kind { flex: 1 1 auto; font-size: var(--fs-small); color: var(--c-muted); }
.mp-works__link svg { width: var(--icon); height: var(--icon); transition: transform var(--dur-button-out) var(--ease-button); }
.mp-works__link:hover { color: var(--c-red); }
.mp-works__link:hover svg { transform: translateX(var(--nudge)); }

/* ---------- 5. Features ---------- */
.mp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); max-width: 1040px; }
.mp-features li { position: relative; padding-left: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-snug); }
.mp-features li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: var(--s-1); height: var(--s-1); background: var(--c-red); }
@media (max-width: 749px) { .mp-features { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 6. Specifications, metric or imperial ---------- */
.mp-units { display: inline-flex; background: var(--c-page-alt); padding: var(--s-half); gap: var(--s-half); }
.mp-units[hidden] { display: none; }
.mp-units__btn {
  min-height: var(--s-5); padding: 0 var(--s-2); border: 0; background: transparent; color: var(--c-charcoal);
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-nav); letter-spacing: var(--track-nav); text-transform: uppercase; line-height: 1;
}
.mp-units__btn[aria-pressed="true"] { background: var(--c-charcoal); color: var(--c-white); }
.mp-units__btn:focus-visible { outline: var(--focus); outline-offset: 2px; }
.mp-spec-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-1); }
.mp-spec__title {
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-muted); line-height: 1; padding-bottom: var(--s-1); border-bottom: var(--line-w) solid var(--c-charcoal);
}
.mp-spec__rows { display: grid; }
.mp-spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline;
  padding: var(--s-1) 0; border-bottom: var(--hairline); font-size: var(--fs-small); line-height: var(--lh-snug);
}
.mp-spec__row dt { color: var(--c-muted); }
.mp-spec__row dd { font-weight: var(--w-semibold); text-align: right; }
.mp-spec__row dd .u-i { font-weight: var(--w-medium); color: var(--c-muted); }
@media (max-width: 430px) {
  .mp-spec__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mp-spec__row dd { text-align: left; }
}
/* the toggle (JS): one system at a time, no brackets */
.mp[data-units="metric"] .u-i { display: none; }
.mp[data-units="imperial"] .u-m, .mp[data-units="imperial"] .u-b { display: none; }
.mp[data-units="imperial"] .mp-key dd .u-i { display: inline; font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; }
.mp[data-units="imperial"] .mp-spec__row dd .u-i { font-weight: var(--w-semibold); color: inherit; }

/* ---------- 7. Dimensions ---------- */
.mp-haul {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-4); padding: var(--s-2) var(--s-3); background: var(--c-white); font-size: var(--fs-lead);
}
.mp-haul__label { font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-red-deep); }
.mp-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
@media (max-width: 749px) { .mp-dims { grid-template-columns: minmax(0, 1fr); } }
.mp-dims .mp-muted { padding-top: var(--s-2); }
.mp-drawings { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); margin-top: var(--s-6); }
.mp-drawings--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 749px) { .mp-drawings { grid-template-columns: minmax(0, 1fr); } }
.mp-drawing { margin: 0; padding: var(--s-3); background: var(--c-white); display: flex; align-items: center; justify-content: center; }
.mp-drawing img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; }
.mp-drawings + .mp-note { margin-top: var(--s-2); }

/* ---------- 8. Engine and options ---------- */
.mp-list li { position: relative; padding: var(--s-1) 0 var(--s-1) var(--s-3); border-bottom: var(--hairline); font-size: var(--fs-small); line-height: var(--lh-snug); }
.mp-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-1) + 0.55em); width: var(--s-1); height: 2px; background: var(--c-charcoal); }
.mp-split__main .text-arrow { margin-top: var(--s-2); }

/* ---------- 9 to 11. Proof, ways to own it, brochure ---------- */
.mp-proof { margin-bottom: var(--s-8); }
.mp-proof__card {
  display: grid; gap: var(--s-1); max-width: 560px; padding: var(--s-3); text-decoration: none; color: var(--c-charcoal);
  background: var(--c-white); border: var(--stroke-w) solid var(--c-card-edge); box-shadow: var(--shadow-card-raised);
  transition: transform var(--dur-button-out) var(--ease-button), box-shadow var(--dur-button-out) var(--ease-button);
}
.mp-proof__card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--shadow-card-lifted); transition-duration: var(--dur-button-in); }
.mp-proof__card:focus-visible { outline: var(--focus); outline-offset: 3px; }
.mp-proof__name { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.mp-proof__place { font-size: var(--fs-small); color: var(--c-muted); }
.mp-proof__line { font-size: var(--fs-body); line-height: var(--lh-snug); }
.mp-proof__go { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--fs-small); font-weight: var(--w-semibold); }
.mp-proof__go svg { width: var(--icon); height: var(--icon); }
.mp-proof__card:hover .mp-proof__go { color: var(--c-red); }
.mp-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 989px) { .mp-ways { grid-template-columns: minmax(0, 1fr); } }
.mp-way { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-4); background: var(--c-white); }
.mp-way__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.mp-way p { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-charcoal); }
.mp-way .text-arrow { margin-top: auto; padding-top: var(--s-2); }
.mp-brochure { margin-top: var(--s-4); }
@media (prefers-reduced-motion: reduce) {
  .mp-proof__card, .mp-proof__card:hover, .mp-works__link:hover svg { transform: none !important; }
}

/* ---------- 13. FAQ (native details) ---------- */
.mp-faq { max-width: 880px; border-top: var(--hairline); }
.mp-faq__item { border-bottom: var(--hairline); }
.mp-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) 0;
  font-size: var(--fs-lead); font-weight: var(--w-semibold); line-height: var(--lh-snug); cursor: pointer; list-style: none;
}
.mp-faq__q::-webkit-details-marker { display: none; }
.mp-faq__q::marker { content: ""; }
.mp-faq__q:focus-visible { outline: var(--focus); outline-offset: 2px; }
.mp-faq__chev { flex: 0 0 auto; width: var(--icon); height: var(--icon); transition: transform var(--dur-button-out) var(--ease-button); }
.mp-faq__item[open] .mp-faq__chev { transform: rotate(180deg); }
.mp-faq__a { padding-bottom: var(--s-3); max-width: 72ch; font-size: var(--fs-body); line-height: var(--lh-snug); }
@media (max-width: 640px) { .mp-units { margin-bottom: var(--s-2); } }

/* =====================================================================
   Round 20 (2026-10-17): Chris's machine-page notes
   ===================================================================== */

/* Model name to type line: one step more on the 8 grid (8 to 16); still one group. */
.mp-hero__kind { margin-top: var(--s-2); }
/* No breadcrumb: the hero opens with the Anaconda tag. */
.mp-hero__info > .pills { margin-top: 0; }

/* Top-section CTAs: Get a Quote stays the one push button; the phone and
   the renting link are one smaller matching style under it (the site's
   text-arrow links, same size and weight, side by side, wrapping to a
   stack when the column is narrow). */
.mp-hero__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.mp-hero__links .text-arrow { font-size: var(--fs-small); font-weight: var(--w-semibold); }
@media (max-width: 640px) { .mp-hero__links { flex-direction: column; gap: var(--s-1); } }

/* Video: a collapsible strip under the top section, closed by default. */
.mp-watch-band { background: var(--c-page-alt); }
.mp-watch { border-bottom: 0; }
.mp-watch__toggle {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; cursor: pointer; list-style: none;
  color: var(--c-charcoal);
}
.mp-watch__toggle::-webkit-details-marker { display: none; }
.mp-watch__toggle::marker { content: ""; }
.mp-watch__toggle:focus-visible { outline: var(--focus); outline-offset: 2px; }
.mp-watch__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.mp-watch__count { flex: 1 1 auto; font-size: var(--fs-small); color: var(--c-muted); }
.mp-watch[open] .mp-faq__chev { transform: rotate(180deg); }
.mp-watch__toggle:hover .mp-watch__title { color: var(--c-red); }
.mp-watch__body { padding-bottom: var(--s-5); }

/* Key features: a thin strip, not the tall band. 32 top and bottom (was
   80), the heading at the left beside a tight two-column list (one column
   under 750), 16px text on an 8px row rhythm. */
.mp-strip { background: var(--c-page-alt); padding: var(--s-4) 0; }
.mp-strip__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s-6); align-items: start; }
.mp-strip__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--c-charcoal); padding-top: var(--s-half); }
.mp-strip .mp-features { gap: var(--s-1) var(--s-5); max-width: none; }
.mp-strip .mp-features li { font-size: var(--fs-body); line-height: 1.5; padding-left: var(--s-2); }
.mp-strip .mp-features li::before { top: 0.6em; width: 6px; height: 6px; }
@media (max-width: 989px) {
  .mp-strip__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
}

/* Specifications: Anaconda's one table */
.mp-spec-groups--one { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.mp-dims--one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.mp-dims--one + .mp-drawings, .mp-haul + .mp-drawings { margin-top: var(--s-4); }
.mp-h2 + .mp-drawings { margin-top: 0; }

/* Engine options: Anaconda's table */
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-snug); }
.mp-table th, .mp-table td { padding: var(--s-1) var(--s-2) var(--s-1) 0; text-align: left; vertical-align: baseline; border-bottom: var(--hairline); }
.mp-table thead th {
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-muted); border-bottom: var(--line-w) solid var(--c-charcoal);
}
.mp-table tbody th { font-weight: var(--w-semibold); }
.mp-table td:last-child, .mp-table th:last-child { padding-right: 0; }
.mp-note--tight { margin-top: var(--s-2); }

/* =====================================================================
   Round 22 (2026-10-17): machine page polish (ROUND-22-NOTES.md)
   ===================================================================== */

/* Lighter side margins on machine pages (Chris: "make the margins a little
   less intense"): 64 instead of 80 from 1101 up, and the content column
   12px wider each side at 1440 (page max 1312, was 1280). Set on the body
   so the header, every band and the footer on the page stay aligned. */
@media (min-width: 1101px) {
  body.page-machine { --gutter: var(--s-8); --page-max: 1312px; }
}

/* 1. Top section: the photo fills the left half to the viewport's left
   edge and the section's full height; the column beside it spans the same
   height, title group at the top, CTA group anchored at the bottom. */
.mp-hero { padding: 0; background: var(--c-white); }
.mp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: stretch; }
.mp-gallery { position: relative; min-width: 0; }
.mp-gallery__stage { aspect-ratio: 4 / 3; }
.mp-gallery__slide > picture > img { object-position: var(--pos, 50% 50%); }
.mp-hero__info {
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) var(--gutter) var(--s-6);
}
.mp-hero__top { display: flex; flex-direction: column; align-items: flex-start; }
.mp-gallery__thumbs { padding: 0 var(--gutter); }
@media (min-width: 990px) {
  .mp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(480px, 40vw, 640px); }
  .mp-gallery__stage { position: absolute; inset: 0; aspect-ratio: auto; height: auto; max-height: none; }
  /* thumbnails ride on the photo, bottom left, so the photo keeps its full height */
  .mp-gallery__thumbs { position: absolute; left: var(--s-2); bottom: var(--s-2); margin: 0; padding: 0; z-index: 1; }
  .mp-gallery__thumb { width: 64px; height: 48px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24); }
  .mp-gallery__thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 3px var(--c-white); }
  .mp-hero__info {
    padding: var(--s-6) max(var(--gutter), calc((100vw - var(--page-max)) / 2)) var(--s-6) var(--s-8);
  }
}
@media (max-width: 989px) {
  .mp-gallery__thumbs { margin-top: var(--s-1); }
  .mp-gallery__thumb { width: 64px; height: 48px; }
}
@media (min-width: 990px) and (max-width: 1100px) {
  .mp-hero__info { padding-left: var(--s-6); }
}

/* 2. One title: model + type, one style, one line where it fits */
.mp-hero__title {
  margin-top: var(--s-2); font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-ftitle); line-height: 0.92; color: var(--c-charcoal); text-wrap: balance;
}

/* 3. Description on one line at 1440 (no 40ch cap; the column sets the measure) */
.mp-hero__job { max-width: none; margin-top: var(--s-2); }

/* 4. Key figures: small stone tiles, no rules, smaller values */
.mp-key { gap: var(--s-1); margin-top: var(--s-4); }
.mp-key__item { padding: var(--s-2); border-top: 0; background: var(--c-stone); }
.mp-key dd { font-size: 20px; }
@media (max-width: 640px) {
  .mp-key { grid-template-columns: minmax(0, 1fr); }
}

/* 5. CTA group at the bottom; more space between Get a Quote and the links */
.mp-hero__cta { display: flex; flex-direction: column; align-items: flex-start; }
.mp-hero__actions { margin-top: 0; }
.mp-hero__links { margin-top: var(--s-3); }
@media (max-width: 640px) {
  .mp-hero__cta { align-items: stretch; }
}

/* 6 to 8. Charcoal strips: the video, Key features (always open) and the
   expandables (Full specifications, Dimensions, Engine options; native
   details/summary, closed by default). A hairline separates stacked
   strips. An open expandable shows its content on the page ground. */
.mp-bar { background: var(--c-charcoal); color: var(--c-white); }
.mp-bar + .mp-bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.mp-x__bar { display: block; cursor: pointer; list-style: none; color: var(--c-white); }
.mp-x__bar::-webkit-details-marker { display: none; }
.mp-x__bar::marker { content: ""; }
.mp-x__bar:focus-visible { outline: var(--focus-inverse); outline-offset: -3px; }
.mp-x__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-top: var(--s-3); padding-bottom: var(--s-3); margin-bottom: 0;
  font: inherit; color: inherit;
}
.mp-x__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--c-white); }
.mp-x__title--lg { font-size: clamp(32px, 2.8vw, 40px); letter-spacing: 0.01em; }
.mp-bar--watch .mp-x__in { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.mp-x__chev { flex: 0 0 auto; width: var(--s-3); height: var(--s-3); color: var(--c-white); transition: transform var(--dur-button-out) var(--ease-button); }
.mp-bar--watch .mp-x__chev { width: var(--s-4); height: var(--s-4); }
.mp-x[open] > .mp-x__bar .mp-x__chev { transform: rotate(180deg); }
.mp-x__bar:hover .mp-x__title { color: var(--c-yellow); }
.mp-x__body { background: var(--c-page); color: var(--c-charcoal); padding: var(--s-5) 0 var(--s-8); }
.mp-x__body--alt { background: var(--c-page-alt); }
.mp-x__body--dark { background: var(--c-charcoal); color: var(--c-white); padding-top: 0; padding-bottom: var(--s-6); }
.mp-x__body--dark .mp-video__title { color: var(--c-white); }
.mp-x__body--dark .mp-video__label { color: var(--c-red-on-dark); }
.mp-x__body--dark .mp-video__lite:focus-visible { outline: var(--focus-inverse); }
.mp-head--tools { justify-content: flex-end; margin-bottom: var(--s-2); }
.mp-head--tools:has(.mp-units[hidden]) { display: none; }
@media (prefers-reduced-motion: reduce) { .mp-x__chev { transition: none; } }

/* 7. Key features: the same charcoal, light text, red markers */
.mp-strip { background: var(--c-charcoal); }
.mp-strip__title { color: var(--c-white); }
.mp-strip .mp-features li { color: var(--c-white); }

/* 9. Own it, rent it, service it: on the rock face (the site's .h15-tex__bg
   picture and grade); the white cards unchanged, the text on the rock white. */
.mp-band--rock { position: relative; isolation: isolate; overflow: hidden; background-color: var(--c-charcoal); }
.mp-band--rock .mp-h2, .mp-band--rock > .wrap > .mp-proof > .mp-label { color: var(--c-white); }
.mp-band--rock .mp-brochure .text-arrow { color: var(--c-white); }
.mp-band--rock .mp-brochure .text-arrow:hover { color: var(--c-yellow); }
.mp-band--rock :focus-visible { outline: var(--focus-inverse); }
.mp-band--rock .mp-way :focus-visible, .mp-band--rock .mp-proof__card:focus-visible { outline: var(--focus); }
.mp-band--rock .mp-way, .mp-band--rock .mp-proof__card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), 0 16px 48px rgba(0, 0, 0, 0.40); }

/* =====================================================================
   Round 23 (2026-10-17): machine pages (ROUND-23-NOTES.md part 3)
   ===================================================================== */

/* 1. Top section. Figure tiles one step smaller (values 18, was 20), 16
   apart (was 8). No span: the title group and the CTA group stack
   naturally, 48 apart (40 on phones), and the column sits vertically
   centred against the photo. Get a Quote to the links stays 24. */
.mp-key { gap: var(--s-2); }
.mp-key dd { font-size: 18px; }
.mp-hero__info { justify-content: center; gap: var(--s-6); }
.mp-hero__links { margin-top: var(--s-3); }
@media (max-width: 640px) {
  .mp-hero__info { gap: var(--s-5); }
}

/* 3 to 5. Key features inside What it does, on its off-white ground:
   a smaller heading, 64 above (two sections of one band), two columns
   from 750 up, red square markers. */
.mp-feat { margin-top: var(--s-8); }
.mp-feat .mp-features { gap: var(--s-1) var(--s-6); max-width: none; }
.mp-feat .mp-features li { font-size: var(--fs-body); line-height: 1.5; padding-left: var(--s-3); color: var(--c-charcoal); }
.mp-feat .mp-features li::before { top: 0.5em; width: var(--s-1); height: var(--s-1); }
@media (max-width: 989px) { .mp-feat { margin-top: var(--s-6); } }

/* 6 to 8. One grouped charcoal block (See it working, Full
   specifications, Dimensions, Engine options): every bar the same
   charcoal, one hairline between bars, open content reversed out on the
   same charcoal. Text: white, secondary white at 72% (10:1 on #222);
   table rules white at 16%. Drawings sit on a light inset panel. */
.mp-group { background: var(--c-charcoal); }
.mp-group .mp-bar + .mp-bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.mp-group .mp-x__body { background: var(--c-charcoal); color: var(--c-white); padding: var(--s-1) 0 var(--s-8); }
.mp-group .mp-x__body--dark { padding-top: 0; padding-bottom: var(--s-6); }
.mp-group .mp-x__body :focus-visible { outline: var(--focus-inverse); }
.mp-group .mp-spec__title,
.mp-group .mp-table thead th { color: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(255, 255, 255, 0.56); }
.mp-group .mp-spec__row,
.mp-group .mp-table th, .mp-group .mp-table td,
.mp-group .mp-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.mp-group .mp-spec__row dt { color: rgba(255, 255, 255, 0.72); }
.mp-group .mp-spec__row dd, .mp-group .mp-table tbody th, .mp-group .mp-table td, .mp-group .mp-list li { color: var(--c-white); }
.mp-group .mp-spec__row dd .u-i { color: rgba(255, 255, 255, 0.72); }
.mp[data-units="imperial"] .mp-group .mp-spec__row dd .u-i { color: var(--c-white); }
.mp-group .mp-list li::before { background: var(--c-white); }
.mp-group .mp-h3 { color: var(--c-white); }
.mp-group .mp-note { color: rgba(255, 255, 255, 0.72); }
.mp-group .mp-note a { color: var(--c-white); }
.mp-group .mp-note a:hover { color: var(--c-yellow); }
.mp-group .mp-haul { background: rgba(255, 255, 255, 0.08); color: var(--c-white); }
.mp-group .mp-haul__label { color: var(--c-red-on-dark); }
.mp-group .mp-drawings { padding: var(--s-3); background: var(--c-page); }
.mp-group .mp-drawing { background: var(--c-white); }
/* Metric / Imperial toggle styled for the dark ground */
.mp-group .mp-units { background: rgba(255, 255, 255, 0.08); }
.mp-group .mp-units__btn { color: var(--c-white); }
.mp-group .mp-units__btn[aria-pressed="true"] { background: var(--c-white); color: var(--c-charcoal); }
.mp-group .mp-units__btn:hover:not([aria-pressed="true"]) { color: var(--c-yellow); }
.mp-group .mp-units__btn:focus-visible { outline: var(--focus-inverse); }
@media (max-width: 640px) {
  .mp-group .mp-drawings { padding: var(--s-2); }
}

/* Round 41 (UI #10): the machine page's text links reach 44px of hit area
   (padding with a matching negative margin, so nothing moves). */
.mp-hero__links .text-arrow, .mp-brochure .text-arrow { padding-block: 14px; margin-block: -14px; }
.mp-way .text-arrow { padding-top: calc(var(--s-2) + 14px); padding-bottom: 14px; margin-bottom: -14px; }