/*
 * VECTOR — IT services, managed services, data and cloud consultancies.
 * ---------------------------------------------------------------------------
 * FAMILY: corporate  (/themes/_families/corporate.css, loaded before this file)
 *
 * A variant. The token contract is documented in full on `themes/apex`, this
 * family's reference variant — every token below is required and the family
 * carries no fallbacks by design.
 *
 * ## Why this exists beside Clarity and Helix
 *
 * An IT services firm sells CONNECTION: systems that talk to each other, data
 * that reaches the people who need it, a partner on the other end of the line.
 * So this variant's one idea is the NETWORK NODE — a coral point with a ring
 * round it, linked to the next by an arc. Indigo night and lavender daylight,
 * coral kept for the signal. Helix is dark and glowing, an AI product's launch
 * page; Clarity is a consultancy's plan on navy. This is the network map.
 *
 * Built for a Vikat Solutions demo (2026-09-22), and written so it wears any
 * customer's accent: coral is `--accent`, indigo is `--primary`.
 *
 * ## Type — Geist + Geist Mono
 *
 * Geist is a grotesque drawn for interfaces: tight, even, and at home at
 * display sizes when set heavy with negative tracking. Geist Mono sets
 * eyebrows, indices and small labels, which read as a terminal's output — the
 * register an engineering firm speaks in.
 *
 * ## The node
 *
 * A ring with a dot in it, linked to a second by an arc. Above every section
 * heading, at each stage of a process, on each service, drawn faint and large
 * behind a closing band. It is a MASK over `--accent`, so it takes the
 * customer's colour.
 *
 * ## The opening
 *
 * A page that opens on a picture or a video gets the header laid over it, on a
 * fade, turning solid indigo when the visitor scrolls. Every other opening is
 * an indigo band with contour lines behind the words — the terrain the hero
 * video draws, standing still.
 *
 * ## Bands and the bento
 *
 * A feature grid or stats row set to FULL WIDTH turns indigo; any other
 * full-width block sits on lavender. A feature grid of four or six on paper is
 * laid out as a BENTO — the first card and the last run double width — so an
 * overview reads as a composed board rather than a spreadsheet.
 */

:root {
    /* --- measurements ---------------------------------------------------- */
    --cms-shell: 76rem;
    --cms-wide: 92rem;
    --cms-narrow: var(--cms-measure);
    --cms-measure: 42rem;
    --cms-gutter: clamp(1.25rem, 4vw, 2.25rem);
    --cms-space: clamp(4.5rem, 9vw, 7.5rem);
    --cms-gap: 1.5rem;
    --cms-gap-sm: .75rem;
    --cms-card-pad: 2rem;
    --cms-nav-gap: 2rem;

    /* --- type ------------------------------------------------------------ */
    --cms-display: 'Geist', var(--brand-font-sans, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-body: 'Geist', var(--brand-font-sans, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-display-weight: 600;
    --cms-display-tracking: -.035em;
    --cms-text: 1.0625rem;
    --cms-hero: clamp(2.9rem, 6vw, 5.2rem);
    --cms-h1: clamp(2.5rem, 5vw, 4rem);
    --cms-h2: clamp(2rem, 3.6vw, 3rem);
    --cms-h3: 1.2rem;
    --cms-stat: clamp(3rem, 5.4vw, 4.4rem);
    --cms-brand-size: 1.3rem;

    /* --- colour ---------------------------------------------------------- */
    --cms-bg: #ffffff;
    --cms-fg: #12132b;
    --cms-muted: #5a5d78;
    --cms-border: #e4e3f1;
    --cms-surface: #f5f4fc;
    --cms-surface-2: #ebe9f8;
    --cms-ink: #12132b;
    --cms-danger: #c2331b;
    --cms-header-bg: #0c0e22;
    --cms-footer-bg: #090a1a;
    --cms-cta-bg: #0c0e22;
    --cms-cta-fg: #f2f1fb;
    --cms-scrim: #090a1a;

    /* --- shape ----------------------------------------------------------- */
    --cms-radius: 10px;
    --cms-radius-sm: 6px;
    --cms-radius-lg: 18px;
    --cms-radius-pill: 999px;

    --cms-shadow: 0 1px 2px rgb(18 19 43 / .05), 0 14px 34px -18px rgb(18 19 43 / .2);
    --cms-shadow-lg: 0 2px 4px rgb(18 19 43 / .05), 0 32px 64px -30px rgb(40 30 110 / .38);

    /* A node, for empty picture slots. */
    --cms-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='5'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%23000'/%3E%3C/svg%3E");

    /* --- this variant's own vocabulary ------------------------------------- */
    --vx-ink: #0c0e22;
    --vx-ink-2: #15173a;
    --vx-ink-3: #2a2470;
    --vx-line: rgb(242 241 251 / .1);
    --vx-line-2: rgb(242 241 251 / .18);
    --vx-on-dark: #f2f1fb;
    --vx-on-dark-muted: #a9abc8;
    --vx-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --vx-header-h: 5.25rem;

    /* The accent, lifted, for type and hairlines on indigo. */
    --vx-coral-light: color-mix(in srgb, var(--accent) 72%, #ffffff);
    /* The accent, deepened, for type on white (a bright coral fails contrast). */
    --vx-coral-deep: color-mix(in srgb, var(--accent) 70%, #4a0f00);

    /* THE NODE: a ring with a dot in it, used as a MASK so it takes the accent. */
    --vx-node: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000'%3E%3Ccircle cx='24' cy='24' r='20' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    /* THE LINK: a filled node, an arc, and a ringed node — above every heading. */
    --vx-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 28' fill='none' stroke='%23000'%3E%3Ccircle cx='7' cy='21' r='5' fill='%23000' stroke='none'/%3E%3Cpath d='M7 21 Q 38 -8 69 13' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='14' r='6.5' stroke-width='3'/%3E%3Ccircle cx='70' cy='14' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    /* CONTOURS: the hero video's terrain, standing still, behind a plain opening. */
    --vx-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none' stroke='%23c4c8ec' stroke-width='1.2'%3E%3Cpath d='M0 330 C120 320 200 250 300 240 S470 150 560 120 S720 110 800 90' opacity='.55'/%3E%3Cpath d='M0 345 C130 336 210 272 310 262 S480 176 570 148 S730 138 800 118' opacity='.5'/%3E%3Cpath d='M0 360 C140 352 220 294 320 284 S490 202 580 176 S740 166 800 146' opacity='.45'/%3E%3Cpath d='M0 375 C150 368 230 316 330 306 S500 228 590 204 S750 194 800 174' opacity='.4'/%3E%3Cpath d='M0 390 C160 384 240 338 340 328 S510 254 600 232 S760 222 800 202' opacity='.35'/%3E%3Cpath d='M0 405 C170 400 250 360 350 350 S520 280 610 260 S770 250 800 230' opacity='.3'/%3E%3Cpath d='M0 315 C110 304 190 228 290 218 S460 124 550 92 S710 82 800 62' opacity='.4'/%3E%3Cpath d='M0 300 C100 288 180 206 280 196 S450 98 540 64 S700 54 800 34' opacity='.3'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --cms-bg: #0b0c1e;
        --cms-fg: #f0effa;
        --cms-muted: #a5a7c2;
        --cms-border: #22244a;
        --cms-surface: #111334;
        --cms-surface-2: #181a42;
        --cms-ink: #f0effa;
        --cms-header-bg: #090a1a;
        --cms-footer-bg: #070814;
        --cms-cta-bg: #111334;
        --cms-shadow: 0 1px 0 var(--cms-border);
        --cms-shadow-lg: 0 30px 60px -28px rgb(0 0 0 / .7);
        --vx-ink: #090a1a;
        --vx-ink-2: #121436;
        --vx-coral-deep: var(--vx-coral-light);
    }
}

/* ===========================================================================
 * PRIMITIVES
 * ======================================================================== */

body { line-height: 1.7; font-feature-settings: "ss01", "cv11"; }

h1, h2 { color: var(--cms-fg); line-height: 1.04; text-wrap: balance; }
h3, h4 { font-family: var(--cms-body); font-weight: 600; letter-spacing: -.02em; color: var(--cms-fg); }

::selection { background: var(--accent); color: var(--accent-foreground); }

.cms-btn {
    padding: 1rem 1.65rem;
    border-radius: var(--cms-radius-pill);
    font-family: var(--cms-body);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.cms-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--primary) 75%, transparent);
}

.cms-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

a.cms-btn::after { content: "\2192"; line-height: 1; transition: transform .18s ease; }
a.cms-btn:hover::after { transform: translateX(4px); }

.cms-btn--ghost { border-color: currentColor; }

/* On indigo, the button is coral — the one lit signal in the band. */
:is(.cms-block-hero, .cms-block-cta, .cms-w--full > .cms-block-feature-grid, .cms-w--full > .cms-block-stats) .cms-btn:not(.cms-btn--ghost) {
    background: var(--accent);
    color: var(--accent-foreground);
}

:is(.cms-block-hero, .cms-block-cta) .cms-btn:not(.cms-btn--ghost):hover {
    background: var(--vx-coral-light);
    box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--accent) 80%, transparent);
}

