.machines-page { background: var(--color-paper-050); }
.machines-page a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.machines-page a:hover { color: var(--color-blueprint-700); }
.machines-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-8), 10vw, var(--space-10)); background: var(--color-blueprint-900); color: var(--color-paper-050); }
.machines-hero::before { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(118,183,193,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(118,183,193,.45) 1px, transparent 1px); background-size: 36px 36px; content: ""; pointer-events: none; }
.machines-hero__grid, .machines-sitework__grid, .machines-structure__grid, .machines-roller__grid, .machines-limits__grid, .machines-decision__grid { position: relative; display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.machines-hero__titlefield { grid-column: 2 / span 7; min-width: 0; }
.machines-hero h1 { max-width: 700px; }
.machines-hero .lead { max-width: 600px; }
.machines-hero__scope { padding-left: var(--space-2); color: var(--color-blueprint-050); opacity: .75; }
.machines-hero__meta { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); color: var(--color-blueprint-050); font-size: var(--text-small); }
.machines-hero__meta span { min-width: 0; }
.machines-hero__cta { width: auto; }
.machines-hero__destination { max-width: 420px; margin-top: var(--space-3); margin-bottom: 0; color: var(--color-blueprint-050); font-size: var(--text-small); }
.machines-roster { grid-column: 9 / span 4; min-width: 0; padding: var(--space-5); border-top: var(--border-active); border-bottom: 1px solid var(--border-dark); background: rgba(16,23,27,.3); }
.machines-roster__intro { margin-bottom: var(--space-4); color: var(--color-blueprint-050); font-size: var(--text-small); line-height: 1.45; }
.machines-roster__list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.machines-roster__list li { min-width: 0; border-top: 1px solid var(--border-dark); }
.machines-roster__list a { display: flex; min-width: 0; min-height: 44px; align-items: center; gap: var(--space-3); padding-block: var(--space-2); color: var(--color-paper-050); font-family: var(--font-heading); font-size: 1.25rem; text-decoration: none; }
.machines-roster__list span { flex: 0 0 auto; color: var(--color-construction-500); font-family: var(--font-body); font-size: var(--text-micro); font-weight: 700; }
.machines-method { background: var(--color-blueprint-050); }
.machines-method__intro { width: min(100%, 680px); }
.machines-method__notes { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.machines-method__note { min-width: 0; padding-top: var(--space-4); border-top: var(--border-active); }
.machines-method__note h3, .machines-method__note p { max-width: 430px; }
.machines-map__intro, .machines-section-heading, .machines-roller__intro, .machines-matrix__intro, .machines-beginner__intro { width: min(100%, 680px); }
.machines-map__lanes { display: grid; min-width: 0; grid-template-columns: 1fr; margin-top: var(--space-6); border: 1px solid var(--border-light); }
.machines-map__lane { display: grid; min-width: 0; grid-template-columns: 3fr 5fr 4fr; align-items: center; gap: var(--space-4); min-height: 72px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); color: var(--color-ink-950); text-decoration: none; }
.machines-map__lane:last-child { border-bottom: 0; }
.machines-map__lane:nth-child(even) { background: var(--color-blueprint-050); }
.machines-map__number { color: var(--color-construction-500); font-family: var(--font-heading); font-size: 1.75rem; }
.machines-map__lane strong { margin-left: calc(-100% + 3.5rem); padding-left: 3.5rem; font-family: var(--font-heading); font-size: 1.5rem; }
.machines-map__lane span:not(.machines-map__number) { max-width: 220px; font-size: var(--text-small); }
.machines-map__lane em { justify-self: end; color: var(--color-blueprint-700); font-size: var(--text-small); font-style: normal; font-weight: 700; }
.machines-map__caption { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-small); }
.machines-profile-section, .machines-roller, .machines-beginner { background: var(--color-paper-050); }
.machines-sitework__grid { margin-top: var(--space-6); }
.machines-excavator { grid-column: 2 / span 6; display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.machines-excavator__copy { min-width: 0; }
.machines-excavator__copy > * { max-width: 470px; }
.machines-media { min-width: 0; }
.machines-media img { width: 100%; max-width: 100%; object-fit: cover; filter: saturate(.83) contrast(1.04) hue-rotate(4deg); }
.machines-media--excavator img { aspect-ratio: 3 / 2; object-position: left center; }
.machines-media--crane img, .machines-media--roller img { aspect-ratio: 16 / 10; object-position: left center; }
.machines-task-prompt { min-width: 0; padding: var(--space-4); border-left: var(--border-active); background: var(--color-construction-300); }
.machines-task-prompt p:last-child { max-width: 470px; margin-bottom: 0; }
.machines-evidence-line { color: var(--text-muted); font-size: var(--text-small); }
.machines-bulldozer { grid-column: 8 / span 5; align-self: start; min-width: 0; margin-top: var(--space-8); padding: var(--space-6); border: 1px solid var(--border-dark); background: var(--color-blueprint-900); }
.machines-bulldozer > * { max-width: 470px; }
.machines-bulldozer__link { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-dark); }
.machines-bulldozer__link a { color: var(--color-construction-300); font-weight: 700; }
.machines-bulldozer__link span { color: var(--color-blueprint-050); font-size: var(--text-small); }
.machines-structure__grid { margin-top: var(--space-6); }
.machines-dump { grid-column: 1 / span 5; min-width: 0; }
.machines-dump > p, .machines-dump h3 { max-width: 470px; }
.machines-profile-number { display: block; margin-bottom: var(--space-2); color: var(--color-construction-500); font-family: var(--font-heading); font-size: 4rem; line-height: .85; }
.machines-limit-note { max-width: 470px; margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--border-light); }
.machines-limit-note p:last-child { margin-bottom: 0; }
.machines-limit-note__label, .machines-caution__label { margin-bottom: var(--space-2); color: var(--color-signal-red-600); font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em; line-height: var(--leading-label); text-transform: uppercase; }
.machines-structure__divider { grid-column: 6 / span 1; display: flex; min-width: 0; justify-content: center; border-left: 1px solid var(--color-blueprint-300); }
.machines-structure__divider span { writing-mode: vertical-rl; color: var(--color-blueprint-700); font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em; }
.machines-crane { grid-column: 7 / span 6; min-width: 0; }
.machines-crane__copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border-dark); background: var(--color-blueprint-900); }
.machines-crane__copy > * { max-width: 440px; margin: 0; }
.machines-crane__prompt { margin-top: var(--space-2); padding: var(--space-3); background: var(--color-paper-050); color: var(--color-ink-950); }
.machines-crane__prompt p { margin: 0; }
.machines-roller__intro { margin-bottom: var(--space-6); }
.machines-roller__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.machines-media--roller { grid-column: 2 / span 6; }
.machines-roller__panel { grid-column: 9 / span 4; min-width: 0; align-self: center; }
.machines-roller__panel > * { max-width: 450px; }
.machines-editorial-read { padding-top: var(--space-4); border-top: 1px solid var(--color-blueprint-300); }
.machines-editorial-read span { display: block; margin-bottom: var(--space-2); color: var(--color-blueprint-700); font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.machines-related-strip { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-active); }
.machines-related-strip a { font-weight: 700; }
.machines-related-strip p { margin: 0; color: var(--text-muted); font-size: var(--text-small); }
.machines-matrix__desktop { margin-top: var(--space-6); }
.machines-matrix__mobile { display: none; }
.machines-matrix__links { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.machines-matrix__links a { display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--border-light); font-weight: 700; text-decoration: none; }
.machines-matrix__links span { flex: 0 0 auto; color: var(--color-blueprint-700); font-size: var(--text-micro); letter-spacing: .1em; }
.machines-steps { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin-top: var(--space-7); }
.machines-step { display: grid; min-width: 0; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-light); }
.machines-step:nth-child(1), .machines-step:nth-child(3) { grid-column: 2 / span 5; }
.machines-step:nth-child(2), .machines-step:nth-child(4) { grid-column: 8 / span 5; }
.machines-step > span { min-width: 0; color: var(--color-construction-500); font-family: var(--font-heading); font-size: 3rem; line-height: .9; }
.machines-step > div { min-width: 0; }
.machines-step p { max-width: 500px; }
.machines-caution { width: min(100%, 700px); margin-top: var(--space-7); padding: var(--space-4); border: 1px solid var(--border-light); border-left: 2px solid var(--color-signal-red-600); }
.machines-caution p:last-child { max-width: 620px; margin-bottom: 0; }
.machines-limits__content { grid-column: 2 / span 7; min-width: 0; }
.machines-limits__content > p { max-width: 620px; }
.machines-limit-record { max-width: 520px; padding-block: var(--space-5); border-top: 1px solid var(--color-blueprint-300); }
.machines-limit-record:last-child { border-bottom: 1px solid var(--color-blueprint-300); }
.machines-limit-record > * { max-width: 520px; }
.machines-limits__rail { grid-column: 10 / span 3; align-self: stretch; min-width: 0; padding-left: var(--space-3); border-left: 1px solid var(--color-blueprint-300); color: var(--color-blueprint-700); font-size: var(--text-micro); font-weight: 700; letter-spacing: .14em; writing-mode: vertical-rl; }
.machines-decision { background: var(--color-blueprint-900); color: var(--color-paper-050); }
.machines-decision__summary { grid-column: 2 / span 7; min-width: 0; }
.machines-decision__summary .lead { max-width: 620px; }
.machines-decision__actions { grid-column: 9 / span 4; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.machines-decision__actions .button { width: 100%; min-height: 48px; }
.machines-decision__destination { max-width: 420px; margin: 0; color: var(--color-blueprint-050); font-size: var(--text-small); }
.machines-decision__links { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.machines-decision__links a { display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-dark); background: var(--color-paper-050); color: var(--color-ink-950); font-weight: 700; text-decoration: none; }
.machines-decision__links span { flex: 0 0 auto; color: var(--color-blueprint-700); font-size: var(--text-micro); }
.machines-decision__source { padding: var(--space-3); border: 1px solid var(--border-dark); }
.machines-decision__source p:last-child { max-width: 420px; margin-bottom: 0; color: var(--color-blueprint-050); font-size: var(--text-small); }
.machines-page [id] { scroll-margin-top: 7rem; }
@media (max-width: 61.1875rem) { .machines-hero__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .machines-hero__titlefield { grid-column: 1 / span 5; } .machines-roster { grid-column: 6 / span 3; } .machines-roster { padding: var(--space-4); } .machines-roster__list a { font-size: 1.1rem; } .machines-sitework__grid, .machines-structure__grid { grid-template-columns: 1fr; } .machines-excavator, .machines-bulldozer, .machines-dump, .machines-structure__divider, .machines-crane { grid-column: 1; } .machines-bulldozer { margin-top: 0; } .machines-structure__divider { height: 1px; border-top: 1px solid var(--color-blueprint-300); border-left: 0; } .machines-structure__divider span { display: none; } .machines-roller__grid { grid-template-columns: 1fr; } .machines-media--roller, .machines-roller__panel { grid-column: 1; } .machines-roller__panel { justify-self: stretch; } .machines-decision__grid { grid-template-columns: 1fr; } .machines-decision__summary, .machines-decision__actions { grid-column: 1; } }
@media (max-width: 56.1875rem) { .machines-method__notes { grid-template-columns: 1fr; gap: var(--space-5); } .machines-matrix__links { grid-template-columns: 1fr; } .machines-limits__grid { grid-template-columns: 1fr; } .machines-limits__content { grid-column: 1; } .machines-limits__rail { display: none; } }
@media (max-width: 53.6875rem) { .machines-map__lane { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-2) var(--space-3); } .machines-map__lane strong { margin-left: 0; padding-left: 0; } .machines-map__lane span:not(.machines-map__number) { grid-column: 2; max-width: 100%; } .machines-map__lane em { grid-column: 2; justify-self: start; } .machines-map__number { grid-row: span 3; } .machines-matrix__desktop { display: none; } .machines-matrix__mobile { display: grid; min-width: 0; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-5); } .machines-matrix__mobile article { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-light); } .machines-matrix__mobile h3 { margin-bottom: var(--space-3); } .machines-matrix__mobile dl, .machines-matrix__mobile dd:last-child { margin-bottom: 0; } .machines-matrix__mobile dd { margin-bottom: var(--space-3); } }
@media (max-width: 53.6875rem) { .machines-steps { grid-template-columns: 1fr; gap: var(--space-5); } .machines-step:nth-child(n) { grid-column: 1; } }
@media (max-width: 47.9375rem) { .machines-hero { padding-block: var(--space-7); } .machines-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); } .machines-hero__titlefield, .machines-roster { grid-column: 1; } .machines-hero h1 { max-width: 100%; font-size: clamp(2.75rem, 11vw, 2.75rem); } .machines-hero .lead { max-width: 38rem; } .machines-roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); } .machines-roster__list li { min-width: 0; } .machines-profile-number { font-size: 3.25rem; } .machines-bulldozer, .machines-crane__copy { padding: var(--space-5); } .machines-media--crane img, .machines-media--roller img { object-position: left center; } .machines-step { grid-template-columns: 1fr; gap: var(--space-2); } .machines-step > span { font-size: 2.75rem; } .machines-decision__actions .button { width: 100%; } }
@media (max-width: 30rem) { .machines-roster__list { grid-template-columns: 1fr; } .machines-map__lane { padding-inline: var(--space-3); } }
@media (prefers-reduced-motion: no-preference) { .machines-map__lane, .machines-roster__list a, .machines-decision__links a { transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .machines-map__lane:hover { background: var(--color-construction-300); transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .machines-map__lane, .machines-roster__list a, .machines-decision__links a { transition: none; } }