/*
 * CLARITY — technology consultancies, IT services and advisory firms.
 * ---------------------------------------------------------------------------
 * 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 Apex, Meridian and Helix
 *
 * Those three are palettes on the family's white page: a light hero, bordered
 * cards, a dark call to action at the end. They read as capable and generic.
 * A consultancy is bought on the feeling that it thinks clearly — so this
 * variant composes the page as a DOCUMENT WITH A SPINE: a deep navy opening
 * that carries on from the header without a seam, white reading sections with
 * generous measure, and navy bands where the owner asks for them. Colour is
 * rationed: navy carries the page, the accent is kept for the one thing on a
 * screen that should be acted on.
 *
 * Built for Innoventerra Solutions (2026-09-21) from its brand guide, and
 * written so it wears ANY customer's accent: nothing below names a brand hex
 * except the neutral navy scaffolding.
 *
 * ## Type — Lexend + Source Sans 3
 *
 * Lexend's wide, open shapes were drawn for reading ease, and set semibold
 * with tight tracking they read as calm rather than loud. Source Sans 3 carries
 * long service descriptions at a comfortable size — a buyer reads those pages
 * properly.
 *
 * ## The fold
 *
 * One mark, repeated: a small square with a triangle folded in at its lower
 * left, in two tones of the accent. It sits above every section heading, in
 * front of every eyebrow and in the footer, and at large scale it is the
 * composition in the opening band. Drawn with a gradient (`--cl-fold`), so it
 * needs no image and takes the customer's accent.
 *
 * ## Bands — the owner decides, with the width setting
 *
 * A block set to FULL WIDTH becomes a band: a feature grid or stats row turns
 * navy, anything else sits on the paper tone. Container width stays on white.
 * The owner therefore composes the rhythm of the page from the block editor
 * with a control that already exists, and nothing depends on block order.
 *
 * ## Full bleed without touching the markup
 *
 * A hero or title band inside the centred shell is extended to the edges with
 * `box-shadow: 0 0 0 100vmax` and cropped back to its own height by
 * `clip-path: inset(0 -100vmax)` — a shadow creates no scrollable overflow, so
 * the page cannot scroll sideways (see the `--cms-scrollbar` note in base.css).
 */

