/* ================================================================
   MCD Mega Menu – Stylesheet
   ================================================================ */

/* ── Custom properties ──────────────────────────────────────── */
:root {
    --mcd-accent:       var(--e-global-color-primary, #DC0312);
    --mcd-red:          var(--mcd-accent);
    --mcd-red-light:    #e03d10;
    /* Glass recipe – matches site-wide .glass-blur */
    --mcd-glass-bg:          rgba(255, 255, 255, 0.5);
    --mcd-glass-blur:        blur(24px) saturate(120%);
    --mcd-glass-border:      0.3px solid var(--e-global-color-de5d6cf, rgba(255,255,255,0.35));
    --mcd-glass-inset:       inset 0 1px 0 var(--e-global-color-de5d6cf, rgba(255,255,255,0.35));
    --mcd-glass-shadow:      0px 25px 35px rgba(0, 0, 0, 0.051);
    /* Closed nav bar reuses the same recipe */
    --mcd-glass-bg-closed:   rgba(255, 255, 255, 0.5);
    --mcd-glass-blur-closed: blur(24px) saturate(120%);
    /* Sidebar sits on top of the same glass – slightly whiter to stand out */
    --mcd-sidebar-bg:        rgba(255, 255, 255, 0.65);
    --mcd-sidebar-w:    225px;
    --mcd-featured-w:   580px;
    --mcd-font:         'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    --mcd-transition:   200ms ease;
    --mcd-bar-h:        90px; /* nav bar height (38px logo + 35px*2 padding) */
    /* Elementor widget style overrides (set via inline style on .mcd-nav) */
    --mcd-nav-text:          #333333;
    --mcd-menu-link:         #333333;
    --mcd-icon-stroke:          2.5;
    --mcd-chevron-size:         20px;
    --mcd-mobile-chevron-size:  20px;
    --mcd-action-icon-size:     16px;
    --mcd-shell-duration:       240ms;
    --mcd-content-duration:     180ms;
    --mcd-ease-out:             cubic-bezier(0.23, 1, 0.32, 1);
    --mcd-ease-in-out:          cubic-bezier(0.77, 0, 0.175, 1);
}

/* ================================================================
   PAGE LOAD INTRO
   ================================================================ */

html.mcd-loader-lock,
html.mcd-loader-lock body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Keep Elementor entrance animations parked until the final logo frame. */
html.mcd-loader-prepaint body .animated,
html.mcd-elementor-animations-held body .animated {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

html.mcd-loader-prepaint {
    background: #fff !important;
}

html.mcd-loader-prepaint body {
    visibility: hidden !important;
}

html.mcd-loader-prepaint body .mcd-page-loader {
    visibility: visible !important;
}

html.mcd-loader-bypass .mcd-page-loader {
    display: none !important;
}

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

.mcd-page-loader {
    --mcd-loader-accent: var(--e-global-color-primary, #e30613);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #1d1d1b;
    pointer-events: auto;
    isolation: isolate;
    animation: mcd-loader-failsafe 1ms linear 8s forwards;
}

.mcd-page-loader.is-running {
    animation: none;
}

.mcd-page-loader__backdrop,
.mcd-page-loader__wipe {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    will-change: opacity;
}

.mcd-page-loader__backdrop {
    z-index: 0;
    background: #fff;
}

.mcd-page-loader__wipe {
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(118deg, #f8f8f7 0%, #fff 46%, #fff9f9 100%);
    opacity: 0;
    isolation: isolate;
}

/* The moving fields are soft radial gradients rather than blurred DOM nodes.
   Only transform and opacity animate, keeping the loader smooth while the main
   thread is busy parsing Elementor and decoding page assets. */
.mcd-page-loader__aurora {
    position: absolute;
    inset: -18%;
    z-index: 1;
    overflow: hidden;
    transform: translateZ(0);
}

.mcd-page-loader__aurora-field {
    position: absolute;
    display: block;
    border-radius: 46% 54% 58% 42% / 55% 44% 56% 45%;
    opacity: 0.78;
    will-change: transform, opacity;
}

.mcd-page-loader__aurora-field--one {
    top: -30vmax;
    right: -18vmax;
    width: 72vmax;
    height: 62vmax;
    background: radial-gradient(ellipse at 48% 52%, rgba(227, 6, 19, 0.17) 0%, rgba(245, 95, 105, 0.08) 35%, transparent 70%);
    background: radial-gradient(ellipse at 48% 52%, color-mix(in srgb, var(--mcd-loader-accent) 18%, transparent) 0%, rgba(245, 95, 105, 0.08) 35%, transparent 70%);
    animation: mcd-loader-aurora-one 7.8s cubic-bezier(0.45, 0, 0.55, 1) -1.7s infinite alternate;
}

.mcd-page-loader__aurora-field--two {
    bottom: -32vmax;
    left: -22vmax;
    width: 68vmax;
    height: 58vmax;
    border-radius: 58% 42% 46% 54% / 43% 57% 45% 55%;
    background: radial-gradient(ellipse at 52% 48%, rgba(255, 91, 103, 0.13) 0%, rgba(255, 185, 190, 0.075) 42%, transparent 72%);
    animation: mcd-loader-aurora-two 9.4s cubic-bezier(0.45, 0, 0.55, 1) -3.2s infinite alternate;
}

.mcd-page-loader__aurora-field--three {
    top: 24%;
    left: 36%;
    width: 54vmax;
    height: 48vmax;
    border-radius: 43% 57% 52% 48% / 59% 46% 54% 41%;
    background: radial-gradient(ellipse at 50% 50%, rgba(226, 207, 209, 0.07) 0%, rgba(246, 223, 225, 0.035) 38%, transparent 72%);
    animation: mcd-loader-aurora-three 8.6s cubic-bezier(0.45, 0, 0.55, 1) -4.4s infinite alternate;
}

.mcd-page-loader__wipe::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 28%, transparent 58%);
}

@keyframes mcd-loader-aurora-one {
    0%   { opacity: 0.68; transform: translate3d(-5%, -3%, 0) scale(0.94) rotate(-5deg); }
    52%  { opacity: 0.92; transform: translate3d(7%, 5%, 0) scale(1.06) rotate(2deg); }
    100% { opacity: 0.76; transform: translate3d(-1%, 11%, 0) scale(1) rotate(7deg); }
}

@keyframes mcd-loader-aurora-two {
    0%   { opacity: 0.62; transform: translate3d(3%, 8%, 0) scale(1.04) rotate(5deg); }
    48%  { opacity: 0.84; transform: translate3d(10%, -5%, 0) scale(0.96) rotate(-2deg); }
    100% { opacity: 0.70; transform: translate3d(-6%, -10%, 0) scale(1.08) rotate(-7deg); }
}

@keyframes mcd-loader-aurora-three {
    0%   { opacity: 0.46; transform: translate3d(-8%, 4%, 0) scale(0.98) rotate(-4deg); }
    55%  { opacity: 0.70; transform: translate3d(6%, -7%, 0) scale(1.09) rotate(3deg); }
    100% { opacity: 0.52; transform: translate3d(11%, 6%, 0) scale(0.95) rotate(8deg); }
}

.mcd-page-loader__stage {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 1px;
    isolation: isolate;
}

/* Intro logo size. One variable per breakpoint — the GSAP Flip handoff
   measures live rects, so changing these is all that's needed to resize it. */
.mcd-page-loader {
    --mcd-loader-logo-w: 390px;   /* desktop */
    --mcd-loader-logo-vw: 54vw;   /* narrow screens, before the cap applies */
}

@media (max-width: 1024px) {
    .mcd-page-loader {
        --mcd-loader-logo-w: 340px;   /* tablet */
    }
}

.mcd-page-loader__logo {
    position: relative;
    width: min(var(--mcd-loader-logo-w), var(--mcd-loader-logo-vw));
    aspect-ratio: 802.8 / 405.5;
    flex: none;
    will-change: transform, opacity;
}

.mcd-page-loader__logo img,
.mcd-page-loader__logo svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    margin: 0;
    padding: 0;
    user-select: none;
    pointer-events: none;
}

.mcd-page-loader__logo-ghost {
    opacity: 0;
    transform: scale(0.94);
    transform-origin: 50% 50%;
    filter: grayscale(1);
    will-change: transform, opacity;
}

.mcd-page-loader__logo-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: paint;
    will-change: clip-path;
}

