/* ============================================================
   Shawnee Specialties - "Cold Precision" design system
   Rules and tokens: DETAIL-BRIEF.md
   Sections:
     01 Fonts            07 Article plate (prose)
     02 Tokens           08 Rails and cards
     03 Base             09 Home page
     04 Buttons, chips   10 Contact band
     05 Header and nav   11 Footer
     06 Page hero        12 Motion and reduced motion
   ============================================================ */

/* ---------- 01 FONTS (self-hosted, latin subset) ---------- */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---------- 02 TOKENS ---------- */
:root {
    color-scheme: dark;

    --ink-0: #05080C;
    --ink-1: #0A1017;
    --ink-2: #0F1720;
    --ink-3: #152130;
    --line: rgba(150, 190, 225, 0.12);
    --line-2: rgba(150, 190, 225, 0.24);
    --frost: #E8F1F8;
    --text: #C9D5DF;
    --muted: #8B9AAA;
    --dim: #5D6B79;
    --ice: #9CCBE6;
    --ice-rgb: 156, 203, 230;
    --steel: #3D7EA6;
    --red: #E53935;
    --red-rgb: 229, 57, 53;
    --red-hot: #FF6A3D;

    --f-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
    --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --r-plate: 14px;
    --r-card: 10px;
    --r-input: 8px;
    --r-chip: 6px;

    --hdr-h: 68px;
    --wrap: 1360px;
    --gutter: clamp(16px, 4vw, 48px);

    --ease: cubic-bezier(.2, .7, .1, 1);

    /* machined surface: lit top edge, hairline, cool shadow below */
    --surface: linear-gradient(180deg, var(--ink-2), var(--ink-1));
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--hdr-h) + 16px);
}

body {
    margin: 0;
    background: var(--ink-0);
    color: var(--text);
    font: 400 1.0625rem/1.65 var(--f-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg { max-width: 100%; height: auto; }
figure { margin: 0; }
img { display: block; }

a { color: var(--ice); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--frost); }

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

::selection { background: rgba(var(--ice-rgb), 0.28); color: var(--frost); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 1100;
    padding: 10px 16px;
    background: var(--frost);
    color: var(--ink-0);
    border-radius: var(--r-chip);
    font: 600 0.9rem var(--f-body);
}
.skip:focus { top: 12px; }

.eyebrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    font: 500 0.75rem/1.4 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.eyebrow__idx {
    color: var(--ice);
    padding: 3px 7px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chip);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.eyebrow__path span { color: var(--dim); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* machined seam: hairline with tick marks at both ends */
.seam, .prose hr {
    position: relative;
    height: 1px;
    margin: 44px 0;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
    overflow: visible;
}
.seam::before, .seam::after, .prose hr::before, .prose hr::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: var(--line-2);
}
.seam::before, .prose hr::before { left: 12%; }
.seam::after, .prose hr::after { right: 12%; }

/* ---------- 04 BUTTONS, CHIPS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 600 0.95rem/1.2 var(--f-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--red);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px -6px rgba(var(--red-rgb), 0.7);
}
.btn--primary:hover { background: #F04A43; color: #FFFFFF; }

.btn--ghost {
    background: rgba(var(--ice-rgb), 0.04);
    border-color: var(--line-2);
    color: var(--frost);
}
.btn--ghost:hover { border-color: rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.08); color: var(--frost); }

.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

@keyframes ssi-breathe {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 6px 0 rgba(var(--red-rgb), 0.35); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 20px 3px rgba(var(--red-rgb), 0.6); }
}
.btn--glow { animation: ssi-breathe 3.2s ease-in-out infinite; }
.is-quote-page .btn--glow { animation: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chip);
    font: 500 0.72rem/1.3 var(--f-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(var(--ice-rgb), 0.03);
}

/* readout strip (HUD) */
.readout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    gap: 0;
    margin: 32px 0 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: rgba(10, 16, 23, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: fit-content;
    max-width: 100%;
}
.readout > div {
    padding: 12px 20px;
    border-left: 1px solid var(--line);
    min-width: 0;
}
.readout > div:first-child { border-left: 0; }
.readout dt {
    margin: 0 0 4px;
    font: 500 0.66rem/1 var(--f-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
}
.readout dd {
    margin: 0;
    font: 500 0.86rem/1.3 var(--f-mono);
    color: var(--frost);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .readout > div:nth-child(3) { border-left: 0; }
    .readout > div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .readout dd { white-space: normal; }
}

/* ---------- 05 HEADER AND NAV ---------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--hdr-h);
    background: rgba(5, 8, 12, 0.84);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
.hdr::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--ice-rgb), 0.28) 30%, rgba(var(--ice-rgb), 0.28) 70%, transparent);
}
.hdr__in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}
.hdr__logo { flex: 0 0 auto; display: block; }
.hdr__logo img { width: 148px; height: auto; }

.nav { margin-left: auto; }
.nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-chip);
    font: 600 0.98rem/1 var(--f-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}
.nav__idx {
    font: 500 0.66rem/1 var(--f-mono);
    letter-spacing: 0.04em;
    color: var(--dim);
    transition: color .2s var(--ease);
}
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--frost); }
.nav__link:hover .nav__idx { color: var(--ice); }
.nav__item.is-current > .nav__link { color: var(--frost); }
.nav__item.is-current > .nav__link .nav__idx { color: var(--red); }

.nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 32px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dim);
    cursor: pointer;
}
.nav__toggle svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.nav__item.is-open > .nav__toggle svg { transform: rotate(180deg); }

.nav__sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid var(--line-2);
    border-radius: var(--r-card);
    background: rgba(10, 16, 23, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--edge), 0 24px 48px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.nav__sub::before { /* hover bridge */
    content: "";
    position: absolute;
    left: 0; right: 0; top: -12px;
    height: 12px;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub,
.nav__item.is-open > .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nav__sub a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: var(--r-chip);
    font: 500 0.95rem/1.3 var(--f-body);
    color: var(--text);
}
.nav__sub a::after { content: "\2192"; color: var(--dim); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); }
.nav__sub a:hover { background: rgba(var(--ice-rgb), 0.07); color: var(--frost); }
.nav__sub a:hover::after { opacity: 1; transform: none; color: var(--ice); }
.nav__sub a[aria-current="page"] { color: var(--frost); background: rgba(var(--ice-rgb), 0.06); }

.hdr__cta { flex: 0 0 auto; }
.hdr__menu { display: none; }

@media (max-width: 1240px) {
    .hdr__in { gap: 16px; }
    .nav__link { padding: 10px 8px; letter-spacing: 0.07em; }
    .nav__idx { display: none; }
}