: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: 'Lexend', var(--brand-font-sans, system-ui), sans-serif;
    --cms-body: 'Source Sans 3', var(--brand-font-sans, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-display-weight: 600;
    --cms-display-tracking: -.03em;
    --cms-text: 1.125rem;
    --cms-hero: clamp(2.6rem, 4.6vw, 4.15rem);
    --cms-h1: clamp(2.4rem, 5vw, 3.9rem);
    --cms-h2: clamp(1.95rem, 3.6vw, 2.85rem);
    --cms-h3: 1.25rem;
    --cms-stat: clamp(2.6rem, 5vw, 3.8rem);
    --cms-brand-size: 1.35rem;

    /* --- colour ---------------------------------------------------------- */
    --cms-bg: #ffffff;
    --cms-fg: #0a1f44;
    --cms-muted: #52627a;
    --cms-border: #e2e8f0;
    --cms-surface: #f5f7fa;
    --cms-surface-2: #eaf0f6;
    --cms-ink: #0a1f44;
    --cms-danger: #c2410c;
    --cms-header-bg: #0a1f44;
    --cms-footer-bg: #061530;
    --cms-cta-bg: #071a3a;
    --cms-cta-fg: #eef4fb;
    --cms-scrim: #061530;

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

    --cms-shadow: 0 1px 2px rgb(10 31 68 / .05), 0 12px 32px -16px rgb(10 31 68 / .18);
    --cms-shadow-lg: 0 2px 4px rgb(10 31 68 / .05), 0 30px 60px -28px rgb(10 31 68 / .34);

    /* A folded square, for empty picture slots. */
    --cms-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20h60v60H20z' fill='none' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M20 46h34v34z'/%3E%3C/svg%3E");

    /* --- this variant's own vocabulary ------------------------------------- */
    --cl-deep: #061530;
    --cl-band: #0a1f44;
    --cl-band-2: #133a74;
    --cl-line: rgb(255 255 255 / .1);
    --cl-line-2: rgb(255 255 255 / .18);
    --cl-on-dark: #eef4fb;
    --cl-on-dark-muted: #a9b8cc;

    /* The accent's lighter twin — the square the fold sits on. */
    --cl-accent-2: color-mix(in srgb, var(--accent) 78%, #ffffff);
    /* A tint of it, for icon plates on white. */
    --cl-accent-tint: color-mix(in srgb, var(--accent) 11%, #ffffff);

    /*
     * THE FOLD. A square in the lighter tone with the accent triangle folded in
     * at the lower left: the right angle at the top-right of a 56% box sitting
     * in the square's bottom-left corner — the proportions of the brand mark.
     */
    --cl-fold: linear-gradient(to bottom left, var(--accent) 50%, transparent 50%) left bottom / 56% 56% no-repeat, var(--cl-accent-2);
}

/* Where relative colour is supported, the twin keeps the accent's hue and
 * chroma and only lifts it — a brighter tone rather than a paler one. */
@supports (color: oklch(from red l c h)) {
    :root { --cl-accent-2: oklch(from var(--accent) calc(l + .09) calc(c + .015) h); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --cms-bg: #071631;
        --cms-fg: #e9f0f8;
        --cms-muted: #9fb0c6;
        --cms-border: #1a2f52;
        --cms-surface: #0b1f40;
        --cms-surface-2: #102a52;
        --cms-ink: #e9f0f8;
        --cms-header-bg: #061530;
        --cms-footer-bg: #04102a;
        --cms-cta-bg: #0b1f40;
        --cms-shadow: 0 1px 0 var(--cms-border);
        --cms-shadow-lg: 0 30px 60px -28px rgb(0 0 0 / .7);
        --cl-deep: #04102a;
        --cl-band: #061530;
        --cl-band-2: #0f2c59;
        --cl-accent-tint: color-mix(in srgb, var(--accent) 16%, #071631);
    }
}

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

body { line-height: 1.7; }

h1, h2, h3, h4 { color: var(--cms-fg); }
h1, h2 { line-height: 1.06; }

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

.cms-btn {
    padding: .95rem 1.6rem;
    border-radius: var(--cms-radius-sm);
    font-size: .98rem;
    font-weight: 500;
    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 14px 28px -14px color-mix(in srgb, var(--primary) 70%, transparent);
}

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

/* A link that goes somewhere says so. Buttons (Back, Next, Submit) do not. */
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 navy, the button is the accent — the one lit thing 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(--cl-accent-2);
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--accent) 75%, 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 FOLD — above section headings, before eyebrows
 * ======================================================================== */

.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: 24ch;
}

.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: .95rem;
    block-size: .95rem;
    margin-block-end: 1.35rem;
    border-radius: 0;
    background: var(--cl-fold);
}

/* The body under a heading reads as its standfirst. */
.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.15rem;
    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: .7rem;
    font-family: var(--cms-display);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cms-block-split-about__eyebrow::before,
.cms-block-hero__eyebrow::before,
.cms-block-slider__eyebrow::before {
    content: "";
    flex: none;
    inline-size: .7rem;
    block-size: .7rem;
    border-radius: 0;
    background: var(--cl-fold);
}

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

/* ===========================================================================
 * HEADER — navy, and continuous with the opening band below it
 * ======================================================================== */