.mcd-page-loader__logo-layer--mark {
    -webkit-clip-path: inset(0 100% 21% 0);
    clip-path: inset(0 100% 21% 0);
}

.mcd-page-loader__logo-layer--wordmark {
    -webkit-clip-path: inset(78% 0 0 100%);
    clip-path: inset(78% 0 0 100%);
}

.mcd-loader-target {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

/* The header slot must be genuinely empty while the travelling logo or its
   endpoint proxy owns the handoff. !important also beats Elementor keyframes,
   whose animation origin otherwise outranks ordinary inline declarations. */
.mcd-logo-target-vacant {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Elementor opacity keyframes on a header ancestor must never affect the
   travelling or destination logo. The class is applied only during handoff
   and removed after the opaque proxy has safely transferred ownership. */
.mcd-logo-opacity-protected {
    opacity: 1 !important;
    visibility: visible !important;
}

.mcd-page-loader__handoff-proxy {
    position: fixed !important;
    z-index: 2147483001 !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout paint style;
}

/* After the intro this already-rasterized node remains the sole visual logo.
   A normal page-level z-index keeps it with the header rather than above modals. */
.mcd-page-loader__handoff-proxy--persistent {
    z-index: 10000 !important;
}

@keyframes mcd-loader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcd-page-loader {
        display: none !important;
    }
}

/* ── Consent banner gate (CCM19) ─────────────────────────────
   Mirrors the pre-paint rule in the head so the hold still works if the
   inline block is filtered out. Layout is untouched — the widget can size
   itself normally, only its paint waits for the intro to finish. */
.ccm-root {
    transition: opacity 0.45s ease;
}

html.mcd-ccm-hold .ccm-root {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Reset scoped to plugin ─────────────────────────────────── */
.mcd-nav *,
.mcd-nav *::before,
.mcd-nav *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.mcd-nav {
    font-family: var(--mcd-font);
    z-index: 9999;
    margin: 0;
}

/* ================================================================
   NAV BAR
   ================================================================ */

/* Strip backgrounds from Elementor containers wrapping the nav so the shared
   glass surface on .mcd-mobile-wrap can blur the page behind it. */
.elementor-widget-mcd_mega_menu,
.elementor-widget-mcd_mega_menu > .elementor-widget-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* One continuous glass body sits behind both the navigation bar and the
   expanding panel stage. Its height follows the stage, so the silhouette
   grows as one shape instead of two surfaces meeting at a seam. */
.mcd-mobile-wrap {
    --mcd-shell-height: var(--mcd-bar-h);
    position: relative;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mcd-mobile-wrap::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mcd-shell-height);
    border: 0.3px solid var(--e-global-color-de5d6cf, rgba(255,255,255,0.35));
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    pointer-events: none;
    transition: height var(--mcd-shell-duration) var(--mcd-ease-in-out),
                box-shadow 180ms var(--mcd-ease-out);
}

.mcd-nav.has-open-panel .mcd-mobile-wrap::before {
    box-shadow: inset 0 1px 0 var(--e-global-color-de5d6cf, rgba(255,255,255,0.35)),
                0 25px 35px rgba(0, 0, 0, 0.051);
}

.mcd-nav--editor .mcd-mobile-wrap::before {
    transition: none !important;
}

.mcd-nav__bar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 100;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
}

/* ── Open: white backgrounds on action buttons ── */
.mcd-nav.has-open-panel .mcd-nav__lang,
.mcd-nav.has-open-panel .mcd-nav__icon-btn,
.mcd-nav.mobile-open .mcd-nav__lang,
.mcd-nav.mobile-open .mcd-nav__icon-btn {
    background: #ffffff !important;
}

.mcd-nav__inner {
    display: flex;
    align-items: center;
    padding: 35px 40px;
}

/* Logo ──────────────────────────────────────────────────────── */
.mcd-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.mcd-nav__logo img,
.mcd-nav__logo svg {
    width: 95px !important;
    height: auto !important;
    aspect-ratio: 802.8 / 405.5 !important;
    max-width: none !important;
    display: block;
    object-fit: contain;
}

/* Fallback text logo */
.mcd-nav__logo-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--mcd-red);
    letter-spacing: -0.5px;
    line-height: 1;
}

.mcd-nav__logo-text span {
    display: block;
    font-size: 8px;
    font-weight: 700;
    color: #555;
    letter-spacing: 1.5px;
    margin-top: 1px;
}

/* Nav items ─────────────────────────────────────────────────── */
.mcd-nav__items {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    flex: 1;
    margin-left: 24px;
}

.mcd-nav__item {
    display: flex;
    align-items: center;
    position: static;
}

.mcd-nav__sep {
    color: #535353;
    font-size: 13px;
    padding: 0 10px;
    user-select: none;
    line-height: 1;
    margin-top: -3.5px;
}

.mcd-nav__link {
    display: inline-block;
    padding: 2px 10px;
    color: var(--mcd-nav-text, #333);
    text-decoration: none;
    border-radius: 20px;
    transition: background var(--mcd-transition), color var(--mcd-transition);
    white-space: nowrap;
}

.mcd-nav__link:hover,
.mcd-nav__item.is-open .mcd-nav__link {
    background: var(--mcd-red);
    color: #fff !important;
}

/* Right actions ─────────────────────────────────────────────── */
.mcd-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Dokumentation / Downloads text links in the action bar */
.mcd-nav__text-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 8px;
}

.mcd-nav__text-link {
    /* No !important on typography props — lets Elementor typography control win */
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-decoration: underline;
    text-decoration-color: #707070 !important;
    text-underline-offset: 2px !important;
    white-space: nowrap !important;
    transition: color var(--mcd-transition) !important;
}

.mcd-nav__text-link:hover {
    color: var(--mcd-accent);
    text-decoration-color: var(--mcd-accent) !important;
}

.mcd-nav__lang-wrap {
    position: relative;
}

.mcd-nav__lang {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    font-family: var(--mcd-font);
    height: 34px;
    padding: 0 10px;
    border-radius: 20px;
    text-decoration: none;
    transition: background var(--mcd-transition), color var(--mcd-transition);
}

.mcd-nav__lang:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--mcd-red);
}

/* Stacked label: both spans in the same grid cell, crossfade on hover */
.mcd-nav__lang-labels {
    display: grid;
}

.mcd-nav__lang-de,
.mcd-nav__lang-en {
    grid-area: 1 / 1;
    transition: opacity 0.2s ease;
}

.mcd-nav__lang-en {
    opacity: 0;
}

.mcd-nav__lang:hover .mcd-nav__lang-de {
    opacity: 0;
}

.mcd-nav__lang:hover .mcd-nav__lang-en {
    opacity: 1;
}

/* Mobile dropdown (shown via JS .is-open class) */
.mcd-nav__lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
    white-space: nowrap;
}

.mcd-nav__lang-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mcd-nav__lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.mcd-nav__lang-option:hover {
    background: rgba(0,0,0,0.05);
    color: var(--mcd-red);
}

.mcd-nav__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: #444;
    text-decoration: none;
    transition: background var(--mcd-transition), color var(--mcd-transition);
}

.mcd-nav__icon-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--mcd-red);
}

/* Hamburger ─────────────────────────────────────────────────── */
.mcd-nav__burger {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 50% !important;
    transition: background 0.2s ease !important;
}