/* phone and tablet: logo | Request a Quote | menu */
@media (max-width: 1099px) {
    :root { --hdr-h: 60px; }

    .hdr__in {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }
    .hdr__logo img { width: 116px; }
    .hdr__cta {
        justify-self: center;
        min-height: 38px;
        padding: 8px 16px;
        font-size: 0.86rem;
        letter-spacing: 0.07em;
    }

    .hdr__menu {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-card);
        background: rgba(var(--ice-rgb), 0.04);
        cursor: pointer;
    }
    .hdr__menu span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--frost);
        transition: transform .3s var(--ease), opacity .2s;
    }
    .hdr.is-open .hdr__menu span:first-child { transform: translateY(4px) rotate(45deg); }
    .hdr.is-open .hdr__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }

    .nav {
        position: fixed;
        top: var(--hdr-h);
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--hdr-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 8px var(--gutter) 28px;
        background: var(--ink-0);
        border-bottom: 1px solid var(--line-2);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
    }
    .hdr.is-open .nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .25s var(--ease), transform .25s var(--ease);
    }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
    .nav__link { flex: 1; padding: 18px 4px; font-size: 1.15rem; }
    .nav__idx { display: inline; font-size: 0.72rem; }
    .nav__toggle { width: 48px; height: 48px; margin: 0; color: var(--muted); }
    .nav__toggle svg { width: 12px; height: 12px; }

    .nav__sub {
        position: static;
        flex-basis: 100%;
        min-width: 0;
        display: none;
        margin: 0 0 12px;
        padding: 4px 0 4px 28px;
        border: 0;
        border-left: 1px solid var(--line-2);
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .nav__sub::before { display: none; }
    .nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { display: none; }
    .nav__item.is-open > .nav__sub { display: block; }
    .nav__sub a { padding: 12px 8px; }

    body.nav-locked { overflow: hidden; }
}

@media (max-width: 380px) {
    .hdr__logo img { width: 96px; }
    .hdr__cta { padding: 7px 12px; font-size: 0.8rem; letter-spacing: 0.05em; }
    .hdr__in { gap: 8px; }
}

/* ---------- 06 PAGE HERO ---------- */
.phero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 9vw, 112px) 0 clamp(44px, 6vw, 72px);
    border-bottom: 1px solid var(--line);
}
.phero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 520px at 78% 0%, rgba(61, 126, 166, 0.18), transparent 60%),
        radial-gradient(900px 420px at 0% 100%, rgba(var(--ice-rgb), 0.05), transparent 60%),
        var(--ink-0);
}
/* machining grid */
.phero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--ice-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ice-rgb), 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 92%);
            mask-image: linear-gradient(180deg, #000, transparent 92%);
}
.flow {
    position: absolute;
    left: 0;
    bottom: -10%;
    width: 200%;
    height: 80%;
    opacity: 0.9;
}
.flow path { fill: none; stroke: rgba(var(--ice-rgb), 0.10); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow path:nth-child(3n) { stroke: rgba(var(--ice-rgb), 0.16); }
.flow path:nth-child(4n) { stroke: rgba(61, 126, 166, 0.22); }

.gearmark {
    position: absolute;
    right: max(-120px, calc(50% - 760px));
    top: 50%;
    width: clamp(320px, 38vw, 560px);
    height: auto;
    translate: 0 -50%;
    color: rgba(var(--ice-rgb), 0.12);
}
.gearmark .gm-ring { transform-origin: 50% 50%; transform-box: fill-box; }
/* the eight sparkle stars from the logo's cog */
.gearmark .gm-stars { color: rgba(var(--ice-rgb), 0.34); }
.gm-coin { transform-box: fill-box; transform-origin: center; }

.phero__in { position: relative; }
.phero__title {
    max-width: 22ch;
    margin: 0;
    font: 700 clamp(2.2rem, 1.4rem + 3.2vw, 4rem)/1.02 var(--f-display);
    letter-spacing: 0.005em;
    color: var(--frost);
    text-wrap: balance;
}
.phero__lede {
    max-width: 62ch;
    margin: 22px 0 0;
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}

/* ---------- 07 ARTICLE PLATE (prose) ---------- */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 760px) minmax(0, 290px);
    justify-content: center;
    align-items: start;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 88px;
}
.layout > .plate { grid-column: 2; grid-row: 1; }
.layout > .rail--l { grid-column: 1; grid-row: 1; }
.layout > .rail--r { grid-column: 3; grid-row: 1; }

.layout--solo { grid-template-columns: minmax(0, 860px); }
.layout--solo > .plate { grid-column: 1; }
.layout--wide { grid-template-columns: minmax(0, 1040px); }
.layout--wide > .plate { grid-column: 1; }

.plate {
    position: relative;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--line);
    border-radius: var(--r-plate);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
}
/* registration marks on the plate corners */
.plate::before, .plate::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(var(--ice-rgb), 0.35);
    border-style: solid;
    pointer-events: none;
}
.plate::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.plate::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

.prose { counter-reset: sec; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.05em; }
.prose p.lede { font-size: 1.14rem; color: var(--frost); line-height: 1.6; }
.prose strong { color: var(--frost); font-weight: 600; }
.prose em { color: var(--text); }
.prose a { color: var(--ice); text-decoration: underline; text-decoration-color: rgba(var(--ice-rgb), 0.35); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--frost); text-decoration-color: var(--frost); }

.prose h2 {
    counter-increment: sec;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
    font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--f-display);
    letter-spacing: 0.01em;
    color: var(--frost);
    text-wrap: balance;
}
.prose h2::before {
    content: counter(sec, decimal-leading-zero);
    flex: 0 0 auto;
    font: 500 0.72rem/1 var(--f-mono);
    letter-spacing: 0.1em;
    color: var(--ice);
    padding: 5px 7px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chip);
    transform: translateY(-4px);
}
.prose h3 {
    margin: 28px 0 10px;
    font: 600 1.25rem/1.25 var(--f-display);
    letter-spacing: 0.02em;
    color: var(--frost);
}
.prose h3 a { text-decoration: none; }
.prose .label {
    margin: 22px 0 10px;
    font: 500 0.74rem/1.4 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ice);
}
.prose .label + .spec { margin-top: 0; }
.prose h5 { margin: 0; font: 500 0.95rem/1.5 var(--f-body); color: var(--muted); }

.accent { color: var(--ice); }
.brand { color: inherit; font-weight: 600; }

/* spec list: square ice ticks */
.spec, .prose ul {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}
.spec li, .prose ul li {
    position: relative;
    padding: 9px 0 9px 26px;
    border-bottom: 1px solid var(--line);
}
.spec li:last-child, .prose ul li:last-child { border-bottom: 0; }
.spec li::before, .prose ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.05em;
    width: 7px;
    height: 7px;
    border: 1px solid var(--ice);
    transform: rotate(45deg);
}
.prose ul li p { margin: 0; }

.prose .sub-caption {
    margin: 0;
    font: 600 1.2rem/1.45 var(--f-display);
    letter-spacing: 0.02em;
    color: var(--frost);
    text-align: center;
}

/* ---------- 08 RAILS AND CARDS ---------- */
.rail {
    display: grid;
    gap: 20px;
    align-self: start;
    position: sticky;
    top: var(--sb-top, calc(var(--hdr-h) + 24px));
}

.card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
    font-size: 0.96rem;
    line-height: 1.55;
}
.card__media {
    position: relative;
    overflow: hidden;
    background: var(--ink-1);
}
.card__media img {
    width: 100%;
    height: auto;
    filter: saturate(0.55) contrast(1.06) brightness(0.92);
    transition: filter .6s var(--ease), transform .8s var(--ease);
}
.card__media::after { /* cold grade */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(61, 126, 166, 0.10), rgba(5, 8, 12, 0.35));
    pointer-events: none;
    transition: opacity .6s var(--ease);
}
.card:hover .card__media img { filter: none; transform: scale(1.025); }
.card:hover .card__media::after { opacity: 0.35; }

