/* Web Manuals Customer Logos - front end */

.wm-cc {
    --wm-cc-height: 48px;
    --wm-cc-gap: 40px;
    --wm-cc-max-width: 160px;
    --wm-cc-speed: 40s;
    --wm-cc-per-view: 5;
    /* Web Manuals tokens, consumed with fallbacks. wm-tokens.css installs the
       --wm-* set in Elementor Site Settings; where it is present these follow
       the site, and where it is not the fallback is the same value. Per the
       web standard: never hardcode a value that has a token, and the fallback
       in var(--wm-x, y) is the one place a literal is correct. */
    --wm-cc-font: var(--wm-font, "Plus Jakarta Sans", sans-serif);

    /* Attribution, from references/typography.md: name 600 in Night, role in
       Grey; the company line takes the Sky 700 attribution colour from the
       quote card in references/components.md. Sky 500 is 2.75:1 and is never
       a text colour on light -- that is the blue these lines had. */
    --wm-cc-name-colour: var(--wm-text-body, #073445);
    --wm-cc-role-colour: var(--wm-text-muted, #717680);
    --wm-cc-company-colour: var(--wm-text-eyebrow, #086D91);
    --wm-cc-quote-colour: var(--wm-text-body, #073445);

    --wm-cc-colour: #5A6472;
    --wm-cc-colour-hover: var(--wm-cc-colour);
    --wm-cc-opacity: 1;
    /* 0 is black, 1 is white. 0.45 is about the lightness of --wm-cc-colour. */
    --wm-cc-grey-level: 0.45;
    --wm-cc-card-gap: 24px;
    --wm-cc-stagger: 40px;
    --wm-cc-card-height: 120px;
    --wm-cc-fade-colour: #FFFFFF;
    --wm-cc-fade-height: 220px;

    width: 100%;
}

/* ---------- heading ---------- */

/* The eyebrow's look lives in custom properties so the rule below can carry
   !important -- it has to, because a bare `.wm-cc__heading` loses to the
   theme's own h2-h6 rules and the eyebrow came out looking like a section
   heading. The Elementor controls set the properties rather than the
   declarations, so they still win without fighting over specificity. */
.wm-cc {
    /* Sky 700, not Sky 500. Sky 500 is 2.75:1 on white and the standard says
       it is never a text colour on light; eyebrows and links on light are
       Sky 700 at 5.82:1. */
    --wm-cc-eyebrow-colour: var(--wm-text-eyebrow, #086D91);
    --wm-cc-eyebrow-family: 'Plus Jakarta Sans', sans-serif;
    --wm-cc-eyebrow-size: 14px;
    --wm-cc-eyebrow-weight: 600;
    --wm-cc-eyebrow-line: 18px;
    --wm-cc-eyebrow-spacing: 0.2px;
    --wm-cc-eyebrow-transform: uppercase;
    /* The subheading is the section title, not supporting copy: Display sm,
       700, heading colour. Matches .wm-header__title in the site's own header
       component. 30/36 is exactly 1.2, so the line-height below stays right at
       whatever size this is set to. */
    --wm-cc-sub-colour: var(--wm-text-heading, #00597A);
    --wm-cc-sub-size: var(--wm-display-sm, 30px);
    --wm-cc-sub-gap: 8px;
}

/* On a dark section the whole attribution set flips: name white, role
   --wm-on-dark, and Sun for the accent -- Sun is the only accent that clears
   AA on Night (9.12) and Dusk (5.34) alike. */
.wm-cc--on-dark {
    --wm-cc-name-colour: var(--wm-text-on-dark, #FFFFFF);
    --wm-cc-role-colour: var(--wm-text-body-on-dark, #C3D8E1);
    --wm-cc-company-colour: var(--wm-text-eyebrow-on-dark, #FFD200);
    --wm-cc-quote-colour: var(--wm-text-on-dark, #FFFFFF);
    --wm-cc-eyebrow-colour: var(--wm-text-eyebrow-on-dark, #FFD200);
    --wm-cc-sub-colour: var(--wm-text-on-dark, #FFFFFF);

    /* The card has to change with the section. Flipping only the text left
       white names on a white fill -- invisible, which is what "dark does not
       work" looked like. Sky 900 is the documented card fill inside Night
       sections, and the elevation rule is shadow on white, hairline on a
       tinted surface. */
    --wm-cc-card-bg: var(--wm-sky-900, #054861);
    --wm-cc-card-border: var(--wm-border-on-dark, rgba(255, 255, 255, 0.12));
}

.wm-cc--on-dark .wm-cc__quote-card {
    box-shadow: none;
}

/* One family for the whole component, inherited by everything inside it. */
.wm-cc {
    font-family: var(--wm-cc-font);
}

.wm-cc__header {
    margin-bottom: 32px;
    text-align: center;
}

.wm-cc__heading {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--wm-cc-eyebrow-colour) !important;
    font-family: var(--wm-cc-eyebrow-family) !important;
    font-size: var(--wm-cc-eyebrow-size) !important;
    font-weight: var(--wm-cc-eyebrow-weight) !important;
    font-style: normal !important;
    line-height: var(--wm-cc-eyebrow-line) !important;
    letter-spacing: var(--wm-cc-eyebrow-spacing) !important;
    text-transform: var(--wm-cc-eyebrow-transform) !important;
}

.wm-cc__subheading {
    margin: var(--wm-cc-sub-gap) 0 0 !important;
    padding: 0 !important;
    color: var(--wm-cc-sub-colour) !important;
    font-size: var(--wm-cc-sub-size) !important;
    /* Unitless, so it holds at any size the control is set to. */
    line-height: 1.2 !important;
    font-weight: var(--wm-weight-bold, 700) !important;
    font-style: normal !important;
    letter-spacing: var(--wm-track-mid, -0.005em) !important;
    opacity: 1 !important;
}

/* ---------- the mark itself ---------- */

.wm-cc__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--wm-cc-height);
    max-width: var(--wm-cc-max-width);
    opacity: var(--wm-cc-opacity);
    text-decoration: none;
    transition: opacity 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.wm-cc__logo .wm-cc-logo__svg,
.wm-cc__logo .wm-cc-logo__img {
    display: block;
    width: auto;
    height: 100%;
    max-width: var(--wm-cc-max-width);
    max-height: 100%;
    object-fit: contain;
}

/* A raster logo in mono mode: the element paints currentColor and the image's
   own alpha channel cuts the shape out of it, which is what makes a PNG match
   an inlined SVG instead of keeping all its original colours. The aspect ratio
   comes in inline, from the attachment's dimensions -- a <span> has no
   intrinsic size, so width: auto would otherwise collapse to nothing. */
.wm-cc__logo .wm-cc-logo__img--mono {
    background-color: currentColor;
    -webkit-mask-image: var(--wm-cc-logo-src);
    mask-image: var(--wm-cc-logo-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Single-colour mode. The SVG has already had its paint attributes rewritten
   to currentColor server-side, so the colour is all this has to supply. */
.wm-cc--mono .wm-cc__logo {
    color: var(--wm-cc-colour);
}

/* Pin the paint against anything else on the page.

   `fill="currentColor"` is a presentation attribute, which loses to *any*
   stylesheet rule -- so a stray `svg{fill:…}` or a leaked `.cls-1` from
   another SVG repaints the artwork and the colour control appears to do
   nothing. Matching on the attribute rather than on the element keeps this
   surgical: only the shapes the sanitiser marked are pinned, so a shape that
   is deliberately `fill="none"` stays an outline instead of filling in. */
.wm-cc__logo .wm-cc-logo__svg[fill="currentColor"],
.wm-cc__logo .wm-cc-logo__svg [fill="currentColor"] {
    fill: currentColor !important;
}

.wm-cc__logo .wm-cc-logo__svg [stroke="currentColor"] {
    stroke: currentColor !important;
}

.wm-cc__logo .wm-cc-logo__svg [fill="none"] {
    fill: none !important;
}

.wm-cc__logo .wm-cc-logo__svg [stroke="none"] {
    stroke: none !important;
}

/* No .wm-cc--has-hover gate: --wm-cc-colour-hover falls back to
   --wm-cc-colour, so this is a no-op until a hover colour is set. The class it
   used to need was never added on the front end. */
.wm-cc--mono .wm-cc__logo:hover {
    color: var(--wm-cc-colour-hover);
    opacity: 1;
}

/* One tone for every logo, whatever it started as.

   This was `filter: grayscale(1)`, which only removes saturation -- it does
   nothing to lightness. A logo with black text stayed black, a pale one stayed
   pale, and a wall of them came out in wildly different greys, which is not
   what "greyscale" is asked for here.

   brightness(0) takes every colour channel to zero and leaves alpha alone, so
   whatever the logo was it becomes a silhouette; invert() then lifts that
   silhouette to a single controllable tone. Because it works on rendered
   pixels it treats an inlined SVG and a PNG identically -- which is the point.

   Same caveat as the mask: a logo saved on an opaque background becomes a
   solid rectangle of tone, because the background is part of the silhouette. */
/* On the mark rather than the wrapper, so a logotype with no transparency can
   be exempted -- a filter on the wrapper cannot be undone by a child. */
.wm-cc--grayscale .wm-cc-logo__svg,
.wm-cc--grayscale .wm-cc-logo__img {
    filter: brightness(0) invert(var(--wm-cc-grey-level));
}

.wm-cc--grayscale .wm-cc-logo__img--flat,
.wm-cc--grayscale .wm-cc__logo:hover .wm-cc-logo__svg,
.wm-cc--grayscale .wm-cc__logo:hover .wm-cc-logo__img {
    filter: none;
}

.wm-cc--grayscale .wm-cc__logo:hover {
    opacity: 1;
}

.wm-cc__item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- carousel ---------- */

.wm-cc--carousel .wm-cc__viewport {
    overflow: hidden;
    width: 100%;
    /* Lets the per-view sizing below resolve against the visible width
       rather than the (max-content) track. */
    container-type: inline-size;
}

.wm-cc--carousel.wm-cc--fade .wm-cc__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wm-cc__track {
    display: flex;
    width: max-content;
    animation: wm-cc-scroll var(--wm-cc-speed) linear infinite;
    will-change: transform;
}

.wm-cc--reverse .wm-cc__track {
    animation-direction: reverse;
}

.wm-cc--pause:hover .wm-cc__track,
.wm-cc--pause:focus-within .wm-cc__track {
    animation-play-state: paused;
}

.wm-cc__group {
    display: flex;
    align-items: center;
    gap: var(--wm-cc-gap);
    /* Matching right padding keeps spacing even across the loop seam. */
    padding: 0 var(--wm-cc-gap) 0 0;
    margin: 0;
    list-style: none;
}

/* "Fit N across": each slot is one N-th of the visible width, less its gap.
   Mirrors how the Elementor carousel sizes its slides. */
.wm-cc--per-view .wm-cc__item {
    width: calc(100cqw / var(--wm-cc-per-view) - var(--wm-cc-gap));
}

.wm-cc--per-view .wm-cc__logo {
    width: 100%;
    max-width: 100%;
}

.wm-cc--per-view .wm-cc__logo .wm-cc-logo__svg,
.wm-cc--per-view .wm-cc__logo .wm-cc-logo__img {
    width: 100%;
    max-width: 100%;
    height: var(--wm-cc-height);
}

/* Container query units are widely supported, but fall back to a fixed slot
   width rather than collapsing if they are not. */
@supports not (width: 1cqw) {
    .wm-cc--per-view .wm-cc__item {
        width: var(--wm-cc-max-width);
    }
}

/* The track holds N identical groups; -100%/N is exactly one group. The
   variable is set by frontend.js when it clones extra copies. */
@keyframes wm-cc-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--wm-cc-shift, -50%), 0, 0); }
}

/* ---------- ribbon: two rows, opposite directions ---------- */

.wm-cc__ribbon {
    display: flex;
    flex-direction: column;
    gap: var(--wm-cc-gap);
}

/* Each row is a carousel in its own right, so it needs the same edge treatment
   the single-row one gets from .wm-cc--fade on the wrapper. */
.wm-cc--fade .wm-cc__ribbon-row .wm-cc__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wm-cc__ribbon-row .wm-cc__viewport {
    overflow: hidden;
    width: 100%;
    container-type: inline-size;
}

/* The second row runs a little slower, so the two do not lock into step and
   read as one block sliding sideways. */
.wm-cc__ribbon-row.wm-cc--reverse .wm-cc__track {
    animation-duration: calc(var(--wm-cc-speed) * 1.25);
}

/* ---------- wall: one tile per logotype ---------- */

.wm-cc__wall {
    display: grid;
    grid-template-columns: repeat(var(--wm-cc-wall-columns, 4), minmax(0, 1fr));
    gap: var(--wm-cc-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-cc__wall-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 24px;
    background: var(--wm-cc-card-bg);
    border: 1px solid var(--wm-cc-card-border);
    border-radius: var(--wm-cc-card-radius);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wm-cc--card-shadow .wm-cc__wall-cell {
    box-shadow: 0 8px 24px -2px rgba(10, 13, 18, 0.08);
}

/* The tile is the surface, so the mark inside it is not also max-width capped
   against the wrapper -- it fills the cell it was given. */
.wm-cc__wall-cell .wm-cc__logo {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .wm-cc__wall { grid-template-columns: repeat(min(3, var(--wm-cc-wall-columns, 4)), minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .wm-cc__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wm-cc__wall-cell { padding: 16px; }
}

/* ---------- cluster: centred + grid ---------- */

.wm-cc__cluster {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-cc--cluster-centred .wm-cc__cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wm-cc-gap);
}

.wm-cc--cluster-grid .wm-cc__cluster {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--wm-cc-gap);
    align-items: center;
    justify-items: center;
}

.wm-cc--cluster-grid .wm-cc__item {
    width: 100%;
}

.wm-cc--dividers .wm-cc__item {
    padding: calc(var(--wm-cc-gap) / 3) 0;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------- cluster: cards ---------- */

.wm-cc__cards {
    position: relative;
    display: flex;
    gap: var(--wm-cc-card-gap);
    align-items: flex-start;
    width: 100%;
}

.wm-cc__cards-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wm-cc-card-gap);
    min-width: 0;
}

/* Column offset patterns. "varied" gives each column its own drop so the
   block reads as a cloud rather than a table. */
.wm-cc--offset-outer .wm-cc__cards-col--first,
.wm-cc--offset-outer .wm-cc__cards-col--last {
    padding-top: var(--wm-cc-stagger);
}

.wm-cc--offset-alternate .wm-cc__cards-col:nth-child(even) {
    padding-top: var(--wm-cc-stagger);
}

.wm-cc--offset-varied .wm-cc__cards-col:nth-child(1) { padding-top: calc(var(--wm-cc-stagger) * 0.55); }
.wm-cc--offset-varied .wm-cc__cards-col:nth-child(2) { padding-top: 0; }
.wm-cc--offset-varied .wm-cc__cards-col:nth-child(3) { padding-top: calc(var(--wm-cc-stagger) * 0.85); }
.wm-cc--offset-varied .wm-cc__cards-col:nth-child(4) { padding-top: calc(var(--wm-cc-stagger) * 0.25); }
.wm-cc--offset-varied .wm-cc__cards-col:nth-child(5) { padding-top: calc(var(--wm-cc-stagger) * 0.65); }
.wm-cc--offset-varied .wm-cc__cards-col:nth-child(6) { padding-top: calc(var(--wm-cc-stagger) * 0.10); }

.wm-cc__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: var(--wm-cc-card-height);
    padding: 32px;
    background-color: #FFFFFF;
    border: 1px solid #EAECF1;
    border-radius: 12px;
    transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s;
}

/* Height variety, so the columns do not line up into rows. */
.wm-cc--card-variety .wm-cc__card:nth-child(3n + 2) {
    min-height: calc(var(--wm-cc-card-height) * 1.3);
}

.wm-cc--card-variety .wm-cc__cards-col:nth-child(even) .wm-cc__card:nth-child(2n) {
    min-height: calc(var(--wm-cc-card-height) * 1.45);
}

.wm-cc--card-shadow .wm-cc__card {
    box-shadow: 0 8px 24px -2px rgba(10, 13, 18, 0.08);
}

.wm-cc__card .wm-cc__logo {
    justify-content: center;
    max-width: 100%;
}

/* Bottom fade, matching the quotes block. Built from one colour so it can be
   set to whatever the section background is. */
.wm-cc--card-fade .wm-cc__cards::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--wm-cc-fade-height);
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--wm-cc-fade-colour) 0%, transparent) 0%,
        color-mix(in srgb, var(--wm-cc-fade-colour) 70%, transparent) 50%,
        color-mix(in srgb, var(--wm-cc-fade-colour) 95%, transparent) 80%,
        var(--wm-cc-fade-colour) 100%
    );
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .wm-cc--card-fade .wm-cc__cards::after {
        background: linear-gradient(to bottom, transparent 0%, var(--wm-cc-fade-colour) 100%);
    }
}

/* The cards under the fade should not cast a shadow through it. */
.wm-cc--card-fade .wm-cc__cards-col > .wm-cc__card:last-child {
    box-shadow: none;
}

.wm-cc__card-name {
    font-weight: 600;
    font-size: 0.9375em;
    line-height: 1.4;
}

/* ---------- list ---------- */

.wm-cc__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-cc__row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    list-style: none;
}

.wm-cc__row-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--wm-cc-max-width);
}

.wm-cc__row-mark .wm-cc__logo {
    justify-content: flex-start;
}

.wm-cc__row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    min-width: 0;
}

