/* =============================================================================
   AION MOTO — aionmoto.com
   One stylesheet, no framework, no external requests.

   The renders drive the palette: near-black machines, brushed steel wordmark,
   cold LED light, polished concrete. The site stays monochrome to match, and
   uses contrast and space rather than colour to carry hierarchy.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Utilities
     4.  Buttons
     5.  Wordmark
     6.  Header and navigation
     7.  Home hero
     8.  Section furniture
     9.  Lineup cards
     10. Platform: diagram and pillars
     11. Range figures
     12. Service points and callouts
     13. Colour swatches
     14. Dealer form
     15. Machine pages
     16. 404
     17. Footer
     18. Reveal animation
   ============================================================================= */


/* 1. Tokens ================================================================= */

:root {
    /* Surfaces, darkest to lightest */
    --bg:          #08080a;
    --bg-alt:      #0d0d10;
    --surface:     #131317;
    --surface-2:   #1a1a1f;

    /* Ink */
    --text:        #f2f2f4;
    --text-dim:    #a2a2ab;
    --text-faint:  #6c6c76;

    /* Lines and glows */
    --line:        rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.18);
    --glow:        rgba(255, 255, 255, 0.05);

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* Rhythm */
    --shell:       1280px;
    --shell-pad:   clamp(1.25rem, 4vw, 3rem);
    --section-y:   clamp(4.5rem, 10vw, 9rem);

    /* Motion */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --dur:         0.55s;

    --header-h:    68px;
}


/* 2. Reset and base ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

img { height: auto; background-color: var(--surface); }

a { color: inherit; text-decoration: none; }

button, input {
    font: inherit;
    color: inherit;
}

h1, h2, h3 {
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 600;
    text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--text);
    color: var(--bg);
}


/* 3. Utilities ============================================================== */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.shell--narrow { max-width: 760px; }

.u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1.1rem;
}

.prose p + p { margin-top: 1.15rem; }

.prose p {
    color: var(--text-dim);
    max-width: 62ch;
}

.note {
    margin-top: 1.75rem !important;
    padding-left: 1.15rem;
    border-left: 2px solid var(--line-strong);
    color: var(--text) !important;
    font-size: 0.9375rem;
}


/* 4. Buttons =============================================================== */

.btn {
    --btn-pad-y: 0.9rem;
    --btn-pad-x: 1.6rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s var(--ease),
                border-color 0.25s var(--ease),
                color 0.25s var(--ease),
                transform 0.25s var(--ease);
}

.btn--sm {
    --btn-pad-y: 0.62rem;
    --btn-pad-x: 1.1rem;
    font-size: 0.6875rem;
}

.btn--primary {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.btn--primary:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text);
}
.btn--ghost:hover { border-color: var(--text); background: var(--glow); transform: translateY(-1px); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }


/* 5. Wordmark ============================================================== */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    font-size: 1.1875rem;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}

/* Supplied logo file. Height is set in em so the mark scales with the
   wordmark's font-size, and 0.82em lands it on the cap height of "MOTO". */
.wordmark__logo {
    height: 0.82em;
    width: auto;
}

.wordmark__moto {
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    translate: 0 0.02em;
}

.wordmark--lg { font-size: 1.75rem; }


/* 6. Header and navigation ================================================= */

