/* 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; }

/* 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. */