/* ==========================================================================
   Capability page (/strategic-planning) — Figma KGlgETYGN6qQK4klEAORlL,
   desktop node 13138:27234 (1366), mobile node 13290:28449 (390).

   Every selector is scoped to .cap-* so nothing reaches the shared header,
   footer or the reused /insights-v2 mosaic. Mobile Figma exists only for the
   hero and the maturity levels; the other sections follow the same rhythm.
   ========================================================================== */

.cap-page {
    --cap-ink: #232e33;
    --cap-ink-900: #151c1f;
    --cap-ink-700: #1b2428;
    --cap-ink-500: #263238;
    --cap-ink-400: #515b60;
    --cap-muted: #6e767a;
    --cap-dim: #bcbfc1;
    --cap-light: #f3f5f5;
    --cap-subtle: #fafafa;
    --cap-teal: #00acc1;
    --cap-teal-600: #009db0;
    --cap-sp: #06b0f0;
    --cap-sp-dark: #0089bc;
    --cap-sp-opaque: #c1e8f6;
    --cap-accent: #b0e5ec;
    --cap-font: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
    --cap-font-alt: 'Nunito Sans', 'Nunito Sans Fallback', Arial, sans-serif;
    font-family: var(--cap-font);
    color: var(--cap-ink);
}

.cap-page *,
.cap-page *::before,
.cap-page *::after {
    box-sizing: border-box;
}

.cap-page p,
.cap-page h1,
.cap-page h2,
.cap-page h3 {
    margin: 0;
}

.cap-page button {
    font-family: inherit;
}

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

.cap-shell {
    width: min(1190px, calc(100% - 48px));
    margin: 0 auto;
}

.cap-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* Section heading: centred title + subtitle (dimensions excepted). */
.cap-head {
    width: min(640px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.cap-head__title {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--cap-ink);
}

.cap-head__text {
    font-size: 14px;
    line-height: normal;
    color: var(--cap-muted);
}

/* Title followed by a rule to the right, as in "Maturity Dimensions" and "pathway". */
.cap-rule-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.cap-rule-title__text {
    flex: 0 0 auto;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--cap-ink);
}

.cap-rule-title__line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--cap-dim);
}

/* Buttons from the design system ("button-small-alt"). */
.cap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 8px 8px;
    border: 0;
    border-radius: 4px;
    font-family: var(--cap-font-alt);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.28px;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.cap-btn--light {
    background: #fff;
    color: var(--cap-ink);
}

.cap-btn--light:hover,
.cap-btn--light:focus-visible {
    background: var(--cap-light);
    color: var(--cap-ink);
    text-decoration: none;
}

/* A label in a button's place (nothing to open yet). */
.cap-btn--static,
.cap-btn--static:hover {
    background: rgba(255, 255, 255, .85);
    cursor: default;
}

.cap-btn--link {
    padding: 8px 8px 8px 16px;
    background: transparent;
    color: #e6f7f9;
}

.cap-btn--link .cap-btn__label {
    text-decoration: underline;
}

.cap-btn--link:hover,
.cap-btn--link:focus-visible {
    color: #fff;
}

.cap-btn--square {
    width: 32px;
    height: 32px;
    padding: 8px;
    background: var(--cap-ink-500);
    color: #fff;
}

.cap-btn--square:hover,
.cap-btn--square:focus-visible {
    background: var(--cap-ink);
}

.cap-btn--square[disabled] {
    opacity: .4;
    cursor: default;
}

/* ==========================================================================
   1. Hero — circular capability carousel
   ========================================================================== */

.cap-hero {
    position: relative;
    /* Figma's 660px plus one more line of description (21px): the copy under the arc is always given three lines. */
    height: 681px;
    overflow: hidden;
    background: var(--cap-ink-900) center / cover no-repeat;
    color: #fff;
    isolation: isolate;
}

.cap-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Darkens away from the top centre, as the radial overlay in Figma. */
.cap-hero__bg--mobile {
    display: none;
}

.cap-hero__bg--mobile::after {
    content: none;
}

.cap-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
}

.cap-hero__intro {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cap-hero__intro-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.cap-hero__intro-link:hover .cap-hero__intro-icon,
.cap-hero__intro-link:focus-visible .cap-hero__intro-icon {
    transform: scale(1.06);
}

.cap-hero__intro-icon {
    transition: transform .3s ease;
    width: 76px;
    height: 76px;
    padding: calc(76px * var(--cap-icon-inset, .09));
    object-fit: contain;
}

.cap-hero__title {
    display: block;
    font-size: 36px;
    font-weight: 400;
    line-height: normal;
    color: var(--cap-light);
}

.cap-hero__tagline {
    font-size: 14px;
    line-height: normal;
    color: var(--cap-dim);
}

/* 50% bigger than drawn, then 10% smaller again on desktop (user, 2026-11-03; phones keep the bigger one): 135×45
   buttons, the centre kept where the drawn toggle's was. */
.cap-hero__modes {
    position: absolute;
    top: 200px;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    display: flex;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cap-hero__mode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 135px;
    height: 45px;
    padding: 11px 27px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--cap-dim);
    font-size: 13.5px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cap-hero__mode:hover,
.cap-hero__mode:focus-visible {
    color: #fff;
    text-decoration: none;
}

.cap-hero__mode.is-active {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(21, 28, 31, .55);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Five slots on an arc, the active capability in the first one (left), as drawn. Widths are fractions of the
   1200px stage so the arc keeps its shape on narrower screens. */
.cap-hero__stage {
    position: absolute;
    top: 272px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 32px));
    height: 214px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cap-hero__cap {
    position: absolute;
    width: 20%;
    height: 166px;
    transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1);
}

.cap-hero__cap-btn {
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cap-dim);
    text-decoration: none;
    cursor: pointer;
}

.cap-hero__cap[data-slot="0"] { left: 0;   top: 58px; }
.cap-hero__cap[data-slot="1"] { left: 20%; top: 24px; }
.cap-hero__cap[data-slot="2"] { left: 40%; top: 0; }
.cap-hero__cap[data-slot="3"] { left: 60%; top: 24px; }
.cap-hero__cap[data-slot="4"] { left: 80%; top: 58px; }

.cap-hero__cap-icon {
    width: 76px;
    height: 76px;
    padding: calc(76px * var(--cap-icon-inset, .09));
    object-fit: contain;
    transition: transform .3s ease;
}

.cap-hero__cap-name {
    font-size: 14px;
    line-height: normal;
    text-align: center;
    white-space: pre-line;
    opacity: .7;
    transition: color .3s ease, opacity .3s ease;
}

.cap-hero__cap-btn:hover .cap-hero__cap-icon,
.cap-hero__cap-btn:focus-visible .cap-hero__cap-icon {
    transform: scale(1.06);
}

.cap-hero__cap-btn:hover .cap-hero__cap-name,
.cap-hero__cap-btn:focus-visible .cap-hero__cap-name {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
}

.cap-hero__cap.is-active .cap-hero__cap-btn {
    cursor: default;
}

.cap-hero__cap.is-active .cap-hero__cap-btn:hover .cap-hero__cap-name {
    text-decoration: none;
}

.cap-hero__cap.is-active .cap-hero__cap-name {
    color: #fff;
    opacity: 1;
}

.cap-hero__cap-btn:focus-visible {
    outline: 2px solid var(--cap-sp);
    outline-offset: -2px;
}

.cap-hero__arc {
    position: absolute;
    /* Figma: 467px from the top of the hero (the copy below starts 40px under it). */
    top: 467px;
    left: 50%;
    height: 85px;
    pointer-events: none;
}

/* Sized from the icon stage (1366 arc for a 1200 stage, as drawn) so the arc's highlight stays under the
   active capability at any width instead of stretching with the window. */
.cap-hero__arc--desktop {
    width: calc(min(1200px, 100% - 32px) * 1366 / 1200);
    transform: translateX(-50%);
}

.cap-hero__arc--mobile {
    display: none;
}

.cap-hero__detail {
    position: absolute;
    /* Anchored from the top as in Figma (491px: 40px under the arc), so the gap to the arc is the same on every page
       whatever the length of the copy; 16px stay under the button. */
    top: 491px;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100% - 48px));
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.cap-hero__detail-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    transition: opacity .25s ease;
}

.cap-hero__detail.is-changing .cap-hero__detail-text {
    opacity: 0;
}

.cap-hero__cap-title {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--cap-sp);
}

.cap-hero__cap-desc {
    /* Three lines on every page: shorter copy keeps the same space, longer copy is clamped. */
    min-height: 63px;
    font-size: 14px;
    line-height: 21px;
    color: var(--cap-dim);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.cap-hero__link {
    padding: 8px 16px;
}

.cap-hero__link[hidden] {
    display: inline-flex !important;
    visibility: hidden;
}

/* ==========================================================================
   2. Video
   ========================================================================== */

.cap-video {
    padding: 44px 0;
    background: #fff;
}

.cap-video__frame {
    position: relative;
    width: min(1130px, calc(100% - 48px));
    margin: 0 auto;
    aspect-ratio: 1130 / 636;
    overflow: hidden;
    border-radius: 8px;
    background: #e9ebeb;
}

.cap-video__facade,
.cap-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cap-video__facade {
    display: block;
    cursor: pointer;
}

.cap-video__facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cap-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}

