/*!
 * MCD Quick Questions — widget stylesheet
 *
 * ARCHITECTURE — read this before editing.
 *
 * Every value a user can change in Elementor is expressed as a two-level token:
 *
 *     --mcd-thing: var( --mcd-thing-custom, DESIGN-DEFAULT );
 *
 * The Elementor control writes ONLY `--mcd-thing-custom`. This file writes only
 * `--mcd-thing` (the resolved token) and consumes only `var( --mcd-thing )`.
 *
 * Two rules follow from that. Breaking either one silently kills a control —
 * the editor shows a working slider, the front end ignores it.
 *
 *   1. Never hard-code a value a control owns, not even "just for mobile".
 *      Re-declare the token with a different DEFAULT instead:
 *
 *          @media (max-width: 1024px) { .mcd-elementor-slider {
 *              --mcd-photo-radius: var( --mcd-photo-radius-custom, 25px 25px 0 0 );
 *          } }
 *
 *      The user's value still wins; only the fallback moved.
 *
 *   2. `!important` may carry a token, never a literal. It exists to out-rank
 *      hostile theme rules; the token is what keeps Elementor in charge of the
 *      value. So `background: var(--mcd-nav-background) !important` is correct
 *      and `background: #fff !important` is a bug.
 *
 * Border-radius tokens are 4-value shorthands, so their order is
 * top-left / top-right / bottom-right / bottom-left. Elementor's DIMENSIONS
 * control labels those fields Top / Right / Bottom / Left, matching Elementor
 * core's own border-radius controls: the field labelled "Top" is the UPPER-LEFT
 * corner.
 */

/* ============================================================
   1. WIDGET WRAPPER
   ============================================================ */

/* Elementor applies Advanced > Padding to this outer widget. A border-box
   viewport height makes that padding reduce the available slider canvas instead
   of adding to it. This selector targets Elementor's optimized single wrapper. */
.elementor-widget-mcd-quick-questions {
    box-sizing: border-box;
    /* Query container for --mcd-box-inset (see section 2). Inline-size
       containment only; the wrapper is a full-width block, so its width already
       came from its parent and nothing about the layout changes. */
    container-type: inline-size;
    /* A live page can place this widget below other content. Leave its block
       size to the slider so long desktop copy remains visible. */
    block-size: auto;
    max-block-size: none;
    min-block-size: 0;
    overflow: visible;
}

/* Descendant, not child: has_widget_inner_wrapper() only removes
   .elementor-widget-container while Elementor's Optimized Markup experiment is
   active. If that experiment is ever switched off, a child combinator here would
   stop matching and the whole block would silently vanish. */
.elementor-widget-mcd-quick-questions .mcd-elementor-slider {
    block-size: auto;
    min-block-size: 0;
    /* Advanced > Border Radius lands on the wrapper (or on the inner container),
       but the slider paints its own opaque background over it. Inheriting the
       radius down the chain lets that control take effect instead of being hidden
       behind square corners. */
    border-radius: inherit;
}

.elementor-widget-mcd-quick-questions > .elementor-widget-container {
    border-radius: inherit;
}

/* ============================================================
   2. TOKENS
   ============================================================ */