.cms-header {
    border-block-end: 1px solid transparent;
    padding-block: 1.05rem;
    background: var(--cms-header-bg);
    color: var(--cl-on-dark);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.cms-header.is-stuck {
    background: color-mix(in srgb, var(--cms-header-bg) 97%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-block-end-color: var(--cl-line);
    box-shadow: 0 12px 30px -20px rgb(0 0 0 / .6);
}

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

.cms-header .cms-nav__link {
    color: var(--cl-on-dark-muted);
    font-family: var(--cms-display);
    font-size: .93rem;
    font-weight: 400;
    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;
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--accent);
}

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

.cms-header .cms-nav__submenu {
    background: var(--cl-band);
    border: 1px solid var(--cl-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: var(--cl-on-dark-muted);
    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;
}

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

/*
 * THE LAST MENU ITEM IS THE CONVERSATION. The site's menu ends on the contact
 * page, so it is drawn as an outlined button in the accent — present on every
 * page, never louder than the band's own call to action.
 */
@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: .6rem 1.15rem;
        border-radius: var(--cms-radius-sm);
        box-shadow: inset 0 0 0 1px var(--accent);
        color: #ffffff;
        font-weight: 500;
        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,
    .cms-header .cms-nav__list--d1 > .cms-nav__item--current:last-child:not(.cms-nav__item--has-children) > .cms-nav__link {
        background: var(--accent);
        color: var(--accent-foreground);
    }
}

@media (max-width: 47.999em) {
    .cms-header .cms-brand__logo { block-size: 2.2rem; }
    .cms-header .cms-nav__item--current > .cms-nav__link { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: .75rem; }
}

/* ===========================================================================
 * THE OPENING BAND — every hero is navy, with the fold at scale
 * ======================================================================== */

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

.cms-block-hero {
    --cl-hero-pad: clamp(4.5rem, 9vw, 8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    padding-block: var(--cl-hero-pad) calc(var(--cl-hero-pad) * 1.05);
    background:
        radial-gradient(60rem 30rem at 88% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
        radial-gradient(50rem 28rem at 8% -10%, color-mix(in srgb, var(--cl-band-2) 85%, transparent), transparent 70%),
        var(--cl-band);
    color: var(--cl-on-dark);
    overflow: clip;
    isolation: isolate;
}

/* A hero in the reading column still runs edge to edge. */
.cms-w:not(.cms-w--full, .cms-w--wide) > .cms-block-hero {
    box-shadow: 0 0 0 100vmax var(--cl-band);
    clip-path: inset(0 -100vmax);
}

/* Words, not the band, carry the width cap. */
.cms-block-hero > :not(.cms-bg) { position: relative; z-index: 2; margin: 0; }
.cms-block-hero__headline { max-inline-size: 17ch; }
.cms-block-hero__body { max-inline-size: 38rem; }

/* Beside the mark, the words take a little over half the band. */
@media (min-width: 64em) {
    .cms-block-hero:not(.cms-has-bg, .cms-block-hero--text-center, .cms-block-hero--text-end) > :not(.cms-bg) { max-inline-size: 60%; }
}

/* The page's own title band is shorter than the home page's opening. */
.cms-block-hero:not(.cms-block-hero--h-tall, .cms-block-hero--h-full) { --cl-hero-pad: clamp(3.75rem, 7vw, 6rem); }

.cms-block-hero__eyebrow {
    padding: .45rem .95rem .45rem .7rem;
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cms-radius-pill);
    background: rgb(255 255 255 / .04);
    color: var(--cl-on-dark);
}

.cms-block-hero__headline {
    color: #ffffff;
    font-size: var(--cms-hero);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.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: 22ch; }

.cms-block-hero__body {
    color: var(--cl-on-dark-muted);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
}

.cms-block-hero__body strong { color: #ffffff; }
.cms-block-hero__body a { color: var(--cl-accent-2); }
.cms-block-hero__actions { margin-block-start: .75rem; }

/*
 * THE COMPOSITION, drawn from two pseudo-elements and no image:
 *
 *   ::before  a quiet 72px grid, fading out toward the words;
 *   ::after   the fold at scale — an outlined square with the solid mark
 *             sitting in its lower corner, like the logo drawn as a plan.
 *
 * Both stand back on a narrow screen, where the words need the whole band.
 */
.cms-block-hero::before,
.cms-block-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cms-block-hero::before {
    inset: 0;
    background-image:
        linear-gradient(to right, var(--cl-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cl-line) 1px, transparent 1px);
    background-size: 72px 72px;
    background-position: right -1px top -1px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(70% 90% at 85% 45%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 90% at 85% 45%, #000 0%, transparent 72%);
}

.cms-block-hero::after {
    --cl-mark: clamp(16rem, 27vw, 25rem);
    inline-size: var(--cl-mark);
    block-size: var(--cl-mark);
    inset-block-start: 50%;
    inset-inline-end: max(var(--cms-gutter), calc((100% - var(--cms-shell)) / 2 + var(--cms-gutter)));
    transform: translateY(-46%);
    background:
        /* the solid mark, in the frame's lower-left corner */
        linear-gradient(to bottom left, var(--accent) 50%, transparent 50%) left 0 bottom 0 / 23% 23% no-repeat,
        linear-gradient(var(--cl-accent-2), var(--cl-accent-2)) left 0 bottom 0 / 41% 41% no-repeat,
        /* the fold's crease, drawn across the frame */
        linear-gradient(to bottom left, transparent calc(50% - .5px), color-mix(in srgb, var(--cl-accent-2) 45%, transparent) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) left 0 bottom 0 / 56% 56% no-repeat,
        /* a faint fill in the fold's place */
        linear-gradient(to bottom left, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 50%) left 0 bottom 0 / 56% 56% no-repeat;
    border: 1px solid color-mix(in srgb, var(--cl-accent-2) 42%, transparent);
    box-shadow: 1.5rem -1.5rem 0 -1px var(--cl-band), 1.5rem -1.5rem 0 0 color-mix(in srgb, var(--cl-accent-2) 16%, transparent);
}

/* The page title bands carry a smaller mark, further back. */
.cms-block-hero:not(.cms-block-hero--h-tall, .cms-block-hero--h-full)::after {
    --cl-mark: clamp(11rem, 18vw, 16rem);
    opacity: .75;
}

@media (max-width: 63.999em) {
    .cms-block-hero::after {
        --cl-mark: 13rem;
        inset-inline-end: -3.5rem;
        inset-block-start: auto;
        inset-block-end: -3.5rem;
        transform: none;
        opacity: .35;
    }

    .cms-block-hero:not(.cms-block-hero--h-tall, .cms-block-hero--h-full)::after { opacity: .25; }
}

@media (max-width: 40em) {
    .cms-block-hero::after { --cl-mark: 10rem; inset-inline-end: -3rem; inset-block-end: -3rem; }
}

/* A photograph behind the hero: the composition steps aside for it, and a
 * navy scrim — darkest behind the words — owns the contrast. */
.cms-block-hero.cms-has-bg { background: var(--cl-deep); }
.cms-block-hero.cms-has-bg::before,
.cms-block-hero.cms-has-bg::after { display: none; }

/* Over MOVING footage the mark stays: the one fixed thing in the band, it is
 * what makes a stock clip read as this firm's. It sits above the scrim. */
.cms-block-hero-video.cms-has-bg::after { display: block; z-index: 1; opacity: .9; }

@media (max-width: 63.999em) {
    .cms-block-hero-video.cms-has-bg::after { opacity: .3; }
}

.cms-block-hero.cms-has-bg:not([class*="cms-block-hero--text-"]) .cms-bg::after {
    background: linear-gradient(100deg, var(--cl-deep) 0%, rgb(6 21 48 / .88) 38%, rgb(6 21 48 / .5) 100%);
    opacity: 1;
}

.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 — a navy band that carries on from the header
 *
 * Pages that open without a hero (a service, the services list, careers, a
 * post) get the same band, so the site does not change character between a
 * page and the service it links to.
 * ======================================================================== */

.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(--cl-band);
    /* The second shadow reaches 2px UP, closing the hairline seam two stacked
     * bands leave at fractional heights. */
    box-shadow: 0 0 0 100vmax var(--cl-band), 0 -2px 0 0 var(--cl-band);
    clip-path: inset(-2px -100vmax 0);
    color: var(--cl-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;
    max-inline-size: none;
}

.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)::before,
.cms-main > .cms-shell > .cms-page__back:first-child + h1::before {
    content: "";
    display: block;
    inline-size: .95rem;
    block-size: .95rem;
    margin-block-end: 1.5rem;
    background: var(--cl-fold);
}

/* The last piece of each band closes it. */
.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(--cl-on-dark-muted);
    font-size: 1.2rem;
}

.cms-main > .cms-shell > h1:first-child:not(.cms-visually-hidden) + .cms-intro > * { max-inline-size: var(--cms-measure); }
.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(--cl-accent-2); }

.cms-main > .cms-shell > h1:first-child + .cms-intro strong { color: #ffffff; }

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

.cms-post__header { padding-block-start: clamp(3.5rem, 7vw, 5.5rem); margin-block-end: 3rem; }
.cms-post__meta { color: var(--cl-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; }

/*
 * A full-width block's CONTENT lines up with the reading column's content.
 * base.css insets it to the shell's outer edge, which leaves every band's
 * words one gutter to the left of the logo and of the blocks between bands.
 */
.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)));
}