/* Sticky and solid rather than floating over the hero — the renders are never
   overlaid, so the bar sits above the artwork instead of on it. Sticky keeps
   it in flow, so no compensating body padding is needed. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(8, 8, 10, 0.92);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--line);
    transition: border-color 0.35s var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--line-strong); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-header__brand { display: inline-flex; }

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.9rem);
    list-style: none;
    padding: 0;
}

.site-nav__list a {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-block: 0.4rem;
    transition: color 0.22s var(--ease);
}
.site-nav__list a:hover { color: var(--text); }

.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--ease);
}
.site-nav__list a:hover::after { transform: scaleX(1); }

.site-nav__cat { display: none; }

.site-nav__divider {
    width: 1px;
    height: 14px;
    background: var(--line-strong);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0.6rem;
    margin-right: -0.6rem;
    cursor: pointer;
}

.nav-toggle__bars {
    display: block;
    width: 22px;
}
.nav-toggle__bars i {
    display: block;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars i + i { margin-top: 5px; }

[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: block; }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        max-height: calc(100svh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem var(--shell-pad) 2rem;
        background: rgba(8, 8, 10, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
                    visibility 0.28s;
    }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .site-nav__list li { border-bottom: 1px solid var(--line); }

    .site-nav__list a {
        padding-block: 1.05rem;
        font-size: 0.9375rem;
        letter-spacing: 0.1em;
        color: var(--text);
    }
    .site-nav__list a::after { display: none; }

    .site-nav__cat {
        display: block;
        margin-top: 0.28rem;
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        color: var(--text-faint);
    }

    .site-nav__divider { display: none; }

    .site-nav__cta { margin-top: 1.5rem; justify-content: center; }
}


/* 7. Home hero ============================================================= */

/* The render is shown whole: full width, natural aspect ratio, nothing on top
   of it and nothing cut off it. Everything else sits below. */
.hero { background: var(--bg); }

.hero__media img {
    width: 100%;
    height: auto;
}

.hero__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    max-width: var(--shell);
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) var(--shell-pad);
}

.hero__tagline {
    font-size: clamp(0.75rem, 0.7rem + 0.35vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 620px) {
    .hero__bar { flex-direction: column; align-items: flex-start; }
    .hero__actions { width: 100%; }
    .hero__actions .btn { flex: 1 1 auto; }
}


/* 8. Section furniture ===================================================== */

.section { padding-block: var(--section-y); }

.section--platform,
.section--service { background: var(--bg-alt); }

.section--dealers {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
}

.section__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.section__head--centred {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}

.section__title {
    font-size: clamp(1.875rem, 1.1rem + 3.3vw, 3.5rem);
    max-width: 20ch;
}

.section__head--centred .section__title { margin-inline: auto; }

.section__lede {
    margin-top: 1.4rem;
    max-width: 58ch;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    color: var(--text-dim);
}

.section__head--centred .section__lede { margin-inline: auto; }

/* Two-column text block: sticky heading beside flowing copy. */
.split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 4rem);
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split__head { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}

.split__title {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    max-width: 16ch;
}


/* 9. Lineup cards ========================================================== */

/* Two up, not four. The renders are shown whole, and a whole showroom render
   squeezed into a quarter-width card is unreadable — the machine ends up
   smaller than the wall text behind it. Two columns gives each one room. */
.lineup {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    list-style: none;
    padding: 0;
}

@media (min-width: 720px) {
    .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }

.card__media {
    display: block;
    overflow: hidden;
    background: var(--bg);
}

/* Whole render, natural ratio. No crop, and no hover zoom that would push the
   edges of the composition out of frame. */