.cms-card { border-radius: var(--cms-radius-lg); }

@media (prefers-reduced-motion: reduce) {
    .cms-btn, a.cms-btn::after { transition: none; }
    .cms-btn:hover, a.cms-btn:hover::after { transform: none; }
}

/* ===========================================================================
 * THE LINK — above section headings; the monospace eyebrow
 * ======================================================================== */

.cms-block-services__heading,
.cms-block-feature-grid__heading,
.cms-block-stats__heading,
.cms-block-steps__heading,
.cms-block-team__heading,
.cms-block-testimonials__heading,
.cms-block-faq__heading,
.cms-block-gallery__heading,
.cms-block-logos__heading,
.cms-block-careers__heading,
.cms-block-contact-form__heading,
.cms-block-opening-hours__heading,
.cms-block-video__heading,
.cms-block-text__heading,
.cms-block-blog-grid__heading,
.cms-block-map__heading,
.cms-block-video-gallery__heading,
.cms-page__section-heading {
    padding-block-start: 0;
    margin-block-end: 1.25rem;
    max-inline-size: 20ch;
}

.cms-block-services__heading::before,
.cms-block-feature-grid__heading::before,
.cms-block-stats__heading::before,
.cms-block-steps__heading::before,
.cms-block-team__heading::before,
.cms-block-testimonials__heading::before,
.cms-block-faq__heading::before,
.cms-block-gallery__heading::before,
.cms-block-logos__heading::before,
.cms-block-careers__heading::before,
.cms-block-contact-form__heading::before,
.cms-block-opening-hours__heading::before,
.cms-block-video__heading::before,
.cms-block-text__heading::before,
.cms-block-blog-grid__heading::before,
.cms-block-map__heading::before,
.cms-block-video-gallery__heading::before,
.cms-page__section-heading::before {
    content: "";
    position: static;
    display: block;
    inline-size: 3.4rem;
    block-size: 1.2rem;
    margin-block-end: 1.1rem;
    border-radius: 0;
    background: var(--accent);
    -webkit-mask: var(--vx-link) left center / contain no-repeat;
    mask: var(--vx-link) left center / contain no-repeat;
}

.cms-block-services__body,
.cms-block-feature-grid__body,
.cms-block-steps__body,
.cms-block-careers__body,
.cms-block-contact-form__body {
    font-size: 1.12rem;
    margin-block-end: clamp(2.25rem, 4vw, 3.25rem);
}

.cms-block-split-about__eyebrow,
.cms-block-hero__eyebrow,
.cms-block-slider__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--vx-mono);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cms-block-split-about__eyebrow::before,
.cms-block-hero__eyebrow::before,
.cms-block-slider__eyebrow::before {
    content: "";
    flex: none;
    inline-size: .8rem;
    block-size: .8rem;
    border-radius: 0;
    background: var(--accent);
    -webkit-mask: var(--vx-node) center / contain no-repeat;
    mask: var(--vx-node) center / contain no-repeat;
}

.cms-block-split-about__eyebrow { color: var(--vx-coral-deep); margin-block-end: 1.1rem; }

/* ===========================================================================
 * HEADER — indigo, and laid over an opening picture or video
 * ======================================================================== */