.cap-video__play-bg {
    fill: #212121;
    fill-opacity: .8;
    transition: fill .2s ease, fill-opacity .2s ease;
}

.cap-video__facade:hover .cap-video__play-bg,
.cap-video__facade:focus-visible .cap-video__play-bg {
    fill: #f00;
    fill-opacity: 1;
}

.cap-video__facade:hover .cap-video__play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* ==========================================================================
   3. Maturity dimensions — slanted cards, one open at a time
   Desktop (>=992px): a fixed-width accordion. The row fills the content box and never scrolls; the open card
   grows and the others share what is left, so nothing moves sideways. Autoplay every 6s (capability-page.js).
   Below 992px: a swipe row of fixed-width cards.
   ========================================================================== */

.cap-dimensions {
    /* The Figma frame is 460px: 16px padding plus 32px of free space under the cards. */
    padding: 32px 0 48px;
    background: var(--cap-subtle);
}

.cap-dimensions__head {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 24px;
}

.cap-dimensions .cap-rule-title__text {
    color: var(--cap-ink-900);
}

.cap-dimensions__subtitle {
    max-width: 760px;
    margin: -8px 0 24px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cap-muted);
}

.cap-dimensions__nav {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.cap-dimensions__track {
    display: flex;
    align-items: stretch;
    padding-left: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 24px;
    scrollbar-width: none;
}

.cap-dimensions__track::-webkit-scrollbar {
    display: none;
}

/* Trailing space: Safari ignores padding-right at the end of a scrolling flex row. */
.cap-dimensions__track::after {
    content: '';
    flex: 0 0 24px;
}

/* The slant is drawn by the card itself (48px over its 320px height), so it keeps its angle at any width; the
   next card overlaps by 36px, which leaves an even 12px gap along the slant. */
.cap-dim {
    --cap-dim-slant: 48px;
    position: relative;
    flex: 0 0 228px;
    height: 320px;
    margin-right: -36px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--cap-ink-900);
    color: var(--cap-accent-tint, #b0e5ec);
    text-align: left;
    cursor: pointer;
    clip-path: polygon(var(--cap-dim-slant) 0, 100% 0, calc(100% - var(--cap-dim-slant)) 100%, 0 100%);
    scroll-snap-align: start;
    transition: flex-basis .5s cubic-bezier(.4, 0, .2, 1), flex-grow .5s cubic-bezier(.4, 0, .2, 1);
}

.cap-dim:last-child {
    margin-right: 0;
}

/* #b0e5ec is the Strategic Planning card text in Figma; on the other capabilities' artwork the page's own light
   tint reads better. */
.cap-page:not(.cap-page--strategic-planning) .cap-dim {
    color: var(--cap-accent-tint);
}

.cap-page--strategic-planning .cap-dim {
    color: #b0e5ec;
}

/* Slightly wider than the card so the artwork's own transparent slanted corners stay outside the clip. */
.cap-dim__shape {
    position: absolute;
    top: 0;
    left: -4%;
    width: 108%;
    height: 100%;
    object-fit: cover;
    transition: opacity .45s ease;
}

.cap-dim__shape--expanded {
    left: 0;
    width: 100%;
    object-position: center top;
    opacity: 0;
}

/* Keeps the white copy readable over the lighter hexagons of some artworks. */
.cap-dim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 42, 61, .55) 0%, rgba(0, 42, 61, .35) 60%, rgba(0, 42, 61, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.cap-dim__number,
.cap-dim__body,
.cap-dim__go,
.cap-dim__progress {
    z-index: 1;
}

.cap-dim__number {
    position: absolute;
    top: 4px;
    left: 60px;
    font-family: var(--cap-font-alt);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

.cap-dim__label {
    position: absolute;
    top: 50%;
    left: calc(50% + 6px);
    width: 312px;
    transform: translate(-50%, -50%) rotate(-81deg);
    font-family: var(--cap-font-alt);
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
    transition: opacity .25s ease;
}

.cap-dim__body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(374px, calc(100% - 128px));
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.cap-dim__name {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: var(--cap-light);
}

.cap-dim__desc {
    font-size: 14px;
    line-height: normal;
    color: #dfdfdf;
}

.cap-dim__go {
    position: absolute;
    right: calc(var(--cap-dim-slant) + 4px);
    bottom: 0;
    padding: 8px;
    color: #fff;
    transition: transform .2s ease;
}

/* Autoplay progress along the top edge of the open card. */
.cap-dim__progress {
    position: absolute;
    top: 0;
    left: var(--cap-dim-slant);
    right: 0;
    height: 3px;
    background: var(--cap-accent-tint, #c1e8f6);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}

.cap-dim.is-active {
    flex-basis: min(514px, calc(100vw - 48px));
    cursor: default;
}

.cap-dim.is-active .cap-dim__shape--expanded,
.cap-dim.is-active::after {
    opacity: 1;
}

.cap-dim.is-active .cap-dim__shape--default,
.cap-dim.is-active .cap-dim__label {
    opacity: 0;
}

.cap-dim.is-active .cap-dim__body {
    opacity: 1;
    transition-delay: .2s;
}

.cap-dim.is-running .cap-dim__progress {
    opacity: 1;
    animation: cap-dim-progress var(--cap-dim-interval, 6s) linear forwards;
}

.cap-dimensions.is-paused .cap-dim__progress {
    animation-play-state: paused;
}

@keyframes cap-dim-progress {
    to { transform: scaleX(1); }
}

.cap-dim:hover .cap-dim__go {
    transform: translateX(3px);
}

.cap-dim:focus-visible {
    outline: none;
}

.cap-dim:focus-visible .cap-dim__number {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A card with a link (Integrated: the capabilities): the toggle covers the card, the link sits above it. */
.cap-dim__toggle {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cap-dim--link.is-active .cap-dim__toggle {
    cursor: default;
}

.cap-dim__toggle:focus-visible {
    outline: none;
}

.cap-dim__toggle:focus-visible ~ .cap-dim__number {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The capability's own icon (Figma "Capabilities States"), above the name of the open card. */
.cap-dim__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    object-fit: contain;
}

.cap-dim__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: #fff;
}

/* The open card's copy sits above the toggle; only its link takes clicks, the rest falls through to the toggle. */
.cap-dimensions--legible .cap-dim--link .cap-dim__body {
    z-index: 4;
}

a.cap-dim__cta {
    align-self: flex-start;
    text-decoration: none;
}

a.cap-dim__cta .cap-icon {
    font-size: 20px;
}

.cap-dim__cta-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cap-dim.is-active a.cap-dim__cta {
    pointer-events: auto;
}

a.cap-dim__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Legibility of the closed cards (2026-10-24, user's choice). The labels were the capability's light tint, which
   disappears over the light hexagons at the bottom of every artwork. To go back, remove the class
   cap-dimensions--legible from partials/dimensions.blade.php; nothing else depends on this block. */
.cap-page .cap-dimensions--legible .cap-dim {
    color: #fff;
}

.cap-dimensions--legible .cap-dim__label {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .35);
}

/* A veil over the closed artwork, stronger towards the bottom where the light hexagons are. */
.cap-dimensions--legible .cap-dim::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .5) 100%);
    pointer-events: none;
    transition: opacity .45s ease;
}

.cap-dimensions--legible .cap-dim.is-active::before {
    opacity: 0;
}

.cap-dimensions--legible .cap-dim__label,
.cap-dimensions--legible .cap-dim__number,
.cap-dimensions--legible .cap-dim__go,
.cap-dimensions--legible .cap-dim__body,
.cap-dimensions--legible .cap-dim__progress {
    z-index: 2;
}

/* Cards with an icon and a longer text (Integrated, Operations): a little taller on the swipe row. */
@media (max-width: 991px) {
    .cap-dimensions--rich .cap-dim {
        height: 380px;
    }

    .cap-dimensions--rich .cap-dim__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
}

/* The five capabilities: their symbol on every card (user, 2026-10-30), a little brighter so the green, pink and
   purple read on the dark cards as well as the blue. */
.cap-dimensions--one-icon .cap-dim__icon {
    filter: brightness(1.4);
}

/* Strategic Planning's blue already reads well, and brightened it turns cyan. */
.cap-page--strategic-planning .cap-dimensions--one-icon .cap-dim__icon {
    filter: none;
}

/* Desktop, like the user's example: the block starts near the top of the open card under a 64px symbol, instead of
   being centred. Operations (its own icons, longer text) keeps the centred block. */
@media (min-width: 992px) {
    .cap-dimensions--one-icon .cap-dim__body {
        top: 56px;
        transform: translateX(-50%);
    }

    .cap-dimensions--one-icon .cap-dim__icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }
}

@media (min-width: 992px) {
    /* The row is exactly the content box: no scrolling, nothing shifts. */
    .cap-dimensions__track {
        width: min(1190px, calc(100% - 48px));
        margin: 0 auto;
        padding-left: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .cap-dimensions__track::after {
        content: none;
    }

    .cap-dim {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 3 shares of 8: 514px at the 1190px content width, as drawn; the others ~171px. */
    .cap-dim.is-active {
        flex: 3 1 0;
    }
}

/* ==========================================================================
   4. Maturity levels — tabs on desktop, accordion on phones
   ========================================================================== */

/* White like the pathways: Assess and the testimonials below share the grey (user, 2026-10-29). The slider's
   panels move sideways: clip them to the section. */
.cap-levels {
    overflow-x: clip;
    background: #fff;
}

.cap-levels__inner {
    /* 24px padding plus the 48px left free under the panel in the 366px Figma block. */
    padding: 24px 0 72px;
    border-top: 1px solid #dfdfdf;
}

.cap-levels__list {
    width: min(1076px, 100%);
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 24px;
}

.cap-level__tab {
    position: relative;
    grid-row: 1;
    height: 40px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--cap-ink);
    color: #fff;
    font-size: 14px;
    line-height: normal;
    text-align: center;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    cursor: pointer;
    transition: background-color .25s ease;
}

.cap-level__tab:hover {
    background: var(--cap-ink-500);
}

.cap-level__tab.is-active {
    background: var(--cap-accent, var(--cap-sp));
    cursor: default;
}

.cap-level__tab:focus-visible {
    outline: none;
    background: var(--cap-sp-dark);
}

/* Slider progress: the open level's tab fills its bottom edge while the next level is due (6s = the
   data-cap-levels-autoplay interval); gone while paused. */
.cap-level__tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .8);
    transform: scaleX(0);
    transform-origin: left;
}

