/* The site design system.
 *
 * Loaded by every page, after site.css. It began as one page's stylesheet --
 * the homepage was redesigned first, then the products page adopted it -- and
 * the rest of the site was left on three older languages that disagreed about
 * heading size, eyebrow weight, button shape and section rhythm. Rather than
 * keep a fourth, this is now the one; site.css still owns the header, the
 * footer and the reset.
 *
 * Everything is prefixed .vx-, so a page can adopt it a section at a time
 * without its existing rules colliding. The legacy-alignment block at the end
 * of this file brings the older class names onto these same values, which is
 * what makes a page that has not been rewritten yet still look like the rest.
 *
 * site.css sets several heading rules with !important; where this file needs
 * to override one it says !important back rather than trying to out-specify
 * it, because specificity does not beat !important and pretending otherwise
 * produces rules that silently do nothing.
 */

/* --- Tokens ---------------------------------------------------------------
   Named from site.css's palette rather than re-picking colours, so the page
   moves with the rest of the site if that palette ever changes.

   On :root, not on .vx: the sub-nav is a sibling of <main class="vx">, not a
   descendant, so scoping them to .vx left every var() in that bar resolving
   to nothing -- which is why its button rendered without a background. */
:root {
    /* Aliases of the site tokens in site.css, not values of their own. They
       were duplicates before there were two schemes; as duplicates now they
       would pin this file to the light palette -- site.css defines :root
       first, so a literal here would simply win. */
    --ink: var(--c-ink);
    --sub: var(--c-sub);
    /* Was #6e6e73, a third grey tier below --sub. It cannot be one: against
       white it reaches 3.54:1 and against the mist band 3.33:1, and every
       place it was used -- breadcrumbs, table captions, form hints, the
       revision line under an article -- is small text, which needs 4.5:1.
       The lightest grey that clears 4.5 on mist is #717171, which is inside
       a rounding error of --sub, so the tier was never really available.
       Kept as a name because a lot of rules ask for it. */
    --muted: var(--c-sub);
    --accent: var(--c-accent);
    --accent-dark: var(--c-accent-deep);
    --accent-light: #a7c46a;
    --mist: var(--c-band);
    --line: var(--c-line);
    --radius: 18px;
}

/* --- Reveal ---------------------------------------------------------------
   The hidden state is applied by script, never by the stylesheet. If the
   script does not run, or the observer never fires, every section is simply
   visible -- the failure mode is "no animation", not "no content". */