.card__body { padding: 18px 20px 20px; }
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }
.card__body p { margin: 0 0 0.8em; }
.card__body em { font-style: normal; color: var(--muted); }
.card__body strong { color: var(--frost); font-weight: 600; }
.card__media + .card__body { padding-top: 14px; }
.card--media .card__body { font-size: 0.9rem; color: var(--muted); }
.card__title {
    margin: 0 0 12px;
    font: 600 1.12rem/1.25 var(--f-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--frost);
}
.card .lead-in { color: var(--text); font-weight: 500; }
.card .spec li { padding: 8px 0 8px 22px; font-size: 0.92rem; }
.card .spec li::before { left: 2px; width: 6px; height: 6px; top: 1.05em; }
.card .spec a { color: var(--ice); }

/* a rail card that is only a linked heading */
.card--link { display: block; color: inherit; transition: border-color .3s var(--ease), transform .3s var(--ease); }
/* the body is a <span> here (inside a link), so it needs to be a block or its padding is lost */
.card--link .card__body { display: block; text-align: center; padding: 22px 20px; }
.card--link .card__title { display: block; color: var(--frost); margin-bottom: 14px; }
.card--link .tile__go { display: inline-block; padding: 0; }
.card--link .card__title:last-child { margin-bottom: 0; }
.card--link:hover { border-color: rgba(var(--ice-rgb), 0.4); transform: translateY(-2px); color: inherit; }
.card--link:hover .tile__go::after { transform: translateX(4px); }

/* ---------- 09 HOME PAGE ---------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 5vw, 72px) 0 clamp(44px, 5vw, 72px);
    border-bottom: 1px solid var(--line);
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
}
.hero__title {
    margin: 0;
    font: 700 clamp(2.3rem, 1.2rem + 2.9vw, 3.9rem)/0.98 var(--f-display);
    letter-spacing: 0.004em;
    text-transform: uppercase;
    color: var(--frost);
}
.hero__title .l2 { display: block; color: var(--ice); }
.hero__lede {
    max-width: 52ch;
    margin: 24px 0 0;
    font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem);
    color: var(--muted);
}
.hero__lede strong { color: var(--text); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* inspection frame around the drawing */
.frame {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--r-plate);
    background:
        radial-gradient(600px 340px at 50% 40%, rgba(61, 126, 166, 0.14), transparent 70%),
        rgba(10, 16, 23, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--edge), 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.frame__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font: 500 0.68rem/1 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}
.frame__right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.frame__drawing { display: block; width: 100%; height: auto; }
.frame__foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    font: 500 0.7rem/1.3 var(--f-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.frame__foot > div { padding: 10px 16px; border-left: 1px solid var(--line); }
.frame__foot > div:first-child { border-left: 0; }
.frame__foot dt { margin: 0 0 3px; color: var(--dim); font-size: 0.62rem; letter-spacing: 0.16em; }
.frame__foot dd { margin: 0; color: var(--frost); }
/* corner ticks */
.frame > .tick { position: absolute; width: 10px; height: 10px; border-color: var(--ice); border-style: solid; opacity: 0.7; }
.frame > .tick.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--r-plate); }
.frame > .tick.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-top-right-radius: var(--r-plate); }
.frame > .tick.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-bottom-left-radius: var(--r-plate); }
.frame > .tick.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--r-plate); }

/* drawing strokes */
.dw-line { fill: none; stroke: var(--ice); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dw-thin { fill: none; stroke: rgba(var(--ice-rgb), 0.55); stroke-width: 0.9; }
.dw-center { fill: none; stroke: rgba(var(--ice-rgb), 0.32); stroke-width: 0.8; stroke-dasharray: 14 4 2 4; }
.dw-hidden { fill: none; stroke: rgba(var(--ice-rgb), 0.45); stroke-width: 0.9; stroke-dasharray: 5 4; }
.dw-fill { fill: rgba(61, 126, 166, 0.16); stroke: none; }
.dw-dim { fill: none; stroke: rgba(var(--ice-rgb), 0.75); stroke-width: 0.8; }
.dw-arrow { fill: rgba(var(--ice-rgb), 0.85); }
.dw-text { font: 500 11px var(--f-mono); fill: var(--frost); letter-spacing: 0.04em; }
.dw-text--dim { fill: var(--muted); font-size: 9.5px; letter-spacing: 0.12em; }
.dw-shot { fill: none; stroke: var(--red-hot); stroke-width: 3; stroke-linecap: round; }
.dw-shot-glow { fill: none; stroke: rgba(var(--red-rgb), 0.35); stroke-width: 11; stroke-linecap: round; }
.dw-sprue { fill: rgba(var(--red-rgb), 0.25); stroke: var(--red); stroke-width: 1.2; }
.dw-scan { stroke: var(--ice); stroke-width: 1.2; }
.dw-scan-band { fill: url(#scanGrad); }
.dw-probe { fill: none; stroke: var(--frost); stroke-width: 1.1; }

/* section scaffold */
.sec { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.sec__title {
    margin: 0;
    max-width: 20ch;
    font: 700 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1.04 var(--f-display);
    color: var(--frost);
    text-wrap: balance;
}
.sec__note { max-width: 46ch; margin: 0; color: var(--muted); }

/* bento: who we are */
.bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.bento > .tile:first-child { grid-column: 1 / -1; }   /* Who We Are spans the row */
h1.eyebrow, h2.eyebrow { font-weight: 500; }
.hero__title { margin-top: 4px; }

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
    transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s;
}
.tile__idx { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--dim); }
.tile__title {
    margin: 0;
    font: 700 1.5rem/1.1 var(--f-display);
    letter-spacing: 0.02em;
    color: var(--frost);
}
.tile__title a { color: inherit; }
.tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile p, .tile div { margin: 0; color: var(--muted); font-size: 0.98rem; }
.tile strong { color: var(--text); font-weight: 500; }
.tile__go {
    margin-top: auto;
    padding-top: 8px;
    font: 500 0.72rem/1 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ice);
}
/* inline-block drops a leading space, so the gap is a margin */
.tile__go::after { content: "\2192"; display: inline-block; margin-left: 0.6em; letter-spacing: 0; transition: transform .25s var(--ease); }
.tile:hover { border-color: rgba(var(--ice-rgb), 0.35); transform: translateY(-3px); }
.tile:hover .tile__go::after { transform: translateX(4px); }

/* capability cards */
.caps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.caps .tile { min-height: 230px; }
.caps .tile::before { /* scale bar */
    content: "";
    position: absolute;
    left: 28px; right: 28px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--red) 0 28px, var(--line-2) 28px);
}

/* shop floor */
.floor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.floor .card__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.floor .card__body { font-size: 1.02rem; color: var(--text); padding: 20px 24px 24px; }
.floor .card__body em { color: var(--text); }