.cap-level__tab.is-running::after {
    animation: cap-level-progress 6s linear forwards;
}

@keyframes cap-level-progress {
    to { transform: scaleX(1); }
}

.cap-level__tab-level {
    margin-bottom: -2px;
}

.cap-level__tab-name {
    font-weight: 600;
    text-transform: uppercase;
}

.cap-level__panel {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: 0 56px;
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.cap-level__panel[hidden] {
    display: none;
}

/* Desktop: every panel sits in the same grid cell, the closed ones invisible, so the section is always as tall as
   the longest level and doesn't change height when another level is picked. The title stays on one line. */
@media (min-width: 768px) {
    .cap-levels__list .cap-level__panel[hidden] {
        display: flex !important;
        visibility: hidden;
    }
}

@media (min-width: 992px) {
    .cap-levels .cap-head {
        width: min(1076px, 100%);
    }

    .cap-levels .cap-head__title {
        white-space: nowrap;
    }

    .cap-levels .cap-head__text {
        max-width: 760px;
        margin: 0 auto;
    }
}

.cap-level__panel.is-entering {
    animation: cap-fade-up .35s ease both;
}

@keyframes cap-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* From 768px, as a slider: the new level slides in from the right while the old one, kept visible meanwhile,
   slides out to the left; .is-back (an earlier level picked by hand) reverses both. */
.cap-level__panel.is-sliding-in {
    animation: cap-level-slide-in .45s ease both;
}

.cap-level__panel.is-sliding-in.is-back {
    animation-name: cap-level-slide-in-back;
}

.cap-levels__list .cap-level__panel.is-leaving {
    visibility: visible;
    animation: cap-level-slide-out .45s ease both;
}

.cap-levels__list .cap-level__panel.is-leaving.is-back {
    animation-name: cap-level-slide-out-back;
}

@keyframes cap-level-slide-in {
    from { opacity: 0; transform: translateX(64px); }
    to { opacity: 1; transform: none; }
}

@keyframes cap-level-slide-in-back {
    from { opacity: 0; transform: translateX(-64px); }
    to { opacity: 1; transform: none; }
}

@keyframes cap-level-slide-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(-64px); }
}

@keyframes cap-level-slide-out-back {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(64px); }
}

.cap-level__id {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cap-level__number {
    height: 60px;
    font-size: 56px;
    font-weight: 700;
    line-height: 60px;
    color: var(--cap-accent-tint, var(--cap-sp-opaque));
}

.cap-level__name {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--cap-ink);
}

.cap-level__capability {
    font-size: 14px;
    line-height: normal;
    color: var(--cap-muted);
}

.cap-level__rule {
    flex: 0 0 2px;
    background: var(--cap-accent, var(--cap-sp));
}

.cap-level__text {
    flex: 1 1 auto;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    line-height: normal;
}

.cap-level__title {
    font-weight: 600;
    color: var(--cap-ink);
}

.cap-level__para + .cap-level__para {
    margin-top: 1.2em;
}

.cap-level__para {
    color: var(--cap-muted);
}

/* ==========================================================================
   5. Assess with PerforAssess
   ========================================================================== */

.cap-assess {
    position: relative;
    padding: 24px 0;
    overflow: hidden;
    /* The same grey as the testimonials: one background on both sides of the recognition band (user, 2026-10-29). */
    background: var(--cap-subtle);
}

/* Outline hexagons at both edges of the testimonials, in the page accent (sheet feedback mockup). Desktop only. The
   box fills the section and the SVG's lines are 1000px long. Assess had the same decor until 2026-11-02 (removed,
   user); its 120px card padding from 1200px stays. */
.cap-quotes::before,
.cap-quotes::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--cap-accent, var(--cap-sp));
    opacity: .35;
    -webkit-mask: url('../capability/assess-hexagons.svg') center top / 260px 1000px no-repeat;
    mask: url('../capability/assess-hexagons.svg') center top / 260px 1000px no-repeat;
    pointer-events: none;
}

.cap-quotes > * {
    position: relative;
    z-index: 1;
}

.cap-assess__cards {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 420px));
    justify-content: center;
    gap: 24px;
    padding: 0 20px;
}

/* From 1200px keep 120px free on each side (it was 20px at 1280px), first so laptops saw the hexagon decor beside the
   cards; the decor is gone (2026-11-02) but the card widths stay. From ~1550px the 420px cards leave more than that
   anyway (user, 2026-10-29). */
@media (min-width: 1200px) {
    .cap-assess__cards {
        padding: 0 120px;
    }
}

/* A page with two services: two centred columns (Operations had no QuickScan until 2026-11-05; all pages have three now). */
.cap-assess__cards--2 {
    grid-template-columns: repeat(2, minmax(0, 420px));
}

.cap-assess-card {
    position: relative;
    /* A minimum, so a longer text (Operations) grows the whole row and the buttons stay level. P2 (user, 2026-10-30):
       less tall — 320px minimum, 12px gaps, the logo box no taller than the logo (365 → 344px at 1440). */
    min-height: 320px;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--cap-ink-900) center / cover no-repeat;
    isolation: isolate;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cap-assess-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(12, 12, 13, .25);
}

/* The three logo files keep the "perfor ASSESS" wordmark at 45% of their width, so it renders at one size. Never wider
   than the card: at 1200px the cards are 304px and a 320px logo was clipped at both ends. */
.cap-assess-card__logo {
    width: 320px;
    max-width: 100%;
    height: 64px;
    object-fit: contain;
}

.cap-assess-card__body {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    font-size: 14px;
    line-height: normal;
}

.cap-assess-card__icon {
    width: 92px;
    height: 92px;
    object-fit: cover;
    transition: transform .3s ease;
}

.cap-assess-card:hover .cap-assess-card__icon {
    transform: scale(1.05);
}

/* Navy hexagon with a light rim and a white glyph: quieter than the glowing icon images. 20% larger (2026-10-30). */
.cap-assess-card__hex {
    position: relative;
    width: 101px;
    height: 115px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: rgba(255, 255, 255, .7);
    transition: transform .3s ease;
}

.cap-assess-card__hex::before {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: inherit;
    background: #001b36;
}

.cap-assess-card__hex .cap-icon {
    position: relative;
    font-size: 62px;
    color: #fff;
}

.cap-assess-card:hover .cap-assess-card__hex {
    transform: scale(1.05);
}

/* Recognized: the gold laurel emblem, as tall as the hexagons, so it stands out (2026-10-30). */
.cap-assess-card__emblem {
    width: 105px;
    height: 115px;
    transition: transform .3s ease;
}

.cap-assess-card:hover .cap-assess-card__emblem {
    transform: scale(1.05);
}

/* The supplied backgrounds are light behind the copy in places. */
.cap-assess-card__body > div {
    text-shadow: 0 1px 3px rgba(0, 42, 61, .55);
}

.cap-assess-card__title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.cap-assess-card__text {
    font-size: 16px;
    color: var(--cap-light);
}

.cap-assess-card__btn {
    width: 100%;
}