/*
 * AN EMPTY LIST (no open positions, no services yet) is a sentence straight
 * under the title band, which reads as a page that failed to load. It is set
 * as a panel with the mark instead: the page looks finished, and the sentence
 * reads as the answer it is.
 */
.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: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) calc(clamp(1.75rem, 3.5vw, 2.5rem) + 3.25rem);
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    color: var(--cms-fg);
    font-size: 1.2rem;
    line-height: 1.6;
}

.cms-main > .cms-shell > h1:first-child + :is(.cms-page__lede, .cms-muted):last-child::before {
    content: "";
    position: absolute;
    inset-inline-start: clamp(1.75rem, 3.5vw, 2.5rem);
    inset-block-start: clamp(1.9rem, 3.7vw, 2.65rem);
    inline-size: 1.6rem;
    block-size: 1.6rem;
    background: var(--cl-fold);
}

/* ===========================================================================
 * BANDS — full width means a band
 * ======================================================================== */

.cms-w--full > .cms-block:not(.cms-block-hero, .cms-block-cta, .cms-block-slider, .cms-block-hero-frames, .cms-block-hero-video, .cms-block-video-banner, .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(48rem 24rem at 100% 0%, color-mix(in srgb, var(--cl-band-2) 70%, transparent), transparent 70%),
        var(--cl-band);
    color: var(--cl-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) :is(.cms-block-feature-grid__body, .cms-block-stats__label) { color: var(--cl-on-dark-muted); }

/* Two paper bands in a row are one band. */
.cms-w--full:has(> .cms-block:not(.cms-block-feature-grid, .cms-block-stats, .cms-block-hero, .cms-block-cta)) + .cms-w--full > .cms-block:not(.cms-block-feature-grid, .cms-block-stats, .cms-block-hero, .cms-block-cta) {
    padding-block-start: 0;
}

/* ===========================================================================
 * FEATURE GRID — on white: cards that answer the pointer
 * ======================================================================== */

.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);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* The accent runs in along the top edge on hover. */
.cms-block-feature-grid__item::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--accent), var(--cl-accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s 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) 35%, var(--cms-border));
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-feature-grid__item:hover::before,
.cms-block-feature-grid__item:focus-within::before { transform: scaleX(1); }