[data-reveal="on"] .vx-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal="on"] .vx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal="on"] .vx-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Section scaffolding -------------------------------------------------- */
.vx-section { padding: clamp(5rem, 11vw, 9rem) 8%; }
/* Header (84px) plus the sub-nav, so a jump link leaves the heading in view. */
.vx-section[id] { scroll-margin-top: 9rem; }
.vx-section--mist { background: var(--mist); }
.vx-section--ink { background: var(--c-inkband); color: #fff; }
.vx-section--tight { padding-top: clamp(3rem, 6vw, 5rem); }
.vx-section--ink { padding-bottom: clamp(4rem, 8vw, 6rem); }
.vx-wrap { max-width: 1180px; margin: 0 auto; }
.vx-narrow { max-width: 820px; }

.vx-eyebrow {
    margin: 0 0 1.5rem;
    color: var(--accent);
    font: 600 .72rem 'IBM Plex Mono', monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.vx-section--ink .vx-eyebrow { color: var(--accent-light); }

/* Three heading steps, and a page picks one deliberately.
 *
 *   .vx-display  80px  a statement of two to four words a line. The homepage
 *                      hero, and nothing else -- it is the size that says
 *                      "this is the front door".
 *   .vx-title    50px  a descriptive page title that is a sentence. Every
 *                      other page's h1. A sentence set at display size wraps
 *                      to three or four lines and fills the first screen with
 *                      one heading, which is what every page but the homepage
 *                      was doing before this.
 *   .vx-h2       49px  a section heading, below both.
 *
 * The steps are ~1.26 apart at 1440px and hold their order at every width the
 * clamps cover, so a title never outgrows the display above it. */
.vx-display {
    margin: 0;
    font-size: clamp(2.6rem, 6.4vw, 5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em;
}
.vx-title {
    margin: 0;
    font-size: clamp(2.1rem, 3.5vw, 3.35rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em;
    max-width: 22ch;
}
.vx-h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(1.95rem, 3.4vw, 2.95rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em;
}
.vx-section--ink .vx-h2 { color: #fff !important; }
.vx-accent { color: var(--accent); }
.vx-section--ink .vx-accent { color: var(--accent-light); }

/* The large grey paragraph Apple sets under a statement. Deliberately big:
   it is the only body copy in the section and it has to carry it. */
.vx-lead {
    max-width: 46rem;
    margin: 0;
    color: var(--sub);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}
.vx-section--ink .vx-lead { color: #c7c7c9; }
.vx-body { max-width: 42rem; margin: 1.5rem 0 0; color: var(--sub); font-size: 1.05rem; line-height: 1.8; }

/* --- Sub-navigation -------------------------------------------------------
   Apple's product sub-nav: it is not the site menu, it is a table of contents
   for this page. Hidden until the hero has been scrolled past, so it never
   competes with the masthead for the first screen. */
.vx-subnav {
    position: fixed;
    /* Below the masthead, not on top of it. site.css fixes the site header at
       84px tall with z-index 100; sitting at top:0 put the two bars in the
       same place and showed one through the other. A lower z-index also means
       the hidden state tucks up behind the header rather than over it. */
    top: 84px; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .85rem 8%;
    background: var(--c-header);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-105%);
    /* Hidden means hidden. Translating it alone left it parked under a header
       that is only 82% opaque, so its text and its green button showed through
       the masthead on the first screen -- and its links stayed in the tab
       order, dropping keyboard focus into a bar nobody can see. visibility
       settles both. It is held until the slide finishes on the way out, and
       dropped immediately on the way in, so the transform still animates. */
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .35s;
}
.vx-subnav.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
    .vx-subnav, .vx-subnav.is-visible { transition: none; }
}
.vx-subnav__name { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.vx-subnav__links { display: flex; gap: 1.4rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.vx-subnav__links::-webkit-scrollbar { display: none; }
.vx-subnav__links a {
    color: var(--sub);
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.vx-subnav__links a:hover { color: var(--ink); }
/* Not colour alone: the current section is underlined as well, so it reads
   for anyone who cannot separate the two greens. */
.vx-subnav__links a.is-current { color: var(--ink); font-weight: 600; border-color: var(--accent); }
.vx-subnav__cta {
    flex-shrink: 0;
    padding: .5rem 1.15rem;
    border-radius: 980px;
    background: var(--c-accent-fill);
    color: var(--c-on-accent);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.vx-subnav__cta:hover { background: var(--c-accent-fill-hover); }
@media (max-width: 860px) {
    /* The masthead is shorter here, so the bar under it moves up to match. */
    .vx-subnav { top: 72px; padding: .7rem 20px; gap: .9rem; }
    .vx-subnav__links { display: none; }
    .vx-subnav__name { font-size: .95rem; }
}

/* --- Hero ----------------------------------------------------------------- */
/* Mist, not white. Every other page on the site opens with a mist band and
   drops into white, and the two pages that opened the other way were the two
   that had been redesigned -- so the odd one out was the new style, not the
   old. One opening band means the masthead always sits on the same colour,
   whichever page you land on. */
.vx-hero {
    padding: clamp(7rem, 12vw, 10rem) 8% clamp(3rem, 6vw, 5rem);
    background: var(--mist);
    border-bottom: 1px solid var(--line);
}
.vx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 1180px; margin: 0 auto; }
.vx-hero__sub { max-width: 34rem; margin: 1.75rem 0 0; color: var(--sub); font-size: 1.12rem; line-height: 1.7; }
.vx-hero__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
/* The whole photograph, not a crop of it.
   These boxes had a fixed height and object-fit:cover, which fills the box by
   cutting whatever does not fit -- on a hero shot of a vehicle that removed
   the top and bottom of the vehicle. The source photographs run from 0.52 to
   1.90 in aspect ratio, so there is no single crop that suits them; the box
   takes the picture's shape instead, and where a box has to keep a fixed
   height (a card in a rail, where uneven heights would break the row) the
   picture is fitted inside it on the page's own grey rather than cropped. */
.vx-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--mist); }
@media (max-width: 900px) {
    .vx-hero { padding-left: 20px; padding-right: 20px; }
    .vx-hero__grid { grid-template-columns: 1fr; }
    .vx-hero__media img { height: 15rem; }
}

/* Two routes, because Vebix is two businesses and a visitor arrives for one
   of them. Kept from the previous homepage; only the styling is new. */
.vx-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2.25rem; }
.vx-route { display: flex; flex-direction: column; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--c-surface); text-decoration: none; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.vx-route:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .4); }
.vx-route__title { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.vx-route__sub { margin-top: .55rem; color: var(--sub); font-size: .88rem; line-height: 1.6; }
.vx-route__cue { margin-top: 1rem; color: var(--accent); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }

.vx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.vx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .95rem 1.9rem; border-radius: 980px;
    background: var(--c-accent-fill); color: var(--c-on-accent);
    font-size: .95rem; font-weight: 600; text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.vx-btn:hover { background: var(--c-accent-fill-hover); transform: translateY(-2px); }
.vx-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--c-line-hard); }
.vx-btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.vx-section--ink .vx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
.vx-section--ink .vx-btn--ghost:hover { color: var(--accent-light); border-color: var(--accent-light); }

/* --- Statement band ------------------------------------------------------- */
.vx-band { position: relative; border-radius: var(--radius); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.vx-band img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 786; object-fit: contain; background: var(--mist); }

/* --- Split: copy beside an image ------------------------------------------ */
.vx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vx-split__media { border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.vx-split__media img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: contain; background: var(--mist); }
.vx-split--flip .vx-split__media { order: -1; }
@media (max-width: 900px) { .vx-split--flip .vx-split__media { order: 0; } }

/* --- The moving windows ---------------------------------------------------
   One horizontal rail, used twice on this page: once for the company and once
   for the projects. CSS scroll-snap does the movement; the script only nudges
   scrollLeft and keeps the arrows honest, so the rail still scrolls with a
   finger, a trackpad or the keyboard if the script never loads. */
.vx-rail { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.vx-rail__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Bleed to the section edge on the right only, so a card can sit half
       off-screen there -- what tells a visitor there is more to see. The
       bleed used to be symmetric, with matching padding-left and
       scroll-padding-left re-indenting the first card back to the heading.
       That worked at rest, but every later snap position inherited the same
       left-hand gutter, and a card just scrolled past doesn't fully leave it
       -- a slice of it sat in that gutter, looking cut off rather than
       cleared. The left edge doesn't bleed at all now: the track's own left
       edge already sits where the heading does, so every card, first or
       not, snaps flush there with nothing left showing behind it. */
    margin: 0 -8% 0 0;
    padding: .5rem 8% 1.5rem 0;
    scroll-padding-left: 0;
}
.vx-rail__track::-webkit-scrollbar { display: none; }
.vx-rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .vx-rail__track { scroll-behavior: auto; } }