/* ==========================================================================
   6. "Turn Maturity into recognized"
   ========================================================================== */

/* 44px (24 → 32px for the enlarged badge pictures and their hover zoom; 32 → 44px on 2026-10-30: the band 10% taller,
   232 → 256px on desktop, with its content unchanged). */
.cap-recognition {
    padding: 44px 0;
    background: var(--cap-ink-900);
}

.cap-recognition__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* A size container, so the title can follow its column's width; stretched (and centred vertically) because a
   container has no content width of its own. */
.cap-recognition__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    gap: 8px;
    container-type: inline-size;
}

/* 20-30px with the column (user, 2026-11-06): ~20px beside the badges up to 1420px, ~24px at 1920, 30px when the band
   stacks; 24px where container units are not supported. */
.cap-recognition__title {
    font-size: 24px;
    font-size: clamp(20px, 6.2cqi, 30px);
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
}

.cap-recognition__title span {
    display: block;
}

/* Badge frames 186px (168px, the Learning Journey badge size, until 2026-11-03: the pictures as tall as the pathway
   badges, user); a long title wraps instead of shrinking them. The pictures are drawn 10% larger inside the frames
   (user 2026-10-29), so the title and button don't move. */
@media (min-width: 1200px) {
    .cap-recognition__intro {
        flex: 1 1 0;
        min-width: 0;
    }

    .cap-recognition .cap-recognition__badges {
        flex: 0 0 auto;
    }

    /* The width as well: Safari/WebKit sizes the row from its content and the frames have none (absolute pictures),
       so without it the row shrank to the arrows and the badges overflowed left over the title (2026-11-06). */
    .cap-recognition .cap-recognition__badge {
        flex: 0 0 186px;
        width: 186px;
    }
}

/* The same edges as the PerforAssess cards above (3 x 420px + 2 x 24px, 120px free each side; user, 2026-11-06).
   Below 1420px those cards are narrower than the 894px badge row plus a readable title, so the band keeps its 1190px
   shell there; the badges and the band's height do not change. */
@media (min-width: 1420px) {
    .cap-recognition__inner {
        width: min(1308px, calc(100% - 240px));
    }
}

.cap-recognition__badges {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nothing clips the pictures, so the hover zoom keeps the badges whole (the cropped one has transparent margins). */
.cap-recognition__badge {
    position: relative;
    flex: 0 1 186px;
    aspect-ratio: 1;
}

.cap-recognition__badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--cap-badge-scale, 1));
    transition: transform .3s ease;
}

.cap-recognition__badge:hover img {
    transform: scale(calc(var(--cap-badge-scale, 1) * 1.05));
}

/* Pictures 10% larger than their frames; phones keep them at the 2 × 2 grid's column width (and the band its 44px).
   The 186px frames' pictures overflow them by ~9px each side (8.4px at 168): 45px keeps the room between them and
   the band's edges as it was (user, 2026-11-03). */
@media (min-width: 768px) {
    .cap-recognition {
        padding: 45px 0;
    }

    .cap-recognition__badge {
        --cap-badge-scale: 1.1;
    }
}

.cap-recognition__arrow {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

/* ==========================================================================
   7. Testimonials
   ========================================================================== */

.cap-quotes {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background: var(--cap-subtle);
}

/* The Assess hexagons upside down: the lines come in from the top edge, under the Assess ones, and end in hexagons
   (user, 2026-10-29). Flipped, the box's top (the SVG's top) is the section's bottom. */
.cap-quotes::before {
    left: -40px;
    transform: scaleY(-1);
}

.cap-quotes::after {
    right: -40px;
    transform: scale(-1, -1);
}

.cap-quotes__inner {
    width: min(878px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cap-quotes__viewport {
    overflow: hidden;
}

.cap-quotes__track {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.cap-quote {
    flex: 0 0 100%;
    display: flex;
    align-items: flex-start;
}

.cap-quote__mark {
    flex: 0 0 120px;
    width: 120px;
    height: 197px;
    background: var(--cap-accent, var(--cap-sp));
    -webkit-mask: var(--mark) top left / 100% auto no-repeat;
    mask: var(--mark) top left / 100% auto no-repeat;
}

.cap-quote__body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 40px 16px 16px;
}

.cap-quote__text {
    font-size: 14px;
    line-height: normal;
    color: var(--cap-ink-400);
}

.cap-quote__author {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 14px;
    line-height: normal;
    font-style: normal;
    text-align: right;
}

.cap-quote__name {
    font-weight: 600;
    color: var(--cap-ink);
}

.cap-quote__role {
    font-weight: 500;
    color: var(--cap-accent, var(--cap-sp));
}

.cap-quotes__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cap-quotes__dots {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.cap-quotes__dots {
    gap: 0;
}

/* A 24px touch target around the 14px dot of the design. */
.cap-quotes__dot {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 -3px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cap-quotes__dot::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cap-dim);
    transition: background-color .2s ease;
}

.cap-quotes__dot.is-active::after {
    background: var(--cap-ink-500);
}

/* ==========================================================================
   8. Assessment pathway — the homepage "Learning Journey" card effect
   ========================================================================== */

.cap-pathways {
    padding: 32px 0;
    background: #fff;
}

.cap-pathways__head {
    display: flex;
    padding-left: max(24px, calc((100% - 1190px) / 2));
    margin-bottom: 24px;
}

.cap-pathways__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 284px));
    justify-content: start;
    padding-left: max(24px, calc((100% - 1190px) / 2));
    padding-right: 24px;
    gap: 24px;
    align-items: start;
}

.cap-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.cap-stage__label {
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    color: var(--cap-ink);
}

.cap-path-card {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    transform-origin: center top;
    transition: transform .28s ease, box-shadow .28s ease;
}

.cap-path-card__main {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--cap-light);
    border-radius: 24px;
    background: var(--cap-subtle);
    position: relative;
    z-index: 1;
    transition: background-color .28s ease;
}

.cap-path-card__title {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    color: var(--cap-ink-900);
}

.cap-path-card__badge {
    position: relative;
    width: 185px;
    height: 185px;
    overflow: hidden;
}

/* Capability pages, variant V4 (user, 2026-10-30): 204px boxes (185 + 10%), never wider than the card.
   Ambassadors Network v2 shares the section without the modifier and keeps 185px. */
.cap-pathways--large-badges .cap-path-card__badge {
    width: 204px;
    height: 204px;
    max-width: 100%;
}

/* A round badge is wider than tall (its ribbon fills the width): 12% more width so the circle (~194px) reads as large
   as the 204px shields. */
.cap-pathways--large-badges .cap-path-card__badge--wide {
    width: 228px;
}

/* Per-page round-badge size (data key pathways.badge_fit, user 2026-11-02). Round files are 336x286, shields 191x204
   on screen. height: as tall as the shields (240x204). area: as much visible area as the shields (~29,200px²), 221x188. */
.cap-pathways--fit-height .cap-path-card__badge--wide {
    width: 240px;
}

.cap-pathways--fit-area .cap-path-card__badge--wide {
    width: 221px;
}

/* Capability pages (user, 2026-11-02): square corners on the pathway cards, note included. Ambassadors Network v2
   (no modifier) keeps the 24px rounding. */
.cap-pathways--large-badges .cap-path-card,
.cap-pathways--large-badges .cap-path-card__main,
.cap-pathways--large-badges .cap-path-card__note {
    border-radius: 0;
}

.cap-path-card__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cap-path-card__action {
    align-self: stretch;
    padding: 8px 8px 8px 16px;
    color: var(--cap-ink-900);
    background: transparent;
}

.cap-path-card__action .cap-btn__label {
    text-decoration: underline;
}

.cap-path-card__action:hover,
.cap-path-card__action:focus-visible {
    color: var(--cap-ink-500);
}

/* As in Figma ("Cards / States"): on hover the card grows downwards and the note slides out from under it. */
.cap-path-card__note {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -24px;
    padding: 24px 16px 0;
    border-radius: 0 0 24px 24px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    line-height: normal;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows .28s ease, padding .28s ease, opacity .2s ease, background-color .28s ease;
}

.cap-path-card__note-text {
    min-height: 0;
    overflow: hidden;
}

.cap-path-card:hover,
.cap-path-card:focus-within {
    z-index: 2;
    transform: scale(1.02);
    box-shadow: 0 4px 4px -4px rgba(12, 12, 13, .05), 0 16px 32px -4px rgba(12, 12, 13, .1);
}

.cap-path-card:hover .cap-path-card__main,
.cap-path-card:focus-within .cap-path-card__main {
    background: #fff;
}

.cap-path-card:hover .cap-path-card__note,
.cap-path-card:focus-within .cap-path-card__note {
    grid-template-rows: 1fr;
    padding: 40px 16px 14px;
    background: var(--cap-ink);
    opacity: 1;
}

/* ==========================================================================
   9 / 12. CTA bands
   ========================================================================== */