/* industries */
.inds {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--line);
    overflow: hidden;
}
.inds a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 170px;
    padding: 22px;
    background: var(--ink-1);
    color: var(--muted);
    font-size: 0.92rem;
    transition: background-color .3s var(--ease);
}
.inds a:hover { background: var(--ink-3); color: var(--text); }
.inds .ind__name { font: 700 1.25rem/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--frost); }
.inds .ind__idx { font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--dim); }
.inds .ind__all { justify-content: center; align-items: flex-start; background: var(--ink-2); color: var(--ice); }
.inds .ind__all .ind__name { color: var(--ice); }

/* trusted by: one row of logos */
.trust__title { margin: 0 0 8px; text-align: center; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--frost); }
#client-logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(16px, 2.4vw, 40px);
    max-width: 1280px;
    margin: 40px auto 0;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
#client-logos img {
    flex: var(--logo-w, 1) 1 0px;
    min-width: 0;
    width: auto;
    height: auto;
    opacity: 0.72;
    filter: grayscale(1) brightness(1.4);
    transition: opacity .3s var(--ease), filter .3s var(--ease);
}
#client-logos img:hover { opacity: 1; filter: none; }

.iso {
    max-width: 900px;
    margin: 56px auto 0;
    text-align: center;
    font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.4 var(--f-display);
    letter-spacing: 0.02em;
    color: var(--frost);
}
.iso a { color: var(--ice); text-decoration: underline; text-decoration-color: rgba(var(--ice-rgb), 0.4); text-underline-offset: 4px; }

/* ---------- 10 CONTACT BAND ---------- */
.cband {
    position: relative;
    isolation: isolate;
    padding: clamp(56px, 8vw, 104px) 0;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(900px 400px at 100% 100%, rgba(61, 126, 166, 0.12), transparent 60%),
        var(--ink-1);
}
.cband__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.cband__title { text-wrap: balance; margin: 0 0 12px; font: 700 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.05 var(--f-display); color: var(--frost); }
.cband__note { margin: 0 0 28px; color: var(--muted); max-width: 46ch; }
.cband__rows { margin: 0 0 32px; border-top: 1px solid var(--line); }
.cband__rows > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.cband__rows dt { font: 500 0.7rem/1.9 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.cband__rows dd { margin: 0; color: var(--frost); overflow-wrap: anywhere; }
.cband__rows a { color: var(--frost); }
.cband__rows a:hover { color: var(--ice); }

.map-wrapper {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--line-2);
    border-radius: var(--r-plate);
    background: var(--ink-2);
    box-shadow: var(--edge), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.map-activate {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.map-static {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.95);
    transition: filter .6s var(--ease);
}
.map-activate:hover .map-static { filter: grayscale(0.6) invert(0.92) hue-rotate(180deg) brightness(1) contrast(1); }
.map-overlay {
    position: absolute;
    left: 50%;
    bottom: 20px;
    translate: -50% 0;
    padding: 10px 18px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(5, 8, 12, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 500 0.74rem/1 var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--frost);
    white-space: nowrap;
}
.map-pin {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 14px;
    height: 14px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.25), 0 0 18px rgba(var(--red-rgb), 0.7);
}
#map-container { position: absolute; inset: 0; pointer-events: none; }
#map-container:not(:empty) { pointer-events: auto; }
.map-iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 11 FOOTER ---------- */
.ftr {
    padding: 72px 0 32px;
    border-top: 1px solid var(--line);
    background: var(--ink-0);
    font-size: 0.94rem;
}
.ftr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.ftr__brand img { width: 160px; margin-bottom: 20px; }
.ftr__brand p { margin: 0 0 14px; color: var(--muted); max-width: 38ch; }
.ftr__certs { display: flex; flex-wrap: wrap; gap: 8px; }
.ftr__certs a.chip:hover { border-color: rgba(var(--ice-rgb), 0.5); color: var(--frost); }
.ftr__col .eyebrow { margin-bottom: 14px; }
.ftr__col ul { margin: 0; padding: 0; list-style: none; }
.ftr__col li { margin: 0 0 9px; }
.ftr__col a { color: var(--muted); }
.ftr__col a:hover { color: var(--frost); }
.ftr__base p { margin: 0; }
.ftr__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font: 400 0.8rem/1.6 var(--f-mono);
    letter-spacing: 0.04em;
    color: var(--dim);
}
.ftr__base ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.ftr__base a { color: var(--muted); }
.ftr__base a:hover { color: var(--frost); }
.ftr__credit { display: inline-flex; flex: 0 0 auto; margin-left: auto; opacity: 0.8; transition: opacity .25s var(--ease); }
@media (max-width: 700px) {
    /* phones: the whole footer is centered */
    .ftr__grid { text-align: center; }
    .ftr__brand img { display: block; margin-left: auto; margin-right: auto; }
    .ftr__brand p { margin-left: auto; margin-right: auto; }
    .ftr__certs { justify-content: center; }
    .ftr__base { flex-direction: column; justify-content: center; text-align: center; }
    .ftr__base ul { justify-content: center; }
    .ftr__credit { margin: 4px auto 0; }
    .ftr__col .eyebrow { justify-content: center; }
    /* the third column (Industries) spans the row, its links wrap centered */
    .ftr__col:last-child { grid-column: 1 / -1; }
    .ftr__col:last-child ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
}
.ftr__credit:hover, .ftr__credit:focus-visible { opacity: 1; }
.ftr__credit img { display: block; width: 214px; height: auto; }

/* ---------- NOTICE BAR (set from the site console) ---------- */
.notice { position: relative; z-index: 1001; border-bottom: 1px solid rgba(var(--ice-rgb), 0.3); background: linear-gradient(90deg, rgba(61, 126, 166, 0.35), var(--ink-1) 70%); color: var(--frost); }
.notice--alert { border-bottom-color: rgba(230, 180, 60, 0.45); background: linear-gradient(90deg, rgba(230, 180, 60, 0.25), var(--ink-1) 70%); }
.notice--closed { border-bottom-color: rgba(var(--red-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--red-rgb), 0.32), var(--ink-1) 70%); }
.notice__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; padding-right: 52px; position: relative; font-size: 0.94rem; line-height: 1.4; text-align: center; }
.notice__tag { font: 500 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border: 1px solid currentColor; border-radius: 4px; opacity: 0.9; }
.notice__link { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.notice__x { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--frost); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.notice__x:hover { border-color: var(--ice); }

/* ---------- SIDE COLUMNS ON PHONES AND TABLETS (.mrail) ----------
   Built from the same rail content: one photo strip, a numbered spec
   index that opens row by row, notes, then centered page links. */
.mrail { display: none; gap: 20px; min-width: 0; }
.mrail__strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
}
.mrail__strip::-webkit-scrollbar { display: none; }
.mrail__shot {
    flex: 0 0 78%;
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--ink-1);
}
.mrail__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(0.55) contrast(1.06) brightness(0.92);
}
.mrail__shot figcaption { padding: 10px 14px 12px; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.mrail__shot figcaption p { margin: 0; }
.mrail__shot figcaption em { font-style: normal; }
@media (min-width: 700px) {
    .mrail__strip { margin: 0; padding: 0; scroll-padding: 0; }
    .mrail__shot { flex-basis: calc((100% - 24px) / 3); }
}

.mrail__specs {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
    overflow: hidden;
}
.mrail__item + .mrail__item { border-top: 1px solid var(--line); }
.mrail__item summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}
.mrail__item summary::-webkit-details-marker { display: none; }
.mrail__idx { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.1em; color: var(--steel); }
.mrail__title { font: 600 1rem/1.25 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--frost); }
.mrail__item summary svg { width: 14px; height: 14px; color: var(--ice); transition: transform .25s var(--ease); }
.mrail__item[open] summary svg { transform: rotate(180deg); }
.mrail__item[open] summary { background: rgba(var(--ice-rgb), 0.04); }
.mrail__body { padding: 4px 18px 18px 18px; font-size: 0.94rem; line-height: 1.55; }
.mrail__body > :first-child { margin-top: 0; }
.mrail__body > :last-child { margin-bottom: 0; }
.mrail__body p { margin: 0 0 0.8em; }
.mrail__body em { font-style: normal; color: var(--muted); }
.mrail__body strong { color: var(--frost); font-weight: 600; }
.mrail__body .card__title { font-size: 1rem; margin: 14px 0 4px; }
.mrail__body .spec li { padding: 8px 0 8px 22px; font-size: 0.92rem; }
.mrail__body .spec li::before { left: 2px; width: 6px; height: 6px; top: 1.05em; }