.mcd-nav.mobile-open .mcd-nav__burger {
    background: #ffffff !important;
}

.mcd-nav__burger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #444 !important;
    border-radius: 2px !important;
    transition: transform 0.25s, opacity 0.25s !important;
    transform-origin: center !important;
}

.mcd-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.mcd-nav__burger.is-open span:nth-child(2) { opacity: 0 !important; }
.mcd-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ================================================================
   MEGA PANEL (dropdown)

   .mcd-mega-stage  – transparent content viewport. Its height controls the
                      single shared glass body's expansion.

   .mcd-mega        – transparent, zero-background container per
                      nav item. Stacked absolutely inside the stage.

   .mcd-mega__inner – the ACTUAL CONTENT (sidebar + links + card).
                      This is the ONLY thing that slides / fades.
   ================================================================ */

/* ── Stage: transparent content viewport ──────────────────── */
.mcd-mega-stage {
    position: absolute;
    top: calc(100% - 0.3px);
    left: 0;
    right: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    height: 0;
    transition: height var(--mcd-shell-duration) var(--mcd-ease-in-out);
    pointer-events: none;
    z-index: 90;
}

/* In Elementor editor: disable height transition so panel opens instantly */
.mcd-nav--editor .mcd-mega-stage {
    transition: none !important;
}

.mcd-nav.has-open-panel .mcd-mega-stage {
    overflow: hidden;
    transition: height var(--mcd-shell-duration) var(--mcd-ease-in-out);
    pointer-events: auto;
    border: 0 !important;
    box-shadow: none !important;
}

/* ── Panels: transparent wrappers, stacked absolutely ──────── */
.mcd-mega {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    /* No background – stage provides it */
    visibility: hidden;
    pointer-events: none;
}

.mcd-mega.is-active   { visibility: visible; pointer-events: auto; }
.mcd-mega.is-entering { visibility: hidden; pointer-events: none; }
.mcd-mega.is-leaving  { visibility: visible; pointer-events: none; }

/* ── Inner content: the ONLY thing that animates ───────────── */
.mcd-mega__inner {
    display: flex;
    align-items: stretch;
    min-height: 260px;
    /* Start offset to the right, invisible */
    opacity: 0;
    transform: translateX(32px);
    transition: opacity var(--mcd-content-duration) var(--mcd-ease-out),
                transform var(--mcd-content-duration) var(--mcd-ease-out);
}

/* Slide in from right */
.mcd-mega.is-active .mcd-mega__inner {
    opacity: 1;
    transform: translateX(0);
}

/* Slide out to left */
.mcd-mega.is-leaving .mcd-mega__inner {
    opacity: 0;
    transform: translateX(-32px);
}

/* The incoming page is measurable but remains fully invisible until the shell
   has completed its height transition. */
.mcd-mega.is-entering .mcd-mega__inner {
    opacity: 0;
    transform: translateX(32px);
}

@media (prefers-reduced-motion: reduce) {
    .mcd-mobile-wrap::before {
        transition-duration: 1ms;
    }

    .mcd-mega-stage {
        transition-duration: 1ms;
    }

    .mcd-mega__inner {
        transform: none !important;
        transition: opacity 100ms var(--mcd-ease-out);
    }
}

/* ── Flat layout (Company panel) ────────────────────────────── */
.mcd-mega__inner--flat {
    align-items: flex-start;
    padding: 28px 32px;
    gap: 0;
}

/* Left section: heading stacked above columns */
.mcd-mega__flat-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mcd-mega__flat-heading {
    color: var(--mcd-red);
    margin-bottom: 18px;
}

/* Columns row below the heading */
.mcd-mega__flat-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.mcd-mega__col-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 28px;
    flex-shrink: 0;
}

.mcd-mega__col--flat {
    flex-shrink: 0;
    min-width: 220px;
}

.mcd-mega__inner--flat .mcd-mega__featured-wrap {
    flex-shrink: 0;
    width: var(--mcd-featured-w);
    min-width: unset;
    border-left: 1px solid #DEDEDE;
    padding: 20px;
    align-self: stretch;
    margin-left: 0;
    display: flex;
    flex-direction: column;
}

.mcd-mega__inner--flat .mcd-mega__featured {
    flex: 1;
    min-height: 0;
}

.mcd-mega__inner--flat .mcd-featured-card--article,
.mcd-mega__inner--flat .mcd-featured-card--media {
    min-height: unset;
    max-height: unset;
    flex: 1;
}

.mcd-mega__inner--flat .mcd-featured-card--article .mcd-featured-card__image,
.mcd-mega__inner--flat .mcd-featured-card--article .mcd-featured-card__image--placeholder {
    width: 236px !important;
    height: 100% !important;
    min-height: 236px !important;
    flex-shrink: 0;
    align-self: stretch;
    object-fit: cover;
    object-position: center;
}

.mcd-mega__inner--flat .mcd-featured-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Flat Cards layout (flat + white mini-cards) ─────────────────
   Card visuals come from .mcd-mega__card--mini to stay aligned with tabs. */
.mcd-mega__inner--flat-cards {
    gap: 28px;
}

.mcd-mega__flat-cols--cards {
    align-items: stretch;
}

.mcd-mega__flat-cols--cards .mcd-mega__col-divider {
    margin: 0 20px;
}

.mcd-mega__cards--mini.mcd-mega__cards--flat {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    padding-top: 0;
}

.mcd-mega__cards-label {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
}

.mcd-mega__cards-label:first-child {
    margin-top: 0;
}

/* ── Cards-grid layout (Solutions style) ────────────────────── */
.mcd-mega__inner--cards-grid {
    flex-direction: column;
    padding: 28px 32px;
    gap: 16px;
    min-height: unset;
}

.mcd-mega__cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mcd-mega__card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    background: #fff;
    border-radius: 25px;
    text-decoration: none;
    color: #222;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
    gap: 12px;
}

.mcd-mega__card-item:hover {
    background: var(--mcd-red);
    color: #fff !important;
}

.mcd-mega__card-item__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #707070;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcd-mega__card-item:hover .mcd-mega__card-item__arrow {
    border-color: #fff;
    color: #fff !important;
}
@keyframes mcdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mcd-mega__inner {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    margin: 0 auto;
    min-height: 260px;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.mcd-mega__sidebar {
    width: var(--mcd-sidebar-w);
    flex-shrink: 0;
    border-right: 1px solid #DEDEDE;
    padding: 24px 0;
}

.mcd-mega__sidebar ul {
    list-style: none;
}

.mcd-mega__sidebar li {
    border-bottom: 1px solid #DEDEDE;
}

.mcd-mega__sidebar li:last-child {
    border-bottom: none;
}

.mcd-mega__tab--link { text-decoration: none !important; }

.mcd-mega__tab,
.mcd-mega__tab-link {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #333;
    padding: 9px 20px 9px 18px !important;
    transition: color var(--mcd-transition), background var(--mcd-transition) !important;
    border-left: 3px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mcd-mega__tab-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none !important;
}

.mcd-mega__tab-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    color: #555;
    transition: border-color var(--mcd-transition), color var(--mcd-transition), transform var(--mcd-transition);
}

.mcd-mega__tab-link-arrow svg {
    width: 10px;
    height: 10px;
    display: block;
}