.cap-cta {
    display: flex;
    align-items: center;
    gap: 44px;
    min-height: 188px;
    background: var(--cap-ink-700);
    box-shadow: 0 4px 2px -1px rgba(12, 12, 13, .1), 0 4px 2px -1px rgba(12, 12, 13, .05);
}

.cap-cta__content {
    flex: 1 1 0;
    min-width: 0;
    /* Starts on the content edge of the neighbouring sections (.cap-shell: 1190px, 24px gutters). */
    padding: 24px 0 24px max(24px, calc((100% - 1190px) / 2));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cap-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 514px;
}

.cap-cta__title {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
}

.cap-cta__text {
    font-size: 14px;
    line-height: normal;
    color: var(--cap-dim);
}

/* A line under the title, e.g. the podcast series and episode. */
.cap-cta__meta {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: #e6f7f9;
}

.cap-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cap-cta__media {
    flex: 0 0 min(664px, 48.6%);
    align-self: stretch;
    min-height: 188px;
    background: #d9d9d9 center / cover no-repeat;
}

.cap-cta--mirrored .cap-cta__content {
    padding: 24px 24px 24px 0;
}

/* The band's own artwork: dark where the copy sits, the capability's colour on the right. */
.cap-cta--art {
    background-color: var(--cap-ink-700);
    background-image: var(--cap-cta-art, none);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cap-cta--art .cap-cta__content {
    padding-right: 24px;
}

/* Webinar band built from a banner design (Strategic Planning, 2026-11-03). The banner takes the image slot of
   the mirrored band, the description and button sit beside it (v2). From 992px the banner keeps its proportions:
   --u is 1/4350 of the stage, the banner's own pixel grid, so every measure below is the banner's. */
.cap-webinar {
    position: relative;
    overflow: hidden;
}

.cap-webinar__banner {
    position: relative;
    overflow: hidden;
    background: #0d3a43 var(--cap-webinar-bg) center / cover no-repeat;
    color: #fff;
}

.cap-webinar__stage {
    position: relative;
}

.cap-webinar__pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(90deg, #0d252c 0%, #0b5763 100%);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* The divider between the icon and the label. */
.cap-webinar__pill-text {
    border-left: 1px solid rgba(255, 255, 255, .7);
}

.cap-webinar__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    font-weight: 400;
    line-height: 1;
    color: #fff;
}

.cap-webinar__eyebrow {
    color: #14daf2;
    font-weight: 700;
    text-transform: uppercase;
}

.cap-webinar__strong {
    font-weight: 700;
    text-transform: uppercase;
}

/* The whole band opens the webinar: the button's parents are not positioned, so this covers the band. */
.cap-webinar__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
}

/* A second link (Operations: "Explore Leading Voices") stays clickable above the stretched one. */
.cap-webinar__more {
    position: relative;
    z-index: 5;
}

/* The designer's finished cover (the six other pages, 2026-11-03). Where the copy beside it is taller, the cover
   stands on the band's bottom edge (its speakers do) and the slot shows the cover's own background layer above it;
   the cover's top edge fades into that. */
.cap-webinar__cover {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
}

.cap-webinar__card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    color: #004751;
}

.cap-webinar__tag {
    position: absolute;
    left: 0;
    background: linear-gradient(90deg, #08626e 0%, #01a1b5 100%);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.cap-webinar__name {
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.cap-webinar__role {
    display: flex;
    flex-direction: column;
}

.cap-webinar__photo {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: auto;
}

@media (min-width: 992px) {
    /* The Maturity Outlook band mirrored (user, 2026-11-03): the banner takes half the band (720 x 205 at 1440, the
       band's height follows it). A taller band (long copy on narrow screens) shows more background, the banner
       centred in it. */
    .cap-webinar__banner {
        flex: 0 0 50%;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .cap-webinar__stage {
        flex: 1 1 auto;
        container-type: inline-size;
        aspect-ratio: 4350 / 1241;
    }

    .cap-webinar__banner--cover {
        align-items: flex-end;
    }

    /* The copy ends on the right edge of the Insights mosaic's cards above (1190px content; the mosaic's 1238px
       includes its 24px gutters), the grid the Outlook band's copy starts on, and keeps that band's 514px. */
    .cap-webinar .cap-cta__content {
        padding: 24px max(24px, calc((100% - 1190px) / 2)) 24px 24px;
    }

    .cap-webinar .cap-cta__content > * {
        width: min(514px, 100%);
        margin-left: auto;
    }

    .cap-webinar__copy,
    .cap-webinar__speaker {
        --u: calc(100cqw / 4350);
    }

    .cap-webinar__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: calc(174 * var(--u)) 0 calc(96 * var(--u)) calc(369 * var(--u));
    }

    .cap-webinar__pill {
        height: calc(150 * var(--u));
        padding: 0 calc(46 * var(--u)) 0 calc(60 * var(--u));
        font-size: calc(51 * var(--u));
        box-shadow: 0 0 0 calc(14 * var(--u)) rgba(255, 255, 255, .04);
    }

    .cap-webinar__pill-icon {
        width: calc(124 * var(--u));
        height: calc(100 * var(--u));
        margin-right: calc(42 * var(--u));
    }

    .cap-webinar__pill-text {
        padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(32 * var(--u));
    }

    /* Padding, not margin: the page's heading reset zeroes h2 margins. */
    .cap-webinar__title {
        padding-top: calc(175 * var(--u));
    }

    .cap-webinar__eyebrow {
        font-size: calc(98 * var(--u));
    }

    .cap-webinar__light {
        margin-top: calc(84 * var(--u));
        font-size: calc(161 * var(--u));
    }

    .cap-webinar__strong {
        margin-top: calc(30 * var(--u));
        font-size: calc(277 * var(--u));
        line-height: .8;
    }

    .cap-webinar__card {
        position: absolute;
        top: calc(736 * var(--u));
        left: calc(2442 * var(--u));
        width: calc(1040 * var(--u));
        height: calc(339 * var(--u));
        padding: calc(66 * var(--u)) 0 0 calc(73 * var(--u));
    }

    .cap-webinar__tag {
        top: calc(-40 * var(--u));
        width: calc(423 * var(--u));
        height: calc(80 * var(--u));
        padding: calc(12 * var(--u)) 0 0 calc(73 * var(--u));
        font-size: calc(57 * var(--u));
        clip-path: polygon(0 0, 100% 0, calc(100% - 44 * var(--u)) 100%, 0 100%);
    }

    .cap-webinar__name {
        font-size: calc(80 * var(--u));
    }

    .cap-webinar__role {
        margin-top: calc(30 * var(--u));
        font-size: calc(53 * var(--u));
        line-height: 1.04;
    }

    .cap-webinar__photo {
        left: calc(3193 * var(--u));
        right: auto;
        width: calc(1157 * var(--u));
    }
}

/* Phones and tablets: the banner, then the description and button (the band's column rules). In the banner the
   copy, then the speaker; the card stays in front so its text is never under the photo. */
@media (max-width: 991px) {
    /* The other bands stack from 767px; this banner needs the full width already on tablets. */
    .cap-webinar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .cap-webinar .cap-cta__content {
        padding: 32px 24px;
    }

    .cap-webinar__banner {
        background-image: var(--cap-webinar-bg-mobile);
    }

    .cap-webinar__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 24px 0;
    }

    .cap-webinar__pill {
        height: 44px;
        padding: 0 18px 0 16px;
        font-size: 15px;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .04);
    }

    .cap-webinar__pill-icon {
        width: 30px;
        height: 24px;
        margin-right: 12px;
    }

    .cap-webinar__pill-text {
        padding: 4px 0 4px 10px;
    }

    .cap-webinar__title {
        padding-top: 28px;
    }

    /* Each title line stays on one line down to 320px screens. */
    .cap-webinar__eyebrow {
        font-size: min(20px, calc((100vw - 48px) / 17.6));
        line-height: 1.2;
    }

    .cap-webinar__light {
        margin-top: 14px;
        font-size: min(32px, calc((100vw - 48px) / 10.9));
    }

    .cap-webinar__strong {
        margin-top: 2px;
        font-size: 50px;
    }

    .cap-webinar__speaker {
        position: relative;
        height: 300px;
        margin-top: 8px;
    }

    .cap-webinar__card {
        position: absolute;
        left: 24px;
        bottom: 40px;
        z-index: 3;
        width: 230px;
        padding: 26px 16px 14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    }

    .cap-webinar__tag {
        top: -14px;
        height: 28px;
        padding: 7px 26px 0 16px;
        font-size: 15px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    }

    .cap-webinar__name {
        font-size: 20px;
    }

    .cap-webinar__role {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.3;
    }

    .cap-webinar__photo {
        width: 270px;
    }
}

/* Tablets: the speaker beside the copy instead of under it. */
@media (min-width: 768px) and (max-width: 991px) {
    .cap-webinar__stage {
        display: flex;
    }

    .cap-webinar__copy {
        flex: 1 1 auto;
        padding: 40px 0 40px 24px;
    }

    .cap-webinar__speaker {
        flex: 0 0 360px;
        height: auto;
        margin-top: 0;
    }

    .cap-webinar__card {
        left: 0;
    }
}