.cms-header {
    border-block-end: 1px solid transparent;
    padding-block: 0;
    min-block-size: var(--vx-header-h);
    display: flex;
    align-items: center;
    background: var(--cms-header-bg);
    color: var(--vx-on-dark);
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cms-header > .cms-shell { inline-size: 100%; }

.cms-header .cms-brand { color: #ffffff; }
.cms-header .cms-brand__logo { block-size: 2.9rem; inline-size: auto; }

.cms-header .cms-nav__link {
    color: rgb(242 241 251 / .74);
    font-size: .92rem;
    font-weight: 600;
    padding-block: .45rem;
}

.cms-header .cms-nav__link:hover,
.cms-header .cms-nav__link:focus { color: #ffffff; }

.cms-header .cms-nav__item--current > .cms-nav__link,
.cms-header .cms-nav__item--in-branch > .cms-nav__link {
    color: #ffffff;
    box-shadow: inset 0 -2px 0 var(--accent);
}

.cms-header .cms-nav__disclosure,
.cms-header .cms-nav-toggle { color: var(--vx-on-dark); }

.cms-header .cms-nav__submenu {
    background: var(--vx-ink-2);
    border: 1px solid var(--vx-line-2);
    border-radius: var(--cms-radius);
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / .65);
    padding: .5rem;
}

.cms-header .cms-nav__submenu .cms-nav__link { color: rgb(242 241 251 / .78); box-shadow: none; }

.cms-header .cms-nav__submenu .cms-nav__link:hover,
.cms-header .cms-nav__submenu .cms-nav__link:focus { background: rgb(255 255 255 / .06); color: #ffffff; }

/* The menu ends on the contact page: a coral pill. */
@media (min-width: 48em) {
    .cms-header .cms-nav__list--d1 > .cms-nav__item:last-child:not(.cms-nav__item--has-children) > .cms-nav__link {
        padding: .65rem 1.25rem;
        border-radius: var(--cms-radius-pill);
        background: var(--accent);
        color: var(--accent-foreground);
        transition: background .18s ease, color .18s ease;
    }

    .cms-header .cms-nav__list--d1 > .cms-nav__item:last-child:not(.cms-nav__item--has-children) > .cms-nav__link:hover {
        background: var(--vx-coral-light);
        color: var(--vx-ink);
    }

    .cms-header .cms-nav__list--d1 > .cms-nav__item--current:last-child:not(.cms-nav__item--has-children) > .cms-nav__link {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
    }
}

/*
 * OVER THE OPENING PICTURE OR VIDEO. The header is lifted out of the flow and
 * laid over it on a fade; `cms.js` marks it `is-stuck` on scroll and it turns
 * solid indigo. Not while previewing: the preview bar sits above it in the flow.
 */
body:not(:has(.cms-preview-bar)):has(.cms-main > .cms-shell > .cms-w:first-of-type > .cms-block-hero.cms-has-bg) .cms-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    background: linear-gradient(to bottom, rgb(9 10 26 / .72), rgb(9 10 26 / 0));
}

body:not(:has(.cms-preview-bar)):has(.cms-main > .cms-shell > .cms-w:first-of-type > .cms-block-hero.cms-has-bg) .cms-header.is-stuck {
    background: color-mix(in srgb, var(--vx-ink) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-block-end-color: var(--vx-line);
    box-shadow: 0 12px 30px -20px rgb(0 0 0 / .6);
}

@media (max-width: 47.999em) {
    .cms-header { padding-block: .75rem; }
    .cms-header .cms-brand__logo { block-size: 2.3rem; }
    .cms-header:has(.cms-nav.is-open),
    .cms-header:has([aria-expanded="true"]) { background: var(--vx-ink); }
    .cms-header .cms-nav__item--current > .cms-nav__link { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: .75rem; }
}

/* ===========================================================================
 * THE OPENING
 * ======================================================================== */

.cms-main { padding-block-end: 0; }

.cms-block-hero {
    --vx-hero-pad: clamp(4.5rem, 9vw, 7.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
    padding-block: var(--vx-hero-pad);
    background:
        radial-gradient(56rem 32rem at 90% 0%, color-mix(in srgb, var(--vx-ink-3) 90%, transparent), transparent 70%),
        radial-gradient(40rem 24rem at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
        var(--vx-ink);
    color: var(--vx-on-dark);
    overflow: clip;
    isolation: isolate;
}

.cms-w:not(.cms-w--full, .cms-w--wide) > .cms-block-hero {
    box-shadow: 0 0 0 100vmax var(--vx-ink);
    clip-path: inset(0 -100vmax);
}

.cms-block-hero > :not(.cms-bg) { position: relative; z-index: 2; margin: 0; }
.cms-block-hero__headline { max-inline-size: 16ch; color: #ffffff; font-size: var(--cms-hero); line-height: 1; letter-spacing: -.045em; }
.cms-block-hero__body { max-inline-size: 34rem; color: rgb(242 241 251 / .8); font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.65; }
.cms-block-hero__body strong { color: #ffffff; }
.cms-block-hero__body a { color: var(--vx-coral-light); }
.cms-block-hero__eyebrow {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--vx-coral-light);
}
.cms-block-hero__actions { margin-block-start: .6rem; }

/* A page's own title band, shorter than a home page's opening. */
.cms-block-hero:not(.cms-block-hero--h-tall, .cms-block-hero--h-full) { --vx-hero-pad: clamp(3.75rem, 7vw, 5.75rem); }
.cms-block-hero:not(.cms-block-hero--h-tall, .cms-block-hero--h-full) .cms-block-hero__headline { font-size: var(--cms-h1); max-inline-size: 20ch; }

/* Contours behind a plain opening — the video's terrain, standing still —
 * with three lit nodes on them. */
.cms-block-hero:not(.cms-has-bg)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 28%;
    background:
        radial-gradient(circle at 70% 38%, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 35%, transparent) 5px 7px, transparent 8px),
        radial-gradient(circle at 84% 22%, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 30%, transparent) 4px 6px, transparent 7px),
        radial-gradient(circle at 56% 62%, var(--vx-coral-light) 0 3px, transparent 4px),
        var(--vx-contours) right bottom / cover no-repeat;
    opacity: .7;
    -webkit-mask: linear-gradient(90deg, transparent, #000 35%);
    mask: linear-gradient(90deg, transparent, #000 35%);
    pointer-events: none;
}

@media (max-width: 63.999em) {
    .cms-block-hero:not(.cms-has-bg)::after { inset: 30% 0 0 0; opacity: .4; }
}

/* A hero with a picture or video: tall enough for the laid-over header, and a
 * scrim darkest behind the words, opening toward the picture. */
.cms-block-hero.cms-has-bg { background: var(--vx-ink); }

body:not(:has(.cms-preview-bar)) .cms-main > .cms-shell > .cms-w:first-of-type > .cms-block-hero.cms-has-bg {
    padding-block-start: calc(var(--vx-header-h) + var(--vx-hero-pad));
}

.cms-block-hero.cms-has-bg:not([class*="cms-block-hero--text-"]) .cms-bg::after {
    background: linear-gradient(95deg, rgb(9 10 26 / .94) 0%, rgb(9 10 26 / .78) 36%, rgb(9 10 26 / .18) 72%, rgb(9 10 26 / .05) 100%);
    opacity: 1;
}

/* The foot of the opening: a coral signal line, brightest in the middle. */
.cms-block-hero.cms-block-hero--h-tall::before,
.cms-block-hero.cms-block-hero--h-full::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--vx-coral-light) 60%, transparent);
    opacity: .9;
}

.cms-block-hero--text-center { align-items: center; text-align: center; }
.cms-block-hero--text-end { align-items: flex-end; text-align: end; }

/* ===========================================================================
 * PAGE TITLE — an indigo band for pages that open without a hero
 * ======================================================================== */

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden),
.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden) + .cms-intro,
.cms-main > .cms-shell > .cms-page__back:first-child,
.cms-main > .cms-shell > .cms-page__back:first-child + h1,
.cms-main > .cms-shell > .cms-page__back:first-child + h1 + .cms-page__lede,
.cms-post__header {
    background: var(--vx-ink);
    box-shadow: 0 0 0 100vmax var(--vx-ink), 0 -2px 0 0 var(--vx-ink);
    clip-path: inset(-2px -100vmax 0);
    color: var(--vx-on-dark);
    margin: 0;
    max-inline-size: none;
}

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden),
.cms-main > .cms-shell > .cms-page__back:first-child + h1,
.cms-post__title {
    padding-block: 1.25rem;
    font-size: var(--cms-h1);
    color: #ffffff;
}

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden) { padding-block-start: clamp(3.5rem, 7vw, 5.5rem); }

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden):not(:has(+ .cms-intro)),
.cms-main > .cms-shell > .cms-page__back:first-child + h1:not(:has(+ .cms-page__lede)),
.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden) + .cms-intro,
.cms-main > .cms-shell > .cms-page__back:first-child + h1 + .cms-page__lede,
.cms-post__header { padding-block-end: clamp(3rem, 6vw, 4.5rem); }

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden) + .cms-intro,
.cms-main > .cms-shell > .cms-page__back:first-child + h1 + .cms-page__lede { color: var(--vx-on-dark-muted); font-size: 1.2rem; }

