/**
 * Quick Media Theme - Component Stylesheet
 * 
 * Clean, semantic HTML5 component styling:
 * - Buttons, Cards, Sliders/Carousels
 * - Semantic Navigation, Sticky Header, Mobile Drawer
 * - Semantic Accordions (<details>/<summary>)
 * - Stats Counters, Split Content, Testimonials
 * - WordPress Core Blocks & Alignment Support
 */

/* ==========================================================================
   1. Buttons (:is(.qmt-button,.qm-btn))
   ========================================================================== */
:is(.qmt-button,.qm-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-btn, 8px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

:is(.qmt-button,.qm-btn):focus-visible {
    outline: 2px solid var(--qm-primary, #054f8e);
    outline-offset: 3px;
}

/* Nav mega menu ------------------------------------------------------------
 * Desktop presentation only. WordPress owns the items and the hierarchy; the
 * markup is one <li class="qmt-mega-col"> per first-level submenu GROUP, and the
 * column count arrives as --qmt-mega-cols from the builder's "Mega Menu Columns"
 * control (auto resolves to the group count, clamped to 4). Every group is always
 * rendered, so a fixed count changes only the wrapping.
 *
 * Below the nav breakpoint the SAME markup becomes the ordinary stacked
 * tap-to-expand hierarchy: the panel stops floating, the grid collapses to one
 * column, and each group's list is hidden until its .qmt-mega-toggle is used.
 * That toggle is the button qmt-navigation.js already binds, so mobile needs no
 * second navigation system and no JavaScript here.
 */
.qmt-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: var(--qmt-mega-width, 760px);
    max-width: min(92vw, 1100px);
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--qm-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.qmt-nav-menu--mega .qmt-menu-item--level-0:hover > .qmt-mega-panel,
.qmt-nav-menu--mega .qmt-menu-item--level-0:focus-within > .qmt-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.qmt-mega-columns {
    display: grid;
    grid-template-columns: repeat(var(--qmt-mega-cols, 4), minmax(0, 1fr));
    gap: 4px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qmt-mega-col {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 6px 0;
}

.qmt-mega-col + .qmt-mega-col {
    border-left: 1px solid var(--qm-border, #e2e8f0);
    padding-left: 24px;
}

.qmt-mega-col-title {
    flex: 1 1 auto;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qm-primary, #004AAD);
    text-decoration: none;
}

/* A group with nothing nested under it is a plain link in a grid, not a
 * heading, so it must not read as one. */
.qmt-mega-col-title--leaf {
    color: var(--qm-body, #666);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.qmt-mega-list {
    flex: 1 0 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qmt-mega-list--nested {
    margin-top: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--qm-border, #e2e8f0);
}

.qmt-mega-link {
    display: block;
    padding: 5px 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--qm-body, #666);
    text-decoration: none;
}

.qmt-mega-link:hover,
.qmt-mega-link:focus-visible {
    color: var(--qm-primary, #004AAD);
}

/* The tap-to-expand affordance belongs to the stacked layout only. */
.qmt-mega-toggle {
    display: none;
    flex: 0 0 auto;
    align-self: center;
    padding: 4px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

@media (max-width: 991px) {
    .qmt-mega-panel {
        position: static;
        min-width: 0;
        max-width: none;
        padding: 0 0 0 14px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .qmt-mega-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .qmt-mega-col {
        padding: 0;
        border: 0;
    }

    .qmt-mega-col + .qmt-mega-col {
        border-left: 0;
        padding-left: 0;
    }

    .qmt-mega-col-title {
        flex: 0 1 auto;
        margin: 0;
        padding: 10px 0;
        font-size: 0.9375rem;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Collapsed until the group is expanded, which is what makes this the normal
     * hierarchical mobile menu rather than a 2/3/4 column desktop layout. */
    .qmt-mega-list {
        display: none;
    }

    .qmt-mega-col.is-expanded > .qmt-mega-list {
        display: block;
    }

    .qmt-mega-toggle {
        display: inline-flex;
    }

    .qmt-mega-toggle svg {
        transition: transform .18s ease;
    }

    .qmt-mega-col.is-expanded > .qmt-mega-toggle svg,
    .qmt-menu-item.is-expanded > .qmt-mega-toggle svg {
        transform: rotate(180deg);
    }
}
/* Optional Button icon -----------------------------------------------------
 * The button is already inline-flex with align-items:center and a gap, so the
 * icon and label align natively. No absolute positioning is used, and the
 * element's own `gap` control is the icon spacing.
 * The icon is decorative: it is aria-hidden in the markup and must never
 * duplicate the button label for assistive technology.
 * Sized in `em` so it tracks the button's font-size and therefore responds to
 * responsive typography without a second size system. */
.qmt-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
}

.qmt-button-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: none;
    stroke: currentColor;
}

.qmt-button-label {
    display: inline-block;
}

/* Primary Button */
:is(.qmt-button--primary,.qm-btn--primary),
:is(.qmt-button-primary,.qm-btn-primary) {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

:is(.qmt-button--primary,.qm-btn--primary):hover,
:is(.qmt-button-primary,.qm-btn-primary):hover {
    background-color: var(--qm-primary-dark, #043f72);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #ffffff;
}

/* Secondary Button */
:is(.qmt-button--secondary,.qm-btn--secondary),
:is(.qmt-button-secondary,.qm-btn-secondary) {
    background-color: var(--qm-secondary, #ff800b);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

:is(.qmt-button--secondary,.qm-btn--secondary):hover,
:is(.qmt-button-secondary,.qm-btn-secondary):hover {
    background-color: var(--qm-secondary-dark, #cc6609);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #ffffff;
}

/* Outline Button */
:is(.qmt-button--outline,.qm-btn--outline),
:is(.qmt-button-outline,.qm-btn-outline) {
    background-color: transparent;
    color: var(--qm-primary, #054f8e);
    border-color: var(--qm-primary, #054f8e);
}

:is(.qmt-button--outline,.qm-btn--outline):hover,
:is(.qmt-button-outline,.qm-btn-outline):hover {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Ghost / Plain Button */
:is(.qmt-button--ghost,.qm-btn--ghost) {
    background-color: transparent;
    color: var(--qm-text-color, #334155);
    border-color: transparent;
}

:is(.qmt-button--ghost,.qm-btn--ghost):hover {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
}

/* Sizes */
:is(.qmt-button--sm,.qmt-button-sm,.qm-btn--sm) {
    padding: 0.5rem 1.1rem;
    font-size: var(--text-s, 0.9rem);
    border-radius: var(--radius-s, 6px);
}

/* Component size must win over the global button's base padding. */
:is(.qmt-button.qmt-button--sm,.qmt-button.qmt-button-sm,.qm-btn.qm-btn--sm) {
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-s, 6px);
}

:is(.qmt-button--lg,.qmt-button-lg,.qm-btn--lg) {
    padding: 0.95rem 2.2rem;
    font-size: var(--text-l, 1.25rem);
    border-radius: var(--radius-m, 12px);
}

:is(.qmt-button--pill,.qmt-button-pill,.qm-btn--pill) {
    border-radius: var(--radius-pill, 9999px);
}

/* ==========================================================================
   2. Cards (:is(.qmt-card,.qm-card))
   ========================================================================== */
:is(.qmt-card,.qm-card) {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--radius-m, 14px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

:is(.qmt-card--interactive,.qm-card--interactive):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--qm-primary-light, #dae5ee);
}

:is(.qmt-card-media,.qm-card-media) {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--qm-base-ultra-light, #f8fafc);
}

:is(.qmt-card-media,.qm-card-media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

:is(.qmt-card--interactive,.qm-card--interactive):hover :is(.qmt-card-media,.qm-card-media) img {
    transform: scale(1.05);
}

:is(.qmt-card-body,.qm-card-body) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--space-s, 1.5rem);
}

:is(.qmt-card-icon,.qm-card-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-m, 12px);
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

:is(.qmt-card-title,.qm-card-title) {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: var(--h4, 1.4rem);
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-card-title,.qm-card-title) a {
    color: inherit;
    text-decoration: none;
}

:is(.qmt-card-title,.qm-card-title) a:hover {
    color: var(--qm-primary, #054f8e);
}

:is(.qmt-card-text,.qm-card-text) {
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
    margin-bottom: var(--space-s, 1.25rem);
    flex-grow: 1;
}

:is(.qmt-card-footer,.qm-card-footer) {
    padding-top: var(--space-xs, 0.75rem);
    margin-top: auto;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   3. Touch-Friendly Slider / Carousel (:is(.qmt-slider,.qm-slider))
   ========================================================================== */
:is(.qmt-slider,.qm-slider) {
    position: relative !important;
    width: 100%;
    overflow: hidden;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
    clear: both;
}

:is(.qmt-hero-slider,.qm-hero-slider) {
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

.qmt-slider.qmt-slider-nav--sides,
.qm-slider.qm-slider-nav--sides {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

:is(.qmt-slider-track,.qm-slider-track) {
    display: flex;
    gap: var(--grid-gap, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0.5rem 0.25rem;
    touch-action: pan-y;
}

:is(.qmt-slider-track,.qm-slider-track)::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

:is(.qmt-slide,.qm-slide) {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    :is(.qmt-slider--cols-2,.qm-slider--cols-2) :is(.qmt-slide,.qm-slide) {
        flex: 0 0 calc(50% - (var(--grid-gap, 1.5rem) / 2));
        max-width: calc(50% - (var(--grid-gap, 1.5rem) / 2));
    }
}

@media (min-width: 1024px) {
    :is(.qmt-slider--cols-3,.qm-slider--cols-3) :is(.qmt-slide,.qm-slide) {
        flex: 0 0 calc(33.333% - (var(--grid-gap, 1.5rem) * 2 / 3));
        max-width: calc(33.333% - (var(--grid-gap, 1.5rem) * 2 / 3));
    }
    :is(.qmt-slider--cols-4,.qm-slider--cols-4) :is(.qmt-slide,.qm-slide) {
        flex: 0 0 calc(25% - (var(--grid-gap, 1.5rem) * 3 / 4));
        max-width: calc(25% - (var(--grid-gap, 1.5rem) * 3 / 4));
    }
}

/* Fade Transition Mode */
:is(.qmt-slider--fade,.qm-slider--fade) :is(.qmt-slider-track,.qm-slider-track) {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
}
:is(.qmt-slider--fade,.qm-slider--fade) :is(.qmt-slide,.qm-slide) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
}
:is(.qmt-slider--fade,.qm-slider--fade) :is(.qmt-slide,.qm-slide).is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slider Controls & Navigation Positioning */
:is(.qmt-slider-controls,.qm-slider-controls) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 15;
}

/* Center Bottom (Default & Primary) */
:is(.qmt-slider-controls--bottom-center,.qm-slider-controls--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-controls--bottom-center,.qm-slider-controls--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Bottom Right */
:is(.qmt-slider-controls--bottom-right,.qm-slider-controls--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-controls--bottom-right,.qm-slider-controls--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Bottom Left */
:is(.qmt-slider-controls--bottom-left,.qm-slider-controls--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-controls--bottom-left,.qm-slider-controls--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Top Right */
:is(.qmt-slider-controls--top-right,.qm-slider-controls--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-controls--top-right,.qm-slider-controls--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

/* Top Left */
:is(.qmt-slider-controls--top-left,.qm-slider-controls--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-controls--top-left,.qm-slider-controls--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

/* Center Right (Middle vertical stack) */
:is(.qmt-slider-controls--center-right,.qm-slider-controls--center-right) {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 25;
}

/* Sides Overlay Floating Arrows */
:is(.qmt-slider-btn--side-prev,.qm-slider-btn--side-prev) {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
}
:is(.qmt-slider-btn--side-next,.qm-slider-btn--side-next) {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
}
:is(.qmt-slider-btn--side-prev,.qm-slider-btn--side-prev):hover,
:is(.qmt-slider-btn--side-next,.qm-slider-btn--side-next):hover {
    transform: translateY(-50%) scale(1.05) !important;
}
:is(.qmt-slider-btn--side-prev,.qm-slider-btn--side-prev):active,
:is(.qmt-slider-btn--side-next,.qm-slider-btn--side-next):active {
    transform: translateY(-50%) scale(0.96) !important;
}
:is(.qmt-slider-dots--bottom,.qm-slider-dots--bottom) {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INDEPENDENT SLIDER ARROWS POSITIONING
   ═══════════════════════════════════════════════════════════════ */
:is(.qmt-slider-arrows-pos--bottom-center,.qm-slider-arrows-pos--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-arrows-pos--bottom-center,.qm-slider-arrows-pos--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--bottom-right,.qm-slider-arrows-pos--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-arrows-pos--bottom-right,.qm-slider-arrows-pos--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--bottom-left,.qm-slider-arrows-pos--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-arrows-pos--bottom-left,.qm-slider-arrows-pos--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--top-right,.qm-slider-arrows-pos--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-arrows-pos--top-right,.qm-slider-arrows-pos--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--top-left,.qm-slider-arrows-pos--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-arrows-pos--top-left,.qm-slider-arrows-pos--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--center-right,.qm-slider-arrows-pos--center-right) {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 25;
}

:is(.qmt-slider-arrows-pos--none,.qm-slider-arrows-pos--none) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   INDEPENDENT SLIDER DOTS / PAGINATION POSITIONING
   ═══════════════════════════════════════════════════════════════ */
:is(.qmt-slider-dots-pos--bottom-center,.qm-slider-dots-pos--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--bottom-center,.qm-slider-dots-pos--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--bottom-right,.qm-slider-dots-pos--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--bottom-right,.qm-slider-dots-pos--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--bottom-left,.qm-slider-dots-pos--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--bottom-left,.qm-slider-dots-pos--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--top-center,.qm-slider-dots-pos--top-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--top-center,.qm-slider-dots-pos--top-center) {
    position: absolute;
    top: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--top-right,.qm-slider-dots-pos--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--top-right,.qm-slider-dots-pos--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--top-left,.qm-slider-dots-pos--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dots-pos--top-left,.qm-slider-dots-pos--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.qmt-slider-dots-pos--none,.qm-slider-dots-pos--none) {
    display: none !important;
}

:is(.qmt-slider-nav,.qm-slider-nav) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
:is(.qmt-slider-nav--vertical,.qm-slider-nav--vertical) {
    flex-direction: column;
}

:is(.qmt-slider-btn,.qm-slider-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-circle, 50%);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    color: var(--qm-heading-color, #0f172a);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    pointer-events: auto;
    flex-shrink: 0;
}

:is(.qmt-slider-btn,.qm-slider-btn):hover {
    background: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(5, 79, 142, 0.25);
}

:is(.qmt-slider-btn,.qm-slider-btn):active {
    transform: scale(0.96);
}

:is(.qmt-slider-btn,.qm-slider-btn):disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Glassmorphic Prominent Styling for Hero Slider Controls */
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-btn,.qm-slider-btn) {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-btn,.qm-slider-btn):hover {
    background: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
}

:is(.qmt-slider-dots,.qm-slider-dots) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

:is(.qmt-slider-dot,.qm-slider-dot) {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--qm-base-light, #cbd5e1);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

:is(.qmt-slider-dot,.qm-slider-dot).is-active {
    width: 28px;
    background: var(--qm-primary, #054f8e);
}

:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dot,.qm-slider-dot) {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
:is(.qmt-hero-slider,.qm-hero-slider) :is(.qmt-slider-dot,.qm-slider-dot).is-active {
    background: #ffffff;
}

/* Arrow Shapes & Preset Styles */
.qmt-slider-arrows--circle :is(.qmt-slider-btn,.qm-slider-btn) {
    border-radius: var(--radius-circle, 50%) !important;
}
.qmt-slider-arrows--rounded :is(.qmt-slider-btn,.qm-slider-btn) {
    border-radius: var(--radius-m, 8px) !important;
}
.qmt-slider-arrows--square :is(.qmt-slider-btn,.qm-slider-btn) {
    border-radius: 0px !important;
}
.qmt-slider-arrows--minimal :is(.qmt-slider-btn,.qm-slider-btn) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.qmt-slider-arrows--minimal :is(.qmt-slider-btn,.qm-slider-btn):hover {
    background: rgba(0, 0, 0, 0.08) !important;
}
:is(.qmt-hero-slider,.qm-hero-slider).qmt-slider-arrows--minimal :is(.qmt-slider-btn,.qm-slider-btn) {
    color: #ffffff !important;
}
:is(.qmt-hero-slider,.qm-hero-slider).qmt-slider-arrows--minimal :is(.qmt-slider-btn,.qm-slider-btn):hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Dots Styles Presets */
.qmt-slider-dots-style--pills :is(.qmt-slider-dot,.qm-slider-dot) {
    width: 18px;
    height: 6px;
    border-radius: 9999px;
}
.qmt-slider-dots-style--pills :is(.qmt-slider-dot,.qm-slider-dot).is-active {
    width: 32px;
}
.qmt-slider-dots-style--lines :is(.qmt-slider-dot,.qm-slider-dot) {
    width: 24px;
    height: 3px;
    border-radius: 0;
}
.qmt-slider-dots-style--lines :is(.qmt-slider-dot,.qm-slider-dot).is-active {
    width: 36px;
}

/* Image Carousel Layout */
.qmt-image-carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}
.qmt-image-carousel-item.is-centered {
    margin: 0 auto;
}
.qmt-image-carousel-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.qmt-image-carousel-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    transition: transform 0.2s ease;
}
.qmt-image-carousel-caption {
    margin-top: 0.5rem;
    font-size: var(--text-sm, 13px);
    color: var(--qm-color-text-muted, #64748b);
}

/* Hero Slider Layout */
.qmt-hero-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 550px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;
}
.qmt-hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.qmt-hero-slide-content-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: inherit;
    box-sizing: border-box;
    padding: 3.5rem 2.5rem;
}
.qmt-hero-pos--top-left { align-items: flex-start; justify-content: flex-start; }
.qmt-hero-pos--top-center { align-items: flex-start; justify-content: center; }
.qmt-hero-pos--top-right { align-items: flex-start; justify-content: flex-end; }
.qmt-hero-pos--center-left { align-items: center; justify-content: flex-start; }
.qmt-hero-pos--center { align-items: center; justify-content: center; }
.qmt-hero-pos--center-right { align-items: center; justify-content: flex-end; }
.qmt-hero-pos--bottom-left { align-items: flex-end; justify-content: flex-start; }
.qmt-hero-pos--bottom-center { align-items: flex-end; justify-content: center; }
.qmt-hero-pos--bottom-right { align-items: flex-end; justify-content: flex-end; }

.qmt-hero-slide-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.qmt-hero-align--left { align-items: flex-start; text-align: left; }
.qmt-hero-align--center { align-items: center; text-align: center; }
.qmt-hero-align--right { align-items: flex-end; text-align: right; }
.qmt-hero-align--left :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: left; }
.qmt-hero-align--center :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: center; }
.qmt-hero-align--right :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: right; }

/* ==========================================================================
   4. Semantic Accordion / FAQ (<details> / <summary>)
   ========================================================================== */
:is(.qmt-accordion,.qm-accordion) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

:is(.qmt-accordion-item,.qm-accordion-item) {
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-m, 8px);
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.qmt-accordion-item,.qm-accordion-item)[open] {
    border-color: var(--qm-primary-light, #dae5ee);
    box-shadow: var(--shadow-sm);
}

:is(.qmt-accordion-item,.qm-accordion-item) summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    font-size: var(--text-l, 1.15rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s ease;
}

:is(.qmt-accordion-item,.qm-accordion-item) summary::-webkit-details-marker {
    display: none;
}

:is(.qmt-accordion-item,.qm-accordion-item) summary:hover {
    color: var(--qm-primary, #054f8e);
}

:is(.qmt-accordion-chevron,.qm-accordion-chevron) {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

:is(.qmt-accordion-item,.qm-accordion-item)[open] :is(.qmt-accordion-chevron,.qm-accordion-chevron) {
    transform: rotate(180deg);
}

:is(.qmt-accordion-content,.qm-accordion-content) {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
}

/* ==========================================================================
   5. Stats Counter / Metrics (:is(.qmt-stats,.qm-stats))
   ========================================================================== */
:is(.qmt-stats-grid,.qm-stats-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-m, 2rem);
    text-align: center;
    width: 100%;
}

:is(.qmt-stat-item,.qm-stat-item) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-s, 1.5rem);
    border-radius: var(--radius-m, 14px);
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    border: 1px solid var(--qm-base-light, #e2e8f0);
}

:is(.qmt-stat-number,.qm-stat-number) {
    font-size: var(--h1, 3rem);
    font-weight: 800;
    color: var(--qm-primary, #054f8e);
    line-height: 1.1;
    margin-bottom: 0.35rem;
    /* Stable advance width per digit. Without this the count-up re-measures the
       number on every frame, so the grid track and the item's centring shift
       visibly while animating. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 1ch;
    white-space: nowrap;
}

.qmt-stat-value {
    /* The count-up's width reservation is emitted per counter as
       `min-width: calc(N * 1ch)` on THIS span, with N the length of the final
       formatted value. `min-width` is ignored on non-replaced inline boxes, so
       without `inline-block` the reservation silently does nothing and the
       number still re-measures on every frame. The sibling prefix/suffix spans
       stay inline — they are static, so they need no reservation. */
    display: inline-block;
}

:is(.qmt-stat-label,.qm-stat-label) {
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   6. Split Content Section (:is(.qmt-split,.qm-split))
   ========================================================================== */
:is(.qmt-split,.qm-split) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l, 3rem);
    align-items: center;
    width: 100%;
}

:is(.qmt-split--reverse,.qm-split--reverse) {
    direction: rtl;
}

:is(.qmt-split--reverse,.qm-split--reverse) > * {
    direction: ltr;
}

:is(.qmt-split-media,.qm-split-media) {
    border-radius: var(--radius-l, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

:is(.qmt-split-media,.qm-split-media) img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 860px) {
    :is(.qmt-split,.qm-split) {
        grid-template-columns: 1fr;
        gap: var(--space-m, 2rem);
    }
    :is(.qmt-split--reverse,.qm-split--reverse) {
        direction: ltr;
    }
}

/* ==========================================================================
   7. Testimonials (:is(.qmt-testimonial,.qm-testimonial))
   ========================================================================== */
:is(.qmt-testimonial,.qm-testimonial) {
    background-color: #ffffff;
    border-radius: var(--radius-m, 14px);
    padding: var(--space-m, 2rem);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

:is(.qmt-testimonial-stars,.qm-testimonial-stars) {
    color: #f59e0b;
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

:is(.qmt-testimonial-quote,.qm-testimonial-quote) {
    font-size: var(--text-mm, 1.15rem);
    font-style: italic;
    color: var(--qm-text-color, #334155);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

:is(.qmt-testimonial-author,.qm-testimonial-author) {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

:is(.qmt-testimonial-avatar,.qm-testimonial-avatar) {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-circle, 50%);
    object-fit: cover;
}

:is(.qmt-testimonial-meta,.qm-testimonial-meta) strong {
    display: block;
    color: var(--qm-heading-color, #0f172a);
    font-size: var(--text-m, 1rem);
}

:is(.qmt-testimonial-meta,.qm-testimonial-meta) span {
    font-size: var(--text-xs, 0.85rem);
    color: var(--qm-base, #64748b);
}

/* ==========================================================================
   8. Header & Navigation (:is(.qmt-site-header,.qm-site-header))
   ========================================================================== */
:is(.qmt-site-header,.qm-site-header) {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid var(--qm-base-light, #e2e8f0);
    position: relative;
    z-index: 1000;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

:is(.qmt-site-header,.qm-site-header).is-sticky {
    position: sticky;
    top: 0;
}

:is(.qmt-site-header,.qm-site-header).is-scrolled {
    box-shadow: var(--shadow-md);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

:is(.qmt-site-header,.qm-site-header).is-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

:is(.qmt-site-header,.qm-site-header).is-transparent.is-scrolled {
    background-color: #ffffff;
    border-bottom-color: var(--qm-base-light, #e2e8f0);
}

:is(.qmt-header-inner,.qm-header-inner) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    transition: height 0.25s ease;
}

:is(.qmt-site-header,.qm-site-header).is-scrolled :is(.qmt-header-inner,.qm-header-inner) {
    height: 4.25rem;
}

:is(.qmt-brand,.qm-brand) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--qm-heading-color, #0f172a);
    font-size: var(--h4, 1.4rem);
    font-weight: 700;
}

:is(.qmt-brand,.qm-brand) img {
    max-height: 2.75rem;
    width: auto;
}

/* Desktop Navigation Menu */
:is(.qmt-nav-desktop,.qm-nav-desktop) {
    display: flex;
    align-items: center;
    gap: 2rem;
}

:is(.qmt-nav-desktop,.qm-nav-desktop) ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

:is(.qmt-nav-desktop,.qm-nav-desktop) li {
    position: relative;
}

:is(.qmt-nav-desktop,.qm-nav-desktop) a {
    color: var(--qm-heading-color, #0f172a);
    font-weight: 500;
    font-size: var(--text-m, 1rem);
    text-decoration: none;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

:is(.qmt-nav-desktop,.qm-nav-desktop) a:hover,
:is(.qmt-nav-desktop,.qm-nav-desktop) li.current-menu-item > a {
    color: var(--qm-primary, #054f8e);
}

/* Dropdown Menus */
:is(.qmt-nav-desktop,.qm-nav-desktop) .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: var(--radius-m, 12px);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1010;
}

:is(.qmt-nav-desktop,.qm-nav-desktop) li:hover > .sub-menu,
:is(.qmt-nav-desktop,.qm-nav-desktop) li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

:is(.qmt-nav-desktop,.qm-nav-desktop) .sub-menu a {
    padding: 0.65rem 1.25rem;
    display: block;
    font-size: var(--text-s, 0.95rem);
}

:is(.qmt-nav-desktop,.qm-nav-desktop) .sub-menu a:hover {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
}

/* Mobile Toggle & Drawer */
:is(.qmt-menu-toggle,.qm-menu-toggle) {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-s, 8px);
    cursor: pointer;
    color: var(--qm-heading-color, #0f172a);
    padding: 0;
}

:is(.qmt-menu-toggle,.qm-menu-toggle):focus-visible {
    outline: 2px solid var(--qm-primary, #054f8e);
}

:is(.qmt-menu-toggle,.qm-menu-toggle) svg {
    width: 1.5rem;
    height: 1.5rem;
}

:is(.qmt-nav-mobile,.qm-nav-mobile) {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

:is(.qmt-nav-mobile,.qm-nav-mobile).is-open {
    opacity: 1;
    visibility: visible;
}

:is(.qmt-mobile-drawer,.qm-mobile-drawer) {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

:is(.qmt-nav-mobile,.qm-nav-mobile).is-open :is(.qmt-mobile-drawer,.qm-mobile-drawer) {
    transform: translateX(0);
}

:is(.qmt-mobile-drawer-header,.qm-mobile-drawer-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--qm-base-light, #e2e8f0);
    padding-bottom: 1rem;
}

:is(.qmt-mobile-drawer-close,.qm-mobile-drawer-close) {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--qm-heading-color, #0f172a);
    padding: 0.5rem;
}

:is(.qmt-mobile-menu,.qm-mobile-menu) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

:is(.qmt-mobile-menu,.qm-mobile-menu) a {
    display: block;
    padding: 0.75rem 0.5rem;
    font-size: var(--text-l, 1.15rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    border-radius: var(--radius-s, 8px);
}

:is(.qmt-mobile-menu,.qm-mobile-menu) a:hover {
    background: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
}

:is(.qmt-mobile-cta,.qm-mobile-cta) {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
}

@media (max-width: 991px) {
    :is(.qmt-nav-desktop,.qm-nav-desktop) {
        display: none;
    }
    :is(.qmt-menu-toggle,.qm-menu-toggle) {
        display: inline-flex;
    }
    :is(.qmt-nav-mobile,.qm-nav-mobile) {
        display: block;
    }
}

/* ==========================================================================
   9. Footer (:is(.qmt-site-footer,.qm-site-footer))
   ========================================================================== */
:is(.qmt-site-footer,.qm-site-footer) {
    background-color: var(--qm-base-ultra-dark, #0f172a);
    color: #94a3b8;
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-m, 2rem);
}

:is(.qmt-footer-grid,.qm-footer-grid) {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-l, 3rem);
    margin-bottom: var(--space-l, 3rem);
}

:is(.qmt-footer-col,.qm-footer-col) h4,
:is(.qmt-footer-col,.qm-footer-col) .widget-title {
    color: #ffffff;
    font-size: var(--text-l, 1.15rem);
    margin-bottom: 1.25rem;
    font-weight: 600;
}

:is(.qmt-footer-col,.qm-footer-col) ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

:is(.qmt-footer-col,.qm-footer-col) a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease;
}

:is(.qmt-footer-col,.qm-footer-col) a:hover {
    color: var(--qm-secondary, #ff800b);
}

:is(.qmt-footer-bottom,.qm-footer-bottom) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: var(--text-s, 0.9rem);
}

@media (max-width: 768px) {
    :is(.qmt-footer-grid,.qm-footer-grid) {
        grid-template-columns: 1fr;
    }
    :is(.qmt-footer-bottom,.qm-footer-bottom) {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   10. Hero Section (:is(.qmt-hero,.qm-hero))
   ========================================================================== */
:is(.qmt-hero,.qm-hero) {
    position: relative;
    padding-top: calc(var(--space-section) * 1.2);
    padding-bottom: var(--space-section);
    background: linear-gradient(135deg, #ffffff 0%, var(--qm-primary-ultra-light, #f3f6f9) 100%);
    overflow: hidden;
}

:is(.qmt-hero-badge,.qm-hero-badge) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    background-color: var(--qm-primary-light, #dae5ee);
    color: var(--qm-primary-dark, #043f72);
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-s, 0.9rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

:is(.qmt-hero-title,.qm-hero-title) {
    font-size: var(--h1, 3.5rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

:is(.qmt-hero-title,.qm-hero-title) span.highlight {
    color: var(--qm-primary, #054f8e);
}

:is(.qmt-hero-description,.qm-hero-description) {
    font-size: var(--text-l, 1.25rem);
    line-height: 1.6;
    color: var(--qm-text-color, #475569);
    margin-bottom: 2rem;
    max-width: 640px;
}

:is(.qmt-hero-actions,.qm-hero-actions) {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   11. Call to Action Banner (:is(.qmt-cta,.qm-cta))
   ========================================================================== */
:is(.qmt-cta-banner,.qm-cta-banner) {
    background: linear-gradient(135deg, var(--qm-primary, #054f8e) 0%, var(--qm-primary-ultra-dark, #032f55) 100%);
    border-radius: var(--radius-l, 20px);
    padding: var(--space-l, 3.5rem) var(--space-m, 2rem);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

:is(.qmt-cta-banner,.qm-cta-banner) h2 {
    color: #ffffff;
    font-size: var(--h2, 2.5rem);
    margin-bottom: 1rem;
}

:is(.qmt-cta-banner,.qm-cta-banner) p {
    color: #e2e8f0;
    font-size: var(--text-l, 1.2rem);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* ==========================================================================
   12. Standard WordPress Post & Loop Styling
   ========================================================================== */
:is(.qmt-post-meta,.qm-post-meta) {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--text-s, 0.9rem);
    color: var(--qm-base, #64748b);
    margin-bottom: 1rem;
}

:is(.qmt-post-content,.qm-post-content) {
    line-height: var(--text-line-height, 1.7);
    font-size: var(--text-m, 1.05rem);
}

:is(.qmt-post-content,.qm-post-content) p {
    margin-bottom: 1.5rem;
}

:is(.qmt-post-content,.qm-post-content) img {
    border-radius: var(--radius-m, 12px);
    margin: 2rem 0;
}

/* WordPress Core Alignments */
.alignwide {
    width: 100vw;
    max-width: var(--container-width, 1330px);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--space-m, 1.5rem);
    margin-bottom: var(--space-s, 1rem);
}

.alignright {
    float: right;
    margin-left: var(--space-m, 1.5rem);
    margin-bottom: var(--space-s, 1rem);
}

/* Pagination */
:is(.qmt-pagination,.qm-pagination) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-l, 3rem);
}

:is(.qmt-pagination,.qm-pagination) .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-s, 8px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    color: var(--qm-heading-color, #0f172a);
    font-weight: 600;
}

:is(.qmt-pagination,.qm-pagination) .page-numbers.current {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
}

:is(.qmt-pagination,.qm-pagination) .page-numbers:hover:not(.current) {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    border-color: var(--qm-primary, #054f8e);
}

/* ==========================================================================
   13. Icon Box (:is(.qmt-icon-box,.qm-icon-box))
   ========================================================================== */
:is(.qmt-icon-box,.qm-icon-box) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--space-s, 1.5rem);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-m, 14px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

:is(.qmt-icon-box,.qm-icon-box):hover {
    border-color: var(--qm-primary-light, #dae5ee);
}

:is(.qmt-icon-box--left,.qm-icon-box--left) {
    flex-direction: row;
    align-items: flex-start;
}

:is(.qmt-icon-box--center,.qm-icon-box--center) {
    align-items: center;
    text-align: center;
}

:is(.qmt-icon-box--center,.qm-icon-box--center) :is(.qmt-icon-box-icon,.qm-icon-box-icon) {
    margin-left: auto;
    margin-right: auto;
}

:is(.qmt-icon-box--center,.qm-icon-box--center) :is(.qmt-icon-box-body,.qm-icon-box-body) {
    text-align: center;
    width: 100%;
}

:is(.qmt-icon-box--center,.qm-icon-box--center) :is(.qmt-icon-box-title,.qm-icon-box-title),
:is(.qmt-icon-box--center,.qm-icon-box--center) :is(.qmt-icon-box-desc,.qm-icon-box-desc) {
    text-align: center;
}

:is(.qmt-icon-box-icon,.qm-icon-box-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-m, 12px);
    background-color: var(--qm-primary-ultra-light, #eff6ff);
    color: var(--qm-primary, #054f8e);
}

:is(.qmt-icon-box-icon,.qm-icon-box-icon) svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    display: block;
}

:is(.qmt-icon-box-body,.qm-icon-box-body) {
    flex: 1;
}

:is(.qmt-icon-box-title,.qm-icon-box-title) {
    margin: 0 0 0.5rem 0;
    font-size: var(--h4, 1.35rem);
    font-weight: 700;
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-icon-box-desc,.qm-icon-box-desc) {
    margin: 0;
    color: var(--qm-text-color, #64748b);
    line-height: var(--text-line-height, 1.6);
    font-size: var(--text-m, 1rem);
}

/* ==========================================================================
   14. Image Box (:is(.qmt-image-box,.qm-image-box))
   ========================================================================== */
:is(.qmt-image-box,.qm-image-box) {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-m, 14px);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.qmt-image-box-media,.qm-image-box-media) {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--qm-base-ultra-light, #f8fafc);
}

:is(.qmt-image-box-media,.qm-image-box-media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

:is(.qmt-image-box-body,.qm-image-box-body) {
    padding: var(--space-s, 1.5rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}

:is(.qmt-image-box-title,.qm-image-box-title) {
    margin: 0 0 0.5rem 0;
    font-size: var(--h4, 1.35rem);
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-image-box-desc,.qm-image-box-desc) {
    margin: 0 0 1rem 0;
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
    flex-grow: 1;
}

/* ==========================================================================
   15. Icon List / Feature List (:is(.qmt-icon-list,.qm-icon-list))
   ========================================================================== */
:is(.qmt-icon-list,.qm-icon-list) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

:is(.qmt-icon-list--inline,.qm-icon-list--inline) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

:is(.qmt-icon-list-item,.qm-icon-list-item) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-m, 1rem);
    color: var(--qm-text-color, #334155);
}

:is(.qmt-icon-list-icon,.qm-icon-list-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-circle, 50%);
    background-color: var(--qm-primary-light, #dae5ee);
    color: var(--qm-primary-dark, #043f72);
}

:is(.qmt-icon-list-icon,.qm-icon-list-icon) svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* ==========================================================================
   16. Pricing Table (:is(.qmt-pricing-card,.qm-pricing-card))
   ========================================================================== */
:is(.qmt-pricing-card,.qm-pricing-card) {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-l, 18px);
    padding: var(--space-m, 2rem);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.qmt-pricing-card--featured,.qm-pricing-card--featured) {
    border-color: var(--qm-primary, #054f8e);
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}

:is(.qmt-pricing-badge,.qm-pricing-badge) {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--qm-secondary, #ff800b);
    color: #ffffff;
    font-size: var(--text-xs, 0.85rem);
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

:is(.qmt-pricing-header,.qm-pricing-header) {
    margin-bottom: 1.5rem;
}

:is(.qmt-pricing-plan,.qm-pricing-plan) {
    font-size: var(--h4, 1.4rem);
    margin: 0 0 0.5rem 0;
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-pricing-price,.qm-pricing-price) {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 1rem 0;
}

:is(.qmt-pricing-currency,.qm-pricing-currency) {
    font-size: var(--h3, 1.75rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-pricing-amount,.qm-pricing-amount) {
    font-size: var(--h1, 3.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--qm-heading-color, #0f172a);
}

:is(.qmt-pricing-period,.qm-pricing-period) {
    font-size: var(--text-s, 0.95rem);
    color: var(--qm-base, #64748b);
}

:is(.qmt-pricing-features,.qm-pricing-features) {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}
:is(.qmt-pricing-feature-item,.qm-pricing-feature-item) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
:is(.qmt-pricing-feature-icon,.qm-pricing-feature-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
:is(.qmt-pricing-feature-text,.qm-pricing-feature-text) {
    display: inline-block;
}

/* ==========================================================================
   17. Responsive Video Embed (:is(.qmt-video-wrap,.qm-video-wrap))
   ========================================================================== */
:is(.qmt-video-wrap,.qm-video-wrap) {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m, 14px);
    overflow: hidden;
    background: #000000;
    box-shadow: var(--shadow-md);
}

:is(.qmt-video-wrap,.qm-video-wrap) iframe,
:is(.qmt-video-wrap,.qm-video-wrap) video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   18. Interactive Tabs (:is(.qmt-tabs,.qm-tabs))
   ========================================================================== */
:is(.qmt-tabs,.qm-tabs) {
    width: 100%;
}

:is(.qmt-tabs-nav,.qm-tabs-nav) {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--qm-base-light, #e2e8f0);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

:is(.qmt-tab-btn-item,.qm-tab-btn-item) {
    padding: 0.85rem 1.5rem;
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--qm-text-color, #64748b);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

:is(.qmt-tab-btn-item,.qm-tab-btn-item).is-active {
    color: var(--qm-primary, #054f8e);
    border-bottom-color: var(--qm-primary, #054f8e);
}

:is(.qmt-tab-panel,.qm-tab-panel) {
    display: none;
}

:is(.qmt-tab-panel,.qm-tab-panel).is-active {
    display: block;
}

/* ==========================================================================
   19. Vector Icon Element (:is(.qmt-icon-wrapper,.qm-icon-wrapper), :is(.qmt-icon-element-box,.qm-icon-element-box))
   ========================================================================== */
:is(.qmt-icon-wrapper,.qm-icon-wrapper) {
    width: 100%;
    margin-bottom: 0;
}

:is(.qmt-icon-element-box,.qm-icon-element-box),
:is(.qmt-icon-element-link,.qm-icon-element-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:is(.qmt-icon-element-box,.qm-icon-element-box) svg,
:is(.qmt-icon-element-link,.qm-icon-element-link) svg {
    display: block;
    fill: none;
    stroke: currentColor;
}

/* ==========================================================================
   20. Divider (:is(.qmt-divider,.qm-divider))
   ========================================================================== */
:is(.qmt-divider,.qm-divider) {
    border: none;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
    margin: var(--space-m, 1.5rem) 0;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   23. Native Contact Form Component (:is(.qmt-form-wrapper,.qm-form-wrapper), :is(.qmt-form,.qm-form))
   ========================================================================== */
:is(.qmt-form-wrapper,.qm-form-wrapper) {
    width: 100%;
    background: #ffffff;
    border-radius: var(--radius-m, 14px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    padding: var(--space-m, 2rem);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

:is(.qmt-form-header,.qm-form-header) {
    margin-bottom: 1.5rem;
}

:is(.qmt-form-title,.qm-form-title) {
    font-size: var(--text-l, 1.4rem);
    font-weight: 700;
    color: var(--qm-heading-color, #0f172a);
    margin-bottom: 0.35rem;
}

:is(.qmt-form-subtitle,.qm-form-subtitle) {
    font-size: var(--text-s, 0.95rem);
    color: var(--qm-text-color, #64748b);
    margin: 0;
}

:is(.qmt-form-fields,.qm-form-fields) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

:is(.qmt-form-group,.qm-form-group) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

:is(.qmt-form-label,.qm-form-label) {
    font-size: 13px;
    font-weight: 600;
    color: var(--qm-heading-color, #1e293b);
    display: flex;
    align-items: center;
    gap: 4px;
}

:is(.qmt-form-required,.qm-form-required) {
    color: #ef4444;
}

:is(.qmt-form-input,.qm-form-input),
:is(.qmt-form-select,.qm-form-select),
:is(.qmt-form-textarea,.qm-form-textarea) {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 14px;
    font-family: inherit;
    color: var(--qm-heading-color, #0f172a);
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-s, 8px);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

:is(.qmt-form-input,.qm-form-input):focus,
:is(.qmt-form-select,.qm-form-select):focus,
:is(.qmt-form-textarea,.qm-form-textarea):focus {
    background-color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
    box-shadow: 0 0 0 3px rgba(5, 79, 142, 0.12);
}

:is(.qmt-form-textarea,.qm-form-textarea) {
    resize: vertical;
    min-height: 100px;
}

:is(.qmt-form-options-wrap,.qm-form-options-wrap) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.25rem;
}

:is(.qmt-form-option-label,.qm-form-option-label) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--qm-text-color, #334155);
    cursor: pointer;
}

:is(.qmt-form-option-label,.qm-form-option-label) input[type="radio"],
:is(.qmt-form-option-label,.qm-form-option-label) input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--qm-primary, #054f8e);
    cursor: pointer;
}

/* File Upload Dropzone */
:is(.qmt-form-file-box,.qm-form-file-box) {
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-s, 8px);
    background: #f8fafc;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

:is(.qmt-form-file-box,.qm-form-file-box):hover {
    border-color: var(--qm-primary, #054f8e);
    background: #eff6ff;
}

:is(.qmt-form-file-icon,.qm-form-file-icon) svg {
    width: 28px;
    height: 28px;
    stroke: var(--qm-primary, #054f8e);
}

:is(.qmt-form-file-text,.qm-form-file-text) {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

:is(.qmt-form-file-input,.qm-form-file-input) {
    display: none;
}

/* Form Actions */
:is(.qmt-form-actions,.qm-form-actions) {
    margin-top: 0.5rem;
}

:is(.qmt-form-feedback,.qm-form-feedback) {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-s, 8px);
    font-size: 13px;
    font-weight: 500;
}

:is(.qmt-form-feedback,.qm-form-feedback).is-success {
    display: block;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

:is(.qmt-form-feedback,.qm-form-feedback).is-error {
    display: block;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ==========================================================================
   20. Entrance Animations System (Pure CSS + IntersectionObserver)
   ========================================================================== */
[data-qmt-anim] {
    --qmt-anim-dur: 0.6s;
    --qmt-anim-del: 0s;
    --qmt-anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-qmt-anim-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.qmt-animated {
    animation-duration: var(--qmt-anim-dur, 0.6s);
    animation-delay: var(--qmt-anim-del, 0s);
    animation-timing-function: var(--qmt-anim-ease, cubic-bezier(0.16, 1, 0.3, 1));
    animation-fill-mode: both;
    pointer-events: auto;
}

.qmt-anim-done {
    animation: none !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* Animation Keyframes (Preserves user --qmt-base-transform) */
@keyframes qmtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes qmtFadeUp {
    from { opacity: 0; transform: translateY(32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeDown {
    from { opacity: 0; transform: translateY(-32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeLeft {
    from { opacity: 0; transform: translateX(32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeRight {
    from { opacity: 0; transform: translateX(-32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtZoomIn {
    from { opacity: 0; transform: scale(0.88) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: scale(1) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideUp {
    from { transform: translateY(60px) var(--qmt-base-transform, ); }
    to { transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideDown {
    from { transform: translateY(-60px) var(--qmt-base-transform, ); }
    to { transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideLeft {
    from { transform: translateX(60px) var(--qmt-base-transform, ); }
    to { transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideRight {
    from { transform: translateX(-60px) var(--qmt-base-transform, ); }
    to { transform: translateX(0px) var(--qmt-base-transform, ); }
}

/* Preset Mapping */
.qmt-anim-fade-in { animation-name: qmtFadeIn; }
.qmt-anim-fade-up { animation-name: qmtFadeUp; }
.qmt-anim-fade-down { animation-name: qmtFadeDown; }
.qmt-anim-fade-left { animation-name: qmtFadeLeft; }
.qmt-anim-fade-right { animation-name: qmtFadeRight; }
.qmt-anim-zoom-in { animation-name: qmtZoomIn; }
.qmt-anim-slide-up { animation-name: qmtSlideUp; }
.qmt-anim-slide-down { animation-name: qmtSlideDown; }
.qmt-anim-slide-left { animation-name: qmtSlideLeft; }
.qmt-anim-slide-right { animation-name: qmtSlideRight; }

/* Accessibility: Prefers-Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
    [data-qmt-anim],
    [data-qmt-anim-hidden="true"],
    .qmt-animated {
        opacity: 1 !important;
        transform: var(--qmt-base-transform, none) !important;
        animation: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   21. Site Logo Component (QMT Builder)
   ========================================================================== */
.qmt-site-logo {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
.qmt-site-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.qmt-site-logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}
.qmt-site-logo-text {
    font-size: var(--text-h3, 24px);
    font-weight: 700;
    color: var(--qm-color-heading, #0f172a);
    text-decoration: none;
    line-height: 1.2;
}

/* ==========================================================================
   22. Nav Menu Component (QMT Builder - Desktop & Mobile 3-Level Submenu)
   ========================================================================== */
.qmt-nav-menu {
    position: relative;
    display: block;
}

/* Nav list reset */
.qmt-nav-menu-list,
.qmt-menu,
.qmt-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop Horizontal Layout */
.qmt-nav-menu--horizontal .qmt-nav-menu-list,
.qmt-nav-menu--horizontal .qmt-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qmt-nav-gap, 24px);
}
.qmt-nav-menu--vertical .qmt-nav-menu-list,
.qmt-nav-menu--vertical .qmt-menu {
    display: flex;
    flex-direction: column;
}

/* Alignment */
.qmt-nav-menu--align-left .qmt-nav-menu-list,
.qmt-nav-menu--align-left .qmt-menu { justify-content: flex-start; text-align: left; }
.qmt-nav-menu--align-center .qmt-nav-menu-list,
.qmt-nav-menu--align-center .qmt-menu { justify-content: center; text-align: center; }
.qmt-nav-menu--align-right .qmt-nav-menu-list,
.qmt-nav-menu--align-right .qmt-menu { justify-content: flex-end; text-align: right; }
.qmt-nav-menu--align-space-between .qmt-nav-menu-list,
.qmt-nav-menu--align-space-between .qmt-menu { justify-content: space-between; }

/* Menu Items & Links */
.qmt-menu-item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.qmt-menu-item-row {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.qmt-menu-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--qm-color-text, #334155);
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}
.qmt-menu-link:hover,
.qmt-menu-item.current-menu-item > .qmt-menu-item-row > .qmt-menu-link,
.qmt-menu-item.current-menu-ancestor > .qmt-menu-item-row > .qmt-menu-link,
.qmt-menu-item.current_page_item > .qmt-menu-item-row > .qmt-menu-link,
.qmt-menu-item.current_page_ancestor > .qmt-menu-item-row > .qmt-menu-link {
    color: var(--qm-color-primary, #054f8e);
}

/* Submenu Indicator (Chevron) */
.qmt-menu-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 6px;
    transition: transform 0.2s ease;
    color: currentColor;
    opacity: 0.75;
}
.qmt-menu-indicator svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}
.qmt-menu-item.level-2 .qmt-menu-indicator svg,
.qmt-menu-item--level-1 .qmt-menu-indicator svg {
    transform: rotate(-90deg);
}

/* ==========================================================================
   Desktop Navigation Submenu & Flyout Rules
   ========================================================================== */
    /* Submenus are hidden panels positioned absolutely */
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu {
        position: absolute;
        z-index: 1000;
        display: none !important;
        min-width: 210px;
        background: #ffffff;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 6px 0;
        margin: 0;
        list-style: none;
    }

    /* Level 2 Submenu (Dropdown under Level 1 item) */
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item.level-1 > .qmt-submenu,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item--level-0 > .qmt-submenu,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-2,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-1 {
        top: 100%;
        left: 0;
    }

    /* Align right if parent nav is right-aligned */
    .qmt-nav-menu--align-right:not(.qmt-nav-menu--force-mobile) .qmt-menu-item.level-1 > .qmt-submenu,
    .qmt-nav-menu--align-right:not(.qmt-nav-menu--force-mobile) .qmt-menu-item--level-0 > .qmt-submenu,
    .qmt-nav-menu--align-right:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-2,
    .qmt-nav-menu--align-right:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-1 {
        left: auto;
        right: 0;
    }

    /* Level 3 Submenu (Flyout from Level 2 item) */
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item.level-2 > .qmt-submenu,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item--level-1 > .qmt-submenu,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-3,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-2 {
        top: 0;
        left: 100%;
        margin-left: 2px;
    }

    /* Viewport edge auto-flip for Level 3 flyout */
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-3.qmt-submenu--flip-left,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-2.qmt-submenu--flip-left {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 2px !important;
    }

    /* Explicit Level 3 direction overrides the automatic viewport choice. */
    .qmt-nav-menu--submenu-left:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-3,
    .qmt-nav-menu--submenu-left:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-2 {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 2px !important;
    }
    .qmt-nav-menu--submenu-right:not(.qmt-nav-menu--force-mobile) .qmt-submenu.level-3,
    .qmt-nav-menu--submenu-right:not(.qmt-nav-menu--force-mobile) .qmt-submenu--depth-2 {
        left: 100% !important;
        right: auto !important;
        margin-left: 2px !important;
        margin-right: 0 !important;
    }

    /* Smooth Hover & Focus-Within Submenu Reveal */
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item:hover > .qmt-submenu,
    .qmt-nav-menu:not(.qmt-nav-menu--force-mobile) .qmt-menu-item:focus-within > .qmt-submenu {
        display: block !important;
    }

  
/* ==========================================================================
   Shared responsive header panel
   --------------------------------------------------------------------------
   An interactive header surface (the collapsed navigation panel, the search
   overlay) must never be sized or positioned by the control that opens it.
   When the panel is absolutely positioned and its trigger is a positioned
   element, `width: 100%` resolves against the TRIGGER, so a collapsed
   navigation panel ends up exactly as wide as the hamburger button.

   `.qmt-header-panel` therefore does two things, and the responsive blocks
   below use it for both:

     1. It removes the trigger from the containing block at the breakpoints
        where the panel is collapsed (the nav element is forced to
        `position: static`, so the nearest positioned ancestor - the site
        header - becomes the containing block and `left:0; right:0` spans the
        available header width).
     2. It resolves its own width, height and layering from one token set, so
        a second header surface does not have to re-derive them.

   Width defaults to the containing block, NOT 100vw, so a vertical scrollbar
   can never be introduced.
   ========================================================================== */
.qmt-site-header {
    /* Global layer scale. Deliberately small and named: a surface inside the
       header only needs to beat its siblings, not the whole page. */
    --qmt-layer-header: 1000;
    --qmt-layer-overlay: 9000;
    --qmt-header-panel-width: 100%;
    --qmt-header-panel-offset: 100%;
    --qmt-header-panel-pad-y: 8px;
    --qmt-header-panel-bg: #ffffff;
    --qmt-header-panel-border: #e2e8f0;
    --qmt-header-panel-radius: 8px;
    --qmt-header-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    --qmt-header-panel-z: 20;
    /* A long menu must scroll inside the panel rather than push the page. */
    --qmt-header-panel-max-h: 80vh;
    --qmt-header-panel-max-h: calc(100dvh - 2rem);
}



/* When the header itself is transparent (hero overlap) the panel still has to
   read as a solid surface rather than inheriting transparency. */
.qmt-site-header.is-transparent .qmt-nav-menu--breakpoint-tablet .qmt-header-panel,
.qmt-site-header.is-transparent .qmt-nav-menu--bp-tablet .qmt-header-panel,
.qmt-site-header.is-transparent .qmt-nav-menu--breakpoint-mobile .qmt-header-panel,
.qmt-site-header.is-transparent .qmt-nav-menu--bp-mobile .qmt-header-panel,
.qmt-site-header.is-transparent .qmt-nav-menu--force-mobile .qmt-header-panel {
    background: var(--qmt-header-panel-bg);
}

  /* Submenu item links */
    .qmt-submenu .qmt-menu-item {
        width: 100%;
    }
    .qmt-submenu .qmt-menu-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        width: 100%;
        font-size: 14px;
        color: #334155;
        box-sizing: border-box;
    }
    .qmt-submenu .qmt-menu-link:hover {
        background-color: #f8fafc;
        color: var(--qm-color-primary, #054f8e);
    }
    .qmt-submenu .qmt-menu-item.current-menu-item > .qmt-menu-item-row > .qmt-menu-link,
    .qmt-submenu .qmt-menu-item.current_page_item > .qmt-menu-item-row > .qmt-menu-link {
        color: var(--qm-color-primary, #054f8e);
        font-weight: 600;
    }
/* ========================================================================== 
   Mobile Toggle & Submenu Accordion Controls (Base Styles)
   ========================================================================== */
.qmt-mobile-toggle,
.qmt-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--qm-color-heading, #0f172a);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.qmt-mobile-toggle:hover,
.qmt-nav-toggle:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.qmt-mobile-toggle svg,
.qmt-nav-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.qmt-submenu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    transition: transform 0.2s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.qmt-submenu-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}
.qmt-submenu-toggle:hover {
    color: var(--qm-color-primary, #054f8e);
}

/* ==========================================================================
   Responsive Tablet Breakpoint (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* ROOT CAUSE FIX - a collapsed panel must not be sized by its trigger.
       The panel is absolutely positioned, so without this it resolves
       width: 100% against the nav element, which at this width is only as
       wide as the toggle. The result is a narrow floating dropdown.
       Taking the nav out of the containing-block chain makes the site header
       the containing block, so left: 0; right: 0 spans the available
       header width. Nothing about the desktop layout changes. */
    .qmt-nav-menu--breakpoint-tablet,
    .qmt-nav-menu--bp-tablet {
        position: static !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-mobile-toggle,
    .qmt-nav-menu--breakpoint-tablet .qmt-nav-toggle,
    .qmt-nav-menu--bp-tablet .qmt-mobile-toggle,
    .qmt-nav-menu--bp-tablet .qmt-nav-toggle {
        display: inline-flex !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-nav-menu__wrapper,
    .qmt-nav-menu--bp-tablet .qmt-nav-menu__wrapper {
        display: none !important;
        position: absolute;
        top: var(--qmt-header-panel-offset, 100%);
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
    }
    .qmt-nav-menu--breakpoint-tablet.is-mobile-open .qmt-nav-menu__wrapper,
    .qmt-nav-menu--bp-tablet.is-mobile-open .qmt-nav-menu__wrapper {
        display: block !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu,
    .qmt-nav-menu--breakpoint-tablet .qmt-nav-menu-list,
    .qmt-nav-menu--bp-tablet .qmt-menu,
    .qmt-nav-menu--bp-tablet .qmt-nav-menu-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-item,
    .qmt-nav-menu--bp-tablet .qmt-menu-item {
        width: 100% !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-item-row,
    .qmt-nav-menu--bp-tablet .qmt-menu-item-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-link,
    .qmt-nav-menu--bp-tablet .qmt-menu-link {
        flex: 1;
        padding: 10px 16px;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-indicator,
    .qmt-nav-menu--bp-tablet .qmt-menu-indicator {
        display: none !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu-toggle,
    .qmt-nav-menu--bp-tablet .qmt-submenu-toggle {
        display: inline-flex !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-item.is-expanded > .qmt-menu-item-row .qmt-submenu-toggle,
    .qmt-nav-menu--bp-tablet .qmt-menu-item.is-expanded > .qmt-menu-item-row .qmt-submenu-toggle {
        transform: rotate(180deg);
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu,
    .qmt-nav-menu--bp-tablet .qmt-submenu {
        display: none !important;
        width: 100% !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.02) !important;
        padding: 0 !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-menu-item.is-expanded > .qmt-submenu,
    .qmt-nav-menu--bp-tablet .qmt-menu-item.is-expanded > .qmt-submenu {
        display: block !important;
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu.level-2 .qmt-menu-link,
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu--depth-1 .qmt-menu-link,
    .qmt-nav-menu--bp-tablet .qmt-submenu.level-2 .qmt-menu-link,
    .qmt-nav-menu--bp-tablet .qmt-submenu--depth-1 .qmt-menu-link {
        padding-left: var(--qmt-nav-indent-l2, 32px);
    }
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu.level-3 .qmt-menu-link,
    .qmt-nav-menu--breakpoint-tablet .qmt-submenu--depth-2 .qmt-menu-link,
    .qmt-nav-menu--bp-tablet .qmt-submenu.level-3 .qmt-menu-link,
    .qmt-nav-menu--bp-tablet .qmt-submenu--depth-2 .qmt-menu-link {
        padding-left: var(--qmt-nav-indent-l3, 48px);
    }
}

/* ==========================================================================
   Responsive Mobile Breakpoint (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .qmt-nav-menu--breakpoint-mobile,
    .qmt-nav-menu--bp-mobile {
        position: static !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-mobile-toggle,
    .qmt-nav-menu--breakpoint-mobile .qmt-nav-toggle,
    .qmt-nav-menu--bp-mobile .qmt-mobile-toggle,
    .qmt-nav-menu--bp-mobile .qmt-nav-toggle {
        display: inline-flex !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-nav-menu__wrapper,
    .qmt-nav-menu--bp-mobile .qmt-nav-menu__wrapper {
        display: none !important;
        position: absolute;
        top: var(--qmt-header-panel-offset, 100%);
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
    }
    .qmt-nav-menu--breakpoint-mobile.is-mobile-open .qmt-nav-menu__wrapper,
    .qmt-nav-menu--bp-mobile.is-mobile-open .qmt-nav-menu__wrapper {
        display: block !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu,
    .qmt-nav-menu--breakpoint-mobile .qmt-nav-menu-list,
    .qmt-nav-menu--bp-mobile .qmt-menu,
    .qmt-nav-menu--bp-mobile .qmt-nav-menu-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-item,
    .qmt-nav-menu--bp-mobile .qmt-menu-item {
        width: 100% !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-item-row,
    .qmt-nav-menu--bp-mobile .qmt-menu-item-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-link,
    .qmt-nav-menu--bp-mobile .qmt-menu-link {
        flex: 1;
        padding: 10px 16px;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-indicator,
    .qmt-nav-menu--bp-mobile .qmt-menu-indicator {
        display: none !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu-toggle,
    .qmt-nav-menu--bp-mobile .qmt-submenu-toggle {
        display: inline-flex !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-item.is-expanded > .qmt-menu-item-row .qmt-submenu-toggle,
    .qmt-nav-menu--bp-mobile .qmt-menu-item.is-expanded > .qmt-menu-item-row .qmt-submenu-toggle {
        transform: rotate(180deg);
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu,
    .qmt-nav-menu--bp-mobile .qmt-submenu {
        display: none !important;
        width: 100% !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.02) !important;
        padding: 0 !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-menu-item.is-expanded > .qmt-submenu,
    .qmt-nav-menu--bp-mobile .qmt-menu-item.is-expanded > .qmt-submenu {
        display: block !important;
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu.level-2 .qmt-menu-link,
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu--depth-1 .qmt-menu-link,
    .qmt-nav-menu--bp-mobile .qmt-submenu.level-2 .qmt-menu-link,
    .qmt-nav-menu--bp-mobile .qmt-submenu--depth-1 .qmt-menu-link {
        padding-left: var(--qmt-nav-indent-l2, 32px);
    }
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu.level-3 .qmt-menu-link,
    .qmt-nav-menu--breakpoint-mobile .qmt-submenu--depth-2 .qmt-menu-link,
    .qmt-nav-menu--bp-mobile .qmt-submenu.level-3 .qmt-menu-link,
    .qmt-nav-menu--bp-mobile .qmt-submenu--depth-2 .qmt-menu-link {
        padding-left: var(--qmt-nav-indent-l3, 48px);
    }
}

/* ==========================================================================
   Editor Preview Forced Mobile State (.qmt-nav-menu--force-mobile)
   ========================================================================== */
.qmt-nav-menu.qmt-nav-menu--force-mobile {
    position: static !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-mobile-toggle,
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-nav-toggle {
    display: inline-flex !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-nav-menu__wrapper {
    display: none !important;
    position: absolute;
    top: var(--qmt-header-panel-offset, 100%);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile.is-mobile-open .qmt-nav-menu__wrapper {
    display: block !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu,
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-nav-menu-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-item {
    width: 100% !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-link {
    flex: 1;
    padding: 10px 16px;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-indicator {
    display: none !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu-toggle {
    display: inline-flex !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-item.is-expanded > .qmt-menu-item-row .qmt-submenu-toggle {
    transform: rotate(180deg);
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu {
    display: none !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.02) !important;
    padding: 0 !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-menu-item.is-expanded > .qmt-submenu {
    display: block !important;
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu.level-2 .qmt-menu-link,
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu--depth-1 .qmt-menu-link {
    padding-left: var(--qmt-nav-indent-l2, 32px);
}
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu.level-3 .qmt-menu-link,
.qmt-nav-menu.qmt-nav-menu--force-mobile .qmt-submenu--depth-2 .qmt-menu-link {
    padding-left: var(--qmt-nav-indent-l3, 48px);
}

/* ==========================================================================
   23. AJAX Search Component (QMT Builder — Inline & Modal Pop-Up Templates)
   ========================================================================== */
.qmt-ajax-search {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}
.qmt-ajax-search--modal {
    width: auto;
    display: inline-block;
}


/* ==========================================================================
   AJAX Search - Icon Trigger mode
   --------------------------------------------------------------------------
   The overlay is a full-viewport surface (position: fixed; inset: 0) and is
   deliberately NOT given .qmt-header-panel: that class positions a panel
   against a containing block, which is correct for the collapsed nav panel and
   wrong for a full-screen overlay. What the two share is the layer scale and
   the width philosophy - the surface takes the available width, and only the
   inner form is constrained. That is why the form has a max-width and the
   overlay does not.
   ========================================================================== */
.qmt-ajax-search--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qmt-search-modal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A real control needs a real hit area, not just a glyph. */
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.qmt-search-modal-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}
.qmt-search-modal-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.qmt-search-modal-trigger-text {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
}

/* Overlay: full available width. z-index comes from the named layer scale
   rather than a magic number, so it beats the header (1000) by intent. */
.qmt-search-modal {
  z-index: var(--qmt-layer-overlay, 9000);
}

/* The form is the only thing with a max-width, and it is centred. */
.qmt-search-modal-box {
  max-width: var(--qmt-search-form-max-width, 760px);
}

/* --------------------------------------------------------------------------
   Responsive Display Mode
   The renderer emits BOTH wrappers when the mode differs by breakpoint, and
   emits the per-device show/hide rules itself. These are only the defaults for
   the single-mode case, so markup is never invisible without a stylesheet.
   -------------------------------------------------------------------------- */
.qmt-search-mode {
  display: block;
}
.qmt-ajax-search--responsive .qmt-search-mode[data-search-mode="iconTrigger"] {
  display: none;
}

/* Template 1: Inline Search Form */
.qmt-search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}
.qmt-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
}
.qmt-search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.qmt-search-field {
    width: 100%;
    padding: 8px 14px;
    padding-right: 36px;
    font-size: 14px;
    color: var(--qm-color-text, #1e293b);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.qmt-search-modal .qmt-search-field {
    padding-left: 42px;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    background: transparent;
}
.qmt-search-field:focus {
    border-color: var(--qm-color-primary, #054f8e);
    box-shadow: 0 0 0 2px rgba(5, 79, 142, 0.15);
}
.qmt-search-modal .qmt-search-field:focus {
    box-shadow: none;
}
.qmt-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}
.qmt-search-btn:hover {
    color: var(--qm-color-primary, #054f8e);
    background: #f1f5f9;
}
.qmt-search-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Clear Button */
.qmt-search-clear {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.qmt-search-clear:hover {
    color: #334155;
}

/* Template 2: Modal Pop-up Trigger & Structure */
.qmt-search-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: var(--qm-color-heading, #0f172a);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}
.qmt-search-modal-trigger:hover {
    background: #f8fafc;
    border-color: var(--qm-color-primary, #054f8e);
    color: var(--qm-color-primary, #054f8e);
}
.qmt-search-modal-trigger svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Modal Overlay */
.qmt-search-modal {
    position: fixed;
    inset: 0;
    /* Named layer, not a magic number: it must clear the header (1000). */
    z-index: var(--qmt-layer-overlay, 9000);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 16px;
    box-sizing: border-box;
}
.qmt-search-modal.is-open {
    display: flex !important;
}

.qmt-search-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: qmtFadeIn 0.2s ease;
}

.qmt-search-modal-box {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: qmtSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.qmt-search-modal-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-right: 12px;
}
.qmt-search-modal-header .qmt-search-form {
    flex: 1;
}

.qmt-search-modal-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.qmt-search-modal-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

@keyframes qmtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes qmtSlideDown {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Results Dropdown */
.qmt-search-results {
    display: none;
    background: #ffffff;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 6px 0;
}
/* Inline layout: floating dropdown.
   Scoped to the INLINE presentation only. This used to key on
   :not(.qmt-ajax-search--modal), but the renderer emits --inline / --icon /
   --responsive, never --modal, so that selector ALSO matched the Icon Trigger
   overlay's own .qmt-search-results and absolutely positioned it inside
   .qmt-search-modal-box. Keying on the inline scopes makes the rule mean what
   it says and leaves the approved Icon Trigger mode structurally untouched. */
.qmt-ajax-search--inline .qmt-search-results,
.qmt-search-mode--inline .qmt-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--qmt-search-results-z, 1000);
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* Results-panel WIDTH is independent of the field width.
   [data-qmt-results-width] is written per element from the Results Width Mode
   control, so the panel is never derived from the input element.
   "match"     - the old coupled behaviour, kept available on request.
   "available" - default: at least the field, roomy enough for thumbnail,
                 title, badge and excerpt, clamped to the viewport.
   "custom"    - defers entirely to the resultsWidth compound part, which is
                 the same NumberUnit + responsive cascade as every other part. */
.qmt-ajax-search--inline .qmt-search-results[data-qmt-results-width="match"],
.qmt-search-mode--inline .qmt-search-results[data-qmt-results-width="match"] {
    right: 0;
}
.qmt-ajax-search--inline .qmt-search-results[data-qmt-results-width="available"],
.qmt-search-mode--inline .qmt-search-results[data-qmt-results-width="available"] {
    right: auto;
    width: var(--qmt-search-results-width, 40rem);
    min-width: 100%;
    max-width: calc(100vw - 2rem);
}
.qmt-ajax-search--inline .qmt-search-results[data-qmt-results-width="custom"],
.qmt-search-mode--inline .qmt-search-results[data-qmt-results-width="custom"] {
    right: auto;
    min-width: 100%;
    max-width: calc(100vw - 2rem);
}
/* Set by the runtime when an anchored panel would cross the viewport's right
   edge, so the panel stays usable near the right end of a header without any
   page-specific CSS. */
.qmt-ajax-search--inline .qmt-search-results[data-qmt-results-flip="end"],
.qmt-search-mode--inline .qmt-search-results[data-qmt-results-flip="end"] {
    left: auto;
    right: 0;
}
/* Modal layout: inline results inside box */
.qmt-search-modal .qmt-search-results {
    border-top: none;
    border-radius: 0 0 12px 12px;
}
.qmt-search-results.is-open {
    display: block !important;
}

.qmt-search-loading,
.qmt-search-empty {
    padding: 18px 20px;
    font-size: 14px;
    color: #64748b;
    text-align: center;
}
.qmt-search-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--qm-color-primary, #054f8e);
    border-radius: 50%;
    animation: qmtSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes qmtSpin {
    to { transform: rotate(360deg); }
}

.qmt-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.qmt-search-item {
    margin: 0;
    padding: 0;
}
.qmt-search-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}
.qmt-search-item.is-selected .qmt-search-item-link,
.qmt-search-item-link:hover {
    background-color: #f1f5f9;
}
.qmt-search-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.qmt-search-item-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}
.qmt-search-item-thumb-placeholder svg {
    width: 20px;
    height: 20px;
}
.qmt-search-item-info {
    flex: 1;
    min-width: 0;
}
.qmt-search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qmt-search-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
}
.qmt-search-item-badge {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #475569;
}
.qmt-search-item-excerpt {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qmt-search-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--qm-color-primary, #054f8e);
}