/* ==========================================================================
   10. Mosaic gallery
   ========================================================================== */

.cap-gallery {
    padding: 24px 0;
    background: #fff;
}

.cap-gallery__top,
.cap-gallery__bottom {
    display: grid;
    gap: 16px;
}

.cap-gallery__top {
    grid-template-columns: 327fr 327fr 244fr 244fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b c d"
        "a b e e";
    aspect-ratio: 1190 / 420;
}

.cap-gallery__bottom {
    margin-top: 16px;
    grid-template-columns: 430fr 744fr;
    grid-template-areas: "f g";
    aspect-ratio: 1190 / 314;
}

.cap-gallery__tile {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--cap-light);
}

.cap-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.cap-gallery__tile:hover img {
    transform: scale(1.04);
}

.cap-gallery__tile:nth-child(1) { grid-area: a; }
.cap-gallery__tile:nth-child(2) { grid-area: b; }
.cap-gallery__tile:nth-child(3) { grid-area: c; }
.cap-gallery__tile:nth-child(4) { grid-area: d; }
.cap-gallery__tile:nth-child(5) { grid-area: e; }
.cap-gallery__bottom .cap-gallery__tile:nth-child(1) { grid-area: f; }
.cap-gallery__bottom .cap-gallery__tile:nth-child(2) { grid-area: g; }

/* ==========================================================================
   11. Insights (reuses the /insights-v2 mosaic; only its width is adjusted)
   ========================================================================== */

/* As wide as the gallery above (.cap-shell: 1190px content, 24px gutters) at every width (user, 2026-11-02). */
.cap-insights.iv2-mosaic .iv2-mosaic__inner {
    max-width: 1238px;
    padding: 0 24px;
}

/* Clear photos (Strategic Planning 2026-11-03, every capability page 2026-11-06): instead of the mosaic's even tint,
   dark only where the text sits: the bottom of the small cards, the top of the large one (its white button reads on
   any photo). */
.cap-insights.iv2-mosaic .iv2-card::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, 0) 80%);
}

.cap-insights.iv2-mosaic .iv2-card--c::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, 0) 60%);
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.cap-faq {
    padding: 44px 0;
    background: #fff;
}

.cap-faq .cap-head {
    width: min(564px, 100%);
}

.cap-faq .cap-head__title {
    color: var(--cap-ink-500);
}

.cap-faq .cap-head__text {
    color: var(--cap-ink-400);
}

.cap-faq .cap-head__text a {
    color: var(--cap-teal-600);
    text-decoration: underline;
}

.cap-faq__list {
    width: min(790px, calc(100% - 48px));
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cap-faq__item {
    border: 1px solid var(--cap-light);
    background: #fff;
    transition: box-shadow .2s ease;
}

.cap-faq__item[open] {
    box-shadow: 0 4px 12px rgba(12, 12, 13, .05);
}

.cap-faq__question {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: var(--cap-ink);
    list-style: none;
    cursor: pointer;
}

.cap-faq__question::-webkit-details-marker {
    display: none;
}

.cap-faq__question-text {
    flex: 1 1 auto;
}

.cap-faq__chevron {
    flex: 0 0 20px;
    font-size: 20px;
    transition: transform .25s ease;
}

.cap-faq__item[open] .cap-faq__chevron {
    transform: rotate(180deg);
}

.cap-faq__answer {
    padding: 0 15px 16px;
    /* Multi-paragraph answers are written with blank lines between paragraphs. */
    white-space: pre-line;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cap-muted);
}

/* ==========================================================================
   14. Contact — the site-wide contact header: 56px above the title, 12px, 24px to the form
   ========================================================================== */

.cap-contact {
    padding: 56px 0 44px;
    background: #fff;
}

.cap-contact .contact-intro {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 0 24px;
    text-align: center;
}

.cap-contact .contact-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    color: var(--cap-ink);
}

.cap-contact .contact-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cap-muted);
}

/* Reserves the HubSpot form's rendered height so the lazy embed doesn't shift the footer (as on /contact-us).
   The reserve only holds until the form is in: HubSpot then sizes the frame to the form, whose height depends on the
   width (1513px at 360, 1151px at 440 wide), so a fixed reserve left a gap on most phones. */
.cap-contact .hs-form-frame {
    min-height: 1046px;
}

.cap-contact .hs-form-frame:has(iframe) {
    min-height: 0;
}

/* ==========================================================================
   2b. Maturity dimensions, new design ("dimension deck", user mockup 2026-10-29), opt-in per page
   ('dimensions_deck' => true). The open dimension's text on the left, a row of cards on the right where the
   open card is wide. Card art is CSS: a gradient in the page accent plus hexagonal prisms
   (dimension-prisms.svg) as a mask, shifted on every card.
   ========================================================================== */

.cap-deck {
    padding: 48px 0 56px;
    background: #151b21;
    color: #fff;
}

.cap-deck__inner {
    width: min(1278px, calc(100% - 48px));
    margin: 0 auto;
}

.cap-deck__head {
    margin-bottom: 32px;
}

.cap-deck .cap-rule-title__text {
    font-size: 28px;
    color: #fff;
}

.cap-deck .cap-rule-title__line {
    background: var(--cap-accent);
}

.cap-deck__body {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.cap-deck__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Only the open dimension's text (display: flex would otherwise win over [hidden]). */
.cap-deck__info[hidden] {
    display: none;
}

.cap-deck__name {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
}

.cap-deck__desc {
    font-size: 16px;
    line-height: 1.65;
    color: #c9d1d6;
}

.cap-deck__cta {
    margin-top: 24px;
    padding: 10px 16px 10px 20px;
}

.cap-deck__cards {
    display: flex;
    gap: 12px;
    height: 360px;
}

.cap-deck__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow .35s ease;
}

/* Leaves the closed cards ~120px at 1366px: room for "Performance" / "Measurement" on one line. */
.cap-deck__item.is-open {
    flex-grow: 2.3;
}

.cap-deck__card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    background: linear-gradient(180deg, #071018 0%, color-mix(in srgb, var(--cap-accent) 22%, #071018) 55%, color-mix(in srgb, var(--cap-accent) 45%, #071018) 100%);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, padding .35s ease;
}

/* The prisms: the accent, lighter at the top, cut out by the SVG. */
.cap-deck__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cap-accent) 55%, #fff) 0%, var(--cap-accent) 100%);
    opacity: .85;
    -webkit-mask: url('../capability/dimension-prisms.svg') var(--cap-deck-x, 0) 100% / auto 92% repeat-x;
    mask: url('../capability/dimension-prisms.svg') var(--cap-deck-x, 0) 100% / auto 92% repeat-x;
}

/* Darker towards the bottom, under the white name. */
.cap-deck__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5, 10, 15, 0) 45%, rgba(5, 10, 15, .6) 100%);
}

.cap-deck__item:nth-child(6n + 2) .cap-deck__card {
    --cap-deck-x: -95px;
}

.cap-deck__item:nth-child(6n + 3) .cap-deck__card {
    --cap-deck-x: -40px;
}

.cap-deck__item:nth-child(6n + 4) .cap-deck__card {
    --cap-deck-x: -130px;
}

.cap-deck__item:nth-child(6n + 5) .cap-deck__card {
    --cap-deck-x: -65px;
}

.cap-deck__item:nth-child(6n + 6) .cap-deck__card {
    --cap-deck-x: -115px;
}

.cap-deck__card:hover {
    border-color: rgba(255, 255, 255, .2);
}

.cap-deck__card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* A closed card shows the short label; the open one the full name (always there for screen readers). */
.cap-deck__card-label,
.cap-deck__card-name {
    font-weight: 600;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.cap-deck__card-label {
    font-size: 13px;
}

.cap-deck__card-label--long {
    font-size: 12px;
}

.cap-deck__item.is-open .cap-deck__card-label {
    display: none;
}

.cap-deck__item:not(.is-open) .cap-deck__card-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cap-deck__card-rule {
    display: block;
    width: 40px;
    height: 4px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--cap-accent);
    transition: width .35s ease;
}

.cap-deck__item.is-open .cap-deck__card {
    padding: 28px 28px 32px;
}

.cap-deck__item.is-open .cap-deck__card-name {
    max-width: 280px;
    font-size: 30px;
    line-height: 1.2;
}

.cap-deck__item.is-open .cap-deck__card-rule {
    width: 64px;
}

/* Only phones show these (inside the open card). */
.cap-deck__card-desc,
.cap-deck__card-cta {
    display: none;
}

/* Inline deck ('dimensions_deck' => 'inline', Integrated): no side panel; from 992px the open card's text sits between
   the cards, right before its card (as /about-us-v2 Vision/Mission/Values: text, then its picture), and fades in once
   the item has widened. Visual order only: the card's button stays first in the markup. Phones keep the stacked cards. */