.cms-main > .cms-shell > .cms-page__back:first-child + h1 + .cms-page__lede { padding-inline-end: calc(100% - var(--cms-measure)); }

.cms-main > .cms-shell > h1:first-child + .cms-intro a,
.cms-main > .cms-shell > .cms-page__back:first-child a,
.cms-post__header a { color: var(--vx-coral-light); }

.cms-main > .cms-shell > .cms-page__back:first-child {
    padding-block-start: clamp(3rem, 6vw, 4.5rem);
    font-family: var(--vx-mono);
    font-weight: 500;
    letter-spacing: .08em;
}

.cms-post__header { padding-block-start: clamp(3.5rem, 7vw, 5.5rem); margin-block-end: 3rem; }
.cms-post__meta { color: var(--vx-on-dark-muted); }

.cms-main > .cms-shell > .cms-page__lede + .cms-page__media,
.cms-main > .cms-shell > h1 + .cms-page__media { margin-block-start: 3.5rem; }

.cms-main > .cms-shell > h1:first-child + :is(.cms-page__lede, .cms-muted):last-child {
    position: relative;
    max-inline-size: 48rem;
    margin-block: clamp(3rem, 6vw, 4.5rem) var(--cms-space);
    padding: 2rem 2.25rem 2rem 5.5rem;
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    color: var(--cms-fg);
    font-size: 1.15rem;
}

.cms-main > .cms-shell > h1:first-child + :is(.cms-page__lede, .cms-muted):last-child::before {
    content: "";
    position: absolute;
    inset-inline-start: 2rem;
    inset-block-start: 1.9rem;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    background: var(--accent);
    -webkit-mask: var(--vx-node) center / contain no-repeat;
    mask: var(--vx-node) center / contain no-repeat;
}

/* A full-width block's CONTENT lines up with the reading column's content. */
.cms-w--full > .cms-block {
    --cms-inset: max(var(--cms-gutter), calc(50vw - var(--cms-scrollbar, 0px) / 2 - var(--cms-shell) / 2 + var(--cms-gutter)));
}

/* ===========================================================================
 * BANDS
 * ======================================================================== */

.cms-w--full > .cms-block:not(.cms-block-hero, .cms-block-cta, .cms-block-slider, .cms-block-map, .cms-block-feature-grid, .cms-block-stats) {
    background: var(--cms-surface);
}