.vx-card {
    flex: 0 0 auto;
    width: min(23rem, 78vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
a.vx-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 46px -28px rgba(0, 0, 0, .45); }
.vx-card__media { position: relative; background: var(--mist); }
/* Square, like the product cards already are. The box was 14rem tall and
   landscape while most of these photographs are portrait, so fitting them
   inside it left a wide grey margin either side. Squaring the box is what
   costs the least across a set that runs from 0.52 to 1.90, and it means
   every card on the site now has media of the same shape. */
.vx-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: .9rem; object-fit: contain; background: var(--mist); }
.vx-card__tag { position: absolute; left: .85rem; bottom: .85rem; padding: .3rem .7rem; border-radius: 8px; background: rgba(0, 0, 0, .62); color: #fff; font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .06em; }
.vx-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.vx-card__label { margin: 0 0 .65rem; color: var(--accent); font: 600 .66rem 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.vx-card h3 { margin: 0 0 .6rem; font-size: 1.2rem !important; line-height: 1.3 !important; }
.vx-card p { margin: 0; color: var(--sub); font-size: .92rem; line-height: 1.7; }
.vx-card__cue { margin-top: auto; padding-top: 1.25rem; color: var(--accent); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
a.vx-card:hover .vx-card__cue { text-decoration: underline; text-underline-offset: 3px; }

.vx-rail__controls { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .25rem; }
.vx-rail__btn {
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--c-wash);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
.vx-rail__btn:hover:not(:disabled) { background: var(--c-wash-strong); }
.vx-rail__btn:disabled { opacity: .3; cursor: default; }
.vx-rail__btn svg { width: 1rem; height: 1rem; }
.vx-section--ink .vx-rail__btn { background: rgba(255, 255, 255, .14); color: #fff; }
.vx-section--ink .vx-rail__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }

/* --- Discipline tiles ------------------------------------------------------ */
.vx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.vx-tile { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-surface); transition: border-color .25s ease, transform .25s ease; }
.vx-tile:hover { border-color: var(--accent); transform: translateY(-4px); }
.vx-tile__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1.1rem; color: var(--accent); }
.vx-tile h3 { margin: 0 0 .6rem; font-size: 1.2rem !important; line-height: 1.3 !important; }
.vx-tile p { margin: 0; color: var(--sub); font-size: .92rem; line-height: 1.7; }

/* --- Brand shelf ---------------------------------------------------------- */
.vx-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.vx-brand { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-surface); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.vx-brand:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .45); }
.vx-brand__media { background: var(--c-plate); padding: 1.25rem 1.25rem .25rem; }
.vx-brand__media img { display: block; width: 100%; height: 14rem; object-fit: contain; }
.vx-brand__body { display: flex; flex-direction: column; flex: 1; padding: 0 1.5rem 1.5rem; }
.vx-brand__count { margin: 0 0 .5rem; color: var(--accent); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.vx-brand h3 { margin: 0 0 .55rem; font-size: 1.2rem !important; line-height: 1.3 !important; }
.vx-brand p { margin: 0; color: var(--sub); font-size: .9rem; line-height: 1.7; }
.vx-brand__cue { margin-top: auto; padding-top: 1.25rem; color: var(--accent); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }

/* --- Figures --------------------------------------------------------------- */
.vx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.vx-figure dt { color: var(--accent-light); font: 600 .68rem 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.vx-figure dd { margin: .6rem 0 0; font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #fff; }
.vx-figure p { margin: .55rem 0 0; color: #a1a1a6; font-size: .88rem; line-height: 1.6; }

.vx-credentials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.vx-credentials span { padding: .5rem 1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 980px; color: #e5e5e7; font-size: .82rem; }

/* --- Closing ---------------------------------------------------------------- */
.vx-close { text-align: center; }
.vx-close .vx-lead { margin-left: auto; margin-right: auto; }
.vx-close .vx-actions { justify-content: center; }

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

@media (max-width: 768px) {
    .vx-section { padding-left: 20px; padding-right: 20px; }
    .vx-rail__track { margin: 0 -20px 0 0; padding-left: 0; padding-right: 20px; scroll-padding-left: 0; }
    .vx-card__media img { height: 11rem; }
    .vx-actions .vx-btn { width: 100%; }
}

/* --- Gradient headline ------------------------------------------------------
   Colour, then the gradient on top of it. If background-clip:text is not
   supported the declaration block never applies and the text keeps the solid
   colour -- transparent text with no clip would be invisible.

   Every stop holds the 3:1 that large text needs against BOTH backgrounds
   this runs on, not just white: #4b5e2d is 7.15:1 on white and 6.56:1 on the
   mist sections, #72913f is 3.60:1 and 3.30:1. The old light stop, #7a9a45,
   was picked against white alone at 3.21:1 and quietly dropped to 2.95:1 on
   mist -- under the line for the gradient headings that sit on a mist
   section, on this page and on the products page. The lighter greens further
   up the palette look better still and fail on both, so they are not here. */
.vx-grad { color: var(--accent); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .vx-grad {
        background-image: linear-gradient(96deg, var(--c-grad-1) 0%, var(--c-grad-2) 50%, var(--c-grad-3) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* Descenders get clipped by the text box on some engines otherwise. */
        padding-bottom: .06em;
    }
}

/* --- Stat callout -----------------------------------------------------------
   A figure given room to be read as a figure, in the "Up to / 18 hrs /
   battery life" shape. Every number on this page comes from the project's own
   page, qualifier included -- "up to", "approximately" -- because dropping
   the qualifier turns a design target into a guarantee. */
.vx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.vx-stat__pre { margin: 0; color: var(--sub); font-size: .95rem; }
/* The lighter Apple grey (--muted) reaches only 3.33:1 on the mist
   background, short of the 4.5:1 this size needs. On the ink section it
   clears 4.65:1, so that one keeps it -- see the override below. */
.vx-stat__big { margin: .15rem 0; font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(2.6rem, 5.2vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.vx-stat__post { margin: 0; color: var(--sub); font-size: .95rem; }
/* Was #6e6e73 -- the light-background grey, used unchanged on the dark
   band, where it falls to 3.3:1. The sibling line below already used the
   light grey; this one was simply missed. */
.vx-section--ink .vx-stat__pre { color: #c7c7c9; }
.vx-section--ink .vx-stat__post { color: #c7c7c9; }

/* --- Where the catalogue lives ---------------------------------------------
   One line, the same on every page that carries it, saying that the parts are
   sold from their own site. It names the domain in the text and not only in
   the href: a visitor reading it on a phone, and anything summarising this
   page, should both come away with the address. */
.vx-shopnote {
    /* A paragraph, not a flex row: as flex items the link and the text
       either side of it wrap as blocks, which broke the sentence after the
       domain and put the rest of it on its own line. */
    max-width: 46rem;
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--c-accent);
    border-radius: 0 12px 12px 0;
    background: var(--c-tint);
    color: var(--sub);
    font-size: .95rem;
    line-height: 1.7;
}
.vx-shopnote a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
/* On a dark band the tint is nearly the band itself, and the body grey and
   the accent both have to lift to stay legible -- the same pairing the rest
   of this file uses inside .vx-section--ink. */
.vx-section--ink .vx-shopnote { background: rgba(255, 255, 255, .06); color: #c7c7c9; }
.vx-section--ink .vx-shopnote a { color: var(--accent-light); }
.vx-shopnote--centred { margin-left: auto; margin-right: auto; text-align: left; }

/* The block that brings the older class names (.eyebrow, .lp-hero, .job-hero,
   .btn-elevation ...) onto these values lives in assets/vx-align.css, which is
   loaded last. It has to be last: landing.css and job.css set their own sizes
   with !important, and !important against !important is decided by order, not
   by specificity. Keeping it in a separate file is what makes that orderable
   without this one having to load after the sheets it is the basis for. */