.cap-deck--inline .cap-deck__info {
    display: none;
}

@media (min-width: 992px) {
    .cap-deck--inline .cap-deck__body {
        display: block;
    }

    .cap-deck--inline .cap-deck__item {
        display: flex;
    }

    /* From 1200px: closed cards ≥115px ("Measurement" at 13px stays whole) … */
    .cap-deck--inline .cap-deck__item.is-open {
        flex-grow: 4.4;
    }

    .cap-deck--inline .cap-deck__card {
        flex: 1 1 0;
        min-width: 0;
    }

    .cap-deck--inline .cap-deck__info {
        order: -1;
        display: flex;
        flex: 0 0 0;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: flex-basis .35s ease, margin-right .35s ease, padding-left .35s ease, opacity .15s ease, visibility 0s .15s;
    }

    /* … and the open card keeps 305px for its name at 30px ("Performance"); the text takes what is left, ≤310px.
       Below 1200px there isn't room for both: the text keeps 40% and the name hyphenates, as beside the panel. */
    .cap-deck--inline .cap-deck__item.is-open .cap-deck__info {
        flex-basis: max(40%, min(310px, calc(100% - 305px)));
        margin-right: 28px;
        /* + the 12px row gap = 28px from the previous card, as to its own card. */
        padding-left: 16px;
        opacity: 1;
        visibility: visible;
        transition: flex-basis .35s ease, margin-right .35s ease, padding-left .35s ease, opacity .25s ease .3s, visibility 0s;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cap-deck--inline .cap-deck__desc {
        font-size: 14px;
    }
}

/* Below 992px: no side panel; the cards stack, closed ones as strips, the open one tall with its text. */
@media (max-width: 991px) {
    .cap-deck {
        padding: 40px 0 44px;
    }

    .cap-deck .cap-rule-title__text {
        font-size: 22px;
    }

    .cap-deck__body {
        display: block;
    }

    .cap-deck__panel {
        display: none;
    }

    .cap-deck__cards {
        flex-direction: column;
        gap: 8px;
        height: auto;
    }

    .cap-deck__item,
    .cap-deck__item.is-open {
        flex: 0 0 auto;
    }

    .cap-deck__card {
        height: auto;
        min-height: 72px;
        padding: 16px;
        justify-content: center;
    }

    /* The prisms keep their desktop scale (a strip shows a calm slice of them) and fade on closed strips. */
    .cap-deck__card::before {
        opacity: .45;
        -webkit-mask-size: auto 360px;
        mask-size: auto 360px;
    }

    .cap-deck__item.is-open .cap-deck__card::before {
        opacity: .85;
    }

    /* Strips are wide enough for the full name. */
    .cap-deck__card-label {
        display: none;
    }

    .cap-deck__item:not(.is-open) .cap-deck__card-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 16px;
    }

    .cap-deck__card-rule {
        display: none;
    }

    .cap-deck__item.is-open .cap-deck__card {
        min-height: 260px;
        justify-content: flex-end;
        padding: 24px 20px;
    }

    .cap-deck__item.is-open .cap-deck__card-name {
        max-width: none;
        font-size: 24px;
    }

    .cap-deck__item.is-open .cap-deck__card-rule {
        display: block;
    }

    .cap-deck__item.is-open .cap-deck__card-desc {
        display: block;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.6;
        color: #e1e6ea;
    }

    .cap-deck__item.is-open .cap-deck__card-cta {
        display: inline-flex;
        margin-top: 8px;
        padding: 8px 4px;
        color: #fff;
        font-family: var(--cap-font-alt);
        font-size: 14px;
        text-decoration: underline;
    }
}

/* ==========================================================================
   Tablets
   ========================================================================== */

@media (max-width: 1199px) {
    .cap-quotes::before,
    .cap-quotes::after {
        display: none;
    }

    .cap-assess__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cap-assess__cards--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cap-assess-card__logo {
        width: 100%;
    }

    .cap-recognition__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cap-recognition__badges {
        width: 100%;
        justify-content: space-between;
    }

    .cap-pathways__grid {
        grid-template-columns: repeat(2, minmax(0, 284px));
        justify-content: center;
        padding: 0 24px;
        row-gap: 32px;
    }

    .cap-cta {
        gap: 24px;
    }

    .cap-cta__media {
        flex-basis: 40%;
    }
}

@media (max-width: 991px) {
    .cap-hero__cap-name {
        font-size: 12px;
    }

    .cap-assess__cards {
        grid-template-columns: minmax(0, 420px);
    }

    .cap-quote__mark {
        flex-basis: 80px;
        width: 80px;
        height: 131px;
    }

    .cap-quote__body {
        padding-top: 24px;
    }
}

/* ==========================================================================
   Phones — hero and levels follow Figma node 13290:28449
   ========================================================================== */