.cms-block-feature-grid__icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--cms-radius);
    background: var(--cl-accent-tint);
    color: color-mix(in srgb, var(--accent) 70%, var(--cms-fg));
    margin-block-end: 1.5rem;
    transition: background .25s ease, color .25s ease;
}

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

.cms-block-feature-grid__item:hover .cms-block-feature-grid__icon {
    background: var(--cms-fg);
    color: var(--cl-accent-2);
}

.cms-block-feature-grid__title { font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; margin-block-end: .55rem; }
.cms-block-feature-grid__text { font-size: 1.02rem; line-height: 1.65; }

/*
 * A LOGO takes the icon plate's place and its height, so titles line up across
 * a row that mixes the two. Wordmarks are set to one cap height and left-aligned
 * like the text under them; `max-inline-size` keeps a very wide mark in its card.
 */
.cms-block-feature-grid__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    block-size: 3.25rem;
    margin-block-end: 1.5rem;
}

.cms-block-feature-grid__logo img {
    block-size: 2rem;
    inline-size: auto;
    max-inline-size: 72%;
    object-fit: contain;
    object-position: left center;
}

/* --- on a navy band: a ruled matrix rather than cards --------------------- */

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__grid {
    gap: 0;
    border-block-start: 1px solid var(--cl-line);
    border-inline-start: 1px solid var(--cl-line);
}

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