.cms-w--full > :is(.cms-block-feature-grid, .cms-block-stats) {
    background:
        radial-gradient(50rem 26rem at 100% 0%, color-mix(in srgb, var(--vx-ink-3) 75%, transparent), transparent 70%),
        radial-gradient(34rem 20rem at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
        var(--vx-ink);
    color: var(--vx-on-dark);
}

.cms-w--full > :is(.cms-block-feature-grid, .cms-block-stats) :is(h2, h3) { color: #ffffff; }
.cms-w--full > :is(.cms-block-feature-grid, .cms-block-stats) .cms-block-feature-grid__body { color: var(--vx-on-dark-muted); }

/* ===========================================================================
 * STATS — figures read off a dashboard
 * ======================================================================== */

.cms-block-stats__grid { gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.cms-block-stats__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .9rem;
    border: 0;
    border-inline-start: 1px solid var(--cms-border);
    padding: .5rem clamp(1.25rem, 2.5vw, 2.25rem) .75rem;
    margin: 0;
}

.cms-block-stats__item:first-child { border-inline-start: 0; padding-inline-start: 0; }

.cms-block-stats__figure {
    font-family: var(--cms-display);
    font-weight: 600;
    font-size: var(--cms-stat);
    line-height: .95;
    letter-spacing: -.05em;
    color: var(--vx-coral-deep);
    font-variant-numeric: lining-nums;
}

.cms-block-stats__label {
    margin: 0;
    font-family: var(--vx-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--cms-muted);
    max-inline-size: 15rem;
}

.cms-w--full > .cms-block-stats .cms-block-stats__item { border-inline-start-color: var(--vx-line-2); }
.cms-w--full > .cms-block-stats .cms-block-stats__figure { color: var(--vx-coral-light); }
.cms-w--full > .cms-block-stats .cms-block-stats__label { color: var(--vx-on-dark-muted); }

@media (max-width: 47.999em) {
    .cms-block-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .cms-block-stats__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

/* Facts straight under the opening read as its caption, not as a section. */
.cms-w:has(> .cms-block-hero) + .cms-w > .cms-block-stats { padding-block: clamp(3rem, 5vw, 4.25rem); }
.cms-w:not(.cms-w--full):has(> .cms-block-stats) + .cms-w:not(.cms-w--full) > .cms-block { border-block-start: 1px solid var(--cms-border); padding-block-start: clamp(3.5rem, 6vw, 5rem); }

/* ===========================================================================
 * LOGOS — credentials, each on its own plate
 * ======================================================================== */

.cms-block-logos__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 1rem;
    align-items: stretch;
}

.cms-block-logos__row > li {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cms-block-logos__row > li:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--cms-border));
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-logos__img {
    max-inline-size: 100%;
    max-block-size: 5.5rem;
    inline-size: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

/* ===========================================================================
 * FEATURE GRID — a bento on paper; a ruled matrix on indigo
 * ======================================================================== */

.cms-block-feature-grid__grid { gap: 1.25rem; }

@media (min-width: 62em) {
    .cms-block-feature-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cms-block-feature-grid__grid:has(> :nth-child(4):last-child),
    .cms-block-feature-grid__grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cms-block-feature-grid__item {
    position: relative;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    padding: var(--cms-card-pad);
    background: var(--cms-bg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cms-block-feature-grid__item:hover,
.cms-block-feature-grid__item:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--cms-border));
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-feature-grid__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 12px;
    background: var(--cms-surface);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--cms-border);
    margin-block-end: 1.4rem;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.cms-block-feature-grid__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }

.cms-block-feature-grid__item:hover .cms-block-feature-grid__icon {
    background: var(--primary);
    color: var(--vx-coral-light);
    box-shadow: none;
}

.cms-block-feature-grid__title { font-size: 1.15rem; margin-block-end: .55rem; }
.cms-block-feature-grid__text { font-size: 1rem; line-height: 1.68; }

.cms-block-feature-grid__logo { display: flex; align-items: center; block-size: 3.25rem; margin-block-end: 1.4rem; }
.cms-block-feature-grid__logo img { block-size: 2.4rem; inline-size: auto; max-inline-size: 70%; object-fit: contain; }

/*
 * THE BENTO — four or six cards on paper become a composed board: the first
 * and the last run double width. The first is lit indigo with the terrain
 * behind it, the last sits on lavender over a dotted grid. Any other count
 * keeps the plain grid, because a bento that has to guess leaves holes.
 */
@media (min-width: 62em) {
    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :is(:first-child, :last-child) {
        grid-column: span 2;
    }

    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :first-child {
        padding-block-start: clamp(2.5rem, 4vw, 3.25rem);
        min-block-size: 17rem;
        background:
            radial-gradient(circle at 86% 22%, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 35%, transparent) 5px 7px, transparent 8px),
            radial-gradient(circle at 68% 34%, var(--vx-coral-light) 0 3px, transparent 4px),
            /* The words sit on clear indigo; the terrain rises behind them. */
            linear-gradient(to top, var(--vx-ink) 42%, color-mix(in srgb, var(--vx-ink) 0%, transparent) 78%),
            var(--vx-contours) right top / 110% auto no-repeat,
            radial-gradient(40rem 20rem at 100% 0%, color-mix(in srgb, var(--vx-ink-3) 90%, transparent), transparent 70%),
            var(--vx-ink);
        border-color: transparent;
        color: var(--vx-on-dark);
    }

    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :first-child :is(.cms-block-feature-grid__title) { color: #ffffff; font-size: 1.6rem; letter-spacing: -.035em; max-inline-size: 18ch; }
    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :first-child .cms-block-feature-grid__text { color: var(--vx-on-dark-muted); max-inline-size: 30rem; font-size: 1.06rem; }
    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :first-child .cms-block-feature-grid__icon { background: var(--accent); color: var(--accent-foreground); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent); }

    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :last-child {
        background:
            radial-gradient(color-mix(in srgb, var(--primary) 22%, transparent) 1.1px, transparent 1.5px) 0 0 / 18px 18px,
            var(--cms-surface);
    }

    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :last-child .cms-block-feature-grid__title { font-size: 1.35rem; letter-spacing: -.03em; }
    .cms-w:not(.cms-w--full) > .cms-block-feature-grid .cms-block-feature-grid__grid:is(:has(> :nth-child(6):last-child), :has(> :nth-child(4):last-child)) > :last-child .cms-block-feature-grid__text { max-inline-size: 32rem; }
}

/* On indigo: a ruled matrix, coral hairlines, the icon as a ring. */
.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__grid {
    gap: 0;
    border-block-start: 1px solid var(--vx-line);
    border-inline-start: 1px solid var(--vx-line);
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item {
    background: transparent;
    border: 0;
    border-inline-end: 1px solid var(--vx-line);
    border-block-end: 1px solid var(--vx-line);
    border-radius: 0;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -1px;
    block-size: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item:hover,
.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item:focus-within {
    transform: none;
    box-shadow: none;
    background: rgb(255 255 255 / .03);
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item:hover::before { transform: scaleX(1); }

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__icon {
    background: transparent;
    color: var(--vx-coral-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-coral-light) 45%, transparent);
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__item:hover .cms-block-feature-grid__icon {
    background: var(--accent);
    color: var(--accent-foreground);
    box-shadow: none;
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__text { color: var(--vx-on-dark-muted); }
.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__logo { background: #ffffff; padding: .5rem; border-radius: var(--cms-radius-sm); }

/* ===========================================================================
 * SERVICES — indexed cards, like entries in a service catalogue
 * ======================================================================== */

.cms-block-services__grid { counter-reset: vx-svc; gap: 1.25rem; }

@media (min-width: 62em) {
    .cms-block-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cms-block-services__grid > * {
    counter-increment: vx-svc;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--cms-card-pad);
    padding-block-start: calc(var(--cms-card-pad) + 2.6rem);
    background: var(--cms-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
}

.cms-block-services__grid > *::before {
    content: counter(vx-svc, decimal-leading-zero) " /";
    position: absolute;
    inset-block-start: var(--cms-card-pad);
    inset-inline-start: var(--cms-card-pad);
    font-family: var(--vx-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--vx-coral-deep);
}

.cms-block-services__grid > *::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--cms-card-pad) + .55rem);
    inset-inline: calc(var(--cms-card-pad) + 3rem) var(--cms-card-pad);
    border-block-start: 1px solid var(--cms-border);
    transition: border-color .25s ease;
}

.cms-block-services__grid > *:hover,
.cms-block-services__grid > *:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--cms-border));
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-services__grid > *:hover::after { border-block-start-color: var(--accent); }

.cms-block-services__grid a.cms-listing__title {
    font-family: var(--cms-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--cms-fg);
    text-decoration: none;
    margin-block-end: .6rem;
}

.cms-block-services__grid a.cms-listing__title::after { content: ""; position: absolute; inset: 0; }
.cms-block-services__grid .cms-listing__summary { font-size: 1rem; line-height: 1.66; }

.cms-block-services__grid .cms-listing__more { margin-block-start: auto; padding-block-start: 1.4rem; font-size: .9rem; font-weight: 700; }
.cms-block-services__grid .cms-listing__more a { color: var(--primary); text-decoration: none; }
.cms-block-services__grid .cms-listing__more a::after { content: " \2192"; color: var(--vx-coral-deep); }

/* The catalogue (/services): the same cards, two up. */
.cms-page__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: 1.25rem;
    margin-block: clamp(3rem, 6vw, 4.5rem) var(--cms-space);
    counter-reset: vx-svc;
}