.wm-cc__row-name {
    font-weight: 600;
}

.wm-cc__row-market {
    font-size: 0.875em;
    opacity: 0.7;
}

.wm-cc__tag {
    display: inline-block;
    padding: 1px 9px;
    margin-right: 4px;
    font-size: 0.75em;
    line-height: 1.7;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

/* ---------- editor placeholder ---------- */

.wm-cc-placeholder {
    padding: 28px;
    text-align: center;
    color: #6b7280;
    background: #f6f8fb;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
}

/* A hint that sits above content which is rendering fine, so it has to be
   quieter than the placeholder that stands in for content that is not. */
.wm-cc-placeholder--hint {
    padding: 10px 14px;
    margin-bottom: 12px;
    text-align: left;
    font-size: 13px;
    color: #8a6300;
    background: #fcf9e8;
    border: 1px solid #f0e2a8;
    border-radius: 4px;
}

/* ---------- accessibility ---------- */

.wm-cc .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wm-cc__track {
        animation: none;
        flex-wrap: wrap;
    }

    .wm-cc--carousel .wm-cc__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .wm-cc__group[aria-hidden="true"] {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .wm-cc__cards {
        flex-direction: column;
    }

    .wm-cc__cards-col,
    .wm-cc--offset-outer .wm-cc__cards-col--first,
    .wm-cc--offset-outer .wm-cc__cards-col--last,
    .wm-cc--offset-alternate .wm-cc__cards-col:nth-child(even),
    .wm-cc--offset-varied .wm-cc__cards-col:nth-child(n) {
        padding-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .wm-cc__row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* ==========================================================================
   Quotes
   ========================================================================== */

.wm-cc {
    --wm-cc-card-bg: #FFFFFF;
    --wm-cc-card-border: #EAECF1;
    --wm-cc-card-radius: 12px;
    --wm-cc-card-padding: 32px;
    --wm-cc-quote-gap: 24px;
    --wm-cc-quote-width: 380px;
}

.wm-cc__quote-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--wm-cc-card-padding);
    background-color: var(--wm-cc-card-bg);
    border: 1px solid var(--wm-cc-card-border);
    border-radius: var(--wm-cc-card-radius);
    box-shadow: 0 8px 24px -2px rgba(10, 13, 18, 0.08);
    transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s;
}

.wm-cc--flat .wm-cc__quote-card { box-shadow: none; }

.wm-cc__quote-logo img {
    width: 140px;
    height: auto;
    max-height: 60px;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.wm-cc__quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    /* Text md, and weight medium because the scale asks for 500 at 16px and
       below rather than regular. */
    font-size: var(--wm-text-md, 16px);
    line-height: var(--wm-text-md-lh, 24px);
    font-weight: var(--wm-weight-medium, 500);
    color: var(--wm-cc-quote-colour);
    quotes: none;
}

.wm-cc__quote-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

/* !important throughout, because the site colours text through surface
   selectors -- `.wm-on-dark p` is (0,1,1) and beats a lone component class at
   (0,1,0), so every one of these would otherwise lose inside a dark section.
   The values come from properties, so a control can still change them. */
.wm-cc__quote-person,
.wm-cc__quote-role,
.wm-cc__quote-company {
    font-size: var(--wm-text-sm, 14px) !important;
    line-height: var(--wm-text-sm-lh, 20px) !important;
    opacity: 1 !important;
}

.wm-cc__quote-person {
    font-weight: var(--wm-weight-semibold, 600) !important;
    color: var(--wm-cc-name-colour) !important;
}

.wm-cc__quote-role {
    font-weight: var(--wm-weight-medium, 500) !important;
    color: var(--wm-cc-role-colour) !important;
}

.wm-cc__quote-company {
    font-weight: var(--wm-weight-semibold, 600) !important;
    color: var(--wm-cc-company-colour) !important;
}

.wm-cc__quote-grid {
    display: grid;
    grid-template-columns: repeat(var(--wm-cc-quote-columns, 3), minmax(0, 1fr));
    gap: var(--wm-cc-quote-gap);
    align-items: start;
}

.wm-cc__quote-masonry {
    display: flex;
    gap: var(--wm-cc-quote-gap);
    align-items: flex-start;
    width: 100%;
}

.wm-cc__quote-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wm-cc-quote-gap);
    min-width: 0;
}