.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 / .035);
}

.cms-w--full > .cms-block-feature-grid .cms-block-feature-grid__icon {
    background: transparent;
    color: var(--cl-accent-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-accent-2) 40%, 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(--cl-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); }

/* ===========================================================================
 * STATS
 * ======================================================================== */

.cms-block-stats__item { border-block-start: 1px solid var(--cms-border); padding-block: 1.5rem 0; }
.cms-block-stats__figure { font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cms-w--full > .cms-block-stats .cms-block-stats__item { border-block-start-color: var(--cl-line-2); }
.cms-w--full > .cms-block-stats .cms-block-stats__figure { color: #ffffff; }

/* ===========================================================================
 * SPLIT ABOUT — a picture set on the fold
 * ======================================================================== */

.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.12rem; line-height: 1.75; }
.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);
}

/* The mark, set behind the picture's lower corner. */
.cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inline-size: clamp(5rem, 11vw, 8rem);
    block-size: clamp(5rem, 11vw, 8rem);
    inset-block-end: clamp(-2rem, -3vw, -1.25rem);
    inset-inline-start: clamp(-2rem, -3vw, -1.25rem);
    background: var(--cl-fold);
}

.cms-block-split-about--flip .cms-block-split-about__media:not(.cms-block-split-about__media--placeholder)::before {
    inset-inline-start: auto;
    inset-inline-end: clamp(-2rem, -3vw, -1.25rem);
}

/* A phone's gutter is narrower than the mark's offset, and a pseudo-element
 * past the edge widens the whole page. The mark comes inside the picture. */
@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-inline: auto 1rem;
        inset-block-end: -1rem;
        inline-size: 4rem;
        block-size: 4rem;
        z-index: 2;
    }
}

/*
 * THE EMPTY PICTURE SLOT, as a designed panel rather than a grey box: a navy
 * plane with the same quiet grid as the opening band and the fold drawn large.
 * A newly founded firm has few photographs of its own, and a panel that looks
 * intended is better than a stock photograph that looks borrowed.
 */
.cms-block-split-about__media--placeholder {
    aspect-ratio: 5 / 4;
    border-radius: var(--cms-radius-lg);
    overflow: hidden;
    background:
        radial-gradient(28rem 20rem at 100% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%),
        linear-gradient(to right, var(--cl-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(to bottom, var(--cl-line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--cl-band);
    box-shadow: var(--cms-shadow-lg);
}

.cms-block-split-about__media--placeholder::after {
    inset: auto;
    inline-size: 38%;
    aspect-ratio: 1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    -webkit-mask: none;
    mask: none;
    background: var(--cl-fold);
    box-shadow: 1.25rem -1.25rem 0 -1px var(--cl-band), 1.25rem -1.25rem 0 0 color-mix(in srgb, var(--cl-accent-2) 40%, transparent);
}

/* ===========================================================================
 * STEPS — a numbered path with the line drawn between
 * ======================================================================== */

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

@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(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.cms-block-steps__item::before {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--cms-radius);
    background: var(--cms-fg);
    color: var(--cl-accent-2);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: 1;
    z-index: 1;
    transition: background .25s ease, color .25s ease;
}

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

/* The path: from each marker to the next. */
.cms-block-steps__item::after {
    content: "";
    position: absolute;
    inset-block-start: 1.625rem;
    inset-inline-start: 4rem;
    inset-inline-end: calc(clamp(1.5rem, 3vw, 2.5rem) * -1 + .75rem);
    border-block-start: 1px dashed color-mix(in srgb, var(--cms-fg) 28%, 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.3rem; margin-block-end: .6rem; }
.cms-block-steps__text { font-size: 1.02rem; line-height: 1.65; }

/* ===========================================================================
 * FAQ — the heading holds the left column, the answers read on the right
 * ======================================================================== */

@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-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.015em;
    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(--cms-fg);
    border-color: var(--cms-fg);
    color: var(--cl-accent-2);
}

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

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

.cms-block-text { max-inline-size: 48rem; }
.cms-block-text p,
.cms-block-text li { font-size: 1.15rem; line-height: 1.8; color: color-mix(in srgb, var(--cms-fg) 82%, var(--cms-bg)); }
.cms-block-text p:first-of-type { font-size: 1.3rem; line-height: 1.65; color: var(--cms-fg); }
.cms-block-text a { text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: .2em; }

/* ===========================================================================
 * CALL TO ACTION — the closing band
 * ======================================================================== */

.cms-block-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    column-gap: 3rem;
    align-content: center;
    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) 26%, transparent), transparent 65%),
        radial-gradient(36rem 20rem at 0% 0%, color-mix(in srgb, var(--cl-band-2) 80%, 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))); }