.mrail__note {
    padding: 16px 18px;
    border-left: 2px solid var(--steel);
    background: rgba(var(--ice-rgb), 0.03);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    font-size: 0.94rem;
    color: var(--text);
}
.mrail__note > :last-child { margin-bottom: 0; }
.mrail__note > :first-child { margin-top: 0; }
.mrail__note .card__title { font-size: 1rem; margin: 0 0 6px; }

.mrail__links { display: grid; gap: 10px; }
.mrail__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 52px;
    padding: 12px 18px;
    text-align: center;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(var(--ice-rgb), 0.04);
    font: 600 0.88rem/1.25 var(--f-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--frost);
}
.mrail__link .tile__go { margin: 0; padding: 0; }
.mrail__link:hover { border-color: rgba(var(--ice-rgb), 0.55); color: var(--frost); }

/* ---------- RESPONSIVE LAYOUT ---------- */
@media (max-width: 1279px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
        max-width: 1120px;
    }
    .layout > .plate { grid-column: 1; grid-row: 1; }
    .layout > .rail--r { grid-column: 2; grid-row: 1 / span 2; }
    .layout > .rail--l {
        grid-column: 1;
        grid-row: 2;
        position: static;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        align-items: start;
    }
    .layout--solo, .layout--wide { grid-template-columns: minmax(0, 860px); }
    .layout--wide { grid-template-columns: minmax(0, 1040px); }

    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero .frame { max-width: 720px; }
    .hero__copy { max-width: 760px; }
    .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ftr__brand { grid-column: 1 / -1; }
}

@media (max-width: 1099px) {
    .layout { grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 64px; }
    .layout > .plate { grid-column: 1; grid-row: auto; order: -1; }   /* article first on phones */
    /* the side columns are regrouped into .mrail below the article */
    .layout > .rail--l, .layout > .rail--r { display: none; }
    .layout > .mrail { display: grid; }

    .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cband__in { grid-template-columns: minmax(0, 1fr); }
    .hero__actions .btn--primary { display: none; }   /* the header already carries it */
}

@media (max-width: 700px) {
    .bento, .caps, .floor { grid-template-columns: minmax(0, 1fr); }
    .caps .tile { min-height: 0; }
    .tile { padding: 22px; }
    .inds a { min-height: 132px; padding: 18px; }
    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
    .frame__foot { grid-template-columns: 1fr 1fr; }
    .frame__foot > div:nth-child(3) { display: none; }
    .frame__ticks { display: none; }
    .plate::before, .plate::after { display: none; }

    /* one row of logos that swipes */
    #client-logos {
        justify-content: flex-start;
        gap: 0 26px;
        padding: 24px 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
                mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    }
    #client-logos::-webkit-scrollbar { display: none; }
    #client-logos img { flex: 0 0 auto; width: calc(var(--logo-w, 1) * 44px); scroll-snap-align: center; }
}

@media (max-width: 420px) {
    .cband__rows > div { grid-template-columns: 1fr; gap: 2px; }
    .frame__bar .frame__id { display: none; }
}

/* ---------- 12 MOTION ---------- */
/* Entrances: only once JS has marked the page ready, so nothing is hidden without JS */
.js .rv { opacity: 0; transform: translateY(14px); }
.js.is-ready .rv.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}

/* background flow lines drift */
@keyframes ssi-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.flow { animation: ssi-drift 60s linear infinite; will-change: transform; }

/* inner page gear mark: one turn per 240s */
@keyframes ssi-turn { to { rotate: 360deg; } }
.gearmark .gm-ring { animation: ssi-turn 240s linear infinite; }

/* logo stars: draw in one at a time, then each spins like a coin, right to left, in turn */
.js .gm-spark {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dw-draw 1.2s var(--ease) forwards;
    animation-delay: calc(500ms + var(--i, 0) * 140ms);
}
@keyframes gm-coin {
    0%, 82% { transform: scaleX(1) skewY(0deg); }
    86.5%   { transform: scaleX(0.06) skewY(-9deg); }
    91%     { transform: scaleX(-1) skewY(0deg); }
    95.5%   { transform: scaleX(0.06) skewY(9deg); }
    100%    { transform: scaleX(1) skewY(0deg); }
}
.gm-coin {
    animation: gm-coin 10s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: calc(2.4s + var(--i, 0) * 1.15s);
}

/* off screen or background tab: pause */
.is-paused .flow, .is-paused .gearmark .gm-ring, .is-paused .gm-coin, .is-paused .part, .is-paused .part-vibe, .is-paused .feed, .is-paused .ship, .is-paused .box-tape, .is-paused [class*="tem-"], .is-paused .drawing, .is-paused [class*="dw-"], .is-paused .box-flap { animation-play-state: paused !important; }