@media (max-width: 767px) {
    .cap-shell {
        width: calc(100% - 48px);
    }

    /* Hero */
    /* Phones: intro, toggle, capability row, arc and description follow one another (spacing as Figma at 390px),
       so the toggle stays 19px under the tagline whether the title and tagline take two lines or five. */
    .cap-hero {
        height: auto;
        min-height: 0;
    }

    .cap-hero__bg--desktop {
        display: none;
    }

    .cap-hero__bg--mobile {
        display: block;
    }

    .cap-hero__intro {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - 48px);
        margin: 24px auto 0;
    }

    .cap-hero__title {
        font-size: 32px;
    }

    /* 19px under the tagline and 19px over the icons (the row's 3px gap + its 16px padding). */
    .cap-hero__modes {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: max-content;
        margin: 19px auto 0;
    }

    /* The 50% bigger 150x50 buttons, then 30% smaller, then 5% bigger again (user, 2026-11-03; desktop unchanged). */
    .cap-hero__mode {
        width: 110px;
        height: 37px;
        padding: 8px 22px;
        font-size: 11px;
        line-height: 16px;
    }

    .cap-hero__stage {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: 89px;
        margin: 3px 0 0;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
    }

    .cap-hero__cap {
        position: static;
        width: 57px;
        height: 57px;
        transition: none;
    }

    .cap-hero__cap-btn {
        padding: 0;
        gap: 0;
    }

    /* On phones the icons keep their source order (as drawn); only the highlight moves. */

    .cap-hero__cap-icon {
        width: 57px;
        height: 57px;
        padding: calc(57px * var(--cap-icon-inset, .09));
        opacity: .7;
        transition: opacity .3s ease, transform .3s ease;
    }

    .cap-hero__cap.is-active .cap-hero__cap-icon {
        opacity: 1;
        transform: scale(1.08);
    }

    .cap-hero__cap-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .cap-hero__arc--desktop {
        display: none;
    }

    .cap-hero__arc--mobile {
        display: block;
        position: relative;
        top: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 33px;
        margin-top: 8px;
    }

    .cap-hero__detail {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: calc(100% - 48px);
        margin: 2px auto 0;
        padding: 8px 0;
    }

    /* Phones: 342px can't hold the longer descriptions in three lines, so the copy is never cut here; the space is
       still reserved for three. */
    .cap-hero__cap-desc {
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
    }

    /* Dimensions: the heading stacks */
    .cap-dimensions {
        padding-bottom: 24px;
    }

    .cap-dimensions__head {
        align-items: center;
    }

    /* Cards as tall as their tallest content needs (user, 2026-11-03): the text and the turned label share one grid
       cell in the flow, so the row (align-items: stretch) takes the height of the longest text or label of the page,
       plus 36px above and below. The text is always laid out at the open card's width, so opening a card never
       changes the height. The closed cards are 20% narrower; the open one keeps its width (narrower, the text grows
       taller). The one column is the card's own width (the text, laid out wider, overflows it), so the label is
       centred in a closed card too. */
    .cap-dimensions .cap-dim {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        flex-basis: 182px;
        height: auto;
        padding: 36px 0;
    }

    .cap-dimensions .cap-dim.is-active {
        flex-basis: min(514px, calc(100vw - 48px));
    }

    .cap-dimensions .cap-dim__label,
    .cap-dimensions .cap-dim__body {
        grid-area: 1 / 1;
    }

    /* Written vertically its length is its height in the flow; turned the rest of the way to the desktop's -81deg
       (vertical-rl text is the horizontal text turned 90deg), still centred 6px right of the middle. */
    .cap-dimensions .cap-dim__label {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        align-self: center;
        justify-self: center;
        margin-left: 12px;
        writing-mode: vertical-rl;
        transform: rotate(-171deg);
    }

    .cap-dimensions .cap-dim__body {
        position: relative;
        top: auto;
        left: auto;
        align-self: center;
        justify-self: start;
        width: min(374px, calc(min(514px, calc(100vw - 48px)) - 128px));
        margin-left: calc(var(--cap-dim-slant) + 16px);
        transform: none;
    }

    .cap-rule-title__text {
        white-space: normal;
        flex: 1 1 auto;
        font-size: 20px;
    }

    .cap-rule-title__line {
        display: none;
    }

    /* Levels: accordion */
    .cap-levels__inner {
        padding: 32px 0;
        border-top: 0;
    }

    .cap-levels__list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cap-level__tab {
        cursor: pointer;
    }

    .cap-level__tab.is-active {
        cursor: pointer;
    }

    .cap-level__panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: -8px;
        padding: 16px 8px 32px;
    }

    .cap-level__id {
        flex-basis: auto;
        width: 140px;
    }

    .cap-level__rule {
        flex: 0 0 2px;
        width: 140px;
        height: 2px;
    }

    .cap-level__text {
        padding-left: 0;
    }

    /* Assess */
    .cap-assess .cap-head {
        padding: 0 24px;
    }

    /* Swipeable row, like the pathway cards below. */
    .cap-assess__cards {
        display: flex;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 24px 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        scrollbar-width: none;
    }

    .cap-assess__cards::-webkit-scrollbar {
        display: none;
    }

    .cap-assess-card {
        flex: 0 0 min(320px, 82vw);
        height: auto;
        min-height: 320px;
        scroll-snap-align: start;
    }

    .cap-assess-card:hover {
        transform: none;
    }

    /* Recognized (last in the markup) comes first on phones (user, 2026-11-03). */
    .cap-assess-card--recognized {
        order: -1;
    }

    .cap-assess-card__logo {
        width: min(252px, 100%);
        height: 72px;
    }

    /* Recognition: 2 × 2 */
    .cap-recognition__title span {
        display: inline;
    }

    .cap-recognition__badges {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .cap-recognition__badge {
        width: 100%;
    }

    .cap-recognition__arrow {
        display: none;
    }

    /* Quotes */
    .cap-quotes {
        padding: 40px 0;
    }

    .cap-quote {
        flex-direction: column;
    }

    .cap-quote__mark {
        width: 56px;
        height: 46px;
        flex-basis: auto;
    }

    .cap-quote__body {
        padding: 8px 0 0;
    }

    /* Pathways: swipe, notes always shown */
    .cap-rule-title--pathways .cap-rule-title__text {
        font-size: 20px;
    }

    .cap-pathways__grid {
        display: flex;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 24px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        scrollbar-width: none;
    }

    .cap-pathways__grid::-webkit-scrollbar {
        display: none;
    }

    .cap-stage {
        flex: 0 0 min(284px, 80vw);
        scroll-snap-align: start;
    }

    .cap-path-card:hover,
    .cap-path-card:focus-within {
        transform: none;
        box-shadow: none;
    }

    .cap-path-card__note,
    .cap-path-card:hover .cap-path-card__note,
    .cap-path-card:focus-within .cap-path-card__note {
        grid-template-rows: 1fr;
        padding: 38px 16px 14px;
        background: var(--cap-ink);
        opacity: 1;
    }

    /* Capability pages (user, 2026-11-03): every dark note as tall as the page's longest one. The row stretches the
       stages; the card, then its note, take the rest (the labels and the light parts are all the same height). */
    .cap-pathways--large-badges .cap-pathways__grid {
        align-items: stretch;
    }

    .cap-pathways--large-badges .cap-path-card,
    .cap-pathways--large-badges .cap-path-card__note {
        flex: 1 1 auto;
    }

    /* CTA bands: copy, then the image */
    .cap-cta,
    .cap-cta--mirrored {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .cap-cta__content,
    .cap-cta--mirrored .cap-cta__content {
        padding: 32px 24px;
    }

    .cap-cta--mirrored .cap-cta__media {
        order: 2;
    }

    .cap-cta__media {
        flex: 0 0 auto;
        min-height: 160px;
    }

    /* Phones: the copy needs the full width, so the artwork is dimmed behind it. */
    .cap-cta--art {
        background-image: linear-gradient(90deg, rgba(27, 36, 40, .92) 0%, rgba(27, 36, 40, .7) 100%), var(--cap-cta-art, none);
    }

    .cap-cta__title {
        font-size: 22px;
    }

    /* Gallery: 2 columns */
    .cap-gallery__top {
        aspect-ratio: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "a b"
            "c d"
            "e e";
        gap: 12px;
    }

    .cap-gallery__top .cap-gallery__tile:nth-child(-n+2) { aspect-ratio: 327 / 420; }
    .cap-gallery__top .cap-gallery__tile:nth-child(3),
    .cap-gallery__top .cap-gallery__tile:nth-child(4) { aspect-ratio: 244 / 202; }
    .cap-gallery__top .cap-gallery__tile:nth-child(5) { aspect-ratio: 504 / 202; }

    .cap-gallery__bottom {
        margin-top: 12px;
        aspect-ratio: auto;
        grid-template-columns: 1fr;
        grid-template-areas: "f" "g";
        gap: 12px;
    }

    .cap-gallery__bottom .cap-gallery__tile { aspect-ratio: 430 / 314; }
    .cap-gallery__bottom .cap-gallery__tile:nth-child(2) { aspect-ratio: 744 / 314; }

    /* FAQ */
    .cap-faq {
        padding: 40px 0;
    }

    .cap-faq .cap-head {
        padding: 0 24px;
    }

    .cap-faq__list {
        margin-top: 32px;
    }

    /* Contact */
    .cap-contact .hs-form-frame:not(:has(iframe)) {
        min-height: 1513px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cap-page *,
    .cap-page *::before,
    .cap-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==========================================================================
   Mobile capability bar (≤768px) — hidden until the hero has scrolled away, then shown at the top of the screen
   (capability-page.js, initCapbar; the site's header scrolls away on phones). Icons and their states follow the hero: dimmed by
   default, lifted on hover/focus, full and marked when current.
   ========================================================================== */

.cap-capbar {
    display: none;
}

@media (max-width: 768px) {
    .cap-capbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 140; /* under the site header (150), its overlay (250) and mobile menu (260) */
        display: block;
        padding-top: env(safe-area-inset-top, 0px);
        visibility: hidden;
        transform: translateY(-100%);
        transition: transform .25s ease, visibility 0s linear .25s;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 4px 12px -8px rgba(12, 12, 13, .25);
        font-family: var(--cap-font);
    }

    .cap-capbar__modes,
    .cap-capbar__caps {
        display: flex;
    }

    .cap-capbar.is-visible {
        visibility: visible;
        transform: none;
        transition: transform .25s ease;
    }

    .cap-capbar__modes {
        justify-content: center;
        gap: 8px;
        padding: 0 8px;
        border-bottom: 1px solid #e0e0e0;
    }

    .cap-capbar__mode,
    .cap-capbar__cap {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #515b60;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;
    }

    .cap-capbar__mode {
        gap: 6px;
        padding: 10px 16px;
        font-size: 14px;
        line-height: normal;
    }

    .cap-capbar__cap {
        flex: 1 1 0;
        padding: 6px 0;
    }

    .cap-capbar__icon {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        padding: calc(24px * var(--cap-icon-inset, .09));
        object-fit: contain;
        opacity: .7;
        transition: opacity .2s ease, transform .2s ease;
    }

    .cap-capbar__cap .cap-capbar__icon {
        width: 30px;
        height: 30px;
        padding: calc(30px * var(--cap-icon-inset, .09));
    }

    /* The hero's white Operations artwork, filled with the Operations colour. */
    .cap-capbar__icon--mask {
        background: #1f5876;
        background-clip: content-box;
        -webkit-mask: var(--cap-icon) center / contain no-repeat content-box;
        mask: var(--cap-icon) center / contain no-repeat content-box;
    }

    .cap-capbar__mode:hover,
    .cap-capbar__mode:focus-visible,
    .cap-capbar__cap:hover,
    .cap-capbar__cap:focus-visible {
        color: var(--cap-ink);
        outline: none;
    }

    .cap-capbar__mode:hover .cap-capbar__label,
    .cap-capbar__mode:focus-visible .cap-capbar__label {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .cap-capbar__mode:hover .cap-capbar__icon,
    .cap-capbar__mode:focus-visible .cap-capbar__icon,
    .cap-capbar__cap:hover .cap-capbar__icon,
    .cap-capbar__cap:focus-visible .cap-capbar__icon {
        opacity: 1;
        transform: scale(1.06);
    }

    .cap-capbar__mode:focus-visible,
    .cap-capbar__cap:focus-visible {
        box-shadow: inset 0 0 0 2px var(--cap-accent);
    }

    /* Current page: the page's light tint, its accent underline, darker text (the platform's tab treatment). */
    .cap-capbar .is-active {
        background: var(--cap-accent-tint);
        box-shadow: inset 0 -2px 0 var(--cap-accent);
        color: var(--cap-ink);
        font-weight: 500;
        cursor: default;
    }

    .cap-capbar .is-active .cap-capbar__icon {
        opacity: 1;
        transform: scale(1.08);
    }

    .cap-capbar .is-active:hover .cap-capbar__label {
        text-decoration: none;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .cap-capbar,
    .cap-capbar.is-visible {
        transition: none;
    }
}