/* A boxed call to action that ends the page keeps a band's distance from the footer. */
.cms-main > .cms-shell > .cms-w:not(.cms-w--full, .cms-w--wide):last-child > .cms-block-cta { margin-block-end: var(--cms-space); }

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

.cms-block-cta__headline {
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    line-height: 1.06;
    color: #ffffff;
    max-inline-size: 20ch;
    margin: 0 0 1rem;
}

.cms-block-cta__body { margin: 0; max-inline-size: 36rem; color: var(--cl-on-dark-muted); opacity: 1; font-size: 1.15rem; }
.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-"]) .cms-block-cta__headline,
    .cms-block-cta:not([class*="cms-block-cta--text-"]) .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--text-center { text-align: center; justify-items: center; }
.cms-block-cta--text-center .cms-block-cta__actions { justify-content: center; }

/* The fold, cropped by the band's corner. */
.cms-block-cta::after {
    content: "";
    position: absolute;
    z-index: 0;
    inline-size: clamp(6rem, 9vw, 8rem);
    aspect-ratio: 1;
    inset-inline-end: -2rem;
    inset-block-start: -2rem;
    background: var(--cl-fold);
    opacity: .9;
    pointer-events: none;
}

.cms-block-cta.cms-has-bg::after { display: none; }
.cms-block-cta.cms-has-bg .cms-bg::after { background: linear-gradient(100deg, var(--cl-deep) 0%, rgb(6 21 48 / .82) 55%, rgb(6 21 48 / .55) 100%); opacity: 1; }

@media (max-width: 55.999em) {
    .cms-block-cta::after { inline-size: 5.5rem; inset-inline-end: -1.75rem; inset-block-start: -1.75rem; opacity: .7; }
}

/* ===========================================================================
 * SERVICES — cards on the home page, rows on the catalogue
 * ======================================================================== */

.cms-block-services__grid { gap: 1.25rem; }

.cms-block-services__grid > * {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cms-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
}

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

.cms-block-services__grid .cms-listing__title,
.cms-page__list .cms-listing__title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }

.cms-block-services__grid .cms-listing__title a,
.cms-page__list .cms-listing__title a { color: var(--cms-fg); text-decoration: none; }

.cms-block-services__grid .cms-listing__title a::after,
.cms-page__list .cms-listing__title a::after { content: ""; position: absolute; inset: 0; }

.cms-block-services__grid .cms-listing__more { margin-block-start: auto; padding-block-start: 1.25rem; color: var(--cms-fg); font-family: var(--cms-display); font-size: .92rem; }
.cms-block-services__grid .cms-listing__more a { color: inherit; text-decoration: none; }
.cms-block-services__grid .cms-listing__more a::after { content: " \2192"; color: var(--accent); }

/* The catalogue (/services, /careers): a two-up grid of cards with an arrow. */
.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);
}

.cms-page__section-heading { margin-block-start: clamp(3rem, 6vw, 4.5rem); }
.cms-page__section-heading + .cms-page__list { margin-block-start: 0; }