/* ---- hero drawing timeline: 01 cast, 02 cool, 03 measure (CSS delays from .play) ---- */
.js .drawing .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawing.play .draw { animation: dw-draw 1.4s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes dw-draw { to { stroke-dashoffset: 0; } }

.js .drawing .fade { opacity: 0; }
.drawing.play .fade { animation: dw-fade .8s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes dw-fade { to { opacity: 1; } }

/* molten shot through sprue and runner */
.dw-shot, .dw-shot-glow { opacity: 0.18; }
.js .drawing .dw-shot, .js .drawing .dw-shot-glow { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.drawing.play .dw-shot, .drawing.play .dw-shot-glow { animation: dw-shot 2.6s var(--ease) 2200ms forwards; }
@keyframes dw-shot {
    0%   { stroke-dashoffset: 1; opacity: 1; }
    40%  { stroke-dashoffset: 0; opacity: 1; }
    75%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.18; }
}
.dw-sprue { opacity: 0.35; }
.js .drawing .dw-sprue { opacity: 0; }
.drawing.play .dw-sprue { animation: dw-sprue 3.4s var(--ease) 2000ms forwards; }
@keyframes dw-sprue { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0.35; } }

/* cavity glows red, then cools to steel */
.dw-melt { fill: rgba(61, 126, 166, 0.20); }
.js .drawing .dw-melt { opacity: 0; }
.drawing.play .dw-melt { animation: dw-melt 2.4s var(--ease) 3100ms forwards; }
@keyframes dw-melt {
    0%   { opacity: 0; fill: rgba(255, 106, 61, 0.65); }
    25%  { opacity: 1; fill: rgba(255, 106, 61, 0.6); }
    55%  { opacity: 1; fill: rgba(229, 57, 53, 0.42); }
    100% { opacity: 1; fill: rgba(61, 126, 166, 0.20); }
}

/* stage readout in the frame bar (JS sets the text and lights the ticks) */
.frame__stage { color: var(--frost); white-space: nowrap; }
.frame__stage b { font-weight: 500; color: var(--ice); margin-right: 8px; }
.frame__ticks { display: flex; gap: 3px; }
.frame__ticks i { display: block; width: 9px; height: 3px; border-radius: 1px; background: var(--line-2); transition: background-color .4s var(--ease); }
.frame__ticks i.on { background: var(--ice); }
.frame__ticks i.now { background: var(--red); }
.frame__station { transition: opacity .3s var(--ease); }

/* CMM scan: one sweep after the dimensions draw */
.dw-scanner { opacity: 0; }
.drawing.play .dw-scanner { animation: dw-scan 4.2s var(--ease) 6200ms 1 both; }
@keyframes dw-scan {
    0%   { opacity: 0; transform: translateX(0); }
    10%  { opacity: 1; }
    86%  { opacity: 1; transform: translateX(300px); }
    100% { opacity: 0; transform: translateX(300px); }
}
.dw-hit { opacity: 0.9; transform-box: fill-box; transform-origin: center; }
.js .drawing .dw-hit { opacity: 0; }
.drawing.play .dw-hit { animation: dw-hit .7s var(--ease) both; animation-delay: calc(6600ms + var(--d, 0) * 1ms); }
@keyframes dw-hit {
    0%   { opacity: 0; transform: scale(0.4); }
    40%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0.9; transform: scale(1); }
}

/* ---- stages 04 to 10 (JS adds .at-04 ... .at-10 on the drawing as each starts) ---- */
.drawing .dims, .drawing .cmm, .drawing .dw-cl, .drawing .dw-labels { transition: opacity .7s var(--ease); }
.drawing.at-04 .dims, .drawing.at-04 .cmm { opacity: 0; }
.drawing.at-09 .dw-cl, .drawing.at-09 .dw-labels { opacity: 0; }

/* hidden until their stage */
.dw-trim, .dw-burrs, .dw-heat, .dw-clean, .dw-cut, .dw-cut-ear, .dw-media, .dw-tool,
.dw-wash, .dw-box, .dw-speed, .dw-outbound { opacity: 0; }