.mcd-elementor-slider {
    /* ---- Palette ---- */
    --mcd-slider-red: var(--mcd-slider-accent, #e2001a);
    --mcd-slider-ink: var(--mcd-slider-ink-custom, #161616);
    --mcd-slider-muted: var(--mcd-slider-muted-custom, #8f8f8c);
    --mcd-slider-bg: var(--mcd-slider-bg-custom, #f4f4f2);
    --mcd-slider-card: var(--mcd-slider-card-custom, #fff);
    --mcd-slider-line: #e7e7e4;
    --mcd-slider-radius: 25px;

    /* ---- Section insets ---- */
    --mcd-slider-top-inset: clamp(1.5em, 4svh, 2.75em);

    /* ---- Navigation ---- */
    /* rem, not em. This and --mcd-nav-size are now read on the SLIDE too (see
       --mcd-desktop-photo-into-card), and a <button> does not inherit
       font-size: 3em on the button was 48px while the same expression on the
       section gave 46.08px. rem is one length everywhere and preserves the
       rendered size. */
    --mcd-nav-gap: var(--mcd-nav-gap-custom, 0.75rem);
    /* Per corner, never a 4-value shorthand — see the note on
       --mcd-photo-radius-* below for why that distinction is load-bearing. */
    --mcd-nav-radius-tl: var(--mcd-nav-radius-tl-custom, 0.65em);
    --mcd-nav-radius-tr: var(--mcd-nav-radius-tr-custom, 0.65em);
    --mcd-nav-radius-br: var(--mcd-nav-radius-br-custom, 0.65em);
    --mcd-nav-radius-bl: var(--mcd-nav-radius-bl-custom, 0.65em);
    --mcd-nav-size: var(--mcd-nav-size-custom, 3rem);
    --mcd-nav-border-width: var(--mcd-nav-border-width-custom, 1px);
    /* Flat buttons on every breakpoint. The token stays (rather than dropping the
       box-shadow declaration) precisely so `box-shadow: var(--mcd-nav-shadow)
       !important` keeps out-ranking themes that put a shadow on every button. */
    --mcd-nav-shadow: none;
    --mcd-nav-active-scale: 0.94;
    --mcd-nav-icon-width: 0.75em;
    --mcd-nav-icon-height: 1em;
    --mcd-nav-icon: var(--mcd-nav-icon-color, var(--mcd-slider-ink));
    --mcd-nav-background: var(--mcd-nav-background-color, var(--mcd-slider-card));
    --mcd-nav-border: var(--mcd-nav-border-color, var(--mcd-slider-line));

    /* ---- Layout: boxed alignment (the align control writes
       margin-inline: 0 auto / auto / auto 0 for left / center / right). ---- */
    --mcd-content-max-width: var(--mcd-content-max-width-custom, none);
    --mcd-content-margin-inline: var(--mcd-content-margin-inline-custom, 0);

    /* ---- Container alignment (desktop, see section 6b) ----
       Defaults read ELEMENTOR'S OWN container variables, which the kit sets on
       every .e-con and which therefore inherit down into this widget. That is
       what keeps the slider aligned to the rest of the page automatically, and
       still aligned after someone changes Site Settings > Layout > Content Width.
       The literals are only a floor for the case where the widget is used outside
       an Elementor container at all. */
    --mcd-box-max-width: var(--mcd-box-max-width-custom, var(--container-max-width, 1140px));
    /* NOT `em`, and deliberately not Elementor's --container-default-padding-left
       (which is 2em). This token is consumed on the section, on the header inside
       the card, on the intro and on the question band — and `em` resolves against
       EACH of those elements' own font-size. With the question styled at 26px it
       came out as a 52px gutter while the header got 29px, so the bands no longer
       lined up. rem is one length everywhere it is used. */
    --mcd-box-padding: var(--mcd-box-padding-custom, 2rem);
    /* Distance from the page edge to the boxed content edge.
       MAX, NOT A SUM. A boxed container is `min(100%, max-width)` centred inside
       its padding, so its content edge is whichever of the two constraints binds:
       the side padding on viewports narrower than the box, the half-gutter on
       wider ones. Adding them double-counts and is wrong in both directions at
       once — measured against the live page it sat 32px too far right at 2560px
       and 34px too far left at 1440px. max() reproduces the container exactly.
       100cqw, NOT 100%. This one expression has to evaluate identically in three
       places: as padding on the section, as padding on the header inside the card,
       and as `left` on an absolutely positioned figure. A percentage resolves
       against each element's OWN containing block, so `100%` gave 64px on the
       section and 32px inside the card — the left and right gutters came out
       different. A container query unit resolves against the query container
       (declared on the widget wrapper), so it means "the slider's width"
       everywhere inside it. 100vw would also be context-free but adds the
       scrollbar width, putting the slider a few pixels off the page's own boxed
       containers, which measure themselves with percentages. */
    --mcd-box-inset: max(var(--mcd-box-padding), (100cqw - var(--mcd-box-max-width)) / 2);

    /* AUTOMATIC alignment (data-mcd-align="container"). When the widget is placed
       INSIDE the page's boxed container, the distance from the page edge to the
       container's content edge is simply half the difference between the viewport
       and the widget's own width — no max-width and no padding to guess at, so it
       is exact at every breakpoint and survives any container change.
       --mcd-viewport-width is written by the controller as the real
       documentElement.clientWidth. The 100vw fallback keeps it working before the
       script runs, just half a scrollbar off. */
    --mcd-bleed: max(0px, (var(--mcd-viewport-width, 100vw) - 100cqw) / 2);

    /* Distance the section's content is pushed in from the page edge. 0 in full
       mode; set per alignment mode in section 6b. Having one name for it is what
       lets the photo work out where the card starts. */
    --mcd-section-inset: 0px;

    /* The intro column as a unitless ratio so the same number can size the grid
       track AND tell the photograph how far it must stretch to meet the card. */
    --mcd-intro-column-ratio: var(--mcd-intro-column-ratio-custom, 0.34);
    --mcd-intro-column-min: 18em;
    /* Extra nudge applied to the card's left edge in the narrow-desktop band.
       A token rather than a bare margin because the photograph's reach has to
       know about it — otherwise the picture stops short of the card by exactly
       this much, but only between 1025px and 1200px, which is a horrible bug to
       find by eye. */
    --mcd-card-offset: 0px;

    /* ---- Layout: spacing ----
       Per side, for the same reason the radii are per corner: a DIMENSIONS
       control leaves untouched fields empty, and Elementor discards a whole
       `selectors` property string if any placeholder in it is empty. One side per
       token and one side per selectors entry keeps each side independent. */
    --mcd-intro-padding-top: var(--mcd-intro-padding-top-custom, 0);
    --mcd-intro-padding-right: var(--mcd-intro-padding-right-custom, clamp(1.5em, 4.5vw, 4.5em));
    --mcd-intro-padding-bottom: var(--mcd-intro-padding-bottom-custom, clamp(2.5em, 6vw, 5em));
    --mcd-intro-padding-left: var(--mcd-intro-padding-left-custom, clamp(1.5em, 4.5vw, 4.5em));

    --mcd-header-padding-top: var(--mcd-header-padding-top-custom, 1.5em);
    --mcd-header-padding-right: var(--mcd-header-padding-right-custom, clamp(1.5rem, 4vw, 4rem));
    --mcd-header-padding-bottom: var(--mcd-header-padding-bottom-custom, 1.5em);
    --mcd-header-padding-left: var(--mcd-header-padding-left-custom, clamp(1.5rem, 4vw, 4rem));

    /* ---- ONE VERTICAL RHYTHM FOR THE CARD ----
       The distance from the header label down to the divider was measured on the
       live page and is now the single spacing unit for everything below it:

           divider  -> question
           question -> answer
           answer   -> name
           card bottom padding

       Measured header gap, and the values this reproduces:
           1440px  37.05px   (2.3rem  = 36.8px)
           1920px  57.20px   (2.98vw  = 57.2px)
           2560px  68.09px   (4.26rem = 68.2px)

       rem AND vw, DELIBERATELY NEVER em. This one value is consumed on the
       slides area, on the slide, and on the answer — three elements whose
       font-sizes differ by a factor of three (the quote alone is up to 2.7em).
       An em here would come out three times larger on the quote than on the
       card padding, which is the exact trap section 2's header warns about.

       The header's own gap is left alone: it is padding plus the slack from
       centring a 20px label against a 48px arrow, and reproducing that formula
       would drag --mcd-nav-size (an em value) into a token consumed on the
       quote. Matching the measurement is what was asked for and is stable. */
    --mcd-card-rhythm: var(--mcd-card-rhythm-custom, 2.3rem);

    /* How many lines of answer the card reserves room for. Same mechanism as
       the mobile budget; see .mcd-slider__quote. */
    --mcd-answer-lines: var(--mcd-answer-lines-custom, 6);

    /* How far the name and position are lifted towards the quote, WITHOUT the
       card changing height. Whatever comes off the gap above them is added back
       below them, so the answer column measures the same and the card — which is
       sized by that column — does not move. Half the rhythm by default. */
    --mcd-attribution-lift: var(--mcd-attribution-lift-custom, calc(var(--mcd-card-rhythm) / 2));

    --mcd-body-padding-top: var(--mcd-body-padding-top-custom, var(--mcd-card-rhythm));
    --mcd-body-padding-right: var(--mcd-body-padding-right-custom, clamp(2.5em, 6vw, 3.5em));
    --mcd-body-padding-bottom: var(--mcd-body-padding-bottom-custom, var(--mcd-card-rhythm));
    --mcd-body-padding-left: var(--mcd-body-padding-left-custom, clamp(2.5em, 6vw, 3.5em));

    --mcd-item-gap: var(--mcd-item-gap-custom, var(--mcd-card-rhythm));
    --mcd-answer-gap: var(--mcd-answer-gap-custom, var(--mcd-card-rhythm));
    --mcd-answer-indent: var(--mcd-answer-indent-custom, clamp(0em, 20%, 16em));
    --mcd-answer-max-width: var(--mcd-answer-max-width-custom, 46em);

    /* ---- Card radius (single knob for all four corners) ---- */
    --mcd-card-radius: var(--mcd-card-radius-custom, var(--mcd-slider-radius));

    /* ---- Image: default is a contained bottom-left portrait that never
       overlaps the copy. ---- */
    --mcd-photo-width: var(--mcd-photo-width-custom, auto);
    --mcd-photo-height: var(--mcd-photo-height-custom, min(34.5vw, calc(100svh - 17.25em)));
    --mcd-photo-max-width: var(--mcd-photo-max-width-custom, 890px);
    --mcd-photo-max-height: var(--mcd-photo-max-height-custom, 645px);
    --mcd-photo-aspect: 11 / 8;

    /* FOUR SEPARATE CORNERS, DELIBERATELY NOT A 4-VALUE SHORTHAND.
       Elementor's DIMENSIONS control expands to `{{TOP}}{{UNIT}}` per field and
       always emits {{UNIT}}. So an UNLINKED control with only the Top field
       filled produces `25px px px px`. Fed to a single `border-radius`, that is
       an invalid value and the browser throws away the ENTIRE declaration: all
       four corners drop to 0, the upper-left looks like it refuses to change,
       and the two rounded right corners silently vanish with it.
       Split into longhands, a blank field can only ever zero its own corner. */
    --mcd-photo-radius-tl: var(--mcd-photo-radius-tl-custom, 0);
    --mcd-photo-radius-tr: var(--mcd-photo-radius-tr-custom, 25px);
    --mcd-photo-radius-br: var(--mcd-photo-radius-br-custom, 25px);
    --mcd-photo-radius-bl: var(--mcd-photo-radius-bl-custom, 0);

    --mcd-photo-object-position: var(--mcd-photo-object-position-custom, center);

    /* ---- Mobile knobs (all consumed in section 8) ----
       Declared here so the full token surface is readable in one place; section
       8 re-defaults them per breakpoint. gap = page edge to card edge,
       inset = card edge to copy. */
    --mcd-slider-mobile-gap: var(--mcd-slider-mobile-gap-custom, 12px);
    --mcd-slider-mobile-inset: var(--mcd-slider-mobile-inset-custom, 20px);
    /* The bottom band: how wide the photograph's column is as a share of the
       card's content width, how far the name sits from it, and how far the
       picture runs past the card's left edge towards the page edge. */
    --mcd-mobile-photo-column: var(--mcd-mobile-photo-column-custom, 42%);
    --mcd-mobile-photo-gap: var(--mcd-mobile-photo-gap-custom, 1.25rem);
    --mcd-mobile-photo-bleed: var(--mcd-mobile-photo-bleed-custom, calc(var(--mcd-slider-mobile-gap) + var(--mcd-body-padding-left)));

    /* Frosted-glass card (mobile and tablet only — see section 8). */
    --mcd-glass-opacity: var(--mcd-glass-opacity-custom, 72%);
    --mcd-glass-blur: var(--mcd-glass-blur-custom, 14px);
    --mcd-glass-saturate: 1.35;

    /* ---- Motion (see section 7). The Transition duration control writes
       --mcd-motion-duration-custom. The exit is deliberately shorter than the
       entrance so consecutive slides never appear to queue. ---- */
    --mcd-motion-in: var(--mcd-motion-duration-custom, 750ms);
    --mcd-motion-out: calc(var(--mcd-motion-in) * 0.55);
    --mcd-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mcd-motion-shift: 1.15rem;
    --mcd-photo-zoom: 1.045;

    font-family: Inter, system-ui, -apple-system, sans-serif;

    /* THE TEXT COLOUR CONTROL HAS TO LAND SOMEWHERE, AND IT DIDN'T.
       --mcd-slider-ink was declared and then consumed by exactly one thing: the
       navigation chevron. No rule ever set `color` on the slider, so the title,
       the quote and the name simply inherited whatever the theme puts on <body>
       — which on this site is a grey. Setting Style > MCD Style > Text to black
       changed the arrows and nothing else, and the copy stayed grey.
       Declaring it here, once, on the root is what makes the control mean what
       it says: everything inherits from it, and the parts that are deliberately
       NOT ink (the red question, the muted role) still override locally. */
    color: var(--mcd-slider-ink);

    /* Mobile browsers paint a translucent box over whatever you tap. It ignores
       border-radius on most Android builds, which is why it reads as a blue
       SQUARE behind a rounded button. The property is inherited, so declaring it
       once on the root covers every interactive element in the slider.
       Suppressing it removes the only touch feedback the UA gave us, so the
       :active state further down puts a deliberate one back. */
    -webkit-tap-highlight-color: transparent;
}

.mcd-elementor-slider,
.mcd-elementor-slider *,
.mcd-elementor-slider *::before,
.mcd-elementor-slider *::after {
    box-sizing: border-box;
}

/* ============================================================
   3. DESKTOP COMPOSITION (split: intro | card)
   ============================================================ */

.mcd-elementor-slider {
    display: grid;
    grid-template-columns: minmax(var(--mcd-intro-column-min), calc(var(--mcd-intro-column-ratio) * 100%)) 1fr;
    align-items: start;
    block-size: auto;
    /* No 100svh floor. With a content-sized card, forcing the section to a full
       viewport would just move the same slack outside the card — a band of bare
       background under it instead of inside it. The section is now as tall as
       the composition plus one inset above and below. */
    min-height: 0;
    position: relative;
    background-color: var(--mcd-slider-bg);
    /* The title and card begin on one shared horizontal edge. */
    padding-top: var(--mcd-slider-top-inset);
    padding-bottom: var(--mcd-slider-top-inset);
}

/* Left intro panel — no top padding so the headline tops out at the card's edge */
.mcd-slider__intro {
    padding-top: var(--mcd-intro-padding-top);
    padding-right: var(--mcd-intro-padding-right);
    padding-bottom: var(--mcd-intro-padding-bottom);
    padding-left: var(--mcd-intro-padding-left);
}

.mcd-slider__title {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(3em, 6vw, 5.5em);
    line-height: 0.95;
    letter-spacing: 0.01em;
    margin: 0 0 0.4em;
}

/* No `color` here on purpose — it inherits the Text control like everything
   else. This carried a hard-coded #3d3d3b, which is a rule-1 violation twice
   over: it is a design value written as a literal, AND it made the intro
   description the one piece of copy the Text control could never reach. */
.mcd-slider__subtitle {
    max-width: 36ch;
    margin: 0;
    font-size: 1.05em;
    line-height: 1.55;
}

/* Right white card */
.mcd-slider__card {
    background-color: var(--mcd-slider-card);
    border-top-left-radius: var(--mcd-card-radius);
    border-bottom-left-radius: var(--mcd-card-radius);
    margin-left: var(--mcd-card-offset);
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* THE CARD IS SIZED BY ITS CONTENT, so its bottom padding is the rhythm and
       nothing else. It used to be stretched to `100svh - insets`, and because
       the slides area stretches with it, all of that slack piled up BELOW the
       attribution: measured 164px at 1440 and 283px at 2560 against a 37/68px
       rhythm everywhere else in the card.
       The full-height slab was there to give the old bottom-anchored photograph
       somewhere to hang. The photograph now sits inside the card, in the
       answer's own row, so nothing needs the extra height any more. */
    min-height: 0;
}

.mcd-slider__header {
    display: flex;
    align-items: center;
    gap: clamp(1em, 3vw, 2.5em);
    padding-top: var(--mcd-header-padding-top);
    padding-right: var(--mcd-header-padding-right);
    padding-bottom: var(--mcd-header-padding-bottom);
    padding-left: var(--mcd-header-padding-left);
    border-bottom: 1px solid var(--mcd-slider-line);
}

.mcd-slider__header-label {
    margin: 0;
    font-size: 1.1em;
}

.mcd-slider__counter {
    margin: 0 0 0 auto;
    color: var(--mcd-slider-muted);
    white-space: nowrap;
}

/* Reserves the digit column so the header label doesn't shift by a pixel or two
   on every slide change. min-width, not width: `width: 1ch` clipped the moment a
   slider had ten or more slides — and until now this rule matched nothing at all,
   because neither template put the class on the counter spans. */
.mcd-slider__count {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
}

/* ============================================================
   4. NAVIGATION
   ============================================================ */

.mcd-slider__controls {
    display: flex;
    gap: var(--mcd-nav-gap);
}

/* A one-slide slider has inert arrows, so the JS sets [hidden] on them. The
   button's own `display: flex` would otherwise out-rank the UA's
   `[hidden] { display: none }` and leave a focusable no-op in the tab order. */
.mcd-slider__button[hidden] {
    display: none;
}

/* Themes restyle every <button> on the page: pill radii, gradient fills, generous
   padding, min-widths, forced colours, hidden icons. So the BOX GEOMETRY has to be
   !important too, not just the paint.
   Getting this wrong is what turned the mobile arrows into white ovals: with
   width/height sitting on the bare `.mcd-slider__button` (0,1,0) and no
   !important, an ordinary theme rule such as
   `.elementor-widget-container button { padding: 12px 28px }` (0,1,1) simply won
   the width and stretched the square sideways.
   Every value here is still a token, so the Elementor Navigation controls remain
   the source of truth. Never inline a literal into this block. */
.elementor-widget-mcd-quick-questions .mcd-slider__button {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box !important;
    /* Geometry */
    width: var(--mcd-nav-size) !important;
    height: var(--mcd-nav-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    /* Last line of defence: if a theme forces height:auto with !important, the
       ratio still keeps it square rather than letting it become an oval. */
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    /* Paint */
    border: var(--mcd-nav-border-width) solid var(--mcd-nav-border) !important;
    border-top-left-radius: var(--mcd-nav-radius-tl) !important;
    border-top-right-radius: var(--mcd-nav-radius-tr) !important;
    border-bottom-right-radius: var(--mcd-nav-radius-br) !important;
    border-bottom-left-radius: var(--mcd-nav-radius-bl) !important;
    background: var(--mcd-nav-background) !important;
    color: var(--mcd-nav-icon) !important;
    box-shadow: var(--mcd-nav-shadow) !important;
    cursor: pointer;
    /* No double-tap-to-zoom wait on a control whose only job is one tap. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
                transform 0.12s ease;
}

/* Replaces the suppressed tap highlight with feedback we control. It also closes
   a gap the !important block above left open: a theme's own `button:active`
   background could still flash through, because only the normal, hover and
   focus-visible states were being pinned. Colours reuse the existing hover
   controls rather than adding another pair. */
.elementor-widget-mcd-quick-questions .mcd-slider__button:active {
    background: var(--mcd-nav-hover-background-color, var(--mcd-slider-bg)) !important;
    border-color: var(--mcd-nav-hover-border-color, #d6d6d3) !important;
    color: var(--mcd-nav-hover-icon-color, var(--mcd-nav-icon)) !important;
    transform: scale(var(--mcd-nav-active-scale)) !important;
}

/* HOVER IS GATED ON A DEVICE THAT CAN ACTUALLY HOVER.
   A touchscreen has no pointer to move away, so after a tap the browser leaves
   the button matching :hover until something else is tapped — the arrow stayed
   in its hover colour and looked stuck in a pressed state. `@media (hover:
   hover)` is the whole fix: pointer devices keep the hover feedback, touch
   devices get their feedback from :active above, which ends with the finger.
   :focus-visible stays OUTSIDE the query — it is the keyboard affordance and
   must survive on every device. It also cannot cause the same problem, because
   a mouse or touch click does not match :focus-visible. */
@media (hover: hover) {
    .elementor-widget-mcd-quick-questions .mcd-slider__button:hover {
        background: var(--mcd-nav-hover-background-color, var(--mcd-slider-bg)) !important;
        border-color: var(--mcd-nav-hover-border-color, #d6d6d3) !important;
        color: var(--mcd-nav-hover-icon-color, var(--mcd-nav-icon)) !important;
    }
}

.elementor-widget-mcd-quick-questions .mcd-slider__button:focus-visible {
    background: var(--mcd-nav-hover-background-color, var(--mcd-slider-bg)) !important;
    border-color: var(--mcd-nav-hover-border-color, #d6d6d3) !important;
    color: var(--mcd-nav-hover-icon-color, var(--mcd-nav-icon)) !important;
}

.elementor-widget-mcd-quick-questions .mcd-slider__button > svg {
    display: block !important;
    width: var(--mcd-nav-icon-width) !important;
    height: var(--mcd-nav-icon-height) !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Bulletproof arrow visibility regardless of which markup is served: our own
   stroke chevron (.mcd-slider__arrow) OR a stale, cached Elementor filled icon
   (.e-font-icon-svg). Each is styled the way it actually draws.
   The stroke reads --mcd-nav-icon DIRECTLY rather than `currentColor`. Both route
   the Navigation > Icon color control to the glyph, but `currentColor` also hands
   any theme that forces `color: #fff !important` on buttons the power to paint the
   chevron white on a white button — which is exactly how the mobile arrows went
   invisible. Reading the token cannot be hijacked. */
.elementor-widget-mcd-quick-questions .mcd-slider__button .mcd-slider__arrow,
.elementor-widget-mcd-quick-questions .mcd-slider__button .mcd-slider__arrow path {
    stroke: var(--mcd-nav-icon) !important;
    fill: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Same split, same reason: the chevron must not stay in its hover colour after
   a tap either. */
@media (hover: hover) {
    .elementor-widget-mcd-quick-questions .mcd-slider__button:hover .mcd-slider__arrow,
    .elementor-widget-mcd-quick-questions .mcd-slider__button:hover .mcd-slider__arrow path {
        stroke: var(--mcd-nav-hover-icon-color, var(--mcd-nav-icon)) !important;
    }
}

.elementor-widget-mcd-quick-questions .mcd-slider__button:focus-visible .mcd-slider__arrow,
.elementor-widget-mcd-quick-questions .mcd-slider__button:focus-visible .mcd-slider__arrow path {
    stroke: var(--mcd-nav-hover-icon-color, var(--mcd-nav-icon)) !important;
}

.elementor-widget-mcd-quick-questions .mcd-slider__button .e-font-icon-svg,
.elementor-widget-mcd-quick-questions .mcd-slider__button .e-font-icon-svg path {
    fill: var(--mcd-nav-icon) !important;
    stroke: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.elementor-widget-mcd-quick-questions .mcd-slider__button > i {
    color: var(--mcd-nav-icon) !important;
    font-size: 0.9em;
    line-height: 1;
}

/* ============================================================
   5. SLIDES
   ============================================================ */

.mcd-slider__body {
    flex: 1;
    padding-top: var(--mcd-body-padding-top);
    padding-right: var(--mcd-body-padding-right);
    padding-bottom: var(--mcd-body-padding-bottom);
    padding-left: var(--mcd-body-padding-left);
}

/* No position:relative on .mcd-slider__list/.mcd-slider__item — each slide's
   absolutely positioned .mcd-slider__photo must anchor to the
   .mcd-elementor-slider section itself. */
.mcd-slider__list {
    display: grid;
    width: 100%;
    /* Boxed alignment: cap + place the text column (default = full). */
    max-width: var(--mcd-content-max-width);
    margin-inline: var(--mcd-content-margin-inline);
}

.mcd-slider__item {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: var(--mcd-item-gap);
    width: 100%;
}

.mcd-slider__question {
    position: relative;
    z-index: 2;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--mcd-slider-red);
    font-size: clamp(1.35em, 2.1vw, 1.9em);
    line-height: 1.1;
    letter-spacing: 0.015em;
    margin: 0;
}

.mcd-slider__answer {
    position: relative;
    z-index: 2;
    margin-left: var(--mcd-answer-indent);
    max-width: var(--mcd-answer-max-width);
    display: flex;
    flex-direction: column;
    gap: var(--mcd-answer-gap);
}

/* THE CARD RESERVES ROOM FOR --mcd-answer-lines LINES OF ANSWER.
   `1lh` is this element's own computed line box, so N lines is exactly N lines
   whatever sets the type — including Elementor's Typography control, which
   writes straight to this selector and would defeat any calculation that tried
   to restate the font-size and line-height itself. The `em` line above it is
   the pre-2023 fallback and is overridden wherever `lh` parses.
   min-height, never height: a longer answer grows the card rather than being
   cut off. */
.mcd-slider__quote {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.7em, 2.8vw, 2.7em);
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0;
    min-height: calc(var(--mcd-answer-lines) * 1.2em);
    min-height: calc(var(--mcd-answer-lines) * 1lh);
}

.mcd-slider__name {
    margin: 0 0 0.2em;
    font-size: 1.15em;
    font-weight: 500;
}

.mcd-slider__role {
    margin: 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--mcd-slider-muted);
}

/* Per-slide photo: overlaps intro panel and card, bottom left of the section.
   Capped at a fixed max size so it can never blow up. */
.mcd-slider__photo {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: clamp(0px, 1.75svh, 1.25em);
    /* Sizing comes from the image tokens (Elementor controls override them).
       aspect-ratio gives the figure its width from the height. */
    width: var(--mcd-photo-width);
    height: var(--mcd-photo-height);
    aspect-ratio: var(--mcd-photo-aspect);
    max-width: var(--mcd-photo-max-width);
    max-height: var(--mcd-photo-max-height);
    margin: 0;
    border-top-left-radius: var(--mcd-photo-radius-tl);
    border-top-right-radius: var(--mcd-photo-radius-tr);
    border-bottom-right-radius: var(--mcd-photo-radius-br);
    border-bottom-left-radius: var(--mcd-photo-radius-bl);
    overflow: hidden;
    isolation: isolate;
    line-height: 0;
}

.mcd-slider__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mcd-photo-object-position);
    border-radius: inherit;
}

/* ELEMENTOR'S OWN frontend.min.css OUT-RANKS A PLAIN .mcd-* CLASS.
   Two of its resets land squarely on this figure:

     .elementor img { border-radius: 0; height: auto; ... }              (0,1,1)
     .elementor .elementor-widget:not(..):not(..) figure { margin: 0 }   (0,6,1)

   against `.mcd-slider__photo-img` and `.mcd-slider__photo` at (0,1,0). The
   second one is why the mobile card stopped overlapping the photograph
   completely — the negative margin-top was simply thrown away — and the first
   quietly replaced `height: 100%` with `height: auto`, so the image was never
   really filling its frame, it just happened to be close.
   Same treatment as the navigation buttons: geometry gets !important, and every
   value stays a token so the controls keep their say. */
.elementor-widget-mcd-quick-questions .mcd-slider__photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: var(--mcd-photo-object-position) !important;
}

/* ============================================================
   6. DESKTOP REFINEMENTS (> 1024px only — below that, the stacked
   composition in section 8 takes over entirely)
   ============================================================ */

/* The quote used to take an extra `margin: 1em 0 0` here, stacked on top of
   --mcd-item-gap. That made the question -> answer distance the odd one out by
   a whole em, so it could never match the other three however the gap control
   was set. The rhythm is the gap; nothing may add to it. */

/* Portrait and short iPad-class viewports keep the desktop composition; the
   card just needs room to breathe rather than a full viewport. */
@media screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: portrait),
screen and (min-width: 1025px) and (max-width: 1200px) and (max-height: 950px) {
    .mcd-elementor-slider {
        --mcd-card-offset: 30px;
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }
}

/* TWO BANDS OF HAND-PLACED PHOTO ARITHMETIC USED TO LIVE HERE.
   Both computed a `top` for the absolutely positioned figure by adding up the
   section inset, the header, the padding, the question and the gap — a rebuild
   of the layout in one calc(), maintained in parallel with the layout itself
   and drifting whenever either changed. One of them also pinned the card to a
   HEIGHT derived from that estimate, which fought the content.
   Section 6c puts the figure in the same grid row as the answer, so its top
   lands on the answer's first line exactly and none of it has to be computed.
   The estimates are gone rather than corrected. */

@media screen and (min-width: 1201px) and (max-height: 1100px) and (orientation: landscape) {
    .mcd-elementor-slider {
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }
}

/* On very wide canvases, retain the reference proportions. The photo keeps the
   base bottom anchoring here: an earlier `bottom: auto` in this block left it
   with neither `top` nor `bottom` on tall 1600px+ screens, which dropped it to
   its static position at the end of the flex column. */
/* ============================================================
   6c. DESKTOP BOTTOM BAND — photo beside the answer
   ------------------------------------------------------------
   The photograph shares a GRID ROW with the answer, both `align-self: start`,
   so its top edge lands on the answer's first line exactly. That relationship
   cannot be built from arithmetic: it would have to add up the top inset, the
   header, the slides-area padding, the question and the gap, and two of those
   terms are `em` values resolved against elements with different font-sizes —
   the nav button does not inherit the section's font-size, so a 3em button is
   48px where the same expression on the section gives 46.08px. Measured out,
   that approach lands about 2px low. A shared row is exact by construction.

   The picture keeps its left edge on the HEADLINE, not on the page edge. It
   sits inside the card now, so it escapes leftwards with a negative margin, and
   that distance is spelled out below in cqw for the usual reason: it is read
   inside the card, where a percentage would resolve against the card rather
   than the slider.
   ============================================================ */

@media screen and (min-width: 1025px) {
    .mcd-elementor-slider {
        --mcd-desktop-photo-gap: var(--mcd-desktop-photo-gap-custom, clamp(2rem, 3vw, 4rem));

        /* THE PICTURE'S WIDTH IS DERIVED FROM ITS OVERLAP, NOT GUESSED.
           Its left edge is pinned to the headline, so the only free variable is
           how far it reaches INTO the white card — and that is what should be
           controlled, because it is what you actually look at.

           `reach` is headline -> card edge. Everything in it is a token, so the
           picture follows the alignment mode, the container width and the
           intro-column ratio without being told about any of them. 100cqw, not
           100%: it is read inside the card, where a percentage would resolve
           against the card rather than the slider.

           How far it reaches into the card is set to land its RIGHT EDGE on the
           right edge of the next arrow — a landmark you can see, rather than a
           ratio you have to trust. That distance is, from the card's edge:
               header padding-left + prev button + gap + next button
           All four are tokens, so the picture re-aligns itself when Button size,
           Button spacing or Header padding change.
           This is why --mcd-nav-size and --mcd-nav-gap had to leave `em`
           behind: read here they resolve against the SLIDE, and a button does
           not inherit font-size, so the em version was ~4px out over two
           buttons. */
        --mcd-desktop-photo-reach: calc(
            var(--mcd-intro-column-ratio) * (100cqw - var(--mcd-section-inset))
            + var(--mcd-card-offset)
            - var(--mcd-intro-padding-left)
        );
        --mcd-desktop-photo-into-card: var(--mcd-desktop-photo-into-card-custom, calc(
            var(--mcd-header-padding-left)
            + 2 * var(--mcd-nav-size)
            + var(--mcd-nav-gap)
        ));

        /* The grid column is only the part inside the slides area; the rest of
           the picture is the negative margin below. */
        --mcd-desktop-photo-column: var(--mcd-desktop-photo-column-custom, calc(var(--mcd-desktop-photo-into-card) - var(--mcd-body-padding-left)));
        --mcd-desktop-photo-bleed: calc(var(--mcd-desktop-photo-reach) + var(--mcd-body-padding-left));

        /* Auto = fill the row the answer sets. See .mcd-slider__photo for why
           the picture cannot make the card taller whatever this is set to. */
        --mcd-photo-height: var(--mcd-photo-height-custom, auto);

        /* It no longer runs off the page, so every corner is rounded. */
        --mcd-photo-radius-tl: var(--mcd-photo-radius-tl-custom, 25px);
        --mcd-photo-radius-bl: var(--mcd-photo-radius-bl-custom, 25px);
        /* Width comes from the column; the ratio must not fight it. */
        --mcd-photo-width: var(--mcd-photo-width-custom, auto);
        --mcd-photo-aspect: auto;
        --mcd-photo-max-width: var(--mcd-photo-max-width-custom, none);
    }

    .mcd-slider__item {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, var(--mcd-desktop-photo-column)) minmax(0, 1fr);
        grid-template-areas:
            "question question"
            "photo    answer";
        column-gap: var(--mcd-desktop-photo-gap);
        row-gap: var(--mcd-item-gap);
    }

    .mcd-slider__question { grid-area: question; }

    /* The photo column now provides the indent, so the manual one would double
       it. Style > Layout > Quote indent is superseded above 1024px. */
    .mcd-slider__answer {
        grid-area: answer;
        align-self: start;
        margin-left: 0;
    }

    /* THE CARD'S HEIGHT IGNORES THE PICTURE ENTIRELY.
       An absolutely positioned child of a grid container can still be PLACED in
       a named area — it just contributes nothing to track sizing. That is the
       whole trick here: the picture occupies the photo area visually, its top
       and bottom are tied to the answer beside it, and the row is sized by the
       copy alone. The card therefore ends one rhythm below the role line no
       matter how tall the image is.
       `align-self: stretch` would have got the common case right and the edge
       case wrong: a definite height switches stretching off, and the figure
       would have gone back to driving the row. Out of flow, an Image height set
       by hand simply draws shorter or taller within the area and the card never
       notices.

       The bleed lives in `inset` rather than a negative margin now, so there is
       no margin to protect from Elementor's `figure { margin: 0 }` — that rule
       does what we want here. */
    /* LIFTED, AT NO COST TO THE CARD'S HEIGHT.
       The negative top margin closes part of the gap under the quote; the
       positive bottom margin gives the same amount back inside the answer
       column. The column's height is therefore unchanged, and so is the card's,
       and so is the picture's — only the two lines of copy move.
       Clamped to the gap it is closing: a lift larger than that would pull the
       name up into the quote. */
    .mcd-slider__attribution {
        margin-top: calc(-1 * min(var(--mcd-attribution-lift), var(--mcd-answer-gap)));
        margin-bottom: min(var(--mcd-attribution-lift), var(--mcd-answer-gap));
    }

    .mcd-slider__photo {
        grid-area: photo;
        position: absolute;
        inset: 0 0 0 calc(-1 * var(--mcd-desktop-photo-bleed));
    }
}

@media screen and (min-width: 1600px) {
    .mcd-elementor-slider {
        --mcd-nav-size: var(--mcd-nav-size-custom, clamp(3rem, 3vw, 4rem));
        /* Roomier default proportions on very wide canvases. Re-defaulted, not
           hard-coded, so the Header/Slides-area padding controls still win here. */
        --mcd-header-padding-top: var(--mcd-header-padding-top-custom, clamp(1.5em, 2vw, 3em));
        --mcd-header-padding-bottom: var(--mcd-header-padding-bottom-custom, clamp(1.5em, 2vw, 3em));
        /* One re-default now carries all four distances. It tracks the header
           gap, which grows here because BOTH the arrows (3vw) and the header
           padding (2vw) scale above this width. */
        --mcd-card-rhythm: var(--mcd-card-rhythm-custom, clamp(2.3rem, 2.98vw, 4.26rem));
    }
}

/* ============================================================
   6b. CONTAINER ALIGNMENT (desktop)
   ------------------------------------------------------------
   The section stays edge to edge: the background and the white card still reach
   the full width of the page. What moves inwards is the CONTENT, so the intro
   headline, the card's copy and the photograph all line up with the boxed
   containers above and below the slider.

   TEXT ONLY. The photograph deliberately stays flush to the page edge — it is
   part of the full-bleed composition, not part of the text grid.

   The two text moves need different mechanisms because the two things are
   positioned differently:

     1. The intro column is grid content, so section padding-left shifts it.
     2. The card bleeds right on purpose, so its own inner padding is what pulls
        its text back to the box's right edge — padding on the section would drag
        the whole white surface inwards.

   The photo needs no rule at all, and that is not an accident of the cascade:
   an absolutely positioned box resolves against its containing block's PADDING
   box, so the section's padding-left cannot move it. `left: 0` keeps meaning
   "the page edge" whether alignment is on or off.

   Style > Layout > Desktop content alignment switches this off.
   ============================================================ */

/* Guarded so that a browser without container queries falls back to the previous
   edge-to-edge layout rather than to a broken one: without cqw support the inset
   calc() is invalid at computed-value time, and padding-left would silently
   compute to 0 anyway — the guard just makes that explicit and predictable. */
@supports (container-type: inline-size) {

/* --- Which inset each mode uses ------------------------------------------- */

/* MANUAL: derived from Elementor's container variables plus a padding you tune
   per device. Correct wherever the widget lives, but it cannot see nested
   container padding, so the number usually needs setting by hand. */
.mcd-elementor-slider[data-mcd-align="boxed"] {
    /* --mcd-measured-inset is written by the controller after measuring where the
       page's own boxed container actually starts. It is a resolved px length, so
       it is both correct (it sees nested container padding, which CSS cannot) and
       context-free. The calculated value below is the fallback for when there is
       no boxed container to measure, or the editor has typed a padding by hand. */
    --mcd-section-inset: var(--mcd-measured-inset, var(--mcd-box-inset));
}

/* AUTOMATIC: the widget sits INSIDE the page's boxed container. The section
   bleeds back out to the page edges with a negative margin and then pads its
   content in by the same amount, so the copy lands exactly on the container's
   content edge with nothing to configure. If the widget is in a full-width
   container the bleed is 0 and this behaves like "full", which makes it a safe
   thing to switch on before moving the widget. */
.mcd-elementor-slider[data-mcd-align="container"] {
    --mcd-section-inset: var(--mcd-bleed);
    margin-inline: calc(-1 * var(--mcd-bleed));
    width: auto;
}

/* --- Desktop: shift the grid, pull the card's copy back in ----------------- */

@media screen and (min-width: 1025px) {
    .mcd-elementor-slider[data-mcd-align="boxed"],
    .mcd-elementor-slider[data-mcd-align="container"] {
        /* 1. Shifts the grid, and with it the intro column. */
        padding-left: var(--mcd-section-inset);

        /* The inset REPLACES the design's own outer padding — never adds to it.
           Adding produced a doubled gutter: the headline landed at
           section-inset + intro-padding, well inside the boxed headings it is
           meant to line up with. Re-defaulted, not hard-coded, so the padding
           controls still override per device. */
        --mcd-intro-padding-left: var(--mcd-intro-padding-left-custom, 0px);
        --mcd-header-padding-right: var(--mcd-header-padding-right-custom, var(--mcd-section-inset));
        --mcd-body-padding-right: var(--mcd-body-padding-right-custom, var(--mcd-section-inset));
    }

    /* 2. The photograph is NOT part of the text grid: it stays flush to the page
       edge and instead stretches right until it meets the card and laps over it.
       Its width used to come from the 11:8 ratio applied to a viewport-height
       capped height, so on wide-but-short screens it shrank and left a gap
       between the picture and the copy.
       `100%` is correct here precisely because the figure is absolutely
       positioned: its containing block is the section's padding box, so the
       percentage measures the section — the one place in this stylesheet where a
       percentage is the right tool rather than a container query unit. */
    .mcd-elementor-slider {
        /* The width used to be measured from the PAGE EDGE across to the card.
           The picture now starts on the headline and its width comes from its
           grid column, so that calculation would only fight section 6c — and,
           being later in the file at equal specificity, it would win. */
        --mcd-photo-max-width: var(--mcd-photo-max-width-custom, none);
    }
}

/* --- Mobile and tablet: stacked, so the gutters are the intro padding and the
   card's side margin. Same inset, which is what makes one control align every
   breakpoint. Without this the system stopped at 1025px and nothing a user could
   set would move the mobile copy. ---

   WHAT LINES UP IS THE COPY, NOT THE CARD. Below 1025px the card is an inset
   panel with its own inner padding, so the text starts at
   `card side margin + inner padding`. Feeding the section inset straight into
   the side margin therefore landed the card's copy one full inner padding to the
   right of the intro headline directly above it — 20px out at the default, and
   visible the moment you put a straight edge on the screen.
   The card margin is the inset MINUS the padding the card adds back, so the
   question and the headline share one left edge.

   THE FLOOR IS NOT DEFENSIVE, IT IS LOAD-BEARING. This subtraction reaches 0 on
   any page whose container inset is no bigger than the card's own text padding
   — which is the common case on a phone, where containers are typically around
   20px and so is the padding. At 0 the card stops being a card: it runs flush
   into both edges of the screen and the rounded corners have nothing to sit
   against. That is what happened on the live site.
   So the gap is `max(floor, inset - padding)`: alignment still wins wherever
   there is room for it, and where there is not, the card keeps a visible margin
   and the copy sits one floor-width inside the page container instead of
   lining up with it exactly. Losing a few pixels of alignment is the right
   trade against losing the card. The floor is per breakpoint — see
   --mcd-slider-mobile-gap-min in sections 8 and 8b. */

@media screen and (max-width: 1024px) {
    /* ONLY THE GAP IS SET HERE. The intro padding used to be overridden to the
       raw section inset alongside it, which was correct only while the gap was
       exactly `inset - padding`. With the floor in play they can disagree — and
       then the headline would sit on the container edge while the question
       below it sat one floor-width further in, which is the very misalignment
       this block exists to prevent.
       Section 8 already defaults the intro padding to `gap + padding`, reading
       whichever gap wins here. Leaving it alone therefore keeps the headline on
       the question's left edge in BOTH cases, and still lands both on the
       container edge whenever the floor is not binding. */
    .mcd-elementor-slider[data-mcd-align="boxed"],
    .mcd-elementor-slider[data-mcd-align="container"] {
        --mcd-slider-mobile-gap: var(--mcd-slider-mobile-gap-custom, max(var(--mcd-slider-mobile-gap-min), var(--mcd-section-inset) - var(--mcd-slider-mobile-inset)));
    }
}

}

/* ============================================================
   7. MOTION
   ------------------------------------------------------------
   Two paths share one set of tokens.

   (a) DEFAULT — compositor-only CSS transitions on exactly three boxes per
       slide: question, answer, image. No animation library, no per-line DOM, no
       clip-path repaints. This is what phones and tablets get, and it is also
       what runs on desktop until GSAP has finished loading.

   (b) UPGRADED — the JS adds .mcd-has-gsap once GSAP + SplitText are live and it
       has taken ownership of the inline styles. Everything in (a) is switched
       off there, or GSAP's writes would be double-animated by the CSS
       transitions still attached to the same properties.
   ============================================================ */

.mcd-slider__item {
    visibility: hidden;
    /* Hold visibility until the outgoing parts have finished fading. */
    transition: visibility 0s linear var(--mcd-motion-out);
}

.mcd-slider__item.is-active {
    visibility: visible;
    transition: visibility 0s;
}

/* THE ANIMATED SET IS THE CONTENT, NOT THE SURFACES.
   These used to be .mcd-slider__question and .mcd-slider__answer — the very
   elements that carry the white/frosted band backgrounds on mobile, so the panels
   slid and faded along with the words. Targeting the copy inside them keeps the
   card perfectly still while only the text and the photograph move. */
.mcd-slider__question-text,
.mcd-slider__quote,
.mcd-slider__attribution,
.mcd-slider__photo-img {
    opacity: 0;
    transition: opacity var(--mcd-motion-out) var(--mcd-motion-ease),
                transform var(--mcd-motion-out) var(--mcd-motion-ease);
}

.mcd-slider__question-text,
.mcd-slider__quote,
.mcd-slider__attribution {
    display: block;
    transform: translate3d(0, var(--mcd-motion-shift), 0);
}

.mcd-slider__photo-img {
    transform: scale(var(--mcd-photo-zoom));
}

.mcd-slider__item.is-active .mcd-slider__question-text,
.mcd-slider__item.is-active .mcd-slider__quote,
.mcd-slider__item.is-active .mcd-slider__attribution,
.mcd-slider__item.is-active .mcd-slider__photo-img {
    opacity: 1;
    transform: none;
    transition-duration: var(--mcd-motion-in);
}

/* The entrance is held back until the outgoing slide is most of the way gone.
   Both slides occupy the same grid cell over opaque card surfaces, so a fully
   simultaneous crossfade would briefly double-expose two blocks of copy. The
   staggered offsets then read as choreography without costing a single extra
   element or a single extra animated property. */
.mcd-slider__item.is-active .mcd-slider__photo-img { transition-delay: calc(var(--mcd-motion-out) * 0.3); }
.mcd-slider__item.is-active .mcd-slider__question-text { transition-delay: calc(var(--mcd-motion-out) * 0.55); }
.mcd-slider__item.is-active .mcd-slider__quote { transition-delay: calc(var(--mcd-motion-out) * 0.8); }
.mcd-slider__item.is-active .mcd-slider__attribution { transition-delay: calc(var(--mcd-motion-out) * 0.95); }

/* Promote to a layer only while a transition is actually running (the JS adds
   .is-animating to the root), so idle slides never hold GPU memory. */
.mcd-elementor-slider.is-animating:not(.mcd-has-gsap) .mcd-slider__question-text,
.mcd-elementor-slider.is-animating:not(.mcd-has-gsap) .mcd-slider__quote,
.mcd-elementor-slider.is-animating:not(.mcd-has-gsap) .mcd-slider__attribution,
.mcd-elementor-slider.is-animating:not(.mcd-has-gsap) .mcd-slider__photo-img {
    will-change: opacity, transform;
}

/* Script blocked or still loading: the first slide must be readable and the
   image must be visible. The JS sets data-mcd-ready as soon as it takes over. */
.mcd-elementor-slider:not([data-mcd-ready]) .mcd-slider__item.is-active,
.mcd-elementor-slider:not([data-mcd-ready]) .mcd-slider__item.is-active .mcd-slider__question-text,
.mcd-elementor-slider:not([data-mcd-ready]) .mcd-slider__item.is-active .mcd-slider__quote,
.mcd-elementor-slider:not([data-mcd-ready]) .mcd-slider__item.is-active .mcd-slider__attribution,
.mcd-elementor-slider:not([data-mcd-ready]) .mcd-slider__item.is-active .mcd-slider__photo-img {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* (b) GSAP owns the inline styles from here on: hand it clean, untransitioned
   boxes. It animates the SplitText lines and the image clip-path itself. */
.mcd-elementor-slider.mcd-has-gsap .mcd-slider__item,
.mcd-elementor-slider.mcd-has-gsap .mcd-slider__question-text,
.mcd-elementor-slider.mcd-has-gsap .mcd-slider__quote,
.mcd-elementor-slider.mcd-has-gsap .mcd-slider__attribution,
.mcd-elementor-slider.mcd-has-gsap .mcd-slider__photo-img {
    transition: none;
    transform: none;
    opacity: 1;
}

.mcd-elementor-slider.mcd-has-gsap.is-animating .mcd-slider__line { will-change: transform; }
.mcd-elementor-slider.mcd-has-gsap.is-animating .mcd-slider__photo-img { will-change: clip-path; }

/* Keeps descenders visible inside SplitText line masks, which GSAP gives
   `overflow: clip`. Must stay below 0.1 x line-height so lines parked at
   yPercent 110 don't peek through.
   The mask class is DERIVED by GSAP from linesClass, not taken literally: for
   linesClass "mcd-slider__line", GSAP 3.13 emits "mcd-mask-slider__line-mask".
   This rule previously hard-coded ".mcd-slider__line-mask", matched nothing, and
   left every descender in the questions and quotes clipped on desktop. Matching
   on the suffix survives that naming scheme changing again. */
.mcd-elementor-slider [class*="line-mask"] {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

@media (prefers-reduced-motion: reduce) {
    .mcd-elementor-slider {
        /* Keep a short crossfade — opacity alone is not vestibular motion — but
           drop every distance and scale change. */
        --mcd-motion-in: 200ms;
        --mcd-motion-out: 200ms;
        --mcd-motion-shift: 0px;
        --mcd-photo-zoom: 1;
    }

    .mcd-elementor-slider .mcd-slider__line,
    .mcd-elementor-slider .mcd-slider__question,
    .mcd-elementor-slider .mcd-slider__answer,
    .mcd-elementor-slider .mcd-slider__photo-img { will-change: auto; }
}

/* ============================================================
   8. MOBILE + TABLET (<= 1024px) — "photo inside the card"
   ------------------------------------------------------------
   Intro, then ONE white rounded card holding the red question and the quote.
   The photograph and the navigation arrows STRADDLE THE CARD'S BOTTOM BORDER —
   each is centred on it, half inside the white and half below — and the
   photograph additionally bleeds off the LEFT EDGE OF THE SCREEN.

       ┌ page ───────────────────────────────┐
       │  QUICK QUESTIONS                    │
       │  Antworten aus dem Team …           │
       │  ┌ card ─────────────────────────┐  │
       │  │ WHAT MOTIVATES YOU …          │  │
       │  │ „SOLVING COMPLEX TESTS …“     │  │
       │ ▓▓▓▓▓▓▓▓│ Hannes Panitz         │  │
       │ ▓ photo │ Application Eng.      │  │
       │ ▓▓▓▓▓▓▓▓│             ┌───┐┌───┐│  │
       ├─▓▓▓▓▓▓▓─┴─────────────┤ ‹ ││ › ├┴──┤ ← the card's bottom border
       │ ▓▓▓▓▓▓▓                └───┘└───┘   │
       └─────────────────────────────────────┘
         ↑ to x = 0      ↑ both boxes centred on that border

   FOUR THINGS ARE LOAD-BEARING HERE.

   1. The card is ONE opaque surface again. It used to be transparent with the
      header, question and answer each painting their own white band, because
      the photo sat BEHIND the copy and each band needed its own frosted fill.
      The photo is now a sibling of the copy, never behind it, so one background
      on .mcd-slider__card is both correct and one less seam to keep aligned.

   2. The bottom band is a two-column GRID ROW, and its three occupants live at
      three different depths of the markup: the figure is a child of the slide,
      the attribution is a grandchild (inside .mcd-slider__answer), and the
      arrows are outside the slide altogether, in the header. So:
        - .mcd-slider__answer takes `display: contents`, which lifts the quote
          and the attribution into the slide's own grid;
        - the arrows stay absolutely positioned against the card.
      Nothing here needs a markup change, which is what keeps render() and
      content_template() identical to the desktop composition.

   3. The photo escapes the card with a NEGATIVE MARGIN, not a wider column.
      Its grid track sets the RIGHT edge; the margin pulls the LEFT edge out to
      the page. That is why the figure keeps `width: auto` — a grid item at
      `justify-self: stretch` fills its track, so the margin lengthens the box
      instead of sliding it, and the right edge stays exactly on the column
      boundary the name is measured from.

   4. The overhang is a negative BOTTOM margin for the same reason, and this is
      the subtle one. The figure is in flow, so the margin does two jobs at
      once: it drops the picture below the border AND it shrinks what the grid
      row reserves to the upper half. A transform would have done only the
      first — the full height would still have been reserved inside the card, so
      the card would have grown by the same amount it dropped, and the border
      would have crossed the picture's lower third instead of its middle. The
      arrows are already out of flow, so there `translateY(50%)` is exact and
      needs no arithmetic at any button size.
      The card carries a matching bottom MARGIN so the section, which is
      `overflow: hidden`, actually contains the overhang instead of clipping it.

   This is a DEFAULT-SWAP zone. Re-declare tokens; do not hard-code.
   ============================================================ */

@media screen and (max-width: 1024px) {
    /* Zero the widget's own horizontal padding so the slider fills its box edge
       to edge (the parent Elementor container should also be full width with 0
       side padding on mobile).
       This out-ranks Elementor's Advanced > Padding, so it is gated on the
       "Mobile: full-bleed" switcher rather than applied unconditionally — an
       unconditional !important here is a silently dead Elementor control, which is
       the same defect as a hard-coded radius. Turn the switcher off and the
       Advanced > Padding values apply normally.
       :has() is the only way to key a wrapper rule off widget markup, since the
       wrapper element belongs to Elementor and render() cannot add attributes to
       it. If a browser lacks :has() the rule is simply dropped and the padding
       applies — the safe direction to fail. */
    .elementor-widget-mcd-quick-questions:has([data-mcd-fullbleed="yes"]) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Natural height — NO 100svh. The old full-height logic broke on live
       whenever the slider wasn't exactly 100svh (empty gaps, tiny image).
       Everything below flows normally and the image has a fixed height, so it is
       bulletproof regardless of the container. */
    .elementor-widget-mcd-quick-questions .mcd-elementor-slider {
        block-size: auto;
        min-block-size: 0;
    }

    .mcd-elementor-slider {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
        padding-top: 0;

        /* ---- Mobile default swaps ---- */
        /* Card radius: mobile has a softer default. Because --mcd-card-radius
           resolves --mcd-slider-radius as its fallback, re-defaulting the
           primitive here leaves the Card corner radius control in charge. */
        --mcd-slider-radius: 1.5rem;

        /* THE TWO GUTTERS, AND WHY THEY ARE SEPARATE.
             gap   = page edge  -> card edge   (the card floats in the page)
             inset = card edge  -> copy        (the card's own inner padding)
           Every horizontal measurement below is built from these two and
           nothing else, so moving one moves the whole composition coherently:
           the intro copy sits at gap + inset, the card's copy sits at
           gap + inset, and the photo's bleed is exactly gap + inset, which is
           what lands its left edge on the page edge rather than near it. */
        --mcd-slider-mobile-gap: var(--mcd-slider-mobile-gap-custom, 12px);
        --mcd-slider-mobile-inset: var(--mcd-slider-mobile-inset-custom, 20px);
        /* The smallest margin the card is ever allowed between itself and the
           page edge. Internal, not a control: the Mobile card side gap control
           overrides the gap outright, so a floor on top of it would only be a
           way to contradict an explicit value. It exists solely to stop the
           container-alignment maths in section 6b from computing its way to
           zero. Re-defaulted per breakpoint in 8b. */
        --mcd-slider-mobile-gap-min: 12px;

        /* Image: a rounded panel let into the card's bottom-left corner. Only
           the lower-LEFT corner is square, because that is the one corner that
           meets the page edge; the other three sit against the white card and
           are rounded to match it. All four remain controls — this used to be a
           hard `border-radius: 25px 25px 0 0`, which is what made the Image
           border radius control a no-op at 1024px and below. */
        --mcd-photo-radius-tl: var(--mcd-photo-radius-tl-custom, 25px);
        --mcd-photo-radius-tr: var(--mcd-photo-radius-tr-custom, 25px);
        --mcd-photo-radius-br: var(--mcd-photo-radius-br-custom, 25px);
        --mcd-photo-radius-bl: var(--mcd-photo-radius-bl-custom, 0);
        /* AUTO, NOT 100%. The figure is a grid item that must STRETCH to its
           track so the negative margin below lengthens it leftwards instead of
           sliding the whole box (and its right edge) off the column boundary.
           `width: 100%` resolves against the track and would do exactly that. */
        --mcd-photo-width: var(--mcd-photo-width-custom, auto);
        --mcd-photo-height: var(--mcd-photo-height-custom, clamp(10.5rem, 50vw, 13rem));
        /* The desktop 890x645 cap would fight the explicit width/height pair,
           and the 11/8 ratio would fight the stretched track. */
        --mcd-photo-max-width: var(--mcd-photo-max-width-custom, none);
        --mcd-photo-max-height: var(--mcd-photo-max-height-custom, none);
        --mcd-photo-aspect: auto;

        /* ---- The bottom band ----
           The column is a share of the card's CONTENT width, so the picture
           keeps its proportion of the card from a 320px phone to a 1024px
           tablet instead of being a fixed slab that swamps one and vanishes on
           the other. */
        --mcd-mobile-photo-column: var(--mcd-mobile-photo-column-custom, 42%);
        --mcd-mobile-photo-gap: var(--mcd-mobile-photo-gap-custom, 1.25rem);
        /* HOW FAR THE PHOTO AND THE ARROWS HANG BELOW THE CARD.
           The design straddles both on the card's bottom border: half of each
           box inside the white, half outside. They are expressed differently
           on purpose, because the two boxes are in different worlds:

             - the photo is IN FLOW, so its overhang is a negative bottom margin.
               That is what makes the card reserve exactly the upper half and no
               more. A transform would have left the full height inside the card
               AND shifted it down, so the card would have grown instead of
               shrinking and the border would have crossed the picture's lower
               third rather than its middle.
             - the arrows are ABSOLUTE against the card, so nothing needs
               reserving and a percentage transform is exact: translateY(50%)
               resolves against the element's OWN height, so it stays centred on
               the border at any Button size without arithmetic.

           Keep the photo overhang at half of --mcd-photo-height to keep the
           centre on the border; lower it to tuck the picture back in. */
        --mcd-mobile-photo-overhang: var(--mcd-mobile-photo-overhang-custom, calc(var(--mcd-photo-height) / 2));
        /* Half the button's outer height, expressed as a length rather than the
           50% a transform would take. See .mcd-slider__controls for why this is
           not a transform any more.
           NO BORDER TERM. The buttons are `box-sizing: border-box`, so
           --mcd-nav-size IS the outer height, border included. Adding the
           border on top put every arrow 1px below the line — invisible by eye,
           caught by the centre-on-border assertion. */
        --mcd-mobile-nav-overhang: var(--mcd-mobile-nav-overhang-custom, calc(var(--mcd-nav-size) / 2));
        /* How far the photo runs PAST the card's left edge. The default is the
           exact distance to the page edge, so it reads as full-bleed; anything
           larger is clipped by the section's own `overflow: hidden` rather than
           producing a horizontal scrollbar.
           It reads --mcd-body-padding-left (the RESOLVED token, so a Slides-area
           padding override is included) rather than --mcd-slider-mobile-inset,
           because it is the body's padding that actually stands between the
           figure and the card edge. Using the raw inset would leave the photo
           short by the difference the moment that control was touched. */
        --mcd-mobile-photo-bleed: var(--mcd-mobile-photo-bleed-custom, calc(var(--mcd-slider-mobile-gap) + var(--mcd-body-padding-left)));

        /* Navigation: rounded squares in the card's bottom-right corner. They
           now sit on the WHITE CARD rather than on the photograph, so the 1px
           border is back — a borderless white button on a white card is
           invisible. These were 50% (circles) at one point, which combined with
           a theme winning the button width produced white ovals; change them
           per corner and per device under Style > Navigation > Border radius.
           No --mcd-nav-shadow override: the buttons are flat on every
           breakpoint. */
        --mcd-nav-gap: var(--mcd-nav-gap-custom, 0.75rem);
        --mcd-nav-radius-tl: var(--mcd-nav-radius-tl-custom, 0.85rem);
        --mcd-nav-radius-tr: var(--mcd-nav-radius-tr-custom, 0.85rem);
        --mcd-nav-radius-br: var(--mcd-nav-radius-br-custom, 0.85rem);
        --mcd-nav-radius-bl: var(--mcd-nav-radius-bl-custom, 0.85rem);
        --mcd-nav-size: var(--mcd-nav-size-custom, 2.75rem);
        --mcd-nav-border-width: var(--mcd-nav-border-width-custom, 1px);
        --mcd-nav-icon-width: 0.7rem;
        --mcd-nav-icon-height: 0.85rem;

        /* Motion: shorter travel on small screens, and NEGATIVE — the copy
           enters from ABOVE and settles downwards instead of rising from below.
           That direction is not decoration. The card now resizes to the active
           answer, and a card that shrinks while its copy is travelling UP has
           the text and the bottom border closing on each other from both sides
           at once, which reads as a lurch. Entering downwards moves the copy
           the same way the border moves, so the two never race.
           One token flips the whole CSS path: the resting transform is both
           where an incoming slide comes FROM and where an outgoing slide goes
           TO, so the outgoing retreats upward, away from the bottom edge, and
           out of the shrinking card's way. */
        --mcd-motion-shift: -0.9rem;

        /* How far the image sits above its frame before it slides down into it.
           A token so the reduced-motion block below can switch it off — it
           cannot be re-defaulted from section 7, which is earlier in the file
           and would lose to this declaration. 100% or 0; see the note on
           .mcd-slider__photo-img for why nothing in between works. */
        --mcd-mobile-photo-reveal: 100%;

        /* Padding: the stacked composition wants its own proportions. These used
           to be hard-coded `padding:` declarations further down, which made the
           Intro / Header / Slides-area padding controls no-ops below 1025px —
           the same defect as the image corner radius. */
        --mcd-intro-padding-top: var(--mcd-intro-padding-top-custom, clamp(1.75rem, 4.4svh, 2.25rem));
        --mcd-intro-padding-bottom: var(--mcd-intro-padding-bottom-custom, 0.5rem);
        /* gap + inset, i.e. the same left edge the question lands on inside the
           card. Defaulting these to the bare gap is what left the headline one
           whole card-padding to the LEFT of the question below it. */
        --mcd-intro-padding-right: var(--mcd-intro-padding-right-custom, calc(var(--mcd-slider-mobile-gap) + var(--mcd-slider-mobile-inset)));
        --mcd-intro-padding-left: var(--mcd-intro-padding-left-custom, calc(var(--mcd-slider-mobile-gap) + var(--mcd-slider-mobile-inset)));

        /* THE SLIDES AREA IS THE CARD'S PADDING NOW.
           With the header gone (see .mcd-slider__header below) the body is the
           card's only in-flow child, so its padding IS the card's inner inset —
           which is what lets the arrows read `right: var(--mcd-body-padding-right)`
           and land on the same gutter as the copy without a second control.
           Bottom is 0 on purpose: the photograph and the arrows are both meant
           to sit flush on the card's bottom edge, and raising this lifts the two
           of them together. */
        --mcd-body-padding-top: var(--mcd-body-padding-top-custom, 1.5rem);
        --mcd-body-padding-right: var(--mcd-body-padding-right-custom, var(--mcd-slider-mobile-inset));
        --mcd-body-padding-bottom: var(--mcd-body-padding-bottom-custom, 0px);
        --mcd-body-padding-left: var(--mcd-body-padding-left-custom, var(--mcd-slider-mobile-inset));

        /* Both gaps are live below 1025px for the first time. They used to be
           overridden by a hard `gap: 0` on the slide and a hard `gap: 1.4rem` on
           the answer, so the two Gap controls did nothing on a phone. */
        --mcd-item-gap: var(--mcd-item-gap-custom, 1.5rem);
        --mcd-answer-gap: var(--mcd-answer-gap-custom, 2.25rem);

        /* THE CARD'S HEIGHT BUDGET, IN LINES OF ANSWER.
           The answer block reserves room for this many lines whether it needs
           them or not, which is what makes the card the SAME HEIGHT on every
           slide — and therefore what removes the resize between slides
           altogether, along with the per-frame layout work that came with
           animating it.
           Counted in lines rather than pixels on purpose: a height in px is
           wrong the moment anyone touches Typography, or the moment the
           viewport crosses one of the clamp() breakpoints in the quote's own
           font-size. Lines stay true through both. */
        --mcd-answer-lines: var(--mcd-answer-lines-custom, 5);

        /* AN EXPLICIT CARD HEIGHT, IN WHATEVER UNIT SUITS — svh, vh, rem, em, px.
           Empty by default (0px = inert), because the line budget above already
           produces a card that is the same height on every slide AND is
           guaranteed to fit its text. Set this when you want the card pinned to
           the viewport instead of to its content — `55svh`, say.

           svh over vh on a phone: `vh` is the height the viewport would have
           with the browser toolbars retracted, so a `vh`-sized card is taller
           than the screen while the toolbars are showing and the arrows sit
           below the fold until you scroll. `svh` is the smallest state, so it
           always fits. Both are offered; svh is the safer default.

           This is a MINIMUM, not a fixed height. If someone writes an answer
           longer than the card can hold, the card grows rather than swallowing
           the text — the same trade as the line budget. */
        --mcd-mobile-card-height: var(--mcd-mobile-card-height-custom, 0px);

        /* The question needs the same treatment or the card is only ALMOST
           fixed. Reserving 5 answer lines pins the biggest variable; the
           question is the other one, because a question that wraps to two lines
           on one slide and one line on the next moves the card by a line however
           rigid the answer is. Measured: identical cards at 375px and wider,
           but 22px apart at 360px, where one of the questions wraps.
           Default 1, so the approved 393px design is untouched — this only
           costs height if you raise it. Small phones re-default it to 2 below,
           where the wrap actually happens. */
        --mcd-mobile-question-lines: var(--mcd-mobile-question-lines-custom, 1);
    }

    .mcd-slider__intro {
        flex: 0 0 auto;
        overflow: hidden;
    }

    .mcd-slider__title {
        font-size: clamp(2.25rem, 10.5vw, 2.6rem);
        line-height: 0.95;
        letter-spacing: 0.01em;
        margin-bottom: 0.7rem;
    }

    .mcd-slider__subtitle {
        max-width: 34ch;
        font-size: 0.98rem;
        line-height: 1.5;
    }

    /* ONE opaque rounded panel, content height (not stretched).
       No `overflow: hidden`: the photograph deliberately leaves this box on the
       left, and clipping it here is the single easiest way to break the whole
       composition. The figure carries its own corner radii instead. */
    .mcd-slider__card {
        position: relative;
        flex: 0 0 auto;
        min-height: var(--mcd-mobile-card-height);
        /* The bottom margin is the room the overhanging photo hangs into. The
           section is `overflow: hidden`, so without it the lower half of every
           picture would be clipped off — and only on live pages where the
           slider is the last thing in its container, which is the worst kind of
           bug to reproduce. It tracks the same token the overhang does, so the
           two can never drift. */
        margin: 1.35rem var(--mcd-slider-mobile-gap) var(--mcd-mobile-photo-overhang);
        background-color: var(--mcd-slider-card);
        border-radius: var(--mcd-card-radius);
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* HEADER: PRESENT IN THE MARKUP, ABSENT FROM THE DESIGN.
       The reference composition has no label bar and no counter — the card
       opens straight onto the red question. But the arrows live INSIDE this
       header (render() puts them there so the desktop layout can align them
       with the label), so `display: none` would take the navigation with it.
       `display: contents` erases only the header's own box: its padding,
       background and bottom rule stop existing, while the arrows survive as a
       child of the card, which is the element they are positioned against.
       Consequence to know about: Style > Layout > Header padding does nothing
       below 1025px. That is honest — there is no header to pad — and it is
       documented on the control itself. */
    .mcd-slider__header {
        display: contents;
    }

    .mcd-slider__header-label {
        display: none;
    }

    /* The counter is HIDDEN, NOT REMOVED. It is an aria-live region: the
       controller writes the new slide number into it on every change, and that
       is the only announcement a screen-reader user gets that the carousel
       moved. `display: none` would silence it, so it keeps a box that is one
       pixel wide and clipped away instead. */
    .mcd-slider__counter {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Arrows: straddling the card's bottom border at its right end.
       A NEGATIVE `bottom`, NOT A TRANSFORM. `translateY(50%)` expressed the
       same geometry more neatly, and it was a mistake: a transform promotes
       these buttons to their own compositing layer, and a composited layer
       whose offset lands on a fractional device pixel is exactly how a crisp
       1px border grows a faint hairline along one edge on a high-DPI screen.
       Nothing here needs compositing — the arrows do not animate — so the
       offset belongs in layout, where it is snapped like any other box.
       The horizontal offset is the SLIDES-AREA PADDING rather than a literal,
       so they share a gutter with the copy above them — one control, everything
       still aligned. The slide reserves room for the half that is still inside
       the card; see .mcd-slider__attribution. */
    .mcd-slider__controls {
        position: absolute;
        right: var(--mcd-body-padding-right);
        bottom: calc(var(--mcd-body-padding-bottom) - var(--mcd-mobile-nav-overhang));
        z-index: 4;
    }

    /* The body STRETCHES to whatever height the card has, rather than sitting at
       its content height. Without this an explicit card height would leave the
       copy at the top and a band of dead space at the bottom — and worse, the
       photograph (a grid item inside the slide) would stay put while the arrows
       (positioned against the CARD) dropped to the new bottom edge, so the two
       halves of the bottom band would come apart.
       Stretching hands the surplus to the slide's `1fr` slack row instead, which
       is exactly where it belongs: question and answer stay at the top, the band
       stays on the bottom border. */
    .mcd-slider__body {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }

    /* THE CARD IS SIZED BY THE ACTIVE SLIDE, NOT THE TALLEST ONE.
       On desktop every slide occupies the same grid cell, so the list is as
       tall as the longest quote in the set and the card never moves. That is
       right for a full-height desktop canvas and wrong on a phone, where a
       two-line answer left a third of the card empty and the photograph
       stranded far below its own copy.
       Here the ACTIVE slide is the only one in flow; the rest are lifted out
       with `position: absolute`, so they still stack in the same place and
       still animate, but they no longer contribute a single pixel of height.
       The list — and with it the card, the bottom border, the photograph that
       straddles it and the arrows — now follows the answer being read.
       The height change is animated by the controller (see the mobile height
       transition in mcd-quick-questions.js); doing it here would need
       `interpolate-size`, which is not portable yet. */
    /* ONE STATIC CARD HEIGHT: EVERY SLIDE IS IN FLOW, IN THE SAME CELL.
       All slides stack in a single grid cell, so the row — and with it the card,
       the bottom border, the photograph straddling it and the arrows — is as
       tall as the TALLEST slide in the set, on every slide. Nothing moves when
       you page through.

       This is deliberately not the alternative approaches:
         - sizing to the ACTIVE slide moves the card on every change (that was
           the version with the animated height, and animating `height` is the
           one thing here that cannot run on the compositor);
         - measuring the tallest in JS and pinning it needs a measurement that
           can be taken at the wrong moment (before a webfont lands) and then
           stays wrong for the life of the page;
         - clamping the copy to a line count would hold the height by silently
           truncating whatever an editor wrote.
       Letting the grid do it costs nothing, cannot be measured wrongly, and
       never loses a word. The line budgets below are a FLOOR on top of it, so a
       set of uniformly short answers still gets the designed proportions.

       `1fr` rather than `auto` for the row: auto would leave the row at content
       height and ignore an explicit card height, so the stretch that keeps the
       bottom band on the card's bottom edge would stop working. */
    .mcd-slider__list {
        display: grid;
        grid-template-rows: 1fr;
        position: relative;
        flex: 1 1 auto;
        height: auto;
    }

    /* THE SLIDE IS THE GRID.
       Rows 1, 2 and 4 take their natural height. ROW 3 IS AN EMPTY SPRING: it
       holds no content and takes every leftover pixel, which is what keeps the
       photograph and the name welded together as one band on the card's bottom
       edge across ALL slides.

       This matters because the card is sized by the LONGEST quote in the set,
       so every shorter slide has slack to put somewhere. Handing that slack to
       the band's own row instead — the obvious `auto auto 1fr` — stretched the
       band: the picture stayed at the bottom, the name stayed at the top, and
       they drifted apart by however much shorter that slide's quote happened to
       be. An empty row above them cannot stretch anything, so the pair keeps the
       exact relationship the design draws, on every slide.

       Row gaps are margins, not `row-gap`, because the two gaps are different
       measurements with their own controls (question -> quote, quote -> name)
       and a grid has exactly one row-gap to give.

       Items still stack via `grid-area: 1 / 1` from the base rule — that is
       their placement in the LIST's grid and is untouched by the template
       declared here. The ACTIVE item paints above the others so an outgoing
       slide cannot sit over the incoming copy mid-transition. */
    .mcd-slider__item {
        /* In flow, in the shared cell (`grid-area: 1 / 1` from the base rule),
           so every slide contributes to the height and the tallest one sets it
           for all of them — see .mcd-slider__list. */
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, var(--mcd-mobile-photo-column)) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "question    question"
            "quote       quote"
            ".           ."
            "photo       attribution";
        column-gap: var(--mcd-mobile-photo-gap);
        row-gap: 0;
        margin: 0;
        height: auto;
        min-height: 0;
        z-index: 1;
    }

    /* Paints above the others. All slides occupy the same cell, so without this
       an outgoing slide's copy would sit over the incoming one for the length
       of the crossfade. */
    .mcd-slider__item.is-active {
        z-index: 2;
    }

    /* Lifts the quote and the attribution out of their wrapper and into the
       slide's grid, so the attribution can share a row with a figure that is
       not its sibling. The wrapper's own margin, padding, max-width and the
       desktop quote indent all stop applying with it — which is the intent, and
       why those controls are labelled "(desktop)".
       If a browser were ever to lack `display: contents`, the wrapper simply
       auto-places as one more grid item: the layout degrades to a stack rather
       than breaking. */
    .mcd-slider__answer {
        display: contents;
    }

    /* Same line-budget mechanism as the answer below — see the long note there
       for why `1lh` and why min-height rather than height. */
    .mcd-slider__question {
        grid-area: question;
        margin: 0;
        padding: 0;
        background: none;
        font-size: clamp(1.05rem, 4.6vw, 1.25rem);
        line-height: 1.15;
        letter-spacing: 0.01em;
        min-height: calc(var(--mcd-mobile-question-lines) * 1.2em);
        min-height: calc(var(--mcd-mobile-question-lines) * 1lh);
    }

    /* THE FIXED HEIGHT LIVES HERE, ON THE ANSWER — NOT ON THE CARD.
       Putting a height on the card would be the obvious move and the wrong one:
       it would have to be a pixel value, and a pixel value is a guess that goes
       stale the moment anyone edits Typography, or the moment the viewport
       crosses one of the clamp() breakpoints in the type below. Reserving the
       ANSWER's own line budget makes every other box keep its natural size and
       the total come out constant anyway.

       `1lh` is the element's OWN computed line box, so this reserves exactly N
       lines no matter what sets the font-size or the line-height — including
       Elementor's Typography control, which writes straight to this selector
       and would defeat any calculation of ours that tried to restate them.
       The `em` line above is the fallback for engines without `lh` (pre-2023);
       it approximates with a nominal 1.2 line-height and is overridden wherever
       `lh` parses. Two declarations of the same property, deliberately.

       A longer answer still grows — min-height, never height, because clipping
       an editor's copy to make a number come out is never the right trade.
       Raise Style > Layout > "Mobile: answer height (lines)" if the set needs
       more room. */
    .mcd-slider__quote {
        grid-area: quote;
        margin: var(--mcd-item-gap) 0 0;
        font-size: clamp(1.2rem, 5.4vw, 1.5rem);
        line-height: 1.18;
        letter-spacing: 0.01em;
        min-height: calc(var(--mcd-answer-lines) * 1.2em);
        min-height: calc(var(--mcd-answer-lines) * 1lh);
    }

    /* Top of the bottom band, beside the photograph.
       THE PADDING IS THE ARROWS' SEAT. The arrows are positioned against the
       card, so they know nothing about this column's content; the reserved
       strip is what guarantees they can never land on the role line — on a
       short photo, on a long job title, or at a 200% browser zoom. Take it out
       and the collision only appears at sizes nobody tests at.
       Only HALF a button is inside the card now that they straddle the border,
       so only half needs reserving. */
    .mcd-slider__attribution {
        grid-area: attribution;
        align-self: start;
        margin-top: var(--mcd-answer-gap);
        padding-bottom: calc(var(--mcd-nav-size) / 2 + var(--mcd-nav-border-width) + 0.75rem);
    }

    /* The picture arrives from above, in the same direction as the copy.
       A TRANSFORM, NOT A clip-path — AND THIS IS THE FIREFOX FIX.
       The first version wiped with `clip-path: inset(0 0 100% 0)` to mirror the
       desktop reveal. A clip-path animation is a PAINT operation on every
       frame, and it was running at the same time as the card's height
       transition, which is a LAYOUT operation on every frame. Chrome absorbed
       the pair; Firefox, whose reflow path is slower, dropped frames and the
       resize visibly stuttered.
       Sliding the image inside a frame that is already `overflow: hidden` gets
       the same "enters from the top" reading with a compositor-only transform:
       no paint, no layout, nothing left competing with the height.
       It has to be a FULL 100%. Any partial offset leaves the bottom of the
       frame empty for the length of the transition, because the image is
       exactly as tall as the figure — you would see the card through the gap.
       This also replaces the base rule's `scale(--mcd-photo-zoom)`; the zoom is
       a desktop flourish and stacking it here would cost a second property for
       no visible gain at this size. */
    .mcd-slider__photo-img {
        transform: translate3d(0, calc(-1 * var(--mcd-mobile-photo-reveal)), 0);
    }

    .mcd-slider__name {
        margin-bottom: 0.15rem;
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .mcd-slider__role {
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.25;
    }

    /* The photograph: bottom-left of the card, running off the page edge.
       `align-self: end` keeps it flush with the card's bottom edge even if the
       name and role beside it are ever the taller of the two — a long job title
       at a large text-size setting, say. z-index puts it over the card's
       background, and over the card's own rounded bottom-left corner, which it
       replaces. */
    .mcd-slider__photo {
        position: relative;
        inset: auto;
        grid-area: photo;
        align-self: end;
        z-index: 1;
    }

    /* THREE OF THESE FOUR MARGINS ARE LOAD-BEARING GEOMETRY, NOT SPACING:
         top    — the gap below the quote (the Gap: quote ↔ name control);
         bottom — NEGATIVE, the overhang. It is what makes the figure occupy
                  only its upper half in the grid row, so the card reserves that
                  much and the remaining half falls below the border;
         left   — NEGATIVE, the bleed out to the page edge.

       !important, because Elementor's own
       `.elementor .elementor-widget:not(..):not(..) figure { margin: 0 }` is
       (0,6,1) and would otherwise discard all three at once — the picture would
       snap back inside the card, sit tight under the quote and stop straddling
       the border, which is exactly how this looked in production the last time
       the margin was left unprotected.
       The shorthand sets all four sides so no stale side can survive from the
       desktop rules. Every value is still a token. */
    .elementor-widget-mcd-quick-questions .mcd-slider__photo {
        margin: var(--mcd-answer-gap) 0 calc(-1 * var(--mcd-mobile-photo-overhang)) calc(-1 * var(--mcd-mobile-photo-bleed)) !important;
    }

    /* ---- Frosted glass ------------------------------------------------------
       READ THIS BEFORE JUDGING THE DEFAULT.

       This material used to exist for a reason that no longer holds. In the
       previous composition the photograph sat BEHIND the copy, and the three
       white bands had to be translucent for the picture to read through them.
       The photograph is now beside the copy, never under it, so on the design's
       own flat background this frosts nothing: 72% white over #f4f4f2 computes
       to #fcfcfb — a colour no one can distinguish from white — and blurring a
       flat colour is a no-op by definition.

       It is kept, and moved to the card, because it is still meaningful in the
       one case it now applies to: a slider dropped onto a section with a
       photographic or gradient background, where the card genuinely does have
       something to frost. Style > Layout > Frosted card switches it off, and on
       a flat background that is worth doing — a backdrop-filter is GPU work
       recomputed on every frame of every slide transition, for no visible
       result.

       ONE SURFACE, NOT THREE. The bands are gone; the card is the panel. This
       also retires the old "never put backdrop-filter on the header" trap: the
       header no longer has a box (`display: contents`), and the card is exactly
       the element the arrows are already positioned against, so making it a
       containing block changes nothing about where they land.

       Both @supports conditions are load-bearing:
         - backdrop-filter is what actually frosts the backdrop;
         - color-mix builds the translucent fill FROM the user's Card background
           control, so there is no second colour control to keep in sync.
       The color-mix guard matters more than it looks: because the value contains
       var(), a browser without color-mix would not reject it at parse time — it
       would fail at computed-value time, and an invalid background-color computes
       to `transparent`, not "the previous declaration". That would leave the card
       fully see-through with unreadable text. The guard keeps those browsers on
       the opaque card above. */
    @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) and (background-color: color-mix(in srgb, white 50%, transparent)) {
        .mcd-elementor-slider[data-mcd-glass="yes"] .mcd-slider__card {
            background-color: color-mix(in srgb, var(--mcd-slider-card) var(--mcd-glass-opacity), transparent);
            -webkit-backdrop-filter: blur(var(--mcd-glass-blur)) saturate(var(--mcd-glass-saturate));
            backdrop-filter: blur(var(--mcd-glass-blur)) saturate(var(--mcd-glass-saturate));
        }
    }
}

/* Transparency is a stated accessibility preference, not just taste: honour it
   and hand back the opaque card. Selector shape matches the glass rule so it
   wins on source order rather than needing !important. */
@media screen and (max-width: 1024px) and (prefers-reduced-transparency: reduce) {
    .mcd-elementor-slider[data-mcd-glass="yes"] .mcd-slider__card {
        background-color: var(--mcd-slider-card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* REDUCED MOTION, RESTATED FOR THE MOBILE ZONE — AND THIS IS A FIX, NOT A
   FORMALITY.
   Section 7's reduced-motion block re-defaults --mcd-motion-shift to 0, but
   section 8 re-declares that same token at the SAME specificity (0,1,0) and is
   later in the file, so section 8 simply won: every phone and tablet has been
   travelling the full 0.9rem no matter what the visitor asked for. A media
   query adds no specificity, which is exactly the trap — the rule looks like it
   must win and does not.
   Restating the tokens here, after section 8, is what actually honours the
   preference. Anything section 8 re-declares has to be repeated here; anything
   it leaves alone (--mcd-photo-zoom) is still handled by section 7.
   The crossfade itself stays: opacity is not vestibular motion. */
@media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .mcd-elementor-slider {
        --mcd-motion-shift: 0px;
        --mcd-mobile-photo-reveal: 0%;
    }
}

/* ============================================================
   8b. TABLET (600–1024px)
   ------------------------------------------------------------
   Same composition, bigger room. Without this band the type is frozen at its
   phone ceiling — the quote capped at 1.5rem across a 1024px card is a very
   long line of very small text — and the photograph, sized at 50vw, hits its
   13rem cap and shrinks to a stamp in the corner of a wide card.
   Every override is a token re-default or a font-size, and it sits AFTER the
   phone block so equal-specificity rules win on source order.
   ============================================================ */

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .mcd-elementor-slider {
        --mcd-slider-mobile-gap: var(--mcd-slider-mobile-gap-custom, 24px);
        --mcd-slider-mobile-inset: var(--mcd-slider-mobile-inset-custom, 32px);
        /* A 12px margin that reads as generous on a 375px phone reads as a
           mistake on a 1024px tablet. */
        --mcd-slider-mobile-gap-min: 24px;
        --mcd-photo-height: var(--mcd-photo-height-custom, clamp(11rem, 26vw, 16.5rem));
        /* HALF AGAIN AS WIDE AS THE 36% THIS USED TO BE — AND THE `+ bleed/2`
           IS WHAT MAKES IT EXACTLY THAT.
           The picture is not the column: it is the column PLUS the bleed back
           out to the page edge, and the bleed is a fixed length while the column
           is a percentage. Scaling the percentage alone would grow the picture
           by less than the percentage grew, and by a different amount at 600px
           than at 1024px. Solving `columnNew + bleed = 1.5 * (columnOld + bleed)`
           gives `columnNew = k * columnOld + (k - 1) * bleed`. At k = 1.35 the
           picture is 35% wider than the 36% column it started from, and the
           bleed term keeps that ratio identical at 600px and at 1024px rather
           than drifting with the viewport. */
        --mcd-mobile-photo-column: var(--mcd-mobile-photo-column-custom, calc(48.6% + var(--mcd-mobile-photo-bleed) * 0.35));
        --mcd-mobile-photo-gap: var(--mcd-mobile-photo-gap-custom, 2rem);
        --mcd-nav-size: var(--mcd-nav-size-custom, 3.15rem);
        --mcd-nav-icon-width: 0.8rem;
        --mcd-nav-icon-height: 0.95rem;
        --mcd-body-padding-top: var(--mcd-body-padding-top-custom, 1.75rem);
        --mcd-item-gap: var(--mcd-item-gap-custom, 2rem);
        --mcd-answer-gap: var(--mcd-answer-gap-custom, 2.25rem);
    }

    .mcd-slider__title { font-size: clamp(2.75rem, 7vw, 4.25rem); }

    .mcd-slider__subtitle {
        max-width: 46ch;
        font-size: 1.05rem;
    }

    .mcd-slider__question { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

    .mcd-slider__quote {
        font-size: clamp(1.6rem, 3.4vw, 2.2rem);
        line-height: 1.15;
    }

    .mcd-slider__name { font-size: 1.15rem; }

    .mcd-slider__role { font-size: 0.95rem; }
}

/* Compact phones: trim the gutters and the vertical rhythm so the photograph
   keeps a usable height and the bottom band still fits the arrows.
   Nothing here touches the arrows' own offsets any more — they read the
   Slides-area padding, so tightening that inset moves the copy, the picture's
   bleed and the arrows in one step and they cannot drift apart. */
@media screen and (max-width: 390px) and (max-height: 740px) {
    .mcd-elementor-slider {
        --mcd-slider-mobile-inset: var(--mcd-slider-mobile-inset-custom, 1rem);
        --mcd-nav-size: var(--mcd-nav-size-custom, 2.6rem);
        --mcd-intro-padding-top: var(--mcd-intro-padding-top-custom, 1.4rem);
        --mcd-intro-padding-bottom: var(--mcd-intro-padding-bottom-custom, 0.5rem);
        --mcd-body-padding-top: var(--mcd-body-padding-top-custom, 1.25rem);
        --mcd-item-gap: var(--mcd-item-gap-custom, 1.15rem);
        --mcd-answer-gap: var(--mcd-answer-gap-custom, 1.75rem);
        --mcd-mobile-photo-gap: var(--mcd-mobile-photo-gap-custom, 1rem);
        --mcd-photo-height: var(--mcd-photo-height-custom, clamp(9rem, 46vw, 11rem));
        /* This is the width band where the questions start wrapping unevenly,
           so the card only stays fixed if the question reserves two lines. */
        --mcd-mobile-question-lines: var(--mcd-mobile-question-lines-custom, 2);
    }

    .mcd-slider__title {
        font-size: clamp(2.2rem, 11vw, 2.55rem);
        margin-bottom: 0.55rem;
    }

    .mcd-slider__subtitle {
        font-size: 0.92rem;
    }

    .mcd-slider__question {
        font-size: 1.05rem;
    }

    .mcd-slider__quote {
        font-size: clamp(1.15rem, 5.8vw, 1.3rem);
        line-height: 1.16;
    }

    .mcd-slider__name {
        font-size: 1rem;
    }

    .mcd-slider__role {
        font-size: 0.8rem;
    }
}