.cms-page__list > .cms-card {
    counter-increment: vx-svc;
    position: relative;
    padding: calc(var(--cms-card-pad) + 2.4rem) var(--cms-card-pad) var(--cms-card-pad);
    background: var(--cms-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cms-page__list > .cms-card::before {
    content: counter(vx-svc, decimal-leading-zero) " /";
    position: absolute;
    inset-block-start: var(--cms-card-pad);
    inset-inline-start: var(--cms-card-pad);
    font-family: var(--vx-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--vx-coral-deep);
}

.cms-page__list > .cms-card:hover,
.cms-page__list > .cms-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--cms-border));
    box-shadow: var(--cms-shadow-lg);
}

.cms-page__list .cms-page__section-heading { margin: 0 0 .6rem; max-inline-size: none; font-size: 1.4rem; letter-spacing: -.03em; }
.cms-page__list .cms-page__section-heading::before { display: none; }
.cms-page__list a.cms-listing__title { font-size: inherit; color: var(--cms-fg); text-decoration: none; }
.cms-page__list a.cms-listing__title::after { content: ""; position: absolute; inset: 0; }
.cms-page__list .cms-listing__summary { font-size: 1rem; line-height: 1.66; }
.cms-page__list > .cms-card > a:last-child { display: inline-block; margin-block-start: 1.1rem; color: var(--primary); font-weight: 700; font-size: .92rem; text-decoration: none; }

/* A service's own page: the description reads as an article. */
.cms-page__body { margin-block-start: clamp(3rem, 6vw, 4.5rem); font-size: 1.12rem; line-height: 1.8; }
.cms-page__body strong { color: var(--cms-fg); }
.cms-page__body ul { padding-inline-start: 0; list-style: none; display: grid; gap: .65rem; }
.cms-page__body li { position: relative; padding-inline-start: 2rem; }
.cms-page__body li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .3em;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    background: var(--accent);
    -webkit-mask: var(--vx-node) center / contain no-repeat;
    mask: var(--vx-node) center / contain no-repeat;
}

.cms-main > .cms-shell > .cms-rule { margin-block: clamp(3rem, 6vw, 4.5rem) 0; }
.cms-page__form,
.cms-main .cms-rule + * { margin-block-end: var(--cms-space); }

/* ===========================================================================
 * SPLIT ABOUT — a picture on a lit grid
 * ======================================================================== */

.cms-block-split-about { gap: clamp(2.5rem, 7vw, 6rem); }
.cms-block-split-about__heading { font-size: var(--cms-h2); margin-block-end: 1.25rem; }
.cms-block-split-about__body { font-size: 1.1rem; line-height: 1.78; }
.cms-block-split-about__body strong { color: var(--cms-fg); }
.cms-block-split-about__actions { margin-block-start: 2rem; }

.cms-block-split-about__media { position: relative; isolation: isolate; }

.cms-block-split-about__img {
    position: relative;
    z-index: 1;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-lg);
}

/* A dotted grid, offset, behind the picture — with a node on its corner. */
.cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    background: radial-gradient(color-mix(in srgb, var(--primary) 30%, transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px;
    border-radius: var(--cms-radius-lg);
}

.cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::after {
    content: "";
    position: absolute;
    z-index: 2;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    inset-block-start: -1.2rem;
    inset-inline-end: -1.2rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent) 0 5px, var(--cms-bg) 6px 8px, var(--accent) 9px 11px, var(--cms-bg) 12px);
    box-shadow: var(--cms-shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}

.cms-block-split-about--flip .cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }

@media (max-width: 47.999em) {
    .cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before,
    .cms-block-split-about--flip .cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before { inset: .75rem .75rem -.75rem .75rem; }
}

.cms-block-split-about__media--placeholder {
    aspect-ratio: 5 / 4;
    border-radius: var(--cms-radius-lg);
    background:
        radial-gradient(26rem 18rem at 100% 0%, color-mix(in srgb, var(--vx-ink-3) 90%, transparent), transparent 70%),
        var(--vx-contours) center bottom / cover no-repeat,
        var(--vx-ink);
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-split-about__media--placeholder::after {
    inset: 30%;
    opacity: .9;
    background: var(--accent);
    -webkit-mask: var(--vx-node) center / contain no-repeat;
    mask: var(--vx-node) center / contain no-repeat;
}

/* ===========================================================================
 * STEPS — a route through the network: nodes joined by a line
 * ======================================================================== */

.cms-block-steps__list { list-style: none; padding-inline-start: 0; margin: 0; gap: clamp(1.5rem, 3vw, 2.25rem); }

@media (min-width: 62em) {
    .cms-block-steps__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cms-block-steps__list:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cms-block-steps__list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cms-block-steps__item { padding-block-start: 5.25rem; }

.cms-block-steps__item::before {
    display: grid;
    place-items: center;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    border-radius: 50%;
    background: var(--cms-bg);
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--cms-bg);
    color: var(--vx-coral-deep);
    font-family: var(--vx-mono);
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 1;
    z-index: 1;
    transition: background .25s ease, color .25s ease;
}

.cms-w--full > .cms-block-steps .cms-block-steps__item::before { background: var(--cms-surface); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--cms-surface); }

.cms-block-steps__item:hover::before { background: var(--accent); color: var(--accent-foreground); }

.cms-block-steps__item::after {
    content: "";
    position: absolute;
    inset-block-start: 1.7rem;
    inset-inline-start: 3.4rem;
    inset-inline-end: calc(clamp(1.5rem, 3vw, 2.25rem) * -1);
    border-block-start: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}