.card__media img {
    width: 100%;
    height: auto;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card__cat {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.card__name {
    margin-top: 0.5rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.card__lede {
    margin-top: 0.85rem;
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.arrow { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.card:hover .arrow { transform: translateX(4px); }


/* 10. Platform: diagram and pillars ======================================== */

.diagram { margin-block: clamp(2rem, 5vw, 3.5rem); }

.diagram__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}

.diagram__svg {
    width: 100%;
    min-width: 640px;
    height: auto;
}

.diagram__name {
    fill: var(--text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-anchor: middle;
}
.diagram__cat {
    fill: var(--text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-anchor: middle;
}
.diagram__title {
    fill: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-anchor: middle;
}
.diagram__mod-label {
    fill: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-anchor: middle;
}
.diagram__mod-detail {
    fill: var(--text-dim);
    font-size: 11px;
    font-weight: 400;
    text-anchor: middle;
}

.diagram__caption {
    margin-top: 1.5rem;
    max-width: 60ch;
    font-size: 0.9375rem;
    color: var(--text-dim);
}

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1px;
    list-style: none;
    padding: 0;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    background: var(--line);
    border: 1px solid var(--line);
}

.pillar {
    background: var(--bg-alt);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pillar__label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.pillar__value {
    margin-top: 0.7rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.pillar__detail {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-dim);
}


/* 11. Range figures ======================================================== */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.figure {
    position: relative;
    background: var(--bg);
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.figure__value {
    font-size: clamp(3.5rem, 2rem + 7vw, 6.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.figure__unit {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.25em;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    vertical-align: middle;
}

.figure__label {
    margin-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Unconfirmed figures are marked on the page, not just in the source. */
.figure__flag {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.figures__caption {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-faint);
}


/* 12. Service points and callouts ========================================== */

/* Long-form argument set as one readable column rather than a grid of tiles.
   The short pivot lines get size and full-strength ink so the passage has a
   shape to it. */
.longform { max-width: 68ch; }

.longform p {
    color: var(--text-dim);
    font-size: clamp(1rem, 0.96rem + 0.28vw, 1.125rem);
    line-height: 1.68;
}

.longform p + p { margin-top: 1.4rem; }

.longform__pivot {
    color: var(--text) !important;
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem) !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem;
    text-wrap: balance;
}

.longform__pivot:last-child { margin-bottom: 0; }

.section__head--tight { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.callout {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--line-strong);
    border-radius: 3px;
}

.callout--wide { border-left-width: 1px; text-align: center; }
.callout--wide .callout__body { margin-inline: auto; }
.callout--wide .btn { margin-top: 1.75rem; }

.callout__title {
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    max-width: 24ch;
}
.callout--wide .callout__title { margin-inline: auto; }

.callout__body {
    margin-top: 1rem;
    max-width: 60ch;
    color: var(--text-dim);
}


/* 13. Colour swatches ====================================================== */

/* Five patterns. auto-fit would leave a ragged orphan at some widths, so the
   column count steps explicitly: 1, then 2, then 3, then all five in a row. */
.swatches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    list-style: none;
    padding: 0;
}

@media (min-width: 640px)  { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.swatches__footnote {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-size: 0.875rem;
    color: var(--text-faint);
}

.swatch { display: flex; flex-direction: column; }

/* Swatch artwork is supplied, never generated. Each chip is an image slot:
   drop the file into assets/img/swatches/ and it renders. Until then the slot
   shows as an empty outlined placeholder so the section still reads. */
.swatch__chip {
    position: relative;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    background: var(--surface);
}

.swatch__chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flat fill, for finishes that are a colour rather than a pattern. The border
   is a touch stronger so a pure-black chip still reads against the page. */
.swatch__chip--solid {
    background: var(--chip);
    border-color: var(--line-strong);
}

.swatch__chip--empty {
    display: grid;
    place-items: center;
    border-style: dashed;
    border-color: var(--line-strong);
    background: var(--bg-alt);
}

.swatch__chip--empty span {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.swatch__name {
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.swatch__note {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}


/* 14. Dealer form ========================================================== */

.dealer-form { margin-top: 2.5rem; }

/* Honeypot: removed from layout and from the accessibility tree, but still a
   real focusable input as far as a bot parsing the HTML is concerned. */
.dealer-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.dealer-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: center;
}

.dealer-form__field { flex: 1 1 18rem; max-width: 24rem; }

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

.dealer-form__label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dealer-form__input {
    width: 100%;
    padding: 0.95rem 1.1rem;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--text);
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.dealer-form__input::placeholder { color: var(--text-faint); }
.dealer-form__input:hover { border-color: rgba(255, 255, 255, 0.3); }
.dealer-form__input:focus {
    outline: none;
    border-color: var(--text);
    background: var(--surface);
}

.dealer-form__input[aria-invalid="true"] { border-color: #d8646b; }

.dealer-form__submit { flex: 0 0 auto; }

.dealer-form__status {
    margin-top: 1rem;
    min-height: 1.4em;
    font-size: 0.9375rem;
}
.dealer-form__status.is-error   { color: #e8878d; }
.dealer-form__status.is-success { color: var(--text); }

/* Confirmation replaces the form in place — no redirect, per the brief. */
.dealer-form.is-done .dealer-form__row { display: none; }
.dealer-form.is-done .dealer-form__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 0;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    font-size: 1rem;
}
.dealer-form.is-done .dealer-form__status::before {
    content: "";
    flex: 0 0 auto;
    width: 16px; height: 9px;
    border-left: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    rotate: -45deg;
    translate: 0 -3px;
}

.btn__spinner { display: none; }
.btn.is-loading .btn__spinner {
    display: block;
    width: 13px; height: 13px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* 15. Machine pages ======================================================== */

/* Render shown whole, heading underneath. Nothing sits on the artwork. */
.mhero__media img {
    width: 100%;
    height: auto;
}

.mhero__inner {
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
    border-bottom: 1px solid var(--line);
}

.mhero__titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.25rem;
}

.mhero__title {
    font-size: clamp(1.75rem, 1rem + 3.2vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.01em;
}
.mhero__title span { font-weight: 700; }

.mhero__cat {
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    translate: 0 -0.2em;
}

.mhero__role {
    margin-top: 1rem;
    max-width: 52ch;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
    color: var(--text-dim);
}

.section--mintro .split { border-top: 0; padding-top: 0; margin-top: 0; }

.mlede {
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
    line-height: 1.32;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1px;
    list-style: none;
    padding: 0;
    background: var(--line);
    border: 1px solid var(--line);
}

.feature { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); }

.feature__title { font-size: 1.0625rem; font-weight: 600; }

.feature__text {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--text-dim);
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:first-child { border-top: 1px solid var(--line-strong); }

.spec-table th,
.spec-table td { padding: clamp(0.9rem, 2vw, 1.25rem) 0; vertical-align: baseline; }

.spec-table th {
    width: 40%;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.spec-table td { font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem); }

.spec-flag {
    display: inline-block;
    margin-left: 0.65rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    vertical-align: 2px;
}

.spec-note {
    margin-top: 1.5rem;
    max-width: 60ch;
    font-size: 0.875rem;
    color: var(--text-faint);
}

.section--tieback { padding-top: 0; }

.machine-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
}

.machine-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: clamp(1.75rem, 4vw, 2.75rem) var(--shell-pad);
    background: var(--bg);
    transition: background-color 0.3s var(--ease);
}
.machine-nav__link:hover { background: var(--surface); }

.machine-nav__link--next { text-align: right; align-items: flex-end; }

.machine-nav__dir {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.machine-nav__name { font-size: 1.375rem; font-weight: 700; letter-spacing: 0.02em; }

.machine-nav__cat { font-size: 0.8125rem; color: var(--text-dim); }


/* 16. 404 ================================================================== */

.section--404 { text-align: center; }
.section--404 .section__title { margin-inline: auto; }
.section--404 .section__lede { margin-inline: auto; }

.notfound-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1px;
    list-style: none;
    padding: 0;
    margin-block: clamp(2.5rem, 6vw, 3.5rem);
    background: var(--line);
    border: 1px solid var(--line);
}

.notfound-links a {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
    background: var(--bg);
    transition: background-color 0.3s var(--ease);
}
.notfound-links a:hover { background: var(--surface); }

.notfound-links__name { font-weight: 700; letter-spacing: 0.02em; }
.notfound-links__cat { font-size: 0.75rem; color: var(--text-faint); }


/* 17. Footer =============================================================== */

.site-footer {
    padding-block: clamp(3rem, 7vw, 5rem) 2rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.site-footer__top {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 760px) {
    .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.site-footer__tagline {
    margin-top: 1.1rem;
    max-width: 30ch;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 2rem;
}

.site-footer__heading {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1rem;
}

.site-footer__nav ul { list-style: none; padding: 0; }

.site-footer__nav li + li { margin-top: 0.6rem; }

.site-footer__nav a {
    font-size: 0.9375rem;
    color: var(--text-dim);
    transition: color 0.22s var(--ease);
}
.site-footer__nav a:hover { color: var(--text); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--text-faint);
}


/* 18. Reveal animation ===================================================== */

.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .js .reveal { opacity: 1; transform: none; }
}