.cms-page__list > .cms-card {
    position: relative;
    padding: var(--cms-card-pad) calc(var(--cms-card-pad) + 2.5rem) 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::after {
    content: "\2192";
    position: absolute;
    inset-block-start: var(--cms-card-pad);
    inset-inline-end: var(--cms-card-pad);
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: var(--cl-accent-tint);
    color: var(--cms-fg);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

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

.cms-page__list > .cms-card:hover::after { background: var(--cms-fg); color: var(--cl-accent-2); transform: translateX(3px); }

/* Inside a catalogue card the title is a heading, but not a SECTION's: no
 * mark, card-sized, and the whole card is its link. */
.cms-page__list .cms-page__section-heading {
    margin: 0 0 .6rem;
    max-inline-size: none;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.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: 1.02rem; line-height: 1.65; }

.cms-page__list > .cms-card > a:last-child,
.cms-page__list > .cms-card > p:last-child > a {
    display: inline-block;
    margin-block-start: 1.1rem;
    color: var(--cms-fg);
    font-family: var(--cms-display);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
}

/* The rule between a service's description and its form stands in for a
 * section's spacing rather than adding to it. */
.cms-main > .cms-shell > .cms-rule { margin-block: clamp(3rem, 6vw, 4.5rem) 0; }

/* 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.15rem; line-height: 1.8; }
.cms-page__body h2,
.cms-page__body h3 { margin-block-start: 2rem; }
.cms-page__body strong { color: var(--cms-fg); }
.cms-page__body ul { padding-inline-start: 0; list-style: none; display: grid; gap: .6rem; }
.cms-page__body li { position: relative; padding-inline-start: 1.75rem; }
.cms-page__body li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em; inline-size: .6rem; block-size: .6rem; background: var(--cl-fold); }

.cms-page__form,
.cms-main .cms-rule + * { margin-block-end: var(--cms-space); }

/* ===========================================================================
 * FORMS — a card on the page
 * ======================================================================== */

.cms-block-form .cms-form,
.cms-block-contact-form__form,
.cms-page__form {
    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);
    position: relative;
}

.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: 3px;
    background: linear-gradient(90deg, var(--accent), var(--cl-accent-2) 40%, transparent);
}

.cms-field__label { font-family: var(--cms-display); font-weight: 500; font-size: .9rem; color: var(--cms-fg); }

.cms-input,
.cms-textarea,
.cms-select,
.cms-file {
    border-radius: var(--cms-radius-sm);
    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) 18%, transparent);
}

.cms-form__step { font-family: var(--cms-display); font-weight: 600; letter-spacing: -.02em; }

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

.cms-block-testimonials__quote { border-radius: var(--cms-radius-lg); border-block-start: 3px 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);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cms-block-blog-grid--cards .cms-block-blog-grid__item:hover { transform: translateY(-4px); box-shadow: var(--cms-shadow-lg); }
.cms-block-blog-grid__category { font-family: var(--cms-display); font-weight: 500; letter-spacing: .12em; }

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

/* ===========================================================================
 * FOOTER — deep navy, the fold before the name
 * ======================================================================== */

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

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

.cms-footer__name {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

.cms-footer__name::before {
    content: "";
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    background: var(--cl-fold);
}

.cms-footer__tagline { margin-block-start: .9rem; line-height: 1.65; }

.cms-footer__heading {
    font-family: var(--cms-display);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    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(--cl-accent-2); }

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

.cms-footer__legal a { color: var(--cl-on-dark-muted); text-underline-offset: .25em; }
.cms-footer__legal a:hover { color: var(--cl-accent-2); }

@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; }
}

/* The site's footer text, which the footer renders after the columns. */
.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;
}

@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 — links lighten, or the navy disappears into the night
 * ======================================================================== */

@media (prefers-color-scheme: dark) {
    a { color: var(--cl-accent-2); }
    .cms-btn:not(.cms-btn--ghost) { background: var(--accent); color: var(--accent-foreground); }
    .cms-block-feature-grid__icon { color: var(--cl-accent-2); }
    .cms-block-steps__item::before { background: var(--cms-surface-2); }
    .cms-block-feature-grid__item:hover .cms-block-feature-grid__icon { background: var(--accent); color: var(--accent-foreground); }
    .cms-page__list > .cms-card:hover::after { background: var(--accent); color: var(--accent-foreground); }
}