.cms-block-steps__item:last-child::after { display: none; }

@media (max-width: 61.999em) { .cms-block-steps__item::after { display: none; } }

.cms-block-steps__title { font-size: 1.2rem; margin-block-end: .55rem; }
.cms-block-steps__text { font-size: 1rem; line-height: 1.66; }

/* ===========================================================================
 * FAQ — heading holds the left column
 * ======================================================================== */

@media (min-width: 56em) {
    .cms-block-faq {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(2.5rem, 6vw, 6rem);
        align-items: start;
    }

    .cms-block-faq > :not(.cms-block-faq__item) { grid-column: 1; }
    .cms-block-faq > .cms-block-faq__item { grid-column: 2; }
    .cms-block-faq__heading { grid-row: 1 / span 20; position: sticky; inset-block-start: 7rem; }
    .cms-block-faq > .cms-block-faq__heading + .cms-block-faq__item { border-block-start: 1px solid var(--cms-border); }
}

.cms-block-faq__item { padding-block: 1.4rem; }
.cms-block-faq__question { font-family: var(--cms-body); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; align-items: center; }

.cms-block-faq__question::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    border: 1px solid var(--cms-border);
    color: var(--cms-fg);
    font-size: 1.15rem;
    font-weight: 400;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.cms-block-faq__question:hover::after { border-color: var(--accent); }

[open] > .cms-block-faq__question::after {
    content: "+";
    transform: rotate(45deg);
    background: var(--primary);
    border-color: var(--primary);
    color: var(--vx-coral-light);
}

.cms-block-faq__answer { font-size: 1.03rem; line-height: 1.72; padding-block-start: .9rem; }

/* ===========================================================================
 * TEXT
 * ======================================================================== */

.cms-block-text { max-inline-size: 48rem; }
.cms-block-text p,
.cms-block-text li { font-size: 1.12rem; line-height: 1.8; }
.cms-block-text p:first-of-type { font-size: 1.28rem; line-height: 1.62; color: var(--cms-fg); }

/* ===========================================================================
 * CALL TO ACTION — the closing band, the network at scale
 * ======================================================================== */

.cms-block-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    align-content: center;
    column-gap: 3rem;
    text-align: start;
    padding-block: clamp(4.5rem, 9vw, 7rem);
    padding-inline: clamp(1.75rem, 5vw, 4.5rem);
    background:
        radial-gradient(40rem 22rem at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
        radial-gradient(36rem 20rem at 0% 0%, color-mix(in srgb, var(--vx-ink-3) 85%, transparent), transparent 70%),
        var(--cms-cta-bg);
    border-radius: var(--cms-radius-lg);
    overflow: hidden;
    isolation: isolate;
}

.cms-w--full > .cms-block-cta { padding-inline: max(var(--cms-gutter), calc((100% - var(--cms-shell)) / 2 + var(--cms-gutter))); }

.cms-block-cta > :not(.cms-bg) { position: relative; z-index: 1; }