.mcd-mega__tab:hover {
    color: var(--mcd-red) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mcd-mega__tab-link:hover,
.mcd-mega__tab-link:focus-visible {
    color: var(--mcd-red) !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.mcd-mega__tab-link:hover .mcd-mega__tab-link-arrow,
.mcd-mega__tab-link:focus-visible .mcd-mega__tab-link-arrow {
    border-color: var(--mcd-red);
    color: var(--mcd-red);
    transform: translateX(2px);
}

/* When a top-level item contains only destination links, use the entire panel
   for a compact link grid instead of leaving an empty content region. */
.mcd-mega__inner--direct-links {
    min-height: 0;
    padding: 20px;
}

.mcd-mega__inner--direct-links .mcd-mega__sidebar {
    width: 100%;
    padding: 0;
    border-right: 0;
}

.mcd-mega__inner--direct-links .mcd-mega__sidebar ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.mcd-mega__inner--direct-links .mcd-mega__sidebar li {
    border-bottom: 0;
}

.mcd-mega__inner--direct-links .mcd-mega__tab-link {
    min-height: 58px;
    padding: 14px 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68) !important;
}

.mcd-mega__inner--direct-links .mcd-mega__tab-link:hover,
.mcd-mega__inner--direct-links .mcd-mega__tab-link:focus-visible {
    background: #fff !important;
    border-color: rgba(220, 3, 18, 0.35) !important;
}

.mcd-mega__tab:focus,
.mcd-mega__tab:active,
.mcd-nav .mcd-mega__tab:focus-visible,
.mcd-nav .mcd-mega__tab:focus-within {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mcd-mega__tab.is-active,
.mcd-nav .mcd-mega__tab[aria-expanded="true"] {
    color: var(--mcd-red) !important;
    border-left: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mcd-nav .mcd-mega__tab[aria-expanded="false"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ── Content area ────────────────────────────────────────────── */
.mcd-mega__content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 26px 32px 28px;
    position: relative;
}

.mcd-mega__panel {
    display: none;
    position: relative;
}

.mcd-mega__panel.is-active {
    display: block;
    animation: mcdFadeIn 0.15s ease forwards;
}

.mcd-mega__badge {
    display: inline-block;
    background: var(--mcd-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Heading – red, prominent, matches screenshot */
.mcd-mega__heading {
    color: var(--mcd-red);
    margin-bottom: 20px;
}

/* Link columns */
.mcd-mega__columns {
    display: flex;
    gap: 0;
}

.mcd-mega__col {
    flex: 0 0 auto;
    width: max-content;
    list-style: none;
    padding-right: 24px;
}

.mcd-mega__col + .mcd-mega__col {
    border-left: 1px solid #DEDEDE;
    padding-left: 24px;
}

.mcd-mega__col li + li {
    margin-top: 1px;
}

.mcd-mega__link {
    display: inline-block;
    position: relative;
    color: var(--mcd-menu-link, rgba(0, 0, 0, 0.72));
    text-decoration: none;
    padding: 5px 6px 5px 0;
    border-radius: 0;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    transition: color var(--mcd-transition), padding-left var(--mcd-transition);
}

/* Arrow icon */
.mcd-mega__link::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 35%;
    transform: translateY(-50%);
    width: 12px;
    height: 40px;
    background: url('../../arrow.svg') no-repeat center / contain;
    opacity: 0;
    transition: opacity var(--mcd-transition);
}

/* Underline — absolute so it always covers arrow + text */
.mcd-mega__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1.5px;
    background: #707070;
    opacity: 0;
    transition: opacity var(--mcd-transition);
}

.mcd-mega__link:hover {
    /* text-shadow fakes bold — no width change, no reflow */
    text-shadow: 0 0 0.5px var(--mcd-menu-link, rgba(0,0,0,0.88)), 0 0 0.5px var(--mcd-menu-link, rgba(0,0,0,0.88));
    color: var(--mcd-menu-link, rgba(0, 0, 0, 0.88));
    padding-left: 20px;
}

.mcd-mega__link:hover::before {
    opacity: 1;
}

.mcd-mega__link:hover::after {
    opacity: 1;
}

/* ── Cards layout ────────────────────────────────────────────── */
.mcd-mega__cards {
    display: flex;
    gap: 16px;
    padding-top: 8px;
}

.mcd-mega__card {
    flex: 1;
    display: flex;
    flex-direction: row;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: background var(--mcd-transition),
                box-shadow var(--mcd-transition);
}

.mcd-mega__card:hover {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.mcd-mega__card-img {
    width: 130px;
    flex-shrink: 0;
    overflow: hidden;
}

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

.mcd-mega__card-body {
    padding: 16px 14px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mcd-mega__card.no-image .mcd-mega__card-body {
    padding: 16px 16px 12px;
}

/* Dark card text on light glass */
.mcd-mega__card-title {
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.mcd-mega__card-excerpt {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.5;
    flex: 1;
}

.mcd-mega__card-arrow {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.3);
    transition: color var(--mcd-transition), transform var(--mcd-transition);
}

.mcd-mega__card:hover .mcd-mega__card-arrow {
    color: var(--mcd-red);
    transform: translateX(3px);
}

/* ── Mini cards layout (Industries style) ────────────────────── */
.mcd-mega__cards--mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 8px;
}

.mcd-mega__card--mini {
    flex: unset;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 14px;
}

.mcd-mega__card--mini .mcd-mega__card-body {
    padding: 0;
    gap: 3px;
}

.mcd-mega__card--mini .mcd-mega__card-excerpt {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.42);
    text-transform: uppercase;
    flex: 0;
    line-height: 1.2;
    margin-bottom: 3px;
}

.mcd-mega__card--mini .mcd-mega__card-title {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1.3;
}

.mcd-mega__card--mini .mcd-mega__card-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: unset;
    text-align: unset;
    margin-top: 0;
    transition: border-color var(--mcd-transition), color var(--mcd-transition);
}

.mcd-mega__card--mini:hover {
    background: var(--mcd-red);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.mcd-mega__card--mini:hover .mcd-mega__card-title,
.mcd-mega__card--mini:hover .mcd-mega__card-excerpt {
    color: #fff !important;
}

.mcd-mega__card--mini:hover .mcd-mega__card-arrow {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff !important;
    transform: none;
}

/* ── Compact featured card (active tab = mini-cards) ─────────── */
.mcd-featured-wrap--compact .mcd-featured-card--article,
.mcd-featured-wrap--compact .mcd-featured-card--media {
    min-height: unset;
    max-height: 250px;
    overflow: hidden;
}

.mcd-featured-wrap--compact .mcd-featured-card--article .mcd-featured-card__image,
.mcd-featured-wrap--compact .mcd-featured-card--article .mcd-featured-card__image--placeholder {
    width: 230px;
    height: 190px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: top center;
}

.mcd-featured-wrap--compact .mcd-featured-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Featured panel ──────────────────────────────────────────── */
.mcd-mega__featured-wrap {
    width: var(--mcd-featured-w);
    flex-shrink: 0;
    border-left: 1px solid #DEDEDE;
    padding: 20px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.mcd-mega__featured {
    display: none;
    flex: 1;
    min-height: 0;
}

.mcd-mega__featured.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center !important;
    animation: mcdFadeIn 0.15s ease forwards;
}

/* JetEngine Listing output uses its native template and dynamic context. These
   rules only make the one-column grid wrapper fill the existing card slot. */
.mcd-jetengine-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.mcd-jetengine-card > .jet-listing-grid,
.mcd-jetengine-card .jet-listing-grid__items,
.mcd-jetengine-card .jet-listing-grid__item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.mcd-jetengine-card__notice {
    padding: 16px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    color: #555;
    font-size: 12px;
    line-height: 1.5;
}

/* ── Base card shell ────────────────────────────────────────── */
.mcd-featured-card {
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    flex: 1;
    width: 100%;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow var(--mcd-transition);
}

.mcd-featured-card:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}

/* ── Article card: horizontal split ─────────────────────────── */
.mcd-featured-card--article,
.mcd-featured-card--media {
    flex-direction: row;
    min-height: 200px;
}

/* Left: dark image panel */
.mcd-featured-card--article .mcd-featured-card__image {
   
    height: 100% !important;
   
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    align-self: stretch;
}

.mcd-featured-card--article .mcd-featured-card__image--placeholder {
    width: 236px !important;
    height: auto !important;
    min-height: 236px !important;
    flex-shrink: 0;
    align-self: stretch;
    background: linear-gradient(160deg, #1a1a1a 0%, #3a3a3a 55%, #cc3300 100%);
}

/* Right: white content area */
.mcd-featured-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 14px 14px;
    min-width: 0;
}

/* Meta row: badge + category pill + date */
.mcd-featured-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

/* NEU badge (article card, inline in meta row) */
.mcd-featured-card--article .mcd-featured-card__badge {
    background: var(--mcd-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mcd-featured-card__category {
    font-size: 10px;
    font-weight: 600;
    color: #555;
    background: rgba(0, 0, 0, 0.08);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mcd-featured-card__date {
    font-size: 10px;
    color: #888;
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.mcd-featured-card__title {
    font-size: 13px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.mcd-featured-card__excerpt {
    font-size: 11px;
    color: #555;
    line-height: 1.55;
    flex: 0 1 auto;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcd-featured-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 30px;
    height: 30px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    margin-top: 10px;
    transition: background var(--mcd-transition);
    flex-shrink: 0;
}

.mcd-featured-card__btn svg {
    width: 14px;
    height: 14px;
    display: block;
}

.mcd-featured-card:hover .mcd-featured-card__btn {
    background: var(--mcd-red);
    color: #fff !important;
}

/* ── Product card: vertical stack ───────────────────────────── */
.mcd-featured-card--product {
    flex-direction: column;
    position: relative;
    min-height: 220px;
}

.mcd-featured-card--product .mcd-featured-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--mcd-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 3px;
    z-index: 1;
}

.mcd-featured-card--product .mcd-featured-card__image,
.mcd-featured-card--product .mcd-featured-card__image--placeholder {
    width: 100%;
    height: 170px;
    background: linear-gradient(135deg, #c8300a 0%, #f0600a 40%, #3a3a3a 100%);
    object-fit: cover;
    display: block;
}

.mcd-featured-card--product .mcd-featured-card__title {
    padding: 12px 14px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    text-align: center;
}

/* ── Video card ──────────────────────────────────────────────
   Shell, border, radius and hover come from .mcd-featured-card; the
   sizing rules above list --video beside --article so the two cards
   cannot drift apart. Only the fill and the CTA are specific here. */
.mcd-featured-card--media {
    --mcd-video-cta-x: 16px;
    --mcd-video-cta-y: 14px;
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse at 72% 28%, rgba(220, 35, 48, .34), transparent 48%),
                linear-gradient(135deg, #343434 0%, #1c1c1c 58%, #4a292b 100%);
}

/* Keep a deliberate dark media surface visible until the image or the first
   decoded video frame arrives; this avoids exposing the card's white backing. */
.mcd-featured-card__media-image,
.mcd-featured-card__video {
    background: radial-gradient(ellipse at 72% 28%, rgba(220, 35, 48, .34), transparent 48%),
                linear-gradient(135deg, #343434 0%, #1c1c1c 58%, #4a292b 100%);
}

.mcd-featured-card--article > .mcd-featured-card__image {
    background: radial-gradient(ellipse at 72% 28%, rgba(220, 35, 48, .34), transparent 48%),
                linear-gradient(135deg, #343434 0%, #1c1c1c 58%, #4a292b 100%);
}

/* !important mirrors the article image rules above: themes ship a global
   `video { height: auto }`, which would size the element by its own aspect
   ratio and leave the card background exposed beside it.

   The 1px overfill absorbs subpixel rounding: at fractional device pixel
   ratios (QHD at 125%/150% scaling) an exactly-inset child leaves a hairline
   of card background along an edge. The card's overflow clips the surplus.

   max-width needs !important too, or a global `video { max-width: 100% }`
   clamps the overfill back to the padding box and reinstates that hairline. */
.mcd-featured-card__video,
.mcd-featured-card__media-image {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

.mcd-featured-card__cta {
    position: absolute;
    right: var(--mcd-video-cta-x);
    bottom: var(--mcd-video-cta-y);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--mcd-red);
    color: #fff;
    border-radius: 20px;
    font-family: var(--mcd-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--mcd-transition);
}

.mcd-featured-card__cta-icon {
    display: flex;
    flex-shrink: 0;
}

.mcd-featured-card__cta-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.mcd-featured-card--media:hover a.mcd-featured-card__cta {
    background: #1a1a1a;
    color: #fff;
}

/* ================================================================
   MOBILE MENU
   ================================================================ */

/* ── Full-screen overlay ────────────────────────────────── */
.mcd-mobile-menu {
    --mcd-mobile-gutter: clamp(18px, 5.4vw, 28px);
    --mcd-mobile-surface: rgba(255, 255, 255, 0.68);
    --mcd-mobile-line: rgba(24, 24, 23, 0.105);
    --mcd-mobile-ink: #181817;
    --mcd-mobile-muted: #676763;
    --mcd-mobile-ease: cubic-bezier(0.32, 0.72, 0, 1);
    position: fixed;
    inset: 0;
    z-index: 50;
    padding-top: var(--mcd-bar-h);
    background-color: #f7f7f5 !important;
    background-image:
        radial-gradient(circle at 9% 72%, rgba(220, 3, 18, 0.095) 0, rgba(220, 3, 18, 0.035) 18%, transparent 39%),
        radial-gradient(circle at 91% 90%, rgba(220, 3, 18, 0.075) 0, transparent 31%) !important;
    backdrop-filter: blur(20px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(108%) !important;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--mcd-mobile-ink);
    font-family: var(--e-global-typography-text-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    isolation: isolate;
    overscroll-behavior: contain;
}

@supports (color: color-mix(in srgb, red, transparent)) {
    .mcd-mobile-menu {
        background-image:
            radial-gradient(circle at 9% 72%, color-mix(in srgb, var(--mcd-red) 9.5%, transparent) 0, color-mix(in srgb, var(--mcd-red) 3.5%, transparent) 18%, transparent 39%),
            radial-gradient(circle at 91% 90%, color-mix(in srgb, var(--mcd-red) 7.5%, transparent) 0, transparent 31%) !important;
    }
}

/* ── Floating close button ──────────────────────────────── */
.mcd-mobile__close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: #444;
    transition: background var(--mcd-transition), color var(--mcd-transition);
}
.mcd-mobile__close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #111;
}

.mcd-mobile-menu[hidden] {
    display: none;
}

/* ── Panels container ───────────────────────────────────── */
.mcd-mobile__panels {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Each panel fills the panels container and slides in/out */
.mcd-mobile__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    transform: translate3d(28px, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform 240ms var(--mcd-mobile-ease),
                opacity 160ms var(--mcd-ease-out),
                visibility 0s linear 240ms;
    will-change: transform, opacity;
}

.mcd-mobile__panel::-webkit-scrollbar {
    display: none;
}

.mcd-mobile__panel.is-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 240ms var(--mcd-mobile-ease),
                opacity 180ms var(--mcd-ease-out),
                visibility 0s linear 0s;
}

/* Parent panel pushed left when a sub-panel opens */
.mcd-mobile__panel.is-behind {
    transform: translate3d(-18px, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Sub-panels sit below their own subnav header */
.mcd-mobile__panel--sub {
    justify-content: flex-start;
}

/* ── Shared fixed subnav header (Zurück + badge) ────────── */
/* Fixed height always — no layout shift. visibility toggles without reflow. */
.mcd-mobile__subnav-fixed {
    display: flex;
    align-items: center;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 16px var(--mcd-mobile-gutter) 8px;
    flex-shrink: 0;
    gap: 8px;
    height: 56px;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 0;
}

.mcd-mobile__subnav-fixed.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ── Per-panel subnav bars are now hidden (fixed bar replaces them) ── */
.mcd-mobile__subnav {
    display: none;
}

/* This is a <button>, so every structural property is locked with !important —
   otherwise theme/Elementor button rules add a border and drop the flex box,
   which leaves the arrow sitting on the text baseline instead of centred.
   Type sizes are locked for the same reason: the mobile menu inherits
   Elementor global typography, which otherwise inflates both of these. */
.mcd-mobile__back {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: auto !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer !important;
    font-family: var(--mcd-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #555;
    margin: 0 !important;
    padding: 6px 10px 6px 0px !important;
    border-radius: 20px;
    transition: background var(--mcd-transition), color var(--mcd-transition);
}

/* Icon box matches the text box, so both centre on the same axis. */
.mcd-mobile__back svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    align-self: center;
}

.mcd-mobile__back > span {
    display: block;
    line-height: 1.4;
}

/* Colour is locked on every state. On iOS a tap leaves :hover stuck on the
   button until the next tap elsewhere, and a theme button:hover rule was
   repainting the label (and the currentColor arrow) white on the level the
   user came back to. */
.mcd-nav .mcd-mobile__back,
.mcd-nav .mcd-mobile__back:link,
.mcd-nav .mcd-mobile__back:visited,
.mcd-nav .mcd-mobile__back:focus,
.mcd-nav .mcd-mobile__back:active {
    color: #555 !important;
    -webkit-text-fill-color: currentColor;
}

/* Hover feedback only where a real pointer exists. */
@media (hover: hover) and (pointer: fine) {
    .mcd-nav .mcd-mobile__back:hover {
        background: rgba(0, 0, 0, 0.06) !important;
        color: #222 !important;
    }
}

/* Touch devices: neutralise any hover state, whoever set it. */
@media (hover: none) {
    .mcd-nav .mcd-mobile__back:hover {
        background: none !important;
        color: #555 !important;
    }
}

.mcd-mobile__sub-badge {
    margin: 0 0 0 auto !important;
    background: var(--mcd-red);
    border: 0 !important;
    box-shadow: none !important;
    color: #fff;
    font-family: var(--mcd-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 20px;
    white-space: nowrap;
}

/* The root panel starts straight with the list — no intro heading. */
.mcd-mobile__panel--main .mcd-mobile__list {
    padding-top: clamp(20px, 4vh, 36px) !important;
}

/* ── Shared list styles ─────────────────────────────────── */
.mcd-mobile__list {
    list-style: none !important;
    width: min(100%, 760px);
    margin: 0 auto !important;
    padding: 0 max(var(--mcd-mobile-gutter), env(safe-area-inset-right)) 0 max(var(--mcd-mobile-gutter), env(safe-area-inset-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: transparent;
}

.mcd-mobile__panel--sub .mcd-mobile__list {
    padding-top: 8px !important;
}

.mcd-mobile__item {
    position: relative;
    border: 0 !important;
    background: var(--mcd-mobile-surface);
    box-shadow: inset 0 -1px 0 var(--mcd-mobile-line);
}

.mcd-mobile__item:first-child {
    border-radius: 20px 20px 0 0;
}

.mcd-mobile__item:last-child {
    border-radius: 0 0 20px 20px;
    box-shadow: none;
}

.mcd-mobile__item:only-child {
    border-radius: 20px;
}

.mcd-mobile__item:first-child .mcd-mobile__link {
    border-radius: 20px 20px 0 0 !important;
}

.mcd-mobile__item:last-child .mcd-mobile__link {
    border-radius: 0 0 20px 20px !important;
}

.mcd-mobile__item:only-child .mcd-mobile__link {
    border-radius: 20px !important;
}

.mcd-mobile__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 14px !important;
    min-height: 68px !important;
    padding: 10px 12px 10px 16px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mcd-mobile-ink) !important;
    cursor: pointer !important;
    font-family: inherit;
    font-size: clamp(1.125rem, 4.8vw, 1.375rem);
    font-weight: 520;
    line-height: 1.24;
    letter-spacing: -0.022em;
    text-align: left !important;
    text-decoration: none !important;
    margin: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
    transform-origin: center;
    transition: transform 140ms var(--mcd-ease-out),
                color 180ms ease,
                background-color 180ms ease !important;
}

.mcd-mobile__panel--main .mcd-mobile__link {
    min-height: 72px !important;
    font-size: clamp(1.3125rem, 5.8vw, 1.75rem);
    font-weight: 610;
    letter-spacing: -0.032em;
}

.mcd-mobile__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mcd-mobile__panel--sub .mcd-mobile__link {
    min-height: 66px !important;
    padding: 10px 10px 10px 16px !important;
}

.mcd-mobile__item--jetengine,
.mcd-mobile__item--featured {
    padding: 16px;
    overflow: hidden;
}

/* News / featured card inside a mobile panel: stack it, the row split of the
   desktop card is far too tight at phone widths. */
.mcd-mobile__item--featured .mcd-featured-card {
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 2px 14px rgba(19, 19, 18, 0.1);
}

.mcd-mobile__item--featured .mcd-featured-card__image,
.mcd-mobile__item--featured .mcd-featured-card__image--placeholder {
    width: 100% !important;
    height: 168px !important;
    min-height: 0 !important;
    max-height: 168px;
    object-fit: cover;
}

.mcd-mobile__item--featured .mcd-featured-card__body {
    padding: 14px 16px 16px;
}

.mcd-mobile__item--featured .mcd-featured-card__meta {
    flex-wrap: wrap;
    row-gap: 6px;
}

.mcd-mobile__item--featured .mcd-featured-card__title {
    white-space: normal;
}

.mcd-mobile__item--featured .mcd-featured-card--product {
    padding-bottom: 16px;
}

.mcd-mobile__item--media {
    padding: 16px;
    overflow: hidden;
}

.mcd-mobile__item--media .mcd-featured-card--media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    box-shadow: 0 2px 14px rgba(19, 19, 18, 0.1);
}

.mcd-mobile__chevron,
.mcd-mobile__destination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    background: rgba(24, 24, 23, 0.055);
    color: var(--mcd-mobile-ink) !important;
    flex-shrink: 0 !important;
    transition: transform 180ms var(--mcd-ease-out),
                background-color 180ms ease,
                color 180ms ease;
}

.mcd-mobile__chevron svg,
.mcd-mobile__destination svg {
    width: var(--mcd-mobile-chevron-size, 20px) !important;
    height: var(--mcd-mobile-chevron-size, 20px) !important;
    display: block !important;
    font-size: 0 !important;
    font-family: inherit !important;
}

.mcd-mobile__destination svg {
    width: 17px !important;
    height: 17px !important;
}

/* Mobile wrap – positioning context. Matches the bar's own transform timing
   so hiding and showing read as one movement. */
.mcd-mobile-wrap {
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Mobile footer links (Dokumentation / Downloads / socials) ── */
/* Lives inside .mcd-mobile-menu which is hidden[display:none] on desktop */
.mcd-mobile__footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    width: min(100%, 760px);
    margin: 12px auto 0;
    padding: 0 max(var(--mcd-mobile-gutter), env(safe-area-inset-right)) 28px max(var(--mcd-mobile-gutter), env(safe-area-inset-left));
    flex-shrink: 0;
}

/* LinkedIn + email, moved out of the nav bar on mobile */
.mcd-mobile__footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.mcd-mobile__footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mcd-mobile-surface);
    box-shadow: inset 0 0 0 1px var(--mcd-mobile-line);
    color: var(--mcd-mobile-ink) !important;
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms var(--mcd-ease-out),
                background-color 180ms ease,
                color 180ms ease;
}

.mcd-mobile__footer-icon svg {
    width: var(--mcd-action-icon-size, 16px);
    height: var(--mcd-action-icon-size, 16px);
}

.mcd-mobile__footer-icon:active {
    transform: scale(0.94);
}

.mcd-mobile__footer-icon:focus-visible {
    outline: 2px solid var(--mcd-red);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .mcd-mobile__footer-icon:hover {
        background: var(--mcd-red);
        color: #fff !important;
    }
}

.mcd-mobile__footer-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mcd-mobile-ink) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    touch-action: manipulation;
    transition: transform 140ms var(--mcd-ease-out),
                background-color 180ms ease,
                color 180ms ease;
}

.mcd-mobile__link:focus-visible,
.mcd-mobile__back:focus-visible,
.mcd-mobile__footer-link:focus-visible {
    outline: 2px solid var(--mcd-red);
    outline-offset: 3px;
}

.mcd-mobile__link:active,
.mcd-mobile__back:active,
.mcd-mobile__footer-link:active {
    transform: scale(0.98);
}

.mcd-mobile__link:active .mcd-mobile__chevron,
.mcd-mobile__link:active .mcd-mobile__destination {
    background: var(--mcd-red);
    color: #fff !important;
    transform: translateX(2px);
}

@media (hover: hover) and (pointer: fine) {
    .mcd-mobile__link:hover {
        color: var(--mcd-red) !important;
        background: rgba(220, 3, 18, 0.045) !important;
    }

    .mcd-mobile__link:hover .mcd-mobile__chevron,
    .mcd-mobile__link:hover .mcd-mobile__destination {
        background: var(--mcd-red);
        color: #fff !important;
        transform: translateX(2px);
    }

    .mcd-mobile__footer-link:hover {
        background: transparent;
        color: var(--mcd-red) !important;
    }
}

@supports (color: color-mix(in srgb, red, transparent)) {
    @media (hover: hover) and (pointer: fine) {
        .mcd-mobile__link:hover {
            background: color-mix(in srgb, var(--mcd-red) 4.5%, transparent) !important;
        }

        .mcd-mobile__footer-link:hover {
            background: transparent;
        }
    }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Intermediate desktop: the featured column remains visible, so compact
   panel cards need the full content-column width instead of squeezing into
   two narrow columns. At 1325px and below the hamburger layout takes over. */
@media (min-width: 1326px) and (max-width: 1500px) {
    .mcd-mega__cards--mini {
        grid-template-columns: minmax(0, 1fr);
    }

    .mcd-mega__card--mini,
    .mcd-mega__card--mini .mcd-mega__card-body {
        min-width: 0;
    }
}

/* Keep Elementor and the mobile header inside the available responsive width.
   min-width: 0 is required for nested flex/grid parents; this constrains the
   header itself instead of masking page overflow with overflow-x: hidden. */
@media (max-width: 1325px) {
    .elementor-widget-mcd_mega_menu,
    .elementor-widget-mcd_mega_menu > .elementor-widget-container,
    .elementor-widget-mcd_mega_menu .mcd-nav,
    .elementor-widget-mcd_mega_menu .mcd-mobile-wrap,
    .mcd-nav__bar,
    .mcd-nav__inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .mcd-nav__logo {
        min-width: 0;
    }
}

/* Hamburger breakpoint – hide nav items, show burger */
@media (max-width: 1325px) {
    .mcd-nav {
        margin: 0;
    }
    .mcd-nav__items {
        display: none;
    }
    /* Sprachumschalter sitzt auf dem Smartphone im Menü-Footer
       (.mcd-mobile__footer-socials) – siehe Regel weiter unten bei den
       Text-Links und Social-Icons. Der Platz in der Leiste gehört dem
       kompakten Chat-Launcher. Auf dem Desktop bleibt alles unverändert. */
    .mcd-nav__burger {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        padding: 12px !important;
    }
    .mcd-nav__logo {
        margin-right: 0;
        flex: 1;
    }
    .mcd-nav__logo img,
    .mcd-nav__logo svg {
        width: 76px !important;
        height: auto !important;
        aspect-ratio: 802.8 / 405.5 !important;
    }
    /* Keep the mobile header's glass on the same shared shell surface. */
    .mcd-nav.mobile-open .mcd-mobile-wrap::before {
        background: rgba(252, 252, 251, 0.9) !important;
        backdrop-filter: blur(24px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(112%) !important;
        box-shadow: 0 18px 48px -30px rgba(19, 19, 18, 0.45) !important;
    }

    .mcd-nav.has-open-panel .mcd-mobile-wrap::before {
        border-radius: 28px;
    }
    .mcd-mega {
        border-radius: 0 0 28px 28px;
    }
    .mcd-mega__sidebar {
        border-radius: 0 0 0 28px;
    }
    .mcd-nav__inner {
        min-height: 72px;
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .mcd-nav__actions {
        gap: 8px;
    }
    .mcd-nav__burger {
        touch-action: manipulation;
    }
    /* Hide desktop text links, social icons and the language switcher — all of
       them move into the mobile menu footer (.mcd-mobile__footer-links) */
    .mcd-nav__text-links,
    .mcd-nav__icon-btn,
    .mcd-nav__lang-wrap {
        display: none !important;
    }
    /* Correct mobile menu overlay padding to match actual mobile bar height */
    .mcd-mobile-menu {
        padding-top: 103px;
    }
    /* The nav bar position on the page is controlled by Elementor section spacing. */
    .mcd-mobile-wrap {
        margin-top: 12px;
        z-index: 60;
    }
}

/* ── Components cards-grid: Gobold Lowplus font ──────────────── */
.mcd-mega__inner--cards-grid .mcd-mega__card-item {
    font-family: 'Gobold Lowplus', 'Gobold', var(--mcd-font);
}

/* ── Mobile: no tap highlight flash ─────────────────────────── */
.mcd-nav__burger,
.mcd-mobile__link,
.mcd-mobile__back {
    -webkit-tap-highlight-color: transparent;
}

/* ── Mobile: hide chevron on leaf items (no sub-panel) ───────── */
.mcd-mobile__link--leaf .mcd-mobile__chevron {
    display: none !important;
}

/* ── Elementor custom CSS overrides ─────────────────────────── */
@media only screen and (min-width: 1025px) {
    .mcd-mobile__wrap {
        padding-top: 0 !important;
    }
}

@media (min-width: 1326px) {
    .mcd-nav__inner {
        padding: 1em 2em !important;
        gap: 2em !important;
    }
}

.mcd-nav__items {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* ── Mobile menu horizontal padding by device ───────────────── */
/* Mobile: ≤767px → compact, safe gutters */
@media (max-width: 767px) {
    .mcd-mobile__list {
        padding-left: max(var(--mcd-mobile-gutter), env(safe-area-inset-left)) !important;
        padding-right: max(var(--mcd-mobile-gutter), env(safe-area-inset-right)) !important;
    }
    .mcd-mobile__subnav-fixed {
        padding-left: max(var(--mcd-mobile-gutter), env(safe-area-inset-left)) !important;
        padding-right: max(var(--mcd-mobile-gutter), env(safe-area-inset-right)) !important;
    }
    .mcd-mobile__subnav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .mcd-mobile__footer-links {
        padding-left: max(var(--mcd-mobile-gutter), env(safe-area-inset-left)) !important;
        padding-right: max(var(--mcd-mobile-gutter), env(safe-area-inset-right)) !important;
    }
}

/* Tablet: 768px–1024px → 34px sides */
@media (min-width: 768px) and (max-width: 1024px) {
    .mcd-mobile__list {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }
    .mcd-mobile__subnav-fixed {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }
    .mcd-mobile__subnav {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }
    .mcd-mobile__footer-links {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }
}

/* Short landscape phones: preserve hierarchy without forcing a long scroll. */
@media (max-width: 932px) and (max-height: 560px) and (orientation: landscape) {
    .mcd-mobile-menu {
        --mcd-mobile-gutter: 24px;
        padding-top: 82px;
    }

    .mcd-mobile__panel--main .mcd-mobile__list {
        padding-top: 12px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1px;
    }

    .mcd-mobile__panel--main .mcd-mobile__item,
    .mcd-mobile__panel--main .mcd-mobile__item:first-child,
    .mcd-mobile__panel--main .mcd-mobile__item:last-child {
        border-radius: 0;
    }

    .mcd-mobile__panel--main .mcd-mobile__item:nth-child(1) {
        border-radius: 18px 0 0 0;
    }

    .mcd-mobile__panel--main .mcd-mobile__item:nth-child(2) {
        border-radius: 0 18px 0 0;
    }

    .mcd-mobile__panel--main .mcd-mobile__link {
        min-height: 58px !important;
        font-size: 1.1875rem;
    }

    .mcd-mobile__subnav-fixed {
        height: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .mcd-mobile__panel--sub .mcd-mobile__list {
        padding-top: 6px !important;
    }

    .mcd-mobile__panel--sub .mcd-mobile__link {
        min-height: 56px !important;
    }

    .mcd-mobile__footer-links {
        margin-top: 8px;
        padding-bottom: 14px;
    }
}

@media (max-width: 390px) {
    .mcd-mobile-menu {
        --mcd-mobile-gutter: 16px;
    }

    .mcd-nav__inner {
        padding-right: 10px !important;
        padding-left: 12px !important;
        gap: 6px !important;
    }

    .mcd-nav__actions {
        gap: 8px;
    }

    .mcd-nav__logo img,
    .mcd-nav__logo svg {
        width: 70px !important;
    }

    .mcd-nav__burger {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcd-mobile__panel,
    .mcd-mobile__panel.is-active,
    .mcd-mobile-wrap,
    .mcd-mobile__link,
    .mcd-mobile__back,
    .mcd-mobile__footer-link,
    .mcd-mobile__chevron,
    .mcd-mobile__destination {
        transition-duration: 1ms !important;
    }

    .mcd-mobile__panel,
    .mcd-mobile__panel.is-active,
    .mcd-mobile__panel.is-behind {
        transform: none !important;
    }
}

/* ── Scroll-hide / scroll-show ───────────────────────────────── */
/* The JS toggles is-scroll-hidden on .mcd-nav; the shared wrapper carries
   both the visible glass surface and its header content. */
/* Move the shared shell and its contents as one unit at every breakpoint.
   Moving only the bar leaves its pseudo-element glass surface behind. */
.mcd-nav.is-scroll-hidden .mcd-mobile-wrap {
    transform: translateY(-150%) !important;
    pointer-events: none !important;
}

.mcd-nav.is-scroll-hidden .mcd-nav__bar {
    transform: none !important;
}

.mcd-nav.is-scroll-hidden .mcd-mega-stage {
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ── Elementor widget icon variable overrides ────────────────── */
/* stroke-width: applies to all stroked SVGs (chevrons, back arrow, action icons) */
.mcd-nav .mcd-mobile__chevron svg,
.mcd-nav .mcd-mobile__back svg,
.mcd-nav .mcd-mobile__footer-link svg {
    stroke-width: var(--mcd-icon-stroke, 2.5);
}

/* Action bar icon size (LinkedIn, email, language globe) */
.mcd-nav .mcd-nav__icon-btn svg,
.mcd-nav .mcd-nav__lang svg {
    width: var(--mcd-action-icon-size, 16px);
    height: var(--mcd-action-icon-size, 16px);
    stroke-width: var(--mcd-icon-stroke, 2.5);
}

/* Translation diagnostics are rendered only for signed-in visitors. */
.mcd-language-notice {
    display: block;
    max-width: 240px;
    padding: 6px 10px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: #b42318;
    background: #fff0f0;
    font-family: var(--mcd-font);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.mcd-mobile__footer-socials:has(.mcd-language-notice) {
    flex-wrap: wrap;
}
.mcd-mobile__footer-socials .mcd-language-notice {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Media assigned to a cards-grid menu gets the same dedicated slot as tabs. */
.mcd-mega__inner--grid-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--mcd-featured-w));
    align-items: stretch;
}
.mcd-mega__inner--grid-media > .mcd-mega__flat-heading {
    grid-column: 1 / -1;
}
.mcd-mega__grid-media {
    display: flex;
    min-width: 0;
}
.mcd-mega__inner--grid-media > .mcd-mega__cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* AI disclosure plugins wrap images in a positioned span. Our absolutely
   positioned image cannot give that flex child an intrinsic width: the
   wrapper must fill the card itself. Keep the wrapper intact so the image retains its full size. */
.mcd-featured-card--image > .cn-ai-badge-wrap {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Suppress AI badges only inside this menu, including badges inserted later.
   Do not hide the image wrapper or data-cn-ai-badge-applied media elements. */
.mcd-nav .cn-ai-badge-group,
.mcd-nav .cn-ai-content-badge,
.mcd-nav [data-cn-ai-generated-badge] {
    display: none !important;
}

/* Fixed inset is intentional for this decorative viewport cover: it contains
   no layout content and must track the visible viewport (viewport-audit-ignore). */
.mcd-nav { position: relative; isolation: isolate; }
.mcd-page-overlay {
    display: var(--mcd-overlay-display, block);
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--mcd-overlay-blur, 8px));
    backdrop-filter: blur(var(--mcd-overlay-blur, 8px));
    transition: opacity 180ms ease, visibility 180ms ease;
}
.mcd-page-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mcd-overlay-color, #000);
    opacity: var(--mcd-overlay-opacity, .35);
}
@media (min-width: 1326px) {
    .mcd-nav.has-open-panel > .mcd-page-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
@media (max-width: 1325px) {
    .mcd-nav.mobile-open > .mcd-page-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
.mcd-nav--editor > .mcd-page-overlay { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
    .mcd-page-overlay { transition: none; }
}


/* CPT/news article cards use a square, fully covered image by default. */
.mcd-featured-card--article > .mcd-featured-card__image,
.mcd-featured-card--article > .mcd-featured-card__image--placeholder {
    width: 44% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 44%;
    align-self: center;
    object-fit: cover;
    object-position: center;
}

/* Elementor's per-nav-item position choice. The default is left so the
   featured image/video/news card appears before the menu title and links. */
@media (min-width: 1326px) {
    .mcd-mega--featured-left .mcd-mega__inner--flat {
        flex-direction: row-reverse;
    }

    .mcd-mega--featured-left .mcd-mega__inner--flat > .mcd-mega__featured-wrap {
        border-left: 0;
        border-right: 1px solid #DEDEDE;
    }

    /* Tabbed panels keep category navigation first. Put featured media
       between the categories and the active child-item content. */
    .mcd-mega--featured-left .mcd-mega__inner:not(.mcd-mega__inner--flat):not(.mcd-mega__inner--cards-grid) > .mcd-mega__content {
        order: 2;
    }

    .mcd-mega--featured-left .mcd-mega__inner:not(.mcd-mega__inner--flat):not(.mcd-mega__inner--cards-grid) > .mcd-mega__featured-wrap {
        order: 1;
        border-left: 1px solid #DEDEDE;
        border-right: 0;
    }

    .mcd-mega--featured-left .mcd-mega__inner--grid-media {
        grid-template-columns: minmax(0, var(--mcd-featured-w)) minmax(0, 1fr);
    }

    .mcd-mega--featured-left .mcd-mega__inner--grid-media > .mcd-mega__grid-media {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .mcd-mega--featured-left .mcd-mega__inner--grid-media > .mcd-mega__cards-grid {
        grid-column: 2;
        grid-row: 2;
    }

    .mcd-mega--featured-left .mcd-mega__inner--grid-media > .mcd-mega__flat-heading {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 767px) {
    .mcd-nav .mcd-mobile__item--featured .mcd-featured-card--article > .mcd-featured-card__image,
    .mcd-nav .mcd-mobile__item--featured .mcd-featured-card--article > .mcd-featured-card__image--placeholder {
        width: 100% !important;
        flex: 0 0 auto;
        align-self: stretch;
    }
}