/* Mondak Equipment light-mode component system */
:root {
    --color-primary: #123A73;
    --color-accent: #2F7D32;
    --color-accent-hover: #256628;
    --color-hover: #0B2B58;
    --focus-ring: rgba(18, 58, 115, 0.22);
    --color-on-primary: #FFFFFF;
    --color-on-accent: #FFFFFF;
    --color-bg: #F5F7F4;
    --color-surface: #FFFFFF;
    --color-surface-2: #E9EEE9;
    --color-text: #172033;
    --color-muted: #52605A;
    --color-border: #CDD6CF;
    /* 4.16:1 on white and 3.86:1 on the page background. */
    --color-field-border: #708078;
    --color-success: #2F7D32;
    --color-error: #B42318;
    --color-footer-start: #0B2B58;
    --color-footer-end: #061426;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;
    --container-width: 1180px;
    --text-width: 760px;
    --border-radius: 6px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 2px 10px rgba(16, 38, 48, 0.08);
    --shadow: 0 12px 30px rgba(16, 38, 48, 0.12);
    --shadow-lg: 0 22px 55px rgba(16, 38, 48, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* The header is sticky and 70px tall, so an anchor jump (the inventory
       filter links, skip links) would otherwise land with the target tucked
       underneath it. */
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

.container {
    width: min(100% - 3rem, var(--container-width));
    margin-inline: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--color-primary);
    font-family: var(--font-family);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

/* Headings balance their lines so a long title breaks into even lines instead
   of a wide line plus a stranded word. Desktop maximums are deliberately a
   step below the old values: at the previous sizes headings filled 97 percent
   of their column and wrapped to three ragged lines. */
h1,
h2,
h3 {
    text-wrap: balance;
}

h1 {
    margin-bottom: var(--space-md);
    font-size: clamp(2.5rem, 5.2vw, 4.6rem);
}

h2 {
    margin-bottom: var(--space-md);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

h3 {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

h4 {
    margin-bottom: var(--space-sm);
    font-size: 1.15rem;
}

p {
    /* Keeps a lone short word from dropping to its own last line. */
    text-wrap: pretty;
    margin: 0 0 var(--space-md);
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--color-hover);
}

ul,
ol {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-lg);
}

li {
    margin-bottom: var(--space-xs);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.site-header.scrolled {
    padding-block: 0.55rem;
    box-shadow: var(--shadow);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-content: space-between;
}

.logo {
    display: block;
    flex: 0 0 auto;
}

/* The mark is a wide lockup, so it is sized by height. Its own file now carries
   a transparent margin, which is what stops the swoosh apex reading as sliced
   flat against the top of the header. */
/* The complete mark, service bars included. It is a taller lockup than a plain
   wordmark, so it needs more height to keep the two bars legible. */
.site-logo {
    display: block;
    width: auto;
    max-height: 92px;
    /* Keep layout identical to the authoritative PNG even when a rounded
       WebP derivative is selected from srcset. */
    aspect-ratio: 1000 / 398;
    transition: max-height 0.2s ease;
}

.site-header.scrolled .site-logo {
    max-height: 72px;
}

.site-header nav {
    margin-left: auto;
}

.site-header nav ul {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header nav li {
    margin: 0;
}

.site-header nav a {
    position: relative;
    display: block;
    padding: 0.35rem 0;
    color: var(--color-text);
    font-size: 0.89rem;
    font-weight: 700;
    text-decoration: none;
    /* Two word items were splitting mid-name on smaller laptops, so the nav
       read as "Used / Equipment" stacked. The row tightens instead. */
    white-space: nowrap;
}

@media (max-width: 1340px) {
    .site-header nav ul {
        gap: 0.85rem;
    }

    .site-header nav a {
        font-size: 0.83rem;
    }
}

.site-header nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.2rem;
    left: 0;
    height: 2px;
    background: var(--color-accent);
    content: "";
    opacity: 0;
    transform: scaleX(0.2);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-header nav a:hover::after,
.site-header nav a.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-call {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    border: 2px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.header-call:hover {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.mobile-nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    color: var(--color-primary);
    background: transparent;
    font-size: 1.75rem;
    cursor: pointer;
}

.breadcrumbs {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.82rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: min(100% - 3rem, var(--container-width));
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    margin: 0;
}

.breadcrumbs li:not(:last-child)::after {
    margin-left: 0.5rem;
    color: var(--color-muted);
    content: "/";
}

.breadcrumbs li:last-child span {
    color: var(--color-muted);
}

.photo-band,
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 520px;
    /* Compact bands hit their min-height exactly, which left the eyebrow under
       the header and the buttons touching the bottom edge. Padding belongs on
       the shared rule so every band gets it, not just the ones edited by hand. */
    padding-block: clamp(3.5rem, 7vw, 6rem);
    align-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #081C38;
    background-image:
        linear-gradient(90deg, rgba(6, 20, 38, 0.92) 0%, rgba(8, 28, 56, 0.72) 52%, rgba(8, 28, 56, 0.22) 100%),
        var(--band-image, linear-gradient(135deg, #123A73, #081C38));
    background-position: center;
    background-size: cover;
}

.photo-band--home {
    min-height: clamp(600px, 78vh, 780px);
}

.photo-band--compact,
.hero {
    min-height: 410px;
}

.photo-band .container,
.hero .container {
    position: relative;
    z-index: 1;
}

.photo-band-copy {
    max-width: 830px;
}

/* The hero's copy used to be a centred 830px block inside a full-bleed section,
   which pushed its left edge to 341px while the header, footer and the section
   below all started at 166px. Constrain the text, not the container, so the
   hero lines up with the rest of the page. */
.hero .container > * {
    max-width: 830px;
}

.photo-band h1,
.photo-band h2,
.photo-band h3,
.hero h1 {
    color: #FFFFFF;
}

.photo-band h1 {
    max-width: 850px;
}

.photo-band .tagline,
.hero .tagline {
    /* Short lead paragraphs read better balanced: pretty alone still left a
       single word ("region.", "PSI.") stranded on the last line. */
    text-wrap: balance;
    max-width: 720px;
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.hero {
    text-align: left;
}

/* Short, text-only utility heroes look accidental when their content occupies
   only the left half of an otherwise empty navy slab. The opt-in variant keeps
   the same readable measure while balancing the composition. */
.hero--balanced {
    text-align: center;
}

.hero--balanced .container > *,
.hero--balanced .photo-band-copy {
    margin-inline: auto;
}

.hero--balanced .cta-buttons {
    justify-content: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
}

.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.photo-band .eyebrow,
.hero .eyebrow,
.section-dark .eyebrow {
    color: #FFFFFF;
}

/* Links inside dark bands must never inherit the light-background link
   navy: it matches the band and disappears (visual pass 2026-08-09,
   finding A-01). Buttons opt out; they carry their own treatments. */
.section-dark a:not(.btn),
.photo-band a:not(.btn) {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    font: inherit;
    font-size: 0.93rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: var(--color-on-accent);
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.btn-primary:hover {
    color: var(--color-on-accent);
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
}

.btn-secondary {
    color: var(--color-primary);
    border-color: var(--color-surface);
    background: var(--color-surface);
}

.btn-secondary:hover {
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.btn-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}

.btn-outline:hover {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.photo-band .btn-secondary,
.hero .btn-secondary,
.section-dark .btn-secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.08);
}

.photo-band .btn-secondary:hover,
.hero .btn-secondary:hover,
.section-dark .btn-secondary:hover {
    color: var(--color-primary);
    border-color: #FFFFFF;
    background: #FFFFFF;
}

.photo-band .btn-outline,
.hero .btn-outline,
.section-dark .btn-outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.72);
}

.photo-band .btn-outline:hover,
.hero .btn-outline:hover,
.section-dark .btn-outline:hover {
    color: var(--color-primary);
    background: #FFFFFF;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.section {
    padding: clamp(4.5rem, 8vw, 8rem) 0;
}

.section-alt {
    border-block: 1px solid var(--color-border);
    background: var(--color-surface);
}

.section-dark {
    color: #FFFFFF;
    background: var(--color-primary);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #FFFFFF;
}

.section-dark p,
.section-dark li {
    color: rgba(255, 255, 255, 0.9);
}

.section-title {
    max-width: 850px;
    margin-inline: auto;
    text-align: center;
}

.section-subtitle {
    max-width: 740px;
    margin: 0 auto var(--space-xl);
    color: var(--color-muted);
    font-size: 1.12rem;
    text-align: center;
}

/* A few long section introductions were spanning the full 1180px container.
   Limit only unclassed, top-level prose so cards, forms and deliberately wide
   components keep their own layout contracts. */
main > .section > .container:not(.content-narrow) > p:not([class]) {
    max-width: 68ch;
    margin-inline: auto;
}

/* When a two-column feature is followed by a concluding paragraph, keep the
   paragraph from visually attaching to the final list in the feature. */
main > .section > .container > .editorial-row + p {
    margin-top: var(--space-xl);
}

.section-dark .section-subtitle {
    color: rgba(255, 255, 255, 0.88);
}

.trust-strip {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.trust-strip-inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: 1.1rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.trust-mark {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
}

.editorial-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    /* Start, not center: with figures at a fixed height and copy blocks of
       varying length, centering left each eyebrow floating anywhere from 23px
       above to 115px below its photo's top edge, so no two rows lined up. */
    align-items: start;
}

/* Optical alignment: the eyebrow's cap height sits slightly below the box top. */
.editorial-copy {
    padding-top: 0.4rem;
}

/* These headings live in a ~570px column, not the full container, so the page
   h2 size overflowed by a few pixels and forced titles like "Hydraulic
   component work" to break after the first word. */
.editorial-copy h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
}

.editorial-row + .editorial-row {
    margin-top: clamp(4rem, 8vw, 8rem);
}

/* Swap the track widths too, so the copy always sits in the wider column.
   Reordering alone made the photo 517px on one row and 572px on the next, and
   squeezed reversed-row headings against the container edge. */
.editorial-row--reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.editorial-row--reverse .editorial-copy {
    order: 2;
}

.editorial-row--reverse .figure {
    order: 1;
}

/* A text-only editorial block is preferable to repeating a photo from its
   dedicated page. Keep the same copy measure and section rhythm without an
   empty second grid track. */
.editorial-row--text-only {
    grid-template-columns: minmax(0, 650px);
    justify-content: center;
}

.editorial-row--text-only .editorial-copy {
    max-width: none;
    order: initial;
}

.editorial-copy {
    max-width: 650px;
}

.editorial-copy > :last-child {
    margin-bottom: 0;
}

.figure {
    position: relative;
    margin: 0;
}

.figure img {
    display: block;
    width: 100%;
    min-height: 420px;
    max-height: 650px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
}

.figure::after {
    position: absolute;
    right: -0.8rem;
    bottom: -0.8rem;
    z-index: -1;
    width: 38%;
    height: 42%;
    border-radius: var(--border-radius);
    background: var(--color-accent);
    content: "";
}

.editorial-row--reverse .figure::after {
    right: auto;
    left: -0.8rem;
}

.service-ledger,
.detail-list {
    margin: var(--space-lg) 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.service-ledger li,
.detail-list li {
    display: flex;
    gap: var(--space-sm);
    margin: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.service-ledger strong {
    min-width: 34%;
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.headline-moment {
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}

.headline-moment h2 {
    font-size: clamp(2.7rem, 7vw, 6.2rem);
}

.headline-moment p {
    max-width: 720px;
    margin-inline: auto;
    color: var(--color-muted);
    font-size: 1.18rem;
}

.section-dark .headline-moment p {
    color: rgba(255, 255, 255, 0.9);
}

.process-steps {
    max-width: 980px;
    margin: var(--space-xl) auto 0;
    counter-reset: process;
}

.process-step {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
}

.process-step:last-child {
    border-bottom: 1px solid var(--color-border);
}

.process-number {
    color: var(--color-accent);
    font-family: var(--font-family-mono);
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.9;
}

.process-content p {
    max-width: 700px;
    margin-bottom: 0;
    color: var(--color-muted);
}

.brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    max-width: 980px;
    margin: var(--space-lg) auto 0;
}

.brand-row span {
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-surface);
    font-size: 0.88rem;
    font-weight: 800;
}

.category-ledger {
    margin: var(--space-xl) 0 0;
    border-top: 2px solid var(--color-primary);
}

.category-ledger > div {
    display: grid;
    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.category-ledger dt {
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.category-ledger dd {
    /* Full container width ran 105 characters per line, well past comfortable. */
    max-width: 68ch;
    margin: 0;
}

.category-ledger dd p:last-child {
    margin-bottom: 0;
}

.legacy-anchor {
    display: block;
    height: 0;
    overflow: hidden;
}

.category-jump-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-sm);
    max-width: 1080px;
    margin: var(--space-xl) auto 0;
}

.category-jump-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 58px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-primary);
    background: var(--color-surface);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.faq-jump-list {
    padding: 0;
    list-style: none;
}

.faq-jump-list li {
    margin: 0;
}

.category-jump-list a::after {
    color: var(--color-accent);
    content: "\2192";
    font-size: 1.05em;
}

.category-jump-list a:hover,
.category-jump-list a:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.linked-heading-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
}

.linked-heading-link::after {
    color: var(--color-accent);
    content: "\2192";
    font-size: 0.72em;
}

.linked-heading-link:hover,
.linked-heading-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.service-category-heading {
    max-width: 850px;
}

.service-category-heading h2 {
    margin-bottom: 0;
}

.service-category-heading p {
    margin: var(--space-sm) 0 0;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.taxonomy-service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 var(--space-xl);
    margin: var(--space-xl) 0 0;
    padding: 0;
    border-top: 2px solid var(--color-primary);
    list-style: none;
}

.taxonomy-service-list li {
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.taxonomy-service-list li > span,
.taxonomy-service-list li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 64px;
    padding: 0.9rem 0;
    color: var(--color-primary);
    font-weight: 800;
    text-decoration: none;
}

.taxonomy-service-list li > span {
    justify-content: flex-start;
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.taxonomy-service-list li > a:hover,
.taxonomy-service-list li > a:focus-visible {
    color: var(--color-accent);
    background: rgba(47, 125, 50, 0.07);
}

.service-detail-cue {
    color: var(--color-accent);
    font-size: 1.25rem;
    line-height: 1;
    white-space: nowrap;
}

.brand-row--static {
    justify-content: flex-start;
}

.brand-row--static span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    border: 0;
    border-radius: 0;
    color: var(--color-text);
    background: transparent;
    font-weight: 650;
}

.brand-row--static span::before {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.spec-sheet-list {
    margin-top: var(--space-xl);
    border-top: 2px solid var(--color-primary);
}

.spec-sheet {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: stretch;
    padding: clamp(2rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Alternation is driven by a class, not nth-child, so that filtering the list
   still alternates correctly over whatever remains visible.
   The columns must swap with the content: reordering alone left the photo in a
   5fr slot on one row and a 7fr slot on the next, so machine photos changed
   size by 40 percent on every alternate row down the list. */
.spec-sheet--flip {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
}

.spec-sheet--flip .spec-sheet-media {
    order: 2;
}

.spec-sheet-media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: var(--color-surface-2);
}

.spec-sheet-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.spec-sheet-empty {
    display: grid;
    min-height: 320px;
    place-items: center;
    padding: var(--space-lg);
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.spec-sheet-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.spec-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-sm);
}

.spec-category,
.spec-status {
    padding: 0.22rem 0.55rem;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spec-status {
    color: #FFFFFF;
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.spec-category {
    padding: 0;
    border: 0;
    color: var(--color-muted);
}

.spec-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
}

.spec-data > div {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-border);
}

.spec-data dt {
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spec-data dd {
    margin: 0.2rem 0 0;
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 800;
}

.spec-price {
    margin: 0 0 var(--space-md);
    color: var(--color-primary);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
}

.classified-row {
    max-width: 820px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl);
    border-block: 2px solid var(--color-primary);
    text-align: center;
}

.classified-row p {
    color: var(--color-muted);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.contact-panel {
    padding: var(--space-lg);
    border-top: 3px solid var(--color-primary);
    background: var(--color-surface);
}

.contact-panel + .contact-panel {
    margin-top: var(--space-lg);
}

.contact-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-panel li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-size: 0.93rem;
    font-weight: 750;
}

/* Checkboxes and radios are deliberately excluded: the shared rule below sets
   a full width and a text-input height, which stretched them into 48px boxes. */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
    width: 100%;
    /* Chrome does not apply an inherited line-height to select, so a select and
       a text input with identical padding rendered 3px apart and sat unevenly
       side by side. A shared min-height lands both on exactly the same box. */
    min-height: 3.4rem;
    padding: 0.75rem var(--space-sm);
    border: 2px solid var(--color-field-border);
    border-radius: var(--border-radius);
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
    font-size: 1rem;
    line-height: 1.65;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-height: 0;
    accent-color: var(--color-primary);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.form-helper {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.alert {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-primary);
    background: var(--color-surface);
}

.alert h2,
.alert h3 {
    font-size: 1.35rem;
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert-success {
    border-left-color: var(--color-success);
}

.alert-error,
.alert-danger {
    border-left-color: var(--color-error);
}

.alert-warning {
    border-left-color: #9A6700;
}

.content-narrow {
    max-width: var(--text-width);
    margin-inline: auto;
}

/* A narrow measure is right for legal copy, but centring the block put the body
   text 210px inside the left-aligned hero and header above it. This class is
   applied to the same element as .container on those pages, so narrowing the
   element itself either centres it or (worse) zeroes the container's own
   margin and throws the text against the viewport edge. Keep the container's
   box and edges, and constrain the text inside it instead. */
.container.content-narrow {
    max-width: none;
    width: min(100% - clamp(3rem, 7vw, 6rem), var(--container-width));
    margin-inline: auto;
}

.container.content-narrow > * {
    max-width: var(--text-width);
}

/* Legal copy stays left-aligned within its measure, but the measure itself is
   centred beneath the balanced legal hero. */
.container.legal-copy > * {
    margin-right: auto;
    margin-left: auto;
}

.content-narrow h2 {
    margin-top: var(--space-xl);
    font-size: 1.8rem;
}

.content-narrow h3 {
    margin-top: var(--space-lg);
}

.blog-list {
    margin-top: var(--space-xl);
    border-top: 2px solid var(--color-primary);
}

.blog-list article {
    display: grid;
    grid-template-columns: minmax(140px, 0.25fr) minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.blog-list time {
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
}

.blog-list h2 {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.35rem, 3vw, 2.2rem);
}

.blog-list p {
    color: var(--color-muted);
}

.blog-read-more {
    font-weight: 800;
}

.blog-post {
    padding: var(--space-xxl) 0;
}

.blog-header {
    margin-bottom: var(--space-xxl);
    /* Preserve the article-title rhythm independently from the site chrome.
       This used to arrive accidentally through the global header selector. */
    padding-top: 0.8rem;
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-border);
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.blog-header h1 {
    /* Post titles are full sentences, often 10 to 20 words, unlike the
       few-word page heroes the global h1 scale was tuned for. At that
       scale one title filled the whole viewport above the fold (owner,
       2026-08-18). Article-headline scale instead: ~27px on phones up to
       ~42px on wide desktops, with the looser leading a three-line title
       needs. Applies to every post past and future via the shared
       template markup. */
    font-size: clamp(1.7rem, 1.4vw + 1.1rem, 2.6rem);
    line-height: 1.25;
}

.blog-meta {
    margin-bottom: var(--space-sm);
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.82rem;
}

.blog-intro {
    color: var(--color-muted);
    font-size: 1.2rem;
}

.blog-content {
    font-size: 1.04rem;
}

.blog-content h2 {
    margin-top: var(--space-xxl);
    font-size: 2rem;
}

.blog-content h3 {
    margin-top: var(--space-lg);
}

.blog-content a {
    text-decoration: underline;
}

.blog-content img {
    height: auto;
}

.blog-content table {
    display: block;
    max-width: 100%;
    margin: var(--space-lg) 0;
    overflow-x: auto;
    border-collapse: collapse;
}

.blog-content th,
.blog-content td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: left;
}

.blog-content pre {
    padding: var(--space-md);
    overflow-x: auto;
    color: #FFFFFF;
    border-radius: var(--border-radius);
    background: #172033;
}

.blog-content code {
    font-family: var(--font-family-mono);
}

.blog-cta {
    margin: var(--space-xxl) 0;
    padding: var(--space-xl);
    border-block: 2px solid var(--color-primary);
    text-align: center;
}

.blog-cta .cta-buttons {
    justify-content: center;
}

.related-posts,
.author-bio {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.related-post-card {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.related-post-card p {
    color: var(--color-muted);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    height: 100%;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
}

/* A lone card in the last row reads as an omission when it hugs the left edge.
   Centre only the single-card remainder; complete rows retain their grid. */
.grid-2 > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-lg)) / 2);
}

.card p {
    color: var(--color-muted);
}

/* Expanders and navigation use distinct FAQ shapes. A fixed right gutter
   keeps wrapped questions aligned instead of running behind the marker. */
.faq-item {
    padding: 0;
    overflow: hidden;
}

.faq-item summary {
    position: relative;
    display: block;
    padding: var(--space-lg) calc(var(--space-lg) + 2rem) var(--space-lg) var(--space-lg);
    color: var(--color-primary);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    position: absolute;
    top: 50%;
    right: var(--space-lg);
    color: var(--color-accent);
    content: "\203A";
    font-size: 1.65rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-item > p {
    padding-inline: var(--space-lg);
}

.faq-item > p:last-child {
    padding-bottom: var(--space-lg);
}

.faq-link-card {
    height: auto;
    border-left: 4px solid var(--color-accent);
}

.faq-link-card a {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.faq-link-card a::after {
    margin-left: auto;
    color: var(--color-accent);
    content: "\2192";
    text-decoration: none;
}

.faq-link-card p:last-child,
.faq-link-card ul:last-child {
    margin-bottom: 0;
}

.faq-browse-action {
    margin: var(--space-lg) 0 0;
}

.faq-directory {
    padding-block: clamp(var(--space-xl), 6vw, var(--space-xxl));
}

.faq-hub-section {
    scroll-margin-top: 5.5rem;
}

.faq-hub-section:nth-of-type(even) {
    background: var(--color-surface-2);
}

.faq-hub-grid {
    align-items: start;
}

.faq-hub-grid > .card {
    height: auto;
}

.faq-section-return {
    margin: var(--space-lg) 0 0;
    text-align: center;
}

.faq-section-return a {
    font-weight: 800;
}

.review-grid {
    margin-top: var(--space-xl);
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.review-stars {
    color: var(--color-accent);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    line-height: 1;
}

.review-quote {
    flex: 1;
    margin: 0;
}

.review-quote p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.05rem;
}

.review-attribution {
    margin: 0;
    font-size: 0.9rem;
}

.review-cta {
    justify-content: center;
    margin-top: var(--space-xl);
}

/* Careers keeps the editable job store plain text. These styles make the
   recognized display sections scannable without adding presentation fields
   to that store or changing the careers-office editing contract. */
.career-job-card {
    position: relative;
    overflow: hidden;
    border-left: 5px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.careers-positions-section {
    padding-bottom: var(--space-xl);
}

.careers-positions .career-job-card {
    width: min(100%, 920px);
    margin-inline: auto;
}

.careers-positions .career-job-card > * {
    max-width: 68ch;
}

.career-job-meta {
    display: inline-flex;
    padding: 0;
    border-radius: 0;
    color: var(--color-muted) !important;
    background: transparent;
    font-family: var(--font-family-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.career-job-section {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.career-job-section + .career-job-section {
    margin-top: var(--space-md);
}

.career-job-section h4 {
    margin-bottom: 0.75rem;
}

.career-job-section ul {
    margin-bottom: 0;
}

.career-benefit-grid {
    align-items: stretch;
}

.career-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border-top: 4px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.career-benefit-card p {
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
}

.career-benefit-icon {
    display: inline-grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-on-accent);
    background: var(--color-accent);
}

.career-benefit-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.career-application-alert,
.career-application-panel {
    width: min(100%, 900px);
    margin-inline: auto;
}

.career-application-alert h3 {
    color: var(--color-primary);
}

.section-dark .career-application-alert p {
    color: var(--color-text);
}

.career-application-panel {
    padding: clamp(var(--space-md), 4vw, var(--space-xl));
    border-radius: var(--border-radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.section-dark .career-application-panel label,
.section-dark .career-application-panel p {
    color: var(--color-text);
}

.career-form-grid {
    gap: 0 var(--space-lg);
}

.box {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

footer {
    position: relative;
    padding: var(--space-xxl) 0 var(--space-xl);
    color: rgba(255, 255, 255, 0.86);
    background: linear-gradient(135deg, var(--color-footer-start), var(--color-footer-end));
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-xl);
}

.footer-name {
    margin-bottom: var(--space-xs);
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 800;
}

.footer-heading {
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, 0.64);
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.45rem;
}

footer a {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration-color: rgba(255, 255, 255, 0.58);
}

footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
}

.footer-social {
    display: flex;
    gap: 0.7rem;
    margin-top: var(--space-sm);
}

.social-link {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

.social-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.footer-bottom {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.86rem;
    text-align: center;
}

.footer-bottom p {
    margin: var(--space-xs) 0;
}

.call-bar {
    display: none;
}

.back-to-top {
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 999;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    opacity: 0;
    color: var(--color-on-primary);
    background: var(--color-primary);
    box-shadow: var(--shadow);
    font-size: 1.4rem;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }

@media (max-width: 1100px) {
    body {
        padding-bottom: 68px;
    }

    /* Once the full navigation collapses, the 92px desktop lockup makes the
       sticky header 119px tall on tablets and narrow laptops. Keep the mark
       legible without giving the compact menu a desktop-sized header. */
    .site-logo {
        max-height: 64px;
    }

    .site-header.scrolled .site-logo {
        max-height: 56px;
    }

    .site-header {
        position: sticky;
    }

    .site-header nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        width: 100%;
        margin: 0;
        padding: var(--space-sm) 0;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow-lg);
    }

    .site-header nav.active {
        display: block;
    }

    .site-header nav ul {
        display: block;
    }

    .site-header nav a {
        padding: 0.8rem 1.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    .site-header nav a::after {
        display: none;
    }

    .header-call {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .call-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 64px;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        background: var(--color-primary);
        box-shadow: 0 -8px 24px rgba(6, 20, 38, 0.2);
    }

    .call-bar a {
        display: grid;
        place-items: center;
        min-height: 64px;
        padding: 0.65rem;
        color: #FFFFFF;
        font-size: 0.9rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
    }

    .call-bar a + a {
        border-left: 1px solid rgba(255, 255, 255, 0.28);
        background: var(--color-accent);
    }

    .back-to-top {
        bottom: 82px;
    }
}

@media (max-width: 820px) {
    .container,
    .breadcrumbs ol {
        width: min(100% - 2rem, var(--container-width));
    }

    .photo-band,
    .hero {
        min-height: 500px;
        background-image:
            linear-gradient(90deg, rgba(6, 20, 38, 0.9), rgba(8, 28, 56, 0.62)),
            var(--band-image, linear-gradient(135deg, #123A73, #081C38));
    }

    .photo-band--home {
        min-height: 620px;
    }

    .trust-strip-inner {
        display: grid;
        gap: 0.75rem;
    }

    .editorial-row,
    .contact-layout,
    .spec-sheet {
        grid-template-columns: 1fr;
    }

    .editorial-row--reverse .editorial-copy,
    .editorial-row--reverse .figure,
    .spec-sheet:nth-child(even) .spec-sheet-media {
        order: initial;
    }

    .figure img {
        min-height: 340px;
    }

    .process-step {
        grid-template-columns: 72px 1fr;
    }

    .category-ledger > div,
    .blog-list article {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .grid-2 > .card:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }

    /* The FAQ hub mixes answers owned here with questions that navigate to a
       service page. On phones, flatten navigation groups so every source
       question gets the same card shell and type treatment as an expander.
       The arrow remains directional while the chevron remains expandable. */
    .faq-hub-grid > .faq-link-card,
    .faq-hub-grid > .faq-link-card > .faq-related-links {
        display: contents;
    }

    .faq-hub-grid > .faq-link-card > .faq-related-label {
        display: none;
    }

    .faq-hub-grid > .faq-link-card > .faq-link-question,
    .faq-hub-grid > .faq-link-card > .faq-related-links > li {
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        background: var(--color-surface);
        list-style: none;
    }

    .faq-hub-grid .faq-link-card a {
        position: relative;
        display: block;
        padding: var(--space-lg) calc(var(--space-lg) + 2rem) var(--space-lg) var(--space-lg);
        color: var(--color-primary);
        font-weight: 800;
        text-decoration: none;
    }

    .faq-hub-grid .faq-link-card a::after {
        position: absolute;
        top: 50%;
        right: var(--space-lg);
        margin-left: 0;
        font-size: 1.2rem;
        line-height: 1;
        transform: translateY(-50%);
    }

    /* Mobile service rows need to read as controls before they are touched.
       Keep the established green arrow, add its existing "Details" vocabulary,
       and reuse the desktop wash as immediate pressed-state feedback. */
    .taxonomy-service-list li > a {
        transition: color 0.12s ease, background-color 0.12s ease;
    }

    .taxonomy-service-list li > a:active {
        color: var(--color-accent);
        background: rgba(47, 125, 50, 0.07);
    }

    .service-detail-cue {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        transition: transform 0.12s ease;
    }

    .service-detail-cue::before {
        content: "Details";
        font-family: var(--font-family-mono);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .taxonomy-service-list li > a:active .service-detail-cue {
        transform: translateX(0.2rem);
    }

    /* These are services without detail routes, not column labels. Title case
       and body type preserve that meaning; muted color plus no cue keeps them
       visibly non-interactive beside the linked rows. */
    .taxonomy-service-list li > span {
        color: var(--color-muted);
        font-family: inherit;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: normal;
        text-transform: none;
    }

    .footer-grid {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 17px;
    }

    .site-logo {
        max-height: 50px;
    }

    .site-header.scrolled .site-logo {
        max-height: 46px;
    }

    .section {
        padding-block: 4.5rem;
    }

    .cta-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .service-ledger li {
        display: block;
    }

    .service-ledger strong {
        display: block;
        margin-bottom: 0.25rem;
    }

    .process-step {
        grid-template-columns: 1fr;
    }

    .spec-data {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================================
   Used equipment listing (T-151): filter bar, spec points, media proportions
   ============================================================================ */

.inventory-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-primary);
}

.inventory-bar-intro {
    flex: 1 1 28rem;
}

.inventory-bar-intro h2 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    text-wrap: balance;
}

.inventory-bar-intro p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.inventory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inventory-filter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inventory-filter span {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.inventory-filter:hover,
.inventory-filter:focus-visible {
    border-color: var(--color-primary);
    text-decoration: none;
}

.inventory-filter.is-active {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.inventory-filter.is-active span {
    color: var(--color-on-primary);
    opacity: 0.75;
}

.inventory-tools {
    flex: 1 0 100%;
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.inventory-tools-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.inventory-tools-heading .eyebrow {
    margin-bottom: 0.25rem;
}

.inventory-tools-heading h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.inventory-clear {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.inventory-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    gap: var(--space-sm);
    align-items: end;
}

@media (min-width: 1100px) {
    .inventory-control-grid {
        grid-template-columns:
            minmax(9.5rem, 1.15fr)
            repeat(4, minmax(8rem, 1fr))
            minmax(11rem, 1.3fr)
            minmax(8.5rem, 1fr);
    }

    .inventory-tools--no-price .inventory-control-grid {
        grid-template-columns:
            minmax(9.5rem, 1.15fr)
            repeat(2, minmax(8rem, 1fr))
            minmax(11rem, 1.3fr)
            minmax(8.5rem, 1fr);
    }
}

.inventory-control {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.inventory-control > span {
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.inventory-control input,
.inventory-control select {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: 0.65rem 0.7rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 0;
    font: inherit;
}

.inventory-control input:hover,
.inventory-control select:hover {
    border-color: var(--color-muted);
}

.inventory-control input:focus,
.inventory-control select:focus {
    border-color: var(--color-primary);
}

.inventory-apply {
    width: 100%;
    min-height: 3rem;
}

.inventory-active-summary {
    margin: var(--space-sm) 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.inventory-empty {
    margin-top: var(--space-lg);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.inventory-empty h3 {
    margin-bottom: var(--space-xs);
}

.inventory-empty p {
    max-width: 42rem;
    margin: 0 auto var(--space-md);
    color: var(--color-muted);
}

.inventory-empty[hidden],
.inventory-clear[hidden] {
    display: none;
}

/* The filter bar already draws the rule above the listing, so the list drops
   its own top border to avoid a doubled line. */
.inventory-bar ~ .spec-sheet-list {
    margin-top: 0;
    border-top: 0;
}

/* Media keeps a usable shape instead of stretching to match a tall spec list,
   which was destroying the crop on landscape source photos. */
.spec-sheet-media {
    align-self: start;
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.spec-sheet-media img {
    min-height: 0;
    object-position: center;
}

.spec-photo-count {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-on-primary);
    background: rgba(7, 21, 39, 0.78);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spec-points {
    margin: 0 0 var(--space-md);
    padding: 0;
    columns: 2;
    column-gap: var(--space-lg);
    list-style: none;
}

.spec-points li {
    margin-bottom: 0.3rem;
    padding-left: 1rem;
    position: relative;
    break-inside: avoid;
    font-size: 0.95rem;
    line-height: 1.45;
}

.spec-points li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.4rem;
    height: 1px;
    background: var(--color-accent);
}

.spec-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: baseline;
    margin-bottom: var(--space-md);
}

.spec-hours {
    margin: 0;
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.82rem;
}

.spec-sheet[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .spec-points {
        columns: 1;
    }

    .spec-sheet .spec-points li:nth-child(n + 5) {
        display: none;
    }

    .inventory-filters {
        width: 100%;
    }

    .inventory-tools {
        padding: var(--space-sm);
    }

    .inventory-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-control--sort,
    .inventory-apply {
        grid-column: 1 / -1;
    }
}

/* ----------------------------------------------------------------------------
   Design pass follow-ups from the full-page visual audit
   ---------------------------------------------------------------------------- */

/* Browser default italicises address; the same address in the footer was roman. */
address {
    font-style: normal;
}

/* The photo count badge sat almost on the photo corner. */
.spec-photo-count {
    right: 0.75rem;
    bottom: 0.75rem;
}

/* Match the other section headings instead of sitting 1.6px smaller. */
.inventory-bar-intro h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

/* Legal footer links were louder than the copyright line above them. */
.footer-legal,
.footer-legal a {
    font-weight: 400;
    opacity: 0.82;
}

/* Gutters collapsed from 166px to 50px between 1512 and 1280 because the
   container was a fixed max-width with a small minimum inset. */
.container {
    width: min(100% - clamp(3rem, 7vw, 6rem), var(--container-width));
}

/* The blog section sat on its own 1000px grid, 90px inside every other page. */
.blog-shell,
.blog-list-section {
    max-width: none;
}

/* Blog empty state: was a single grey sentence floating in whitespace. */
.blog-empty {
    max-width: 720px;
    margin: var(--space-lg) auto 0;
    padding: var(--space-xl) var(--space-lg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    text-align: center;
}

.blog-empty h2 {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.blog-empty p {
    margin-bottom: var(--space-lg);
    color: var(--color-muted);
}

.blog-empty .cta-buttons {
    justify-content: center;
}

/* The "Last updated" line was the only italic body text on the site. */
.content-meta {
    color: var(--color-muted);
    font-size: 0.92rem;
}

/* ----------------------------------------------------------------------------
   Featured equipment on the home page. Deliberately not a slider and not a
   uniform card grid: one lead machine with two supporting entries beside it.
   ---------------------------------------------------------------------------- */

.featured-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: end;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
}

.featured-head h2 {
    margin-bottom: 0;
}

.featured-lot {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.featured-lead img {
    display: block;
    width: 100%;
    /* height:auto is required, otherwise the width/height attributes pin the
       box and aspect-ratio is ignored. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-2);
}

.featured-lead-copy {
    padding-top: var(--space-md);
}

.featured-lead-copy h3 {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: baseline;
    margin-bottom: var(--space-md);
}

.featured-more {
    margin: 0;
    padding: 0;
    list-style: none;
}

.featured-more li {
    display: grid;
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    margin: 0;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.featured-more li:first-child {
    padding-top: 0;
}

.featured-more img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-2);
}

.featured-more h3 {
    margin: 0.35rem 0 0.25rem;
    font-size: 1.1rem;
}

.featured-more .spec-price {
    margin: 0;
    font-size: 1.15rem;
}

@media (max-width: 860px) {
    .featured-lot {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   Per-machine pages (/used-equipment/<slug>)
   ---------------------------------------------------------------------------- */

/* The listing photo is a link now, so it has to fill the media box the way the
   bare <img> used to. */
.spec-sheet-photo {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.spec-sheet-photo::after {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.55rem;
    color: #FFFFFF;
    background: rgba(7, 21, 39, 0.82);
    content: "View machine \2192";
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spec-sheet-copy h3 a {
    color: inherit;
    text-decoration: none;
}

.spec-sheet-copy h3 a::after {
    margin-left: 0.35rem;
    color: var(--color-accent);
    content: "\2192";
    font-size: 0.85em;
}

.spec-sheet-copy h3 a:hover,
.spec-sheet-copy h3 a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

.machine-layout {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.machine-gallery {
    min-width: 0;
}

.machine-photo {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-surface-2);
}

/* height:auto is required on every one of these. The img elements carry real
   width/height attributes so the page does not shift while photos load, and
   those attributes pin the box and make aspect-ratio a no-op without it. */
.machine-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.machine-photo-position {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-on-primary);
    background: rgba(7, 21, 39, 0.78);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.machine-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.machine-thumbs li {
    flex: 0 1 calc((100% - 2.4rem) / 5);
    margin: 0;
}

.machine-thumb {
    display: block;
    /* The border is always there so switching photos cannot nudge the row. */
    border: 2px solid transparent;
    background: var(--color-surface-2);
}

.machine-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity 0.15s ease;
}

.machine-thumb.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(47, 125, 50, 0.22);
}

.machine-thumb.is-active img,
.machine-thumb:hover img,
.machine-thumb:focus-visible img {
    opacity: 1;
}

.machine-summary h1 {
    margin-top: 0.4rem;
}

.machine-summary .spec-price {
    margin-bottom: var(--space-sm);
}

.machine-specs-heading {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: 1.15rem;
}

.machine-note {
    margin: 0 0 var(--space-md);
    color: var(--color-muted);
    font-size: 0.92rem;
}

.machine-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
}

.machine-related a {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.machine-related a:hover,
.machine-related a:focus-visible {
    transform: translateY(-3px);
}

.machine-related img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-sm);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-2);
}

.machine-related .spec-category {
    display: inline-block;
}

.machine-related-title {
    display: block;
    margin: 0.4rem 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.machine-related-action {
    display: inline-flex;
    margin-top: 0.7rem;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.machine-related a:hover .machine-related-title,
.machine-related a:focus-visible .machine-related-title {
    color: var(--color-accent);
    text-decoration: underline;
}

.machine-related .spec-price {
    margin: 0;
    font-size: 1.15rem;
}

@media (max-width: 860px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track floors at the content width,
       which lets the scrolling thumb row below push the whole page sideways. */
    .machine-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .machine-related {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Nineteen thumbnails wrapped to seven rows on a phone, burying the price
       and the specs below 650px of contact sheet. One scrolling row instead. */
    .machine-thumbs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.4rem;
        scroll-snap-type: x proximity;
    }

    .machine-thumbs li {
        flex: 0 0 84px;
        margin: 0;
        scroll-snap-align: start;
    }
}

.machine-thumbs-hint {
    display: none;
    margin: var(--space-xs) 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 860px) {
    .machine-thumbs-hint {
        display: block;
    }
}

/* ----------------------------------------------------------------------------
   Photo viewer. Added by JavaScript only: with scripting off the gallery links
   go straight to the photo files, which is why every thumbnail is a real link.
   ---------------------------------------------------------------------------- */
.photo-viewer {
    position: fixed;
    inset: 0;
    /* Must clear the sticky header (1001) and its open mobile nav (1100),
       otherwise the header paints over the dialog and the Close button sits
       under the phone-number link. */
    z-index: 2000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    background: rgba(6, 20, 38, 0.94);
}

.photo-viewer[hidden] {
    display: none;
}

.photo-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    color: #FFFFFF;
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.photo-viewer-stage {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}

.photo-viewer-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.photo-viewer button {
    padding: 0.55rem 1.1rem;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.photo-viewer button:hover,
.photo-viewer button:focus-visible {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
}

.photo-viewer button[disabled] {
    opacity: 0.4;
    cursor: default;
}

body.photo-viewer-open {
    overflow: hidden;
}

/* Homepage featured cards link to their machine pages now. The photo wrapper
   must be a block, otherwise the inline anchor leaves a descender gap under
   the image. */
.featured-lead > a,
.featured-more li > a {
    display: block;
}

.featured-lead-copy h3 a,
.featured-more h3 a {
    color: inherit;
    text-decoration: none;
}

.featured-lead-copy h3 a:hover,
.featured-lead-copy h3 a:focus-visible,
.featured-more h3 a:hover,
.featured-more h3 a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

/* The focus ring is navy, which vanishes against the viewer backdrop. */
.photo-viewer button:focus-visible {
    outline-color: #FFFFFF;
}

/* Previous and Next stay focusable at the ends of the gallery (aria-disabled,
   not disabled), so the dialog cannot lose focus to the page behind it. */
.photo-viewer button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

/* Screen-reader-only status text. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Service-area coverage map (T-195): the SVG's city labels stop being
   readable when the 1000px-wide map shrinks below tablet width, so small
   screens pan the map at a legible size instead. Desktop is unaffected:
   the container is wider than the minimum, so the image just fills it. */
.map-scroll {
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}
.map-scroll img {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
    border-radius: var(--border-radius-lg);
}

/* Map scroll affordance (T-195 review): the pannable region is keyboard
   focusable, shows its focus, and narrow screens get an explicit cue.
   The hint disappears once the container is wide enough that the map no
   longer scrolls (min-width 640px plus container padding). */
.map-scroll:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.map-scroll-hint {
    margin-top: var(--space-sm, 0.5rem);
    font-size: 0.9rem;
    color: var(--color-text-muted, #52605a);
    text-align: center;
}
@media (min-width: 700px) {
    .map-scroll-hint { display: none; }
}