.cms-block-cta__headline { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; color: #ffffff; max-inline-size: 18ch; margin: 0 0 1rem; }
.cms-block-cta__body { margin: 0; max-inline-size: 36rem; color: var(--vx-on-dark-muted); opacity: 1; font-size: 1.12rem; }
.cms-block-cta__actions { justify-content: flex-start; margin-block-start: 2rem; }

@media (min-width: 56em) {
    .cms-block-cta:not([class*="cms-block-cta--text-"]) { grid-template-columns: minmax(0, 1fr) auto; }
    .cms-block-cta:not([class*="cms-block-cta--text-"]) :is(.cms-block-cta__headline, .cms-block-cta__body) { grid-column: 1; }
    .cms-block-cta:not([class*="cms-block-cta--text-"]) .cms-block-cta__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

.cms-block-cta:not(.cms-has-bg)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 35%;
    background:
        radial-gradient(circle at 78% 30%, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 35%, transparent) 5px 7px, transparent 8px),
        radial-gradient(circle at 62% 70%, var(--vx-coral-light) 0 3px, transparent 4px),
        var(--vx-contours) right bottom / cover no-repeat;
    opacity: .55;
    -webkit-mask: linear-gradient(90deg, transparent, #000 45%);
    mask: linear-gradient(90deg, transparent, #000 45%);
    pointer-events: none;
}

.cms-block-cta.cms-has-bg .cms-bg::after { background: linear-gradient(100deg, rgb(9 10 26 / .94) 0%, rgb(9 10 26 / .78) 55%, rgb(9 10 26 / .5) 100%); opacity: 1; }

.cms-main > .cms-shell > .cms-w:not(.cms-w--full, .cms-w--wide):last-child > .cms-block-cta { margin-block-end: var(--cms-space); }

/* ===========================================================================
 * FORMS
 * ======================================================================== */

.cms-block-form .cms-form,
.cms-block-contact-form__form,
.cms-page__form {
    position: relative;
    background: var(--cms-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-lg);
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

.cms-block-contact-form__form { max-inline-size: 44rem; }

.cms-block-form .cms-form::before,
.cms-block-contact-form__form::before,
.cms-page__form::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: clamp(1.5rem, 4vw, 2.75rem);
    block-size: 2px;
    background: linear-gradient(90deg, var(--accent), var(--vx-coral-light) 45%, transparent);
}

.cms-field__label { font-weight: 700; font-size: .88rem; color: var(--cms-fg); }

.cms-input,
.cms-textarea,
.cms-select,
.cms-file {
    border-radius: var(--cms-radius);
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cms-input:focus-visible,
.cms-textarea:focus-visible,
.cms-select:focus-visible {
    outline: 0;
    background: var(--cms-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.cms-form__step { font-family: var(--vx-mono); font-weight: 500; }

/* ===========================================================================
 * TESTIMONIALS · BLOG · TEAM
 * ======================================================================== */

.cms-block-testimonials__quote { border-radius: var(--cms-radius-lg); border-block-start: 2px solid var(--accent); }
.cms-block-blog-grid--cards .cms-block-blog-grid__item { border: 1px solid var(--cms-border); border-radius: var(--cms-radius-lg); overflow: hidden; background: var(--cms-bg); }
.cms-block-blog-grid__category { font-family: var(--vx-mono); font-weight: 500; letter-spacing: .08em; }
.cms-block-team__photo { border-radius: var(--cms-radius-lg); }

/* ===========================================================================
 * FOOTER
 * ======================================================================== */

.cms-footer {
    border-block-start: 0;
    background:
        radial-gradient(44rem 22rem at 100% 0%, color-mix(in srgb, var(--vx-ink-3) 55%, transparent), transparent 70%),
        var(--cms-footer-bg);
    color: var(--vx-on-dark-muted);
    padding-block: clamp(4rem, 8vw, 6rem) 2.25rem;
    font-size: .97rem;
    position: relative;
}

.cms-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--vx-coral-light) 60%, transparent);
    opacity: .7;
}

.cms-footer__name,
.cms-footer__heading { color: #ffffff; }

.cms-footer__name { display: flex; align-items: center; gap: .8rem; font-size: 1.6rem; letter-spacing: -.035em; }

.cms-footer__name::before {
    content: "";
    flex: none;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    background: var(--accent);
    -webkit-mask: var(--vx-node) center / contain no-repeat;
    mask: var(--vx-node) center / contain no-repeat;
}

.cms-footer__tagline { margin-block-start: .9rem; line-height: 1.65; }
.cms-footer__heading { font-family: var(--vx-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; margin-block-end: 1.1rem; }
.cms-footer__links { gap: .7rem; }
.cms-footer__links a,
.cms-footer__contact a { transition: color .16s ease; }
.cms-footer__links a:hover,
.cms-footer__contact a:hover { color: var(--vx-coral-light); }
.cms-footer__contact .cms-footer__email { color: #ffffff; }
.cms-footer-social a { color: var(--vx-on-dark); text-decoration: none; }

.cms-footer > .cms-shell > p { max-inline-size: 46rem; margin-block-start: clamp(2.5rem, 5vw, 3.5rem); font-size: .95rem; line-height: 1.7; }

.cms-footer__legal {
    margin-block-start: clamp(3rem, 6vw, 4.5rem);
    border-block-start: 1px solid var(--vx-line);
    color: color-mix(in srgb, var(--vx-on-dark-muted) 80%, transparent);
    font-size: .85rem;
}

.cms-footer__legal a { color: var(--vx-on-dark-muted); text-underline-offset: .25em; }
.cms-footer__legal a:hover { color: var(--vx-coral-light); }

@media (min-width: 48em) {
    .cms-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
    .cms-footer__legal p { margin: 0; }
}

@media (min-width: 62em) {
    .cms-footer--rich .cms-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* ===========================================================================
 * DARK MODE
 * ======================================================================== */

@media (prefers-color-scheme: dark) {
    a { color: var(--vx-coral-light); }
    .cms-btn:not(.cms-btn--ghost) { background: var(--accent); color: var(--accent-foreground); }
    .cms-block-logos__row > li { background: #f2f1fb; }
    .cms-block-feature-grid__icon { color: var(--vx-coral-light); }
    .cms-block-feature-grid__item:hover .cms-block-feature-grid__icon { background: var(--accent); color: var(--accent-foreground); }
    .cms-block-services__grid .cms-listing__more a { color: var(--vx-coral-light); }
}

/* ===========================================================================
 * THE BUSINESS'S OWN MARK — in place of the node, when one is chosen
 * ======================================================================== */

/*
 * Website settings → Brand mark. With one chosen, the layout puts `cms-has-mark`
 * on <html> and the picture in `--cms-mark`, and every place this template draws
 * its node — before eyebrows, above headings, on bullets, in the footer, on the
 * corner of the about picture — draws the business's mark instead, IN ITS OWN
 * COLOURS. The node is a MASK filled with the accent; a mark is a picture, so
 * the mask comes off and the picture is the background.
 *
 * Without one, nothing here applies and the node is exactly as designed. Each
 * rule is the node's own selector with `.cms-has-mark` in front, so it wins on
 * specificity wherever it sits in the file.
 */
.cms-has-mark :is(
    .cms-block-services__heading,
    .cms-block-feature-grid__heading,
    .cms-block-stats__heading,
    .cms-block-steps__heading,
    .cms-block-team__heading,
    .cms-block-testimonials__heading,
    .cms-block-faq__heading,
    .cms-block-gallery__heading,
    .cms-block-logos__heading,
    .cms-block-careers__heading,
    .cms-block-contact-form__heading,
    .cms-block-opening-hours__heading,
    .cms-block-video__heading,
    .cms-block-text__heading,
    .cms-block-blog-grid__heading,
    .cms-block-map__heading,
    .cms-block-video-gallery__heading,
    .cms-page__section-heading
)::before,
.cms-has-mark :is(.cms-block-split-about__eyebrow, .cms-block-hero__eyebrow, .cms-block-slider__eyebrow)::before,
.cms-has-mark .cms-main > .cms-shell > h1:first-child + :is(.cms-page__lede, .cms-muted):last-child::before,
.cms-has-mark .cms-page__body li::before,
.cms-has-mark .cms-block-split-about__media--placeholder::after,
.cms-has-mark .cms-footer__name::before {
    background: var(--cms-mark) center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

/*
 * Above a heading the node was a LINK — two nodes and an arc, wide and short.
 * A mark is square, so it takes a square of its own rather than being squeezed
 * into the link's letterbox.
 */
.cms-has-mark :is(
    .cms-block-services__heading,
    .cms-block-feature-grid__heading,
    .cms-block-stats__heading,
    .cms-block-steps__heading,
    .cms-block-team__heading,
    .cms-block-testimonials__heading,
    .cms-block-faq__heading,
    .cms-block-gallery__heading,
    .cms-block-logos__heading,
    .cms-block-careers__heading,
    .cms-block-contact-form__heading,
    .cms-block-opening-hours__heading,
    .cms-block-video__heading,
    .cms-block-text__heading,
    .cms-block-blog-grid__heading,
    .cms-block-map__heading,
    .cms-block-video-gallery__heading,
    .cms-page__section-heading
)::before {
    inline-size: 1.6rem;
    block-size: 1.6rem;
}

.cms-has-mark :is(.cms-block-split-about__eyebrow, .cms-block-hero__eyebrow, .cms-block-slider__eyebrow)::before {
    inline-size: 1rem;
    block-size: 1rem;
}

/*
 * THE TARGET on the about picture's corner: the same round badge, lit ring and
 * shadow, with the mark inside it instead of the concentric rings.
 */
.cms-has-mark .cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::after {
    inline-size: 3rem;
    block-size: 3rem;
    inset-block-start: -1.5rem;
    inset-inline-end: -1.5rem;
    background: var(--cms-mark) center / 62% no-repeat, var(--cms-bg);
}