.wm-cc--quote-staggered .wm-cc__quote-col--first,
.wm-cc--quote-staggered .wm-cc__quote-col--last {
    padding-top: 40px;
}

/* ---------- bento ---------- */

/* The lead quote takes a 2x2 cell and the rest pack around it. auto-rows keeps
   every other cell one row tall, so the grid stays even however many there
   are. */
.wm-cc__quote-bento {
    display: grid;
    grid-template-columns: repeat(var(--wm-cc-quote-columns, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    gap: var(--wm-cc-quote-gap);
    align-items: stretch;
}

.wm-cc__quote-cell { display: flex; min-width: 0; }
.wm-cc__quote-cell > .wm-cc__quote-card { width: 100%; }

.wm-cc__quote-cell--lead {
    grid-column: span 2;
    grid-row: span 2;
}

/* The lead is the point of the layout, so it is set larger -- but only where
   there is room for it to span. */
.wm-cc__quote-cell--lead .wm-cc__quote-text {
    font-size: 22px;
    line-height: 32px;
}

@media (max-width: 900px) {
    .wm-cc__quote-bento { grid-template-columns: 1fr; }

    /* A single column cannot span two of them, and a lead that still spanned
       two rows would leave a hole under it. */
    .wm-cc__quote-cell--lead { grid-column: auto; grid-row: auto; }
    .wm-cc__quote-cell--lead .wm-cc__quote-text { font-size: 18px; line-height: 28px; }
}

/* ---------- one quote, large ---------- */

.wm-cc__quote-one {
    /* Display md, at 600 rather than the token's 700: a 700 pull quote
       competes with the section headline. references/typography.md. */
    --wm-cc-one-size: var(--wm-display-md, 36px);
    --wm-cc-one-line: var(--wm-display-md-lh, 44px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.wm-cc__quote-one--long  { --wm-cc-one-size: 28px; --wm-cc-one-line: 40px; }
.wm-cc__quote-one--xlong { --wm-cc-one-size: 24px; --wm-cc-one-line: 34px; }

.wm-cc__quote-one-logo img {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 56px;
    object-fit: contain;
}

.wm-cc__quote-one-text {
    /* Explicit, not inherited from .wm-cc__quote-one. Inheritance loses to any
       declaration at all, and themes routinely set text-align on blockquote
       and p -- so the centring silently did not happen. */
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    quotes: none !important;
    font-size: var(--wm-cc-one-size) !important;
    line-height: var(--wm-cc-one-line) !important;
    font-weight: var(--wm-weight-semibold, 600) !important;
    font-style: normal !important;
    letter-spacing: var(--wm-track-tight, -0.01em);
    color: var(--wm-cc-quote-colour) !important;
}

.wm-cc__quote-one-text::before,
.wm-cc__quote-one-text::after { content: none !important; }

.wm-cc__quote-one-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center !important;
}

.wm-cc__quote-one-person,
.wm-cc__quote-one-role,
.wm-cc__quote-one-company {
    font-size: var(--wm-text-sm, 14px) !important;
    line-height: var(--wm-text-sm-lh, 20px) !important;
    opacity: 1 !important;
}

.wm-cc__quote-one-person {
    font-weight: var(--wm-weight-semibold, 600) !important;
    color: var(--wm-cc-name-colour) !important;
}

.wm-cc__quote-one-role {
    font-weight: var(--wm-weight-medium, 500) !important;
    color: var(--wm-cc-role-colour) !important;
}

.wm-cc__quote-one-company {
    font-weight: var(--wm-weight-semibold, 600) !important;
    color: var(--wm-cc-company-colour) !important;
}

@media (max-width: 767px) {
    .wm-cc__quote-one {
        --wm-cc-one-size: 22px;
        --wm-cc-one-line: 32px;
        gap: 18px;
    }

    .wm-cc__quote-one--xlong { --wm-cc-one-size: 19px; --wm-cc-one-line: 28px; }
}

/* Scroll-snap row — no JS slider needed. */
.wm-cc__quote-scroller {
    display: flex;
    gap: var(--wm-cc-quote-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.wm-cc__quote-scroller > .wm-cc__quote-card {
    flex: 0 0 min(var(--wm-cc-quote-width), 85vw);
    scroll-snap-align: start;
}

.wm-cc__quote-scroller:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ==========================================================================
   Videos — featured, cards, and the modal
   Ported from Customer Videos 1.2.6 so the presentation matches exactly.
   !important is kept where that plugin used it: these sit inside Elementor
   containers whose own rules would otherwise win.
   ========================================================================== */

.wm-cc--video {
    --wm-cc-vaccent: #23a8d5;
    --wm-cc-vquote: #00597a;
    --wm-cc-vradius: 16px;
    --wm-cc-vthumb-h: 288px;
    --wm-cc-vplay: 64px;
    --wm-cc-vgap: 24px;
    --wm-cc-vinfo-bg: #ffffff;
    --wm-cc-vinfo-name: #1e293b;
    --wm-cc-vinfo-role: #475569;
}

/* ---------- shared card chrome ---------- */

.wm-cc-vcard { position: relative; width: 100%; background: transparent; }

.wm-cc-vcard__thumb,
.wm-cc-featured__thumb {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: var(--wm-cc-vradius) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    background: #f1f5f9 !important;
    cursor: pointer !important;
}

.wm-cc-vcard__thumb img,
.wm-cc-featured__thumb img {
    width: 100% !important;
    height: var(--wm-cc-vthumb-h) !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    user-select: none;
    transition: transform 0.4s ease;
}

@media (min-width: 640px) {
    .wm-cc--video { --wm-cc-vthumb-h: 320px; }
}

.wm-cc-vcard:hover .wm-cc-vcard__thumb img { transform: scale(1.03) !important; }

.wm-cc-vcard__overlay,
.wm-cc-featured__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    pointer-events: none !important;
    transition: background 0.3s ease;
}

.wm-cc-vcard:hover .wm-cc-vcard__overlay { background: rgba(0, 0, 0, 0.15) !important; }

.wm-cc-vcard__play,
.wm-cc-featured__play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--wm-cc-vplay) !important;
    height: var(--wm-cc-vplay) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wm-cc-vaccent, #23a8d5) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 10px 15px -3px rgba(35, 168, 213, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    z-index: 5 !important;
}

.wm-cc-vcard__play:hover,
.wm-cc-featured__play:hover {
    transform: translate(-50%, -50%) scale(1.05) !important;
    box-shadow: 0 15px 25px -5px rgba(35, 168, 213, 0.4) !important;
}

.wm-cc-vcard__play:active,
.wm-cc-featured__play:active { transform: translate(-50%, -50%) scale(1) !important; }

.wm-cc-vcard__play:focus-visible,
.wm-cc-featured__play:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; }

.wm-cc-vcard__play svg,
.wm-cc-featured__play svg { margin-left: 2px !important; width: 28px !important; height: 28px !important; fill: #fff !important; }

/* Info card. Negative margin rather than absolute positioning, so a carousel
   viewport cannot clip it. */
.wm-cc-vcard__info {
    position: relative !important;
    z-index: 10 !important;
    width: 80% !important;
    margin: -28px auto 8px !important;
    padding: 16px 20px !important;
    background: var(--wm-cc-vinfo-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.wm-cc-vcard__name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--wm-cc-vinfo-name) !important;
}

.wm-cc-vcard__role {
    margin-top: 4px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--wm-cc-vinfo-role) !important;
}

.wm-cc-vbadge { flex-shrink: 0; width: 20px; height: 20px; color: var(--wm-cc-vaccent, #23a8d5); }

/* ---------- featured ---------- */

.wm-cc-featured { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.wm-cc-featured__viewport { overflow: hidden; width: 100%; }
.wm-cc-featured__track { display: flex; flex-wrap: nowrap; width: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.wm-cc-featured__slide { flex: 0 0 100%; width: 100%; min-width: 0; }

.wm-cc-featured__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; width: 100%; }

@media (min-width: 768px) { .wm-cc-featured__grid { gap: 40px; } }
@media (min-width: 1024px) { .wm-cc-featured__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }

.wm-cc-featured__media { position: relative; width: 100%; }
.wm-cc-featured__media-wrap { position: relative; width: 100%; }
.wm-cc-featured__spacer { height: 48px; }

.wm-cc-featured__info {
    position: absolute !important;
    bottom: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: var(--wm-cc-vinfo-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
}

.wm-cc-featured__content { width: 100%; max-width: 576px; }

.wm-cc-featured__logo {
    width: 212px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* The pull quote is sized to its own length instead of being clamped.
   36px/44px only fits about four lines in this column, so a four-line clamp
   cut off very nearly every real quote -- they run 200-400 characters. The
   template measures the longest quote in the set and puts one of the
   wm-cc-featured--q-* classes on the carousel, which steps these properties
   down; every slide shares the step so the slides stay the same height.
   The clamp is still there as a backstop, but at a line count the chosen size
   should not reach. */
.wm-cc-featured {
    --wm-cc-vquote-size: 36px;
    --wm-cc-vquote-line: 44px;
    --wm-cc-vquote-lines: 6;
}

.wm-cc-featured--q-mid   { --wm-cc-vquote-size: 30px; --wm-cc-vquote-line: 38px; --wm-cc-vquote-lines: 7; }
.wm-cc-featured--q-long  { --wm-cc-vquote-size: 25px; --wm-cc-vquote-line: 33px; --wm-cc-vquote-lines: 9; }
.wm-cc-featured--q-xlong { --wm-cc-vquote-size: 21px; --wm-cc-vquote-line: 29px; --wm-cc-vquote-lines: 12; }

.wm-cc-featured__quote {
    margin: 16px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: var(--wm-cc-vquote-size) !important;
    font-weight: 600 !important;
    line-height: var(--wm-cc-vquote-line) !important;
    letter-spacing: -0.02em !important;
    font-style: normal !important;
    color: var(--wm-cc-vquote) !important;
    quotes: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: var(--wm-cc-vquote-lines) !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.wm-cc-featured__quote::before,
.wm-cc-featured__quote::after { content: none !important; }

@media (max-width: 1023px) {
    .wm-cc-featured__content { text-align: center; margin: 0 auto; }
    .wm-cc-featured__logo { margin: 0 auto !important; object-position: center center !important; }
    .wm-cc-featured__quote { text-align: center !important; }
}

@media (max-width: 767px) {
    .wm-cc-featured__logo { width: 160px !important; }
    /* Phones get one column, so the quote has the full width and no neighbour
       to stay level with -- one step down from the desktop size is enough. */
    .wm-cc-featured { --wm-cc-vquote-size: 24px; --wm-cc-vquote-line: 32px; --wm-cc-vquote-lines: 8; }
    .wm-cc-featured--q-long  { --wm-cc-vquote-size: 21px; --wm-cc-vquote-line: 29px; --wm-cc-vquote-lines: 12; }
    .wm-cc-featured--q-xlong { --wm-cc-vquote-size: 19px; --wm-cc-vquote-line: 27px; --wm-cc-vquote-lines: 12; }
}

/* ---------- featured + carousel ---------- */

.wm-cc-vmix { display: flex; flex-direction: column; gap: 56px; width: 100%; }

/* The featured half centres itself on a max-width; the row underneath has to
   line up with it rather than with the wrapper. */
.wm-cc-vmix__rest { width: 100%; max-width: 1280px; margin: 0 auto; }

@media (max-width: 767px) {
    .wm-cc-vmix { gap: 40px; }
}

.wm-cc-featured__dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }

.wm-cc-featured__dot {
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.wm-cc-featured__dot:hover { background: #94a3b8 !important; }
.wm-cc-featured__dot.is-active { background: var(--wm-cc-vaccent, #23a8d5) !important; transform: scale(1.2) !important; }
.wm-cc-featured__dot:focus-visible { outline: 2px solid var(--wm-cc-vaccent, #23a8d5) !important; outline-offset: 3px !important; }
.wm-cc-featured.is-single .wm-cc-featured__dots { display: none; }

/* ---------- cards ---------- */

.wm-cc-vcards { width: 100%; max-width: 1280px; margin: 0 auto; }

.wm-cc-vcards.is-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--wm-cc-vcols, 3), 1fr) !important;
    gap: var(--wm-cc-vgap, 24px) !important;
}

.wm-cc-vcards.is-grid[data-count="2"] { max-width: 900px; }

@media (max-width: 1024px) {
    .wm-cc-vcards.is-grid { grid-template-columns: repeat(var(--wm-cc-vcols-tablet, 2), 1fr) !important; max-width: 100%; }
}

@media (max-width: 767px) {
    .wm-cc-vcards.is-grid { grid-template-columns: 1fr !important; }
    .wm-cc-vcards.is-grid[data-count="2"] { max-width: 500px; }
}

.wm-cc-vcards__nav { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 16px; }

.wm-cc-vcards__arrow {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wm-cc-vaccent, #23a8d5) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    transition: opacity 0.2s ease !important;
}

.wm-cc-vcards__arrow:hover { opacity: 0.9 !important; }
.wm-cc-vcards__arrow:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.wm-cc-vcards__arrow svg { width: 20px !important; height: 20px !important; stroke: #fff !important; }

.wm-cc-vcards__viewport { overflow: hidden; width: 100%; }

/* overflow clips at the padding edge, so vertical padding gives the card's
   shadow somewhere to land while the horizontal clip stays exactly where it
   was. The video cards have no shadow -- the thumbnail is the surface -- so
   this is only needed where a real card rides in the track. */
.wm-cc-vcards--quote .wm-cc-vcards__viewport {
    padding: 10px 0 32px;
}

.wm-cc-vcards__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--wm-cc-vgap, 24px);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wm-cc-vcards__slide {
    flex: 0 0 calc((100% - var(--wm-cc-vtotal-gap, 48px)) / var(--wm-cc-vper-view, 3));
    min-width: 0;
}

@media (max-width: 1024px) {
    .wm-cc-vcards__slide { flex: 0 0 calc((100% - var(--wm-cc-vtotal-gap-tablet, 24px)) / var(--wm-cc-vper-view-tablet, 2)); }
}

@media (max-width: 767px) {
    .wm-cc-vcards__slide { flex: 0 0 100%; }
}

/* ---------- modal ---------- */

.wm-cc-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.wm-cc-modal[aria-hidden="false"] { opacity: 1 !important; visibility: visible !important; }

.wm-cc-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); cursor: pointer; }

.wm-cc-modal__content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.wm-cc-modal[aria-hidden="false"] .wm-cc-modal__content { transform: scale(1); }

.wm-cc-modal__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 100 !important;
}

.wm-cc-modal__close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
}

.wm-cc-modal__close svg { width: 24px !important; height: 24px !important; stroke: #fff !important; stroke-width: 2.5 !important; }

.wm-cc-modal__video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.wm-cc-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 767px) {
    .wm-cc-modal__close { top: 10px !important; right: 10px !important; width: 40px !important; height: 40px !important; }
    .wm-cc-modal__close svg { width: 20px !important; height: 20px !important; }
}

@media screen and (max-width: 900px) {
    .wm-cc__quote-masonry { flex-direction: column; }
    .wm-cc--quote-staggered .wm-cc__quote-col--first,
    .wm-cc--quote-staggered .wm-cc__quote-col--last { padding-top: 0; }
    .wm-cc__quote-grid { grid-template-columns: 1fr; }
    .wm-cc__quote-card { padding: 24px; }
    .wm-cc__quote-logo img { width: 110px; }
    .wm-cc__quote-text { font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   Spotlight — centred focus carousel of customer stories
   ========================================================================== */

.wm-cc--spotlight {
    --wm-cc-spot-width: 908px;
    --wm-cc-spot-height: 532px;
    --wm-cc-spot-radius: 20px;
    --wm-cc-spot-gap: 0px;
    --wm-cc-spot-veil-colour: rgba(7, 52, 69, 0.75);
    --wm-cc-spot-hl: #ffd200;
    --wm-cc-spot-accent: #23a8d5;
    --wm-cc-spot-duration: 7s;
}

.wm-cc__spot-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 44px;
}

.wm-cc__spot-track {
    display: flex;
    align-items: flex-start;
    height: calc(var(--wm-cc-spot-height) + 60px);
    padding: 0 calc(50% - (var(--wm-cc-spot-width) / 2));
    transition: transform 0.5s ease;
    will-change: transform;
}

.wm-cc__spot-slide {
    flex: 0 0 var(--wm-cc-spot-width);
    height: var(--wm-cc-spot-height);
    position: relative;
    z-index: 1;
    opacity: 0.7;
    transform: scale(0.85);
    filter: blur(2px);
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.wm-cc__spot-slide.is-active {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.wm-cc__spot-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--wm-cc-spot-radius);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0b2b38;
}

/* !important throughout because themes ship `img { height: auto }` (often with
   a max-width to match). That beat `height: 100%` here, so the photo kept its
   intrinsic ratio instead of filling the slide and the inner card's dark
   background showed through wherever the image fell short. object-fit does the
   cropping, so any aspect ratio covers. */
.wm-cc__spot-bg {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

.wm-cc__spot-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* One colour control drives all three stops. color-mix keeps the hue and
       just thins it out towards the top right, as in the original. */
    background: linear-gradient(
        to top right,
        var(--wm-cc-spot-veil-colour) 0%,
        color-mix(in srgb, var(--wm-cc-spot-veil-colour) 40%, transparent) 50%,
        color-mix(in srgb, var(--wm-cc-spot-veil-colour) 7%, transparent) 100%
    );
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .wm-cc__spot-veil {
        background: linear-gradient(to top right, var(--wm-cc-spot-veil-colour) 0%, transparent 100%);
    }
}

/* Only the front slide is clickable, so the blurred ones cannot swallow taps. */
.wm-cc__spot-link {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--wm-cc-spot-radius);
    text-decoration: none;
    pointer-events: none;
}

.wm-cc__spot-slide.is-active .wm-cc__spot-link { pointer-events: auto; }
.wm-cc__spot-link:hover { background: rgba(0, 0, 0, 0.1); transition: background 0.3s ease; }
.wm-cc__spot-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.wm-cc__spot-top,
.wm-cc__spot-bottom {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
}

.wm-cc__spot-top { padding: 24px 56px; }
.wm-cc__spot-bottom { padding: 48px 56px; gap: 4px; }

.wm-cc__spot-logo { max-width: 200px; }
.wm-cc__spot-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.wm-cc__spot-quote {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #fff;
    text-align: left;
    quotes: none;
}

.wm-cc__spot-hl { color: var(--wm-cc-spot-hl); }

.wm-cc__spot-author { font-size: 18px; line-height: 25px; font-weight: 700; color: #fff; }
.wm-cc__spot-role { font-size: 13px; line-height: 18px; font-weight: 500; color: #fff; opacity: 0.9; }

/* Content slides in once its slide becomes the active one. */
@keyframes wm-cc-spot-in {
    from { opacity: 0; transform: translateX(-30px); filter: blur(4px); }
    to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

.wm-cc__spot-slide:not(.is-active) .wm-cc__spot-top > *,
.wm-cc__spot-slide:not(.is-active) .wm-cc__spot-bottom > * {
    opacity: 0;
    transform: translateX(-30px);
}

.wm-cc__spot-slide.is-active .wm-cc__spot-top > *,
.wm-cc__spot-slide.is-active .wm-cc__spot-bottom > * {
    opacity: 0;
    animation: wm-cc-spot-in 0.5s ease forwards;
}

.wm-cc__spot-slide.is-active .wm-cc__spot-logo   { animation-delay: 0.2s; }
.wm-cc__spot-slide.is-active .wm-cc__spot-quote  { animation-delay: 0.4s; }
.wm-cc__spot-slide.is-active .wm-cc__spot-author { animation-delay: 0.6s; }
.wm-cc__spot-slide.is-active .wm-cc__spot-role   { animation-delay: 0.7s; }

/* Dots */
.wm-cc__spot-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 10;
}

/* These are <button>s, so the theme's button styling applied to them in full --
   they came out as yellow pills with padding and a shadow, and the progress
   bar was invisible inside. Every declaration that undoes that has to be
   !important, including the hover and focus states, which is where the theme's
   background was otherwise coming back. */
.wm-cc__spot-dot {
    position: relative;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: width 0.3s ease, border-radius 0.3s ease;
}

.wm-cc__spot-dot:hover,
.wm-cc__spot-dot:focus,
.wm-cc__spot-dot:active {
    background: #f3f3f3 !important;
    box-shadow: none !important;
    transform: none !important;
}

.wm-cc__spot-dot.is-active { width: 40px !important; border-radius: 4px !important; }
.wm-cc__spot-dot:focus-visible { outline: 2px solid var(--wm-cc-spot-accent) !important; outline-offset: 3px; }

.wm-cc__spot-progress {
    position: absolute;
    inset: 0 auto 0 0;
    display: block !important;
    width: 0;
    background: var(--wm-cc-spot-accent) !important;
    border-radius: 4px;
}

.wm-cc__spot-dot.is-active .wm-cc__spot-progress {
    animation: wm-cc-spot-progress var(--wm-cc-spot-duration) linear both;
}

.wm-cc--spot-paused .wm-cc__spot-dot.is-active .wm-cc__spot-progress { animation: none; width: 0; }

@keyframes wm-cc-spot-progress {
    from { width: 0; }
    to   { width: 100%; }
}

@media (max-width: 1200px) {
    .wm-cc--spotlight { --wm-cc-spot-width: 700px; --wm-cc-spot-height: 460px; }
    .wm-cc__spot-top { padding: 20px 40px; }
    .wm-cc__spot-bottom { padding: 36px 40px; }
    .wm-cc__spot-quote { font-size: 21px; line-height: 29px; }
}

@media (max-width: 768px) {
    .wm-cc--spotlight { --wm-cc-spot-height: auto; }

    .wm-cc__spot-track {
        height: auto;
        padding: 0 20px;
        transform: none !important;
    }

    /* One at a time on a phone; the off-screen ones are removed from flow. */
    .wm-cc__spot-slide {
        flex: 0 0 100%;
        width: 100%;
        min-height: 430px;
        transform: none;
        filter: none;
        opacity: 1;
    }

    .wm-cc__spot-slide:not(.is-active) { display: none; }

    .wm-cc__spot-top { padding: 24px 24px 0; }
    .wm-cc__spot-bottom { padding: 24px 24px 34px; }
    .wm-cc__spot-quote { font-size: 20px; line-height: 28px; }
    .wm-cc__spot-logo { max-width: 130px; }

    .wm-cc__spot-dots {
        bottom: 0;
        gap: 10px;
        padding: 6px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.12);
    }

    /* !important to match the base rule -- a media query adds no specificity,
       so without it these lose to the theme-proofing above. */
    .wm-cc__spot-dot { width: 6px !important; height: 6px !important; }
    .wm-cc__spot-dot.is-active { width: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .wm-cc__spot-track { transition: none; }
    .wm-cc__spot-slide { transition: none; filter: none; }
    .wm-cc__spot-slide.is-active .wm-cc__spot-top > *,
    .wm-cc__spot-slide.is-active .wm-cc__spot-bottom > * { animation: none; opacity: 1; transform: none; }
    .wm-cc__spot-dot.is-active .wm-cc__spot-progress { animation: none; width: 100%; }
}

/* Spotlight animated title */
.wm-cc__spot-titlebar { display: flex; justify-content: center; align-items: center; margin: 30px 0; }

.wm-cc__spot-title {
    margin: 0 !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 54px !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    font-style: normal !important;
    color: #00597a;
}

/* The width is animated, not snapped. The JS measures the incoming name and
   transitions to it, so a long name giving way to a short one closes the gap
   over the swap instead of holding the old width and collapsing at the end.
   nowrap keeps the measurement honest for names with a space in them. */
.wm-cc__spot-title-name {
    position: relative;
    display: inline-block;
    min-width: 0;
    color: #23a8d5;
    white-space: nowrap;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wm-cc__spot-char {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.1s ease, transform 0.2s ease;
}

.wm-cc__spot-char.is-out { opacity: 0; transform: translateY(10px); }

.wm-cc__spot-char.is-in {
    opacity: 0;
    transform: translateY(-10px);
    animation: wm-cc-spot-char 0.3s forwards;
}

@keyframes wm-cc-spot-char {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .wm-cc__spot-titlebar { margin: 20px 0; }
    .wm-cc__spot-title { font-size: 32px !important; line-height: 38px !important; padding: 0 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .wm-cc__spot-char, .wm-cc__spot-char.is-in { animation: none; opacity: 1; transform: none; transition: none; }
    .wm-cc__spot-title-name { transition: none; }
}