/* 04 trim: the gate is sheared off at the wall, the feed falls away */
.dw-trim { fill: none; stroke: var(--red-hot); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawing.at-04 .dw-trim { animation: dw-trim 1.2s var(--ease) both; }
@keyframes dw-trim {
    0%   { opacity: 1; stroke-dashoffset: 1; }
    35%  { opacity: 1; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}
.drawing.at-04 .feed { animation: dw-feed-off 1s var(--ease) .4s both; }
@keyframes dw-feed-off { to { opacity: 0; transform: translate(-36px, 26px); } }

/* casting flash: thin fins on every parting edge, appear as the part cools */
.dw-burrs { fill: rgba(var(--ice-rgb), 0.18); stroke: rgba(var(--ice-rgb), 0.8); stroke-width: 0.8; stroke-linejoin: round; }
.drawing.play .dw-burrs { animation: dw-fade .6s var(--ease) 4200ms both; }

/* 05 thermal deburr (TEM), one 4.6s timeline:
   0.0 chamber drops and clamps / 0.9 gas charge, gauge climbs / 2.3 ignition:
   flash, shockwave, shake, flash burns off in embers / 2.5 oxide haze vents /
   3.3 chamber lifts, part still warm */
.tem, .tem-gas, .tem-particles circle, .tem-spark, .tem-wave, .tem-flash, .tem-embers path,
.tem-smoke circle, .tem-cap text, .tem-clamp { opacity: 0; }
.tem-bell, .tem-needle, .tem-wave, .tem-particles circle, .tem-embers path, .tem-smoke circle { transform-box: view-box; }

.tem-wall { fill: url(#temHatch); stroke: none; }
.tem-edge { fill: none; stroke: var(--ice); stroke-width: 1.3; }
.tem-flange { stroke-width: 1.6; }
.tem-clamp { fill: var(--ink-2); stroke: var(--ice); stroke-width: 1.1; }
.tem-plug rect, .tem-plug path, .tem-port path, .tem-gauge circle, .tem-gauge-ticks path { fill: var(--ink-1); stroke: var(--ice); stroke-width: 1.1; }
.tem-plug path, .tem-port path, .tem-gauge-ticks path { fill: none; }
.tem-needle { fill: none; stroke: var(--red-hot); stroke-width: 1.6; stroke-linecap: round; transform-origin: 514px 26px; }
.tem-hub { fill: var(--frost) !important; stroke: none !important; }
.tem-gas { fill: rgba(var(--ice-rgb), 0.10); }
.tem-particles circle { fill: rgba(var(--ice-rgb), 0.75); }
.tem-spark { fill: none; stroke: #FFF6EA; stroke-width: 1.6; stroke-linejoin: round; }
.tem-wave { fill: none; stroke: #FFE2C4; stroke-width: 1.5; transform-origin: 300px 70px; }
.tem-flash { fill: url(#temBlast); }
.tem-embers path { fill: none; stroke: var(--red-hot); stroke-width: 1.5; stroke-linecap: round; }
.tem-smoke circle { fill: rgba(139, 154, 170, 0.16); }

.drawing.at-05 .tem { animation: tem-show 4.6s linear both; }
@keyframes tem-show { 0%, 97% { opacity: 1; } 100% { opacity: 0; } }

.drawing.at-05 .tem-bell { animation: tem-bell 4.6s both; }
@keyframes tem-bell {
    0%   { transform: translateY(-330px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
    15%  { transform: translateY(0); }
    72%  { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
    92%, 100% { transform: translateY(-330px); }
}
.drawing.at-05 .tem-clamp { animation: tem-clamp 4.6s linear both; }
@keyframes tem-clamp { 0%, 15% { opacity: 0; } 17%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }

.drawing.at-05 .tem-gas { animation: tem-gas 4.6s linear both; }
@keyframes tem-gas { 0%, 19.5% { opacity: 0; } 47.8% { opacity: 1; } 50.5%, 100% { opacity: 0; } }

.drawing.at-05 .tem-particles circle { animation: tem-swirl 4.6s ease-in-out both; animation-delay: calc(var(--k) * 60ms); }
@keyframes tem-swirl {
    0%, 20% { opacity: 0; transform: translate(0, 0); }
    30%     { opacity: 0.9; }
    49%     { opacity: 0.9; transform: translate(var(--dx), var(--dy)); }
    50%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

.drawing.at-05 .tem-needle { animation: tem-needle 4.6s ease-in-out both; }
@keyframes tem-needle {
    0%, 19% { transform: rotate(0deg); }
    48%     { transform: rotate(150deg); }
    51%     { transform: rotate(178deg); }
    72%     { transform: rotate(25deg); }
    100%    { transform: rotate(0deg); }
}

.drawing.at-05 .tem-spark { animation: tem-spark 4.6s linear both; }
@keyframes tem-spark { 0%, 48.4% { opacity: 0; } 48.6% { opacity: 1; } 49.2% { opacity: 0.2; } 49.6% { opacity: 1; } 50.6%, 100% { opacity: 0; } }

.drawing.at-05 .tem-flash { animation: tem-flash 4.6s linear both; }
@keyframes tem-flash { 0%, 49.8% { opacity: 0; } 50.3% { opacity: 1; } 56% { opacity: 0.45; } 66%, 100% { opacity: 0; } }

.drawing.at-05 .tem-wave { animation: tem-wave 4.6s ease-out both; }
@keyframes tem-wave {
    0%, 49.9% { opacity: 0; transform: scale(1); }
    50.2%     { opacity: 0.95; transform: scale(1); }
    62%, 100% { opacity: 0; transform: scale(34); }
}

/* the whole drawing jolts once at ignition */
.drawing.at-05 { animation: tem-shake .36s linear 2.3s 1; }
@keyframes tem-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2.5px, 1.5px); }
    40% { transform: translate(2px, -2px); }
    60% { transform: translate(-1.5px, -1px); }
    80% { transform: translate(1px, 1.5px); }
}

/* flash flares and burns away, throwing embers */
.drawing.at-05 .dw-burrs { animation: dw-burn .8s var(--ease) 2.32s both; }
@keyframes dw-burn {
    0%   { opacity: 1; fill: rgba(var(--ice-rgb), 0.18); stroke: rgba(var(--ice-rgb), 0.8); }
    15%  { opacity: 1; fill: rgba(255, 106, 61, 0.7); stroke: #FFF6EA; }
    100% { opacity: 0; fill: rgba(255, 106, 61, 0); stroke: var(--red-hot); }
}
.drawing.at-05 .tem-embers path { animation: tem-ember .9s cubic-bezier(.2, .6, .3, 1) 2.32s both; }
@keyframes tem-ember {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* the part glows from the heat, then cools */
.dw-heat { fill: rgba(255, 106, 61, 0.5); }
.drawing.at-05 .dw-heat { animation: dw-flash 2s ease-out 2.32s both; }
@keyframes dw-flash { 0% { opacity: 0; } 8% { opacity: 0.9; } 100% { opacity: 0; } }

/* oxide haze vents */
.drawing.at-05 .tem-smoke circle { animation: tem-smoke 1.7s ease-out both; animation-delay: calc(2.5s + var(--k) * 120ms); }
@keyframes tem-smoke {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-34px); }
}

/* captions */
.drawing.at-05 .tem-cap .c1 { animation: tem-c1 4.6s linear both; }
.drawing.at-05 .tem-cap .c2 { animation: tem-c2 4.6s linear both; }
.drawing.at-05 .tem-cap .c3 { animation: tem-c3 4.6s linear both; fill: var(--red-hot); }
.drawing.at-05 .tem-cap .c4 { animation: tem-c4 4.6s linear both; }
@keyframes tem-c1 { 0%, 15% { opacity: 0; } 17%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes tem-c2 { 0%, 29% { opacity: 0; } 31%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tem-c3 { 0%, 49.5% { opacity: 0; } 50%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tem-c4 { 0%, 65% { opacity: 0; } 67%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* 06 vibratory: the part chatters in the media */
.dw-media circle { fill: rgba(var(--ice-rgb), 0.45); }
.drawing.at-06 .dw-media { animation: dw-media 1.6s var(--ease) both; }
@keyframes dw-media { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.drawing.at-06 .dw-media circle { animation: dw-chatter .09s linear 16 alternate; }
.drawing.at-06 .dw-media circle:nth-child(2n) { animation-direction: alternate-reverse; }
.drawing.at-06 .part-vibe { animation: dw-chatter .07s linear 20 alternate; }
@keyframes dw-chatter { from { transform: translate(-1.6px, 1px); } to { transform: translate(1.6px, -1px); } }

/* 07 CNC: the tool finishes the bore, then the two ear holes */
.dw-tool { fill: none; stroke: var(--frost); stroke-width: 1.2; }
.dw-tool .dw-tool-dot { fill: var(--frost); stroke: none; }
.drawing.at-07 .dw-tool { animation: dw-tool 2.4s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes dw-tool {
    0%   { opacity: 0; transform: translate(560px, 30px); }
    8%   { opacity: 1; }
    20%  { transform: translate(320px, 180px); }
    24%  { transform: translate(314.1px, 194.1px); }
    28%  { transform: translate(300px, 200px); }
    32%  { transform: translate(285.9px, 194.1px); }
    36%  { transform: translate(280px, 180px); }
    40%  { transform: translate(285.9px, 165.9px); }
    44%  { transform: translate(300px, 160px); }
    48%  { transform: translate(314.1px, 165.9px); }
    52%  { transform: translate(320px, 180px); }
    62%, 70% { transform: translate(486px, 150px); }
    78%, 86% { transform: translate(486px, 210px); }
    94%  { opacity: 1; }
    100% { opacity: 0; transform: translate(560px, 320px); }
}
.dw-cut { fill: none; stroke: var(--frost); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawing.at-07 .dw-cut { opacity: 1; animation: dw-bore 2.4s linear both; }
@keyframes dw-bore { 0%, 20% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
.dw-cut-ear { fill: none; stroke: var(--frost); stroke-width: 2.4; }
.drawing.at-07 .dw-cut-ear.e1 { animation: dw-ear 2.4s linear both; }
.drawing.at-07 .dw-cut-ear.e2 { animation: dw-ear2 2.4s linear both; }
@keyframes dw-ear  { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes dw-ear2 { 0%, 80% { opacity: 0; } 84%, 100% { opacity: 1; } }

/* 08 part wash: a rinse sweeps down, the part comes out clean */
.dw-wash-band { fill: url(#washGrad); }
.dw-drop { fill: none; stroke: rgba(var(--ice-rgb), 0.8); stroke-width: 1.4; stroke-linecap: round; }
.drawing.at-08 .dw-wash { animation: dw-media 1.6s var(--ease) both; }
.drawing.at-08 .dw-wash-band { animation: dw-rinse 1.5s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes dw-rinse { from { transform: translateY(-20px); } to { transform: translateY(290px); } }
.drawing.at-08 .dw-drop { animation: dw-drop .7s ease-in both; animation-delay: calc(var(--k) * 110ms + 150ms); }
@keyframes dw-drop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(70px); } }
.dw-clean { fill: rgba(232, 241, 248, 0.07); }
.drawing.at-08 .dw-clean { animation: dw-fade .8s var(--ease) .9s both; }

/* 09 sort and pack: the part drops into a carton, the flaps close and get taped */
.part { transform-box: view-box; transform-origin: 320px 180px; }
.drawing.at-09 .part { animation: dw-pack 1.6s var(--ease) .3s both; }
@keyframes dw-pack {
    0%   { transform: none; }
    50%  { transform: translate(-10px, -6px) scale(0.28); }
    100% { transform: translate(-10px, 58px) scale(0.28); }
}
.box-front { fill: var(--ink-2); stroke: var(--ice); stroke-width: 1.3; }
.box-flap { fill: none; stroke: var(--ice); stroke-width: 1.3; stroke-linecap: round; transform-box: view-box; }
.box-flap--l { transform-origin: 250px 205px; transform: rotate(-125deg); }
.box-flap--r { transform-origin: 370px 205px; transform: rotate(125deg); }
.box-tape { fill: var(--red); opacity: 0; }
.box-label { fill: none; stroke: rgba(var(--ice-rgb), 0.5); stroke-width: 0.9; }
.box-label-lines { fill: none; stroke: rgba(var(--ice-rgb), 0.45); stroke-width: 0.9; }
.box-ssi { fill: var(--muted); }
.drawing.at-09 .dw-box { animation: dw-fade .5s var(--ease) both; }
.drawing.at-09 .box-flap { animation: dw-flap .45s var(--ease) both; }
.drawing.at-09 .box-flap--l { animation-delay: 1.9s; }
.drawing.at-09 .box-flap--r { animation-delay: 2.15s; }
@keyframes dw-flap { to { transform: rotate(0deg); } }
.drawing.at-09 .box-tape { animation: dw-fade .3s var(--ease) 2.55s both; }

/* 10 ship: the carton heads out of frame, to you */
.ship { transform-box: view-box; }
.drawing.at-10 .ship { animation: dw-ship 1.3s cubic-bezier(.55, 0, .9, .5) .3s both; }
@keyframes dw-ship { to { transform: translateX(420px); } }
.dw-speed path { fill: none; stroke: rgba(var(--ice-rgb), 0.7); stroke-width: 1.2; stroke-linecap: round; }
.drawing.at-10 .dw-speed { animation: dw-speed .9s ease-out .3s both; }
@keyframes dw-speed { 0% { opacity: 0; transform: translateX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(160px); } }
.dw-out { font: 600 26px var(--f-display); letter-spacing: 0.16em; fill: var(--frost); }
.dw-out--sub { font: 500 13px var(--f-mono); letter-spacing: 0.2em; fill: var(--ice); }
.drawing.at-10 .dw-outbound { animation: dw-fade .9s var(--ease) 1.6s both; }

/* end of the story: fade the whole drawing before it replays */
.drawing { transition: opacity .6s var(--ease); }
.drawing.is-out { opacity: 0; }

/* Reduced motion: finished state of everything, nothing loops */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
    .js .rv { opacity: 1; transform: none; }
    .flow, .gearmark .gm-ring, .gm-coin { animation: none !important; }
    .js .gm-spark { animation: none; stroke-dashoffset: 0; }
    .btn--glow { animation: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 12px 1px rgba(var(--red-rgb), 0.45); }
    .js .drawing .draw { stroke-dashoffset: 0; }
    .js .drawing .fade { opacity: 1; }
    .js .drawing .dw-shot, .js .drawing .dw-shot-glow { stroke-dashoffset: 0; opacity: 0.18; }
    .js .drawing .dw-sprue { opacity: 0.35; }
    .js .drawing .dw-melt { opacity: 1; }
    .js .drawing .dw-hit { opacity: 0.9; }
    .js .drawing.at-04 .dims, .js .drawing.at-04 .cmm { opacity: 1; }
}

/* ============================================================
   SHINE + TYPED - hero line pairs and "Precision that Powers Industry"
   First line: heavy italic steel lettering, outline echo behind it,
   a bold shine sweeps across on load and every 9s while on screen.
   Second line: types itself in (ssi.js), caret blinks, then fades.
   ============================================================ */
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-900-italic.woff2") format("woff2"); }

.shine { position: relative; display: inline-block; padding-right: 0.06em; }
.shine__fill {
    position: relative;
    display: inline-block;
    color: transparent;
    background:
        linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.55) 42%, #FFFFFF 47%, rgba(255, 255, 255, 0.2) 51%, transparent 53%, rgba(255, 255, 255, 0.85) 56%, transparent 58.5%),
        linear-gradient(180deg, #FFFFFF 0%, #DCE7EF 36%, #7D93A6 49%, #EEF4F9 54%, #9DB1C2 82%, #C8D6E1 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    filter: drop-shadow(0 0.06em 0 rgba(0, 0, 0, 0.9));
}
.shine__fill .hot {
    color: transparent;
    background:
        linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.45) 42%, #F2F8FC 47%, rgba(255, 255, 255, 0.15) 51%, transparent 53%, rgba(255, 255, 255, 0.7) 56%, transparent 58.5%),
        /* heat-blued steel: same metal as the line, a shade deeper and cooler */
        linear-gradient(180deg, #D6E6F1 0%, #8FB4CC 36%, #2F5F80 49%, #B9D2E3 54%, #5E87A3 82%, #86A7BE 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
}
.shine__echo {
    position: absolute;
    left: 0.05em;
    top: 0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--ice-rgb), 0.4);
    pointer-events: none;
    user-select: none;
}
.shine__echo .hot { -webkit-text-stroke-color: rgba(var(--ice-rgb), 0.55); }

/* glint crosses the letters in about 0.8s of each 9s cycle */
@keyframes shine-sweep {
    0%        { background-position: 100% 0, 0 0; animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
    13%, 100% { background-position: 0% 0, 0 0; }
}
.is-ready .shine__fill, .is-ready .shine__fill .hot { animation: shine-sweep 9s linear .5s infinite; }
.is-paused .shine__fill, .is-paused .shine__fill .hot { animation-play-state: paused; }

/* hero pair */
.phero__kicker {
    display: block;
    margin-bottom: 10px;
    font: italic 900 clamp(1.35rem, 1rem + 1.2vw, 2.05rem)/1.08 var(--f-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--frost);
}
.phero__typed {
    display: block;
    font: 500 clamp(0.92rem, 0.86rem + 0.25vw, 1.05rem)/1.6 var(--f-mono);
    letter-spacing: 0.04em;
    color: var(--text);
}
.phero__typed .typed:empty::before { content: attr(data-text); }   /* no JS: show it all */
.js .phero__typed .typed:empty::before { content: none; }
.caret {
    display: inline-block;
    width: 0.6ch;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--ice);
    animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.phero__typed.is-done .caret { animation: caret-blink 1s steps(1) 2, caret-out .4s ease 2s forwards; }
@keyframes caret-out { to { opacity: 0; } }
html:not(.js) .caret { display: none; }

/* "Precision that Powers Industry": original spot and size, under the logos */
.trust__sub {
    margin: 28px 0 0;
    text-align: center;
    font: italic 900 clamp(1.15rem, 1rem + 0.45vw, 1.4rem)/1.2 var(--f-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .shine__fill, .shine__fill .hot { animation: none !important; }
    .caret { display: none; }
}