/* --- CENTRALIZED DESIGN TOKENS & STUDIO OVERRIDES --- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: "IBM Plex Sans Var";
  src: url("https://zityad.com/biz_css/mba/fonts/IBMPlexSansVar-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Var";
  src: url("https://zityad.com/biz_css/mba/fonts/IBMPlexSansVar-latin-ext.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB-02DD, U+0300-0301,
    U+0303-0304, U+0308-0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body, html {
    font-family: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system,
    "Segoe UI", sans-serif; !important;
}

/* Smooth anchor scrolling with offset for the fixed navbar (~80px) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

*, *::before, *::after {
    border-radius: 0 !important; /* Bauhaus: sharp edges everywhere */
}

html.dark body,
body.dark,
.dark body {
    background-color: #0a0a0a !important;
}

:root {
    /* MBA Landing Page Design Tokens */
    --lp-black: #0a0a0a;
    --lp-white: #ffffff;
    --lp-grey-100: #f4f4f4;
    --lp-grey-300: #d9d9d9;
    --lp-grey-500: #8a8a8a;
    --lp-grey-700: #4a4a4a;
    --lp-line: var(--lp-black);
    --lp-font: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system,
    "Segoe UI", sans-serif;
	--lp-h1: clamp(2.9rem, 9.2vw, 8.75rem);
	--lp-h2: clamp(2.4rem, 6vw, 5.5rem);
	--lp-h3: clamp(2rem, 4.5vw, 3.75rem);
	--lp-h4: clamp(1.8rem, 3.2vw, 2.75rem);
	--lp-h5: clamp(1.4rem, 2.2vw, 1.9rem);
	--lp-h6: 1.15rem;
    --lp-max: 1440px;
    --lp-pad: clamp(1.25rem, 4vw, 4rem);
    --lp-gap: clamp(1.5rem, 3vw, 3rem);
    --lp-ease: cubic-bezier(0.22, 0.61, 0.21, 1);

    /* Main Theme Colors */
    --main-color: #0a0a0a;
    --main-color-hover: #262626;
    --main-color-light: #f4f4f4;

    /* Global Colors */
    --color-white: #ffffff;
    --color-black: #0a0a0a;

    /* Gray Scale */
    --gray-50: #f4f4f4;
    --gray-100: #f4f4f4;
    --gray-150: #e5e5e5;
    --gray-200: #e5e5e5;
    --gray-300: #d9d9d9;
    --gray-400: #a3a3a3;
    --gray-500: #8a8a8a;
    --gray-600: #525252;
    --gray-750: #d9d9d9;
    --gray-800: #262626;
    --gray-900: #0a0a0a;

    /* Component Semantic Colors */
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --border-main: #0a0a0a;
    --border-light: #d9d9d9;
    --text-primary: #0a0a0a;
    --text-secondary: #4a4a4a;
    --text-muted: #8a8a8a;
    --text-light: #a3a3a3;

    /* Buttons */
    --btn-primary-bg: #0a0a0a;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #ffffff;
    --btn-primary-hover-text: #0a0a0a;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #0a0a0a;
    --btn-secondary-text: #0a0a0a;
    --btn-secondary-hover-bg: #0a0a0a;
    --btn-secondary-hover-text: #ffffff;
    --btn-secondary-hover-border: #0a0a0a;

    /* Inputs & Forms */
    --input-bg: transparent;
    --input-border: #0a0a0a;
    --input-text: #0a0a0a;
    --input-focus-border: #0a0a0a;
    --input-focus-shadow: none;

    /* Errors */
    --color-error: #dc2626;

    /* Cart Modal */
    --cart-icon-bg: transparent;
    --cart-icon-border: #0a0a0a;
    --cart-icon-text: #0a0a0a;
    --cart-modal-bg: #0a0a0a;
    --cart-modal-border: #4a4a4a;
    --cart-modal-header-bg: #171717;
    --cart-item-border: #262626;
    --cart-item-img-bg: #171717;
    --cart-item-text: #ffffff;
    --cart-item-qty-price: #d9d9d9;

    /* Navigation */
    --nav-bg-glass: rgba(255, 255, 255, 0.95);
    --nav-bg-opaque: #ffffff;
    --nav-mobile-bg: #ffffff;
    --nav-border: #0a0a0a;

    /* Phone Widget */
    --phone-widget-bg: #0a0a0a;
    --phone-widget-border: #0a0a0a;
}

.dark {
    /* Dark Theme Colors — strictly monochrome (accent = white on black) */
    --main-color: #ffffff;
    --main-color-hover: #d9d9d9;
    --main-color-light: rgba(255, 255, 255, 0.1);

    /* Gray Scale (Zinc) in Dark Mode */
    --gray-50: #0A0A0A;
    --gray-100: #171717;
    --gray-150: #262626;
    --gray-200: #262626;
    --gray-300: #404040;
    --gray-400: #737373;
    --gray-500: #A3A3A3;
    --gray-600: #D4D4D4;
    --gray-750: #262626;
    --gray-800: #FAFAFA;
    --gray-900: #FFFFFF;

    /* Component Semantic Colors (Dark Mode) */
    --bg-page: #0A0A0A;
    --bg-card: #171717;
    --bg-sidebar: #171717;
    --border-main: #262626;
    --border-light: #171717;
    --text-primary: #FAFFA;
    --text-secondary: #D4D4D4;
    --text-muted: #A3A3A3;
    --text-light: #737373;

    /* Buttons in Dark Mode */
    --btn-primary-bg: #FFFFFF;
    --btn-primary-text: #0A0A0A;
    --btn-primary-hover-bg: #E5E5E5;
    --btn-primary-hover-text: #0A0A0A;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #262626;
    --btn-secondary-text: #FAFFA;
    --btn-secondary-hover-bg: #171717;
    --btn-secondary-hover-text: #FFFFFF;
    --btn-secondary-hover-border: #404040;

    /* Inputs in Dark Mode */
    --input-bg: #171717;
    --input-border: #262626;
    --input-text: #FAFFA;
    --input-focus-border: #FFFFFF;
    --input-focus-shadow: rgba(255, 255, 255, 0.05);

    /* Sliders in Dark Mode */
    --slider-inactive: #262626;
    --slider-active: #e5f628;
    --slider-pointer: #e5f628;
    --slider-pointer-hover: #cce01b;
    --slider-bubble-bg: #171717;
    --slider-bubble-text: #FFFFFF;
    --slider-tick-inactive: #404040;
    --slider-tick-active: #e5f628;
    --slider-thumb-bg: #0A0A0A;
    --slider-thumb-border: #e5f628;
    --slider-label-text: #A3A3A3;
    --slider-pointer-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --slider-pointer-focus-shadow: 0 0 0 4px rgba(229, 246, 40, 0.25);
    --slider-bubble-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    /* Cart Modal in Dark Mode */
    --cart-icon-bg: transparent;
    --cart-icon-border: transparent;
    --cart-icon-text: #FFFFFF;
    --cart-modal-bg: #0A0A0Ad9;
    --cart-modal-border: rgba(255, 255, 255, 0.08);
    --cart-modal-header-bg: rgba(255, 255, 255, 0.03);
    --cart-item-border: rgba(255, 255, 255, 0.05);
    --cart-item-img-bg: rgba(255, 255, 255, 0.03);
    --cart-item-text: #FFFFFF;
    --cart-item-qty-price: rgba(255, 255, 255, 0.7);

    /* Navigation in Dark Mode */
    --nav-bg-glass: rgba(10, 10, 10, 0.85);
    --nav-bg-opaque: #0A0A0A;
    --nav-mobile-bg: #0A0A0A;
    --nav-border: #262626;

    /* Phone Widget in Dark Mode */
    --phone-widget-bg: rgba(10, 10, 10, 0.95);
    --phone-widget-border: #262626;
}

/* Brand Yellow Text Highlight (Erwin Hettich / Studio style) */
h1 .text-brand-yellow,
h2 .text-brand-yellow,
h3 .text-brand-yellow,
h4 .text-brand-yellow,
h5 .text-brand-yellow,
h6 .text-brand-yellow,
.sqsrte-text-highlight,
.brand-highlight {
    position: relative;
    z-index: 1;
    color: #09090b !important;
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
    display: inline-block !important;
}

h1 .text-brand-yellow::before,
h2 .text-brand-yellow::before,
h3 .text-brand-yellow::before,
h4 .text-brand-yellow::before,
h5 .text-brand-yellow::before,
h6 .text-brand-yellow::before,
.sqsrte-text-highlight::before,
.brand-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #e5f628 !important;
    z-index: -1;
    pointer-events: none;
}

/* --- CONSOLIDATED COMPONENT OVERRIDES & TEMPLATE STYLES --- */

[ng-cloak],
.ng-cloak {
    display: none !important;
}

/* visual-filter compatibility styles */
.product-intro .product-info {
    padding: 0 !important;
}

.product-intro h2 {
    font-size: 28px;
}

.filter-product-info {
    font-size: 12px;
}

.product-intro {
    padding: 2px 5px;
}

/* menu styles */
@media (min-width: 768px) {
    .mega-menu-dropdown {
        background-color: transparent !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }


    .mega-menu-dropdown::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: #ffffffc8 !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .dark .mega-menu-dropdown::before {
        background-color: var(--nav-bg-glass) !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    }
}

/* mainmenu styles */
html,
body {
    overflow-x: hidden !important;
    position: relative;
}

.navbar-container {
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
}

.navbar-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgb(255 255 255 / 33%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.dark .navbar-container::before {
    background-color: rgb(0 0 0 / 33%) !important;
}

#mobile-nav {
    top: 0 !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#mobile-nav ul {
    border-color: #e4e4e7 !important;
}

#mobile-nav .plus {
    color: #4b5563 !important;
}

#mobile-nav .border-t {
    border-color: #e4e4e7 !important;
}


/* Dark mode overrides for mobile-nav */


.dark #mobile-nav ul {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #mobile-nav .plus {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark #mobile-nav .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* Ensure sub-dropdowns in navigation inherit the dark translucent background */
.navbar-container ul.absolute,
#mobile-nav ul.absolute {
    background-color: #3c464bde !important;
}

.navbar-container.navbar-opaque::before,
.navbar-container:has(.menu-active)::before {
    background-color: transparent !important;
}

.mega-img-place img,
.img-responsive {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: none !important;
    transition: all 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

@keyframes megaMenuImageFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mega-img-fade-in {
    animation: megaMenuImageFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* cart styles */
.biz-cart-qty-widget {
    position: relative;
    display: inline-block;
}

.biz-cart-qty-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cart-icon-bg);
    border: 1px solid var(--cart-icon-border);
    border-radius: 0;
    color: var(--cart-icon-text);
    box-shadow: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.biz-cart-qty-icon:hover {
    background: transparent;
    color: var(--btn-primary-bg) !important;
    border-color: transparent;
}

.biz-cart-qty-icon h3 {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: 2px solid var(--nav-bg-opaque) !important;
    border-radius: 0;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 !important;
    padding: 0 2px !important;
}

.dark .biz-cart-qty-icon h3 {
    border-color: var(--nav-bg-opaque) !important;
}

.biz-cart-modal {
    position: absolute;
    top: 55px;
    right: 0;
    width: 380px;
    background: var(--cart-modal-bg);
    border-radius: 0;
    border: 1px solid var(--cart-modal-border) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 10000;
    pointer-events: none;
}

.biz-cart-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

@media (max-width: 480px) {
    .biz-cart-modal {
        width: calc(100vw - 45px) !important;
        right: -10px !important;
    }
}

.biz-cart-modal-header {
    padding: 16px 20px;
    background: var(--cart-modal-header-bg);
    border-bottom: 1px solid var(--cart-modal-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    border-radius: 0;
    color: var(--cart-item-text);
}

.dark .biz-cart-modal-header strong {
    color: #ffffff !important;
}

.biz-cart-items {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
    width: 100%;
}

.biz-cart-item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cart-item-border);
    width: 100% !important;
    box-sizing: border-box;
}

.biz-cart-item:last-child {
    border-bottom: none;
}

.biz-cart-item img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 0;
    background: var(--cart-item-img-bg);
    flex-shrink: 0;
}

.biz-cart-item-info {
    flex: 1;
    min-width: 0;
    color: var(--cart-item-text);
}

.biz-cart-item-name {
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--cart-item-text);
    font-size: 14px;
}

.dark .biz-cart-item-name {
    color: #ffffff !important;
}

.biz-cart-item-qty-price {
    font-size: 13px;
    color: var(--cart-item-qty-price);
}

.biz-cart-item-total {
    font-weight: 700;
    color: var(--btn-primary-bg);
    white-space: nowrap;
    margin-top: 2px;
    font-size: 14px;
}

.biz-cart-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--cart-modal-border);
    background: var(--cart-modal-header-bg);
    border-radius: 0;
}

.biz-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--cart-icon-text);
}

.dark .biz-total-row strong {
    color: #ffffff !important;
}

.biz-btn-to-cart {
    display: block;
    text-align: center;
    padding: 13px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text) !important;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.biz-btn-to-cart:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text) !important;
    transform: translateY(-1px);
}

/* product-page styles */
.state-indicator {
    display: none;
}

@media (min-width: 1200px) {
    .state-indicator:before {
        content: "desktop";
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .state-indicator:before {
        content: "tablet";
    }
}

@media (max-width: 767px) {
    .state-indicator:before {
        content: "mobile";
    }
}

.collapse:not(.in) {
    display: none !important;
}

.collapse.in {
    display: block !important;
    visibility: visible !important;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    visibility: visible !important;
}

.product-page .attribute-icon,
.product-page .product-attribute-icon,
.product-page .product-tab-icon,
.product-page dt img,
.product-page .attribute dt img,
.product-page .dl-leaders .product-attribute-icon,
.product-page .product-attributes .product-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* products-filter styles */
.filter-container {
    position: relative !important;
    z-index: 40 !important;
}

.product-filters-popup {
    z-index: 50 !important;
}

.attribute-icon,
.product-attribute-icon,
.filter-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* products-list styles */
.attribute-icon,
.product-attribute-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.attribute {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
}

.attribute dt,
.attribute dd {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

.attribute dt {
    /* color: var(--text-light) !important;*/
    flex-shrink: 0 !important;
}

.attribute dt::after {
    content: ":" !important;
    margin-left: 1px !important;
}

.attribute dd {
    color: var(--text-primary) !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

.view-table .attribute {
    width: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
}

/* tail-products-list & tail-products-list-fix styles */
.tail-attribute {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    width: auto !important;
}

.tail-attribute dt,
.tail-attribute dd {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.tail-attribute dt {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.3s ease;
    flex-shrink: 0 !important;
}

.tail-attribute dt::after {
    content: none !important;
    display: none !important;
}

.tail-attribute dd {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.3s ease;
    flex-shrink: 0 !important;
}

.tail-attribute .attribute-icon,
.tail-attribute .product-attribute-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transition: filter 0.3s ease;
}

.dark .tail-attribute .attribute-icon,
.dark .tail-attribute .product-attribute-icon {
    filter: brightness(0) invert(1) !important;
}

.tail-list-item:hover h3,
.tail-list-item.group:hover h3,
.tail-list-item:hover .tail-attribute dt,
.tail-list-item:hover .tail-attribute dd,
.tail-list-item:hover .tail-attribute dd *,
.tail-list-item:hover .attribute.has-value dt,
.tail-list-item:hover .attribute.has-value dd,
.tail-list-item:hover .attribute.has-value dd * {
    color: #ffffff !important;
}

.group:hover .tail-attribute .attribute-icon,
.group:hover .tail-attribute .product-attribute-icon {
    filter: brightness(0) invert(1) !important;
}

.tail-list-item {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-bottom: 1px solid var(--border-main) !important;
    box-sizing: border-box !important;
}

/* menu-widget styles */
@media (max-width: 767px) {
    body {
        padding-bottom: 60px !important;
    }

    nav .phone-widget {
        display: none !important;
    }

    .phone-widget {
        background-color: var(--phone-widget-bg) !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    }
}

@media (min-width: 767px) {
    footer .phone-widget {
        display: none !important;
    }
}

/* Theme Helper Classes for easy integration */
.btn-theme-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-theme-primary:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    color: var(--btn-primary-hover-text) !important;
    opacity: 0.95;
}

.btn-theme-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-theme-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
    color: var(--btn-secondary-hover-text) !important;
    border-color: var(--btn-secondary-hover-border) !important;
}

.text-theme-main {
    color: var(--main-color) !important;
}

.text-theme-hover:hover {
    color: var(--main-color-hover) !important;
}

.text-theme-muted {
    color: var(--text-muted) !important;
}

.border-theme-main {
    border-color: var(--border-main) !important;
}

/* Footer Social Icons - Dark Theme Style */
.dark .footer-social-link {
    background-color: #3c464b !important;
    color: #FFFFFF !important;
}

.dark .footer-social-link svg {
    color: #FFFFFF !important;
}

.dark .footer-social-link:hover {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.dark .footer-social-link:hover svg {
    color: var(--btn-primary-text) !important;
}

/* Sticky Sidebar Scrollbar Custom Styling */
.lg\:sticky::-webkit-scrollbar {
    width: 6px;
}

.lg\:sticky::-webkit-scrollbar-track {
    background: transparent;
}

.lg\:sticky::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 0;
}

.lg\:sticky::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
}

.lg\:sticky {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* Ensure position: sticky works inside layout wrappers by using clip or visible */
html,
body,
main,
.page-wrapper,
[role="main"] {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Custom dark mode invert utility for placeholder images */
.dark .placeholder-invert-custom {
    filter: invert(88%) !important;
}

/* --- CMS Typography System --- */
.prose,
.cms-content,
.rich-html,
article {
    color: #374151;
    /* gray-700 */
    font-family: var(--lp-font);
    font-size: 1rem;
    line-height: 1.75;
}

.prose h1,
.cms-content h1,
.rich-html h1,
article h1 {
    font-family: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #0a0a0a;
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.prose h2,
.cms-content h2,
.rich-html h2,
article h2 {
    font-family: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #0a0a0a;
    font-size: 1.625rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    border-left: 4px solid #0a0a0a;
    padding-left: 0.75rem;
}

.prose h3,
.cms-content h3,
.rich-html h3,
article h3 {
    font-family: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    color: #0a0a0a;
    font-size: 1.375rem;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.prose h4,
.cms-content h4,
.rich-html h4,
article h4 {
    font-family: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    color: #0a0a0a;
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose p,
.cms-content p,
.rich-html p,
article p {
    margin-top: 0;
    /*margin-bottom: 1.25rem;*/
    color: #4B5563;
    /* gray-600 */
}

.prose ul,
.cms-content ul,
.rich-html ul,
article ul {
    list-style-type: disc;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.625rem;
}

.prose ol,
.cms-content ol,
.rich-html ol,
article ol {
    list-style-type: decimal;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.625rem;
}

.prose li,
.cms-content li,
.rich-html li,
article li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0.125rem;
}

/* --- Dark Mode Overrides for CMS Typography --- */
.dark .prose,
.dark .cms-content,
.dark .rich-html,
.dark article {
    color: #D1D5DB;
    /* gray-300 */
}

.dark .prose h1,
.dark .cms-content h1,
.dark .rich-html h1,
.dark article h1,
.dark .prose h2,
.dark .cms-content h2,
.dark .rich-html h2,
.dark article h2,
.dark .prose h3,
.dark .cms-content h3,
.dark .rich-html h3,
.dark article h3,
.dark .prose h4,
.dark .cms-content h4,
.dark .rich-html h4,
.dark article h4 {
    color: #F9FAFB;
    /* gray-50 */
}

.dark .prose h2,
.dark .cms-content h2,
.dark .rich-html h2,
.dark article h2 {
    border-left-color: #e5f628;
}

.dark .prose p,
.dark .cms-content p,
.dark .rich-html p,
.dark article p {
    color: #9CA3AF;
    /* gray-400 */
}

/* --- Accordion FAQ Section --- */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.accordion-content.is-active {
    grid-template-rows: 1fr;
    opacity: 1;
}


/* 1. Typography Overrides */
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
[class*="-section"] h1, [class*="-section"] h2, [class*="-section"] h3, [class*="-section"] h4, [class*="-section"] h5, [class*="-section"] h6,
[class*="-widget"] h1, [class*="-widget"] h2, [class*="-widget"] h3,
.scroll-text h3 {
    font-family: var(--lp-font);
    font-weight: 680;
	font-stretch: 80%;
    text-transform: uppercase;
    letter-spacing: -0.015rem;
    color: var(--text-primary);
    line-height: 1;
}
		
.section:not([class*="hero"]) h1,
[class*="-section"]:not([class*="hero"]) h1,
[class*="-widget"]:not([class*="hero"]) h1 {
    font-size: 2rem, 4.5vw, 3.75rem; 
}
	
.section:not([class*="hero"]) h2,
[class*="-section"]:not([class*="hero"]) h2,
[class*="-widget"]:not([class*="hero"]) h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
}


/* --- Stylization of standard typography & lists inside wysiwyg-editor --- */
.wysiwyg-editor h1 {
	font-weight: 700;
    font-stretch: 80%;
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 12em;
}

.wysiwyg-editor h2 {
	font-family: var(--lp-font);
    font-weight: 680;
	font-stretch: 80%;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--text-primary);
}


.wysiwyg-editor h3 {
    font-family: var(--lp-font);
    font-weight: 660;
	 font-stretch: 80%;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1;
    letter-spacing: -0.015em;
	text-transform: uppercase;
    color: var(--text-primary);
}

.wysiwyg-editor h4 {
    font-family: var(--lp-font);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #0a0a0a;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.wysiwyg-editor h5 {
    font-family: var(--lp-font);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.45;
    color: #0a0a0a;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.wysiwyg-editor h6 {
    font-family: var(--lp-font);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: #0a0a0a;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Lists styling inside wysiwyg-editor */
.wysiwyg-editor ul {
	list-style: none;
	margin-top: 1.25em;
	padding-left: 0;
}

.wysiwyg-editor ul li {
	font-family: var(--lp-font);
	position: relative;
	font-weight: 400;
	font-size: 1.05rem;
    line-height: 1.65;
	padding: 0.3em 0 0.3em 1.4em;
}


.wysiwyg-editor ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.3em + 0.62em);
    width: 0.4em;
    height: 0.4em;
    background: var(--lp-black);
}
  

/* Strong bold element inside wysiwyg-editor */
.wysiwyg-editor strong {
    font-weight: 700;
    color: #111827;
}

/* Dark Mode overrides for wysiwyg-editor */
.dark .wysiwyg-editor h1,
.dark .wysiwyg-editor h2,
.dark .wysiwyg-editor h3,
.dark .wysiwyg-editor h4,
.dark .wysiwyg-editor h5,
.dark .wysiwyg-editor h6 {
    color: #FFFFFF;
}

.dark .wysiwyg-editor strong {
    color: #FFFFFF;
}

/* CTA Banner Form Specific Styling */
form-widget.cta-banner-form .form-section {
    gap: 0.75rem !important;
}

form-widget.cta-banner-form .formPage {
    gap: 0.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

form-widget.cta-banner-form .formPage li.form-element,
form-widget.cta-banner-form .form-element {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

form-widget.cta-banner-form label,
form-widget.cta-banner-form .form-label,
form-widget.cta-banner-form .itf-label__label,
form-widget.cta-banner-form .form-element label,
form-widget.cta-banner-form .form-element label.form-label,
form-widget.cta-banner-form .form-element .itf-label__label,
.dark form-widget.cta-banner-form label,
.dark form-widget.cta-banner-form .form-label,
.dark form-widget.cta-banner-form .itf-label__label,
.dark form-widget.cta-banner-form .form-element label,
.dark form-widget.cta-banner-form .form-element label.form-label,
.dark form-widget.cta-banner-form .form-element .itf-label__label,
html body form-widget.cta-banner-form label,
html body form-widget.cta-banner-form .form-label,
html body form-widget.cta-banner-form .itf-label__label,
html body .dark form-widget.cta-banner-form label,
html body .dark form-widget.cta-banner-form .form-label,
html body .dark form-widget.cta-banner-form .itf-label__label {
    margin-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #e5f628 !important;
    /* Brand yellow/orange for both light and dark modes */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

form-widget.cta-banner-form .star {
    color: #ef4444 !important;
}

form-widget.cta-banner-form .form_input,
form-widget.cta-banner-form .form_input input.form_input,
form-widget.cta-banner-form .form_input input[type="text"],
form-widget.cta-banner-form .form_input input[type="email"],
form-widget.cta-banner-form .form_input input[type="tel"],
form-widget.cta-banner-form .form_input select {
    padding: 0.25rem 0 !important;
    /* transparent theme: no left/right padding */
    font-size: 1.125rem !important;
    /* increased to 18px */
    height: auto !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

form-widget.cta-banner-form .form_input:focus,
form-widget.cta-banner-form .form_input input.form_input:focus,
form-widget.cta-banner-form .form_input input[type="text"]:focus,
form-widget.cta-banner-form .form_input input[type="email"]:focus,
form-widget.cta-banner-form .form_input input[type="tel"]:focus,
form-widget.cta-banner-form .form_input select:focus {
    box-shadow: none !important;
}

form-widget.cta-banner-form .form-actions {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

form-widget.cta-banner-form .submitButton {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

form-widget.cta-banner-form .submitButton:hover {
    background-color: #262626 !important;
}

.dark form-widget.cta-banner-form .submitButton {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

.dark form-widget.cta-banner-form .submitButton:hover {
    background-color: #f5f5f5 !important;
}

/* Back / Secondary Buttons in CTA Banner Form */
form-widget.cta-banner-form .backButton,
form-widget.cta-banner-form .order-product-clear-cart-button,
form-widget.cta-banner-form .order-product-remove-button,
html body form-widget.cta-banner-form .backButton,
html body form-widget.cta-banner-form .order-product-clear-cart-button,
html body form-widget.cta-banner-form .order-product-remove-button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: transparent !important;
}

form-widget.cta-banner-form .backButton:hover,
form-widget.cta-banner-form .order-product-clear-cart-button:hover,
form-widget.cta-banner-form .order-product-remove-button:hover,
html body form-widget.cta-banner-form .backButton:hover,
html body form-widget.cta-banner-form .order-product-clear-cart-button:hover,
html body form-widget.cta-banner-form .order-product-remove-button:hover {
    color: #0c0a09 !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Dark theme divide-gray-800 border-color override */
.dark\:divide-gray-800:is(.dark *)> :not([hidden])~ :not([hidden]) {
    border-color: #21272a !important;
}

/* Dark theme border-gray-800 border-color override */
.dark\:border-gray-800:is(.dark *) {
    border-color: #21272a !important;
}

/* Dark theme bg-slate-900 override to black */
.dark\:bg-slate-900:is(.dark *) {
    background-color: #000000 !important;
}

/* Level 3 links hover color in mega menu (orange/yellow) */
.mega-menu-dropdown ul ul a:hover {
    color: #e5f628 !important;
}

/* --- Section wysiwyg-editor H1 headings --- */
.right-left-100-section .wysiwyg-editor h1,
.text-left-100-section .wysiwyg-editor h1,
.left-text-section .wysiwyg-editor h1,
.left-right-section .wysiwyg-editor h1,
.left-text-70-30-section .wysiwyg-editor h1,
.right-text-30-70-section .wysiwyg-editor h1,
.text-center-section .wysiwyg-editor h1,
.hero-text1-section .wysiwyg-editor h1,
.hero-text2-section .wysiwyg-editor h1 {
    font-family: var(--font-display, inherit);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-size: 2.25rem;
    color: #111827;
    margin-bottom: 1.5rem;
}
.dark .right-left-100-section .wysiwyg-editor h1,
.dark .text-left-100-section .wysiwyg-editor h1,
.dark .left-text-section .wysiwyg-editor h1,
.dark .left-right-section .wysiwyg-editor h1,
.dark .left-text-70-30-section .wysiwyg-editor h1,
.dark .right-text-30-70-section .wysiwyg-editor h1,
.dark .text-center-section .wysiwyg-editor h1,
.dark .hero-text1-section .wysiwyg-editor h1,
.dark .hero-text2-section .wysiwyg-editor h1 {
    color: #ffffff;
}
.text-center-section .wysiwyg-editor h1 {
    text-align: center;
}
@media (min-width: 640px) {
    .right-left-100-section .wysiwyg-editor h1,
    .text-left-100-section .wysiwyg-editor h1,
    .left-text-section .wysiwyg-editor h1,
    .left-right-section .wysiwyg-editor h1,
    .left-text-70-30-section .wysiwyg-editor h1,
    .right-text-30-70-section .wysiwyg-editor h1,
    .text-center-section .wysiwyg-editor h1,
    .hero-text1-section .wysiwyg-editor h1,
    .hero-text2-section .wysiwyg-editor h1 {
        font-size: 3rem;
    }
}
@media (min-width: 1024px) {
    .right-left-100-section .wysiwyg-editor h1,
    .text-left-100-section .wysiwyg-editor h1,
    .left-text-section .wysiwyg-editor h1,
    .left-right-section .wysiwyg-editor h1,
    .left-text-70-30-section .wysiwyg-editor h1,
    .right-text-30-70-section .wysiwyg-editor h1,
    .text-center-section .wysiwyg-editor h1,
    .hero-text1-section .wysiwyg-editor h1,
    .hero-text2-section .wysiwyg-editor h1 {
        font-size: 4.5rem;
    }
}

/* Center alignments & overrides for wysiwyg-editor inside text-center-section */
.text-center-section .wysiwyg-editor h2 {
    border-left: none !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.text-center-section .wysiwyg-editor ul li {
    padding-left: 0 !important;
    text-align: center !important;
}
.text-center-section .wysiwyg-editor ul li::before {
    display: inline-block !important;
    position: static !important;
    vertical-align: middle !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   STUDIO DESIGN SYSTEM OVERRIDES
   Enforces typography, buttons, grids, borders and separators
   ========================================================================== */


/* 2. Pills and Buttons */
a.inline-block.bg-brand-yellow,
.section a.inline-block[class*="bg-brand-yellow"],
button[class*="bg-brand-yellow"],
.biz-btn-to-cart,
.form-switch label,
.footer-social-link,
.active-filter,
.carousel-prev,
.carousel-next {
    border-radius: 0 !important;
}

/* --- Styling all primary buttons to match the Menu button design --- */
a.inline-block.bg-brand-yellow,
.section a.inline-block[class*="bg-brand-yellow"],
button[class*="bg-brand-yellow"],
.biz-btn-to-cart,
.add-to-cart-btn,
.image-banner-section span.inline-block.bg-brand-yellow,
.image-banner-widget span.inline-block.bg-brand-yellow,
.video-banner-section span.inline-block.bg-brand-yellow,
.video-banner-widget span.inline-block.bg-brand-yellow,
.section a.inline-block.bg-brand-yellow {
    background-color: #09090b !important;
    color: #ffffff !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Enlarge arrows inside these buttons */
a.inline-block.bg-brand-yellow svg,
.section a.inline-block[class*="bg-brand-yellow"] svg,
button[class*="bg-brand-yellow"] svg,
.biz-btn-to-cart svg,
.add-to-cart-btn svg,
.image-banner-section span.inline-block.bg-brand-yellow svg,
.image-banner-widget span.inline-block.bg-brand-yellow svg,
.video-banner-section span.inline-block.bg-brand-yellow svg,
.video-banner-widget span.inline-block.bg-brand-yellow svg,
.section a.inline-block.bg-brand-yellow svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Dark theme button rules */
.dark a.inline-block.bg-brand-yellow,
.dark .section a.inline-block[class*="bg-brand-yellow"],
.dark button[class*="bg-brand-yellow"],
.dark .biz-btn-to-cart,
.dark .add-to-cart-btn,
.dark .image-banner-section span.inline-block.bg-brand-yellow,
.dark .image-banner-widget span.inline-block.bg-brand-yellow,
.dark .video-banner-section span.inline-block.bg-brand-yellow,
.dark .video-banner-widget span.inline-block.bg-brand-yellow,
.dark .section a.inline-block.bg-brand-yellow {
    background-color: #ffffff !important;
    color: #09090b !important;
}

/* Hover effects */
a.inline-block.bg-brand-yellow:hover,
.section a.inline-block[class*="bg-brand-yellow"]:hover,
button[class*="bg-brand-yellow"]:hover,
.biz-btn-to-cart:hover,
.add-to-cart-btn:hover,
.image-banner-section span.inline-block.bg-brand-yellow:hover,
.image-banner-widget span.inline-block.bg-brand-yellow:hover,
.video-banner-section span.inline-block.bg-brand-yellow:hover,
.video-banner-widget span.inline-block.bg-brand-yellow:hover,
.section a.inline-block.bg-brand-yellow:hover {
    background-color: #262626 !important; /* hover:bg-neutral-800 equivalent */
    color: #ffffff !important;
}

.dark a.inline-block.bg-brand-yellow:hover,
.dark .section a.inline-block[class*="bg-brand-yellow"]:hover,
.dark button[class*="bg-brand-yellow"]:hover,
.dark .biz-btn-to-cart:hover,
.dark .add-to-cart-btn:hover,
.dark .image-banner-section span.inline-block.bg-brand-yellow:hover,
.dark .image-banner-widget span.inline-block.bg-brand-yellow:hover,
.dark .video-banner-section span.inline-block.bg-brand-yellow:hover,
.dark .video-banner-widget span.inline-block.bg-brand-yellow:hover,
.dark .section a.inline-block.bg-brand-yellow:hover {
    background-color: #f5f5f5 !important; /* dark:hover:bg-neutral-100 equivalent */
    color: #09090b !important;
}

/* 3. Cards Rounded Radii & Border styling */
.cards-33-33-33-section a.relative.block,
.cards-33-33-33-section div.relative.block,
.cards-70-30-section a.relative.block,
.cards-50-50-section a.relative.block,
.accordion-item,
.testimonial-card,
.stat-card,
.info-card,
[data-aos-id-stats] > div,
.testimonials-section [class*="bg-white"],
.stat-section [class*="bg-white"],
.horizontal-panel,
.mobile-item,
.wysiwyg-editor article,
.sidebar-wrap,
.sidebar-wrap.side-bar {
    border-radius: 0 !important; /* MBA Bauhaus: sharp edges */
    border: 1px solid var(--border-main) !important;
    border-bottom-width: 1px !important; /* remove the thick yellow bottom border */
    box-shadow: none !important;
    background-color: var(--bg-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cards-33-33-33-section a.relative.block:hover,
.accordion-item:hover,
[data-aos-id-stats] > div:hover,
.horizontal-panel:hover {
    border-color: var(--text-primary) !important;
    transform: translateY(-2px) !important;
}

/* 4. Timeline Grid Separators (signature Studio style) */
.studio-divider {
    position: relative;
    padding-top: 4rem;
}
.studio-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 1px;
    background-color: var(--text-primary);
}
.studio-divider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 0;
    height: 1px;
    background-color: var(--border-main);
}

/* 5. Mobile Nav Menu Hover Highlights */
#mobile-nav a {
    transition: all 0.2s ease-in-out;
}

#mobile-nav a span {
    transition: all 0.2s ease-in-out;
    display: inline-block;
    padding: 0.05em 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

#mobile-nav a:hover span {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
    padding-top: 0.05em !important;
    padding-bottom: 0.05em !important;
}

/* Arrow SVGs fill color inside buttons in light theme */
html:not(.dark) svg.text-brand-near-black,
html:not(.dark) svg.fill-current.text-brand-near-black {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* ==========================================================================
   MBA / Mila-wall — Landing-Page Design System (ported from lp.css)
   Schwarz-Weiß · Bauhaus · IBM Plex Sans Variable
   Component styles are UNSCOPED (prefixed lp-*) so they render both in the
   static preview (body.lp-page) and inside the CMS master-layout.
   ========================================================================== */

	

/* ---------- Layout --------- */
	
	a:not(.lp-btn):not(nav a):not(#mobile-nav a):not(.lp-header-phone) {
	  text-decoration: underline !important;
	}
	
	.lp-container {
		max-width: var(--lp-max);
		margin-inline: auto;
		padding-inline: var(--lp-pad);
	}
	
	.lp-img { display: block; max-width: 100%; height: auto; }
	
	.lp-section {
		padding-block: clamp(4rem, 9vw, 8.5rem);
		border-top: 1px solid var(--lp-line);
		scroll-margin-top: 88px;
	}

	.lp-sec-head {
		display: flex;
		align-items: baseline;
		gap: 1.25rem;
		margin-bottom: clamp(2.5rem, 6vw, 5rem);
	}	
	
	.lp-sec-num { font-weight: 450; font-size: 0.85rem; letter-spacing: 0.18em; }
	
	.lp-sec-title {
		font-weight: 680 !important;
		font-stretch: 85% !important;
		font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
		line-height: 1 !important;
		letter-spacing: -0.015em !important;
		text-transform: uppercase ;
	}

	.lp-actions {
		margin-top: clamp(1.5rem, 3vw, 2.5rem);
	}

    .lp-intro h1 {
			margin-bottom: clamp(1rem, 2vw, 1.75rem);
	}
		
    .lp-intro {
		font-size: clamp(1.5rem, 3.1vw, 2.6rem);
		font-weight: 300;
		line-height: 1.35;
		letter-spacing: -0.01em;
		max-width: 24em;
	}
	
	.lp-intro strong { font-weight: 600; }
			  

	/* Das schwarze Quadrat — wiederkehrendes Motiv */
	.lp-sq {
		display: inline-block;
		width: 0.16em;
		height: 0.16em;
		background: currentColor;
		vertical-align: baseline;
		margin-left: 0.18em;
	}


/* ------------- Buttons ------------- */
	.lp-btn {
		display: inline-block;
		background: var(--lp-black);
		color: var(--lp-white);
		border: 1px solid var(--lp-black);
		font-family: var(--lp-font);
		font-size: 0.8rem;
		font-weight: 520;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		padding: 1.05em 2.2em;
		cursor: pointer;
		transition: background 0.25s var(--lp-ease), color 0.25s var(--lp-ease);
	}
	.lp-btn:hover,
	.lp-btn:focus-visible { background: var(--lp-white); color: var(--lp-black); }
	.lp-btn--ghost { background: transparent; color: var(--lp-black); }
	.lp-btn--ghost:hover,
	.lp-btn--ghost:focus-visible { background: var(--lp-black); color: var(--lp-white); }


/* ----------- Header ---------- */
	.lp-header {
		position: sticky;
		top: 0;
		z-index: 50;
		background: var(--lp-white);
		border-bottom: 1px solid var(--lp-line);
	}
	.lp-header .lp-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		height: 72px;
	}
	.lp-logo img { height: 44px; width: auto; }
	.lp-header-label {
		font-size: 0.75rem;
		font-weight: 480;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--lp-grey-700);
	}
	@media (max-width: 640px) {
		.lp-header-label { display: none; }
		.lp-logo img { height: 36px; }
	}

/* ------------ Hero ----------- */
	.lp-hero { padding-block: clamp(3rem, 7vw, 6.5rem) 0; }

	.lp-eyebrow {
		font-size: 0.8rem;
		font-weight: 480;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	}
	.lp-h1 {
		font-weight: 700;
		font-stretch: 80%;
		font-size: clamp(2.9rem, 9.2vw, 8.75rem);
		line-height: 0.94;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		max-width: 12em;
		max-width: 12em;
	}

	.lp-hero-sub {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--lp-gap);
		align-items: end;
		margin-block: clamp(2rem, 4.5vw, 4rem);
	}
	.lp-hero-sub p {
		font-size: clamp(1.1rem, 1.6vw, 1.4rem);
		font-weight: 300;
		line-height: 1.5;
		max-width: 34em;
	}
	.lp-hero-cta {
		display: flex;
		gap: 0.75rem;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	@media (max-width: 860px) {
		.lp-hero-sub { grid-template-columns: 1fr; }
		.lp-hero-cta { justify-content: flex-start; }
	}
	.lp-hero-media { position: relative; }

	.lp-hero-media img {
		width: 100%;
		height: clamp(320px, 62vh, 640px);
		object-fit: cover;
	}
	.lp-credit {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 0.8rem;
		font-size: 0.78rem;
		letter-spacing: 0.06em;
		color: var(--lp-grey-700);
	}
	.lp-credit strong { font-weight: 560; color: var(--lp-black); }


/* --------- Marquee --------- */
	.lp-marquee {
		border-top: 1px solid var(--lp-line);
		border-bottom: 1px solid var(--lp-line);
		overflow: hidden;
		white-space: nowrap;
		padding-block: 0.9rem;
	}
	.lp-marquee-track {
		display: inline-block;
		width: max-content;
		animation: lp-marquee 44s linear infinite;
	}
	.lp-marquee span {
		font-size: clamp(1rem, 1.6vw, 1.35rem);
		font-weight: 560;
		font-stretch: 88%;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-right: 1.2em;
	}
	.lp-marquee .lp-sq { margin-right: 1.2em; width: 0.5em; height: 0.5em; }
	@keyframes lp-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	

/* ----------- small-text-----------*/
	  .lp-text-only .lp-intro {
		position: relative;
		font-weight: 400;
		font-size: 1.05rem;
        line-height: 1.65;
		max-width: 42em;
	 }
	 
	 .lp-text-only .lp-intro p {
		margin-top: 1.25em;
	 }

	
/* ------------ text-img ----------*/

	.lp-text-img .lp-intro { display: grid; gap: 1.25rem; }
	
	.lp-text-img .lp-intro p {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.55;
		margin: 0;
	}
	
	.lp-text-img .lp-intro h2 {
		font-weight: 660;
		font-stretch: 80%;
		font-size: clamp(1.8rem, 3.2vw, 2.75rem);
		line-height: 0.98;
		letter-spacing: -0.015em;
		text-transform: uppercase;
		max-width: 12em;
		margin: 0;
	}
	
	.lp-text-img .wysiwyg-editor ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
	}

	.lp-text-img .wysiwyg-editor ul li {
		font-family: var(--lp-font);
		position: relative;
		font-weight: 400;
		font-size: 0.95rem;
		line-height: 1.55;
		padding: 0.5rem 0 0.5rem 1.2em;	
	}


	.lp-text-img .wysiwyg-editor ul li::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(0.5rem + 0.5em);
		width: 0.45em;
		height: 0.45em;
		background: currentColor;
}
  
	 	 
/* --------------- text-vid ------------ */	

	.lp-text-vid .lp-intro { display: grid; gap: 1.25rem; }
	
	.lp-text-vid .lp-intro p {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.55;
		margin: 0;
	}
	
	.lp-text-vid .lp-intro h2 {
		font-weight: 660;
		font-stretch: 80%;
		font-size: clamp(1.8rem, 3.2vw, 2.75rem);
		line-height: 0.98;
		letter-spacing: -0.015em;
		text-transform: uppercase;
		max-width: 12em;
		margin: 0;
	}
	
	.lp-text-vid .wysiwyg-editor ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
	}

	.lp-text-vid .wysiwyg-editor ul li {
		font-family: var(--lp-font);
		position: relative;
		font-weight: 400;
		font-size: 0.95rem;
		line-height: 1.55;
		padding: 0.5rem 0 0.5rem 1.2em;	
	}


	.lp-text-vid .wysiwyg-editor ul li::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(0.5rem + 0.5em);
		width: 0.45em;
		height: 0.45em;
		background: currentColor;
}

	
	.lp-text-vid .lp-video {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	  /* фолбек для браузерів без aspect-ratio */
	  @supports not (aspect-ratio: 1) {
		.lp-text-vid .lp-video {
		  height: 0;
		  padding-bottom: 56.25%;
		}
	  }

	  .lp-text-vid .lp-video-frame {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
		display: block;
	  }


/* ----------- 50-50-img-text-cards --------- */
	
	/* Intro під заголовком — дає відступ до сітки */
	.lp-50-50-img-text-cards .lp-intro p {
		position: relative;
		max-width: 42em;
		margin-top: 1.25em;
		margin-bottom: clamp(2.5rem, 6vw, 5rem);
		font-weight: 400;
		font-size: 1.05rem;
		line-height: 1.65;
	}
  
	.lp-grid2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 5vw, 5rem) var(--lp-gap);
		margin-top: 0;
	}
	
	.lp-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

	.lp-card h3 {
		font-weight: 660;
		font-stretch: 88%;
		font-size: clamp(1.4rem, 2.2vw, 1.9rem);
		letter-spacing: -0.01em;
		margin: 1.2rem 0 0.5rem;
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		text-transform: none;
	}
	.lp-card h3::before {
		content: "";
		flex: none;
		width: 0.5em;
		height: 0.5em;
		background: var(--lp-black);
		align-self: center;
	}
	.dark .lp-card h3::before {
		background: var(--lp-white);
	}
	

	.lp-card p {
	    color: var(--lp-grey-700);
		max-width: 32em;
	}
	
	@media (max-width: 760px) {
		.lp-grid2 { grid-template-columns: 1fr; }
	}


/* ------- Border cards (.lp-border-card) ------- */
 
  .lp-border-card {
    --rf-ink: var(--lp-black, #0a0a0a);
    --rf-muted: var(--lp-grey-700, #4a4a4a);
    --rf-line: var(--lp-line, #0a0a0a);
    --rf-font: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rf-h3: var(--lp-h3, clamp(2rem, 4.5vw, 3.75rem));
    --rf-head-gap: clamp(2.5rem, 6vw, 5rem);
    --rf-case-h3: clamp(1.4rem, 2.2vw, 1.9rem);
    --rf-case-pad: clamp(1.25rem, 2vw, 1.6rem);
    margin: 0 0 -1px; /* нижня лінія карток накладається на border-top наступної секції */
    padding: 0;
  }
  /* 4 в рядку — картки вужчі, тож трохи менший заголовок і відступи */
  .lp-border-card[data-cols="4"] {
    --rf-case-h3: clamp(1.25rem, 1.7vw, 1.6rem);
    --rf-case-pad: clamp(1.1rem, 1.6vw, 1.4rem);
  }

  .lp-border-card * { box-sizing: border-box; border-radius: 0; }

  /* За замовчуванням без відступів і без лінії; вмикаються параметрами */
  .lp-border-card .lp-section {
    margin: 0;
    padding-block: 0;
    border-top: 0;
    font: 400 16px/1.55 var(--rf-font);
    letter-spacing: normal;
    color: var(--rf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .lp-border-card[data-pad-top="true"] .lp-section    { padding-top: clamp(4rem, 9vw, 8.5rem); }
  .lp-border-card[data-pad-bottom="true"] .lp-section { padding-bottom: clamp(4rem, 9vw, 8.5rem); }
  .lp-border-card[data-border="true"] .lp-section     { border-top: 1px solid var(--rf-line); }

  /* Intro під заголовком — дає відступ до сітки */
  .lp-border-card .lp-intro p {
    position: relative;
    max-width: 42em;
    margin-top: 1.25em;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* Сітка: рамка зверху/зліва у сітки, справа/знизу у карток — лінії спільні */
  .lp-border-card .lp-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rf-line);
    border-left: 1px solid var(--rf-line);
  }
  .lp-border-card[data-cols="4"] .lp-cases {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lp-border-card .lp-case {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--rf-line);
    border-bottom: 1px solid var(--rf-line);
  }
  .lp-border-card .lp-case > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 1px solid var(--rf-line);
  }
  .lp-border-card .lp-case-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    min-width: 0;
    padding: var(--rf-case-pad);
  }

  /* Заголовок картки */
  .lp-border-card .lp-case h3 {
    margin: 0;
    font-weight: 660;
    font-stretch: 80%;
    font-size: var(--rf-case-h3);
    line-height: 1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--rf-ink);
    overflow-wrap: anywhere;
  }
  .lp-border-card .lp-case p {
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--lp-grey-700);
  }

  /* Посилання «■ Текст кнопки» */
  .lp-border-card .lp-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: baseline;
    gap: 0.5em;
    margin-top: auto;
    padding-top: 0.75rem;
    font: 520 0.8rem/1.55 var(--rf-font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rf-ink);
    text-decoration: underline 1px;
    text-underline-offset: 0.35em;
  }
  .lp-border-card .lp-link:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }
  .lp-border-card .lp-link:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: 3px; }
  .lp-border-card .lp-sq {
    flex: none;
    width: 0.45em;
    height: 0.45em;
    background: currentColor;
  }

  /* Малий десктоп: 4-колонковий варіант → 2 в рядку */
  @media (max-width: 1200px) {
    .lp-border-card[data-cols="4"] .lp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Планшет: рядками, фото зліва (для обох варіантів) */
  @media (max-width: 900px) {
    .lp-border-card[data-cols] .lp-cases { grid-template-columns: minmax(0, 1fr); }
    .lp-border-card .lp-case { flex-direction: row; }
    .lp-border-card .lp-case > img {
      width: 42%;
      aspect-ratio: auto;
      border-bottom: 0;
      border-right: 1px solid var(--rf-line);
    }
  }
  /* Мобільний: стовпчиком */
  @media (max-width: 620px) {
    .lp-border-card .lp-case { flex-direction: column; }
    .lp-border-card .lp-case > img {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-right: 0;
      border-bottom: 1px solid var(--rf-line);
    }
  }


/* -------------- grid ----------- */
  .lp-process {
    --rf-ink: var(--lp-black, #0a0a0a);
    --rf-muted: var(--lp-grey-700, #4a4a4a);
    --rf-line: var(--lp-line, #0a0a0a);
    --rf-font: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rf-num: var(--lp-h4, clamp(1.8rem, 3.2vw, 2.75rem));
    --rf-step-h3: var(--lp-h6, 1.15rem);
    --rf-step-gap: clamp(1rem, 2vw, 2rem);
    margin: 0;
    padding: 0;
  }

  .lp-process * { box-sizing: border-box; border-radius: 0; }

  /* Відступи зверху і знизу за замовчуванням; нижній вимикається no_bottom_padding */
  .lp-process .lp-section {
    margin: 0;
    padding-block: clamp(4rem, 9vw, 8.5rem);
    border-top: 0;
    font: 400 16px/1.55 var(--rf-font);
    letter-spacing: normal;
    color: var(--rf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .lp-process[data-no-bottom-padding="true"] .lp-section { padding-bottom: 0; }
  .lp-process[data-border="true"] .lp-section            { border-top: 1px solid var(--rf-line); }

  /* Intro під заголовком — дає відступ до кроків */
  .lp-process .lp-intro p {
    position: relative;
    max-width: 42em;
    margin-top: 1.25em;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* Кроки. Розділювачі — лінія зліва у кожного кроку; список зсунутий
     вліво на відступ + 1px і обрізаний обгорткою, тож у першій колонці
     лінії не видно, а текст стоїть по краю контейнера — у будь-якому рядку */
  .lp-process .lp-steps-wrap {
    overflow: hidden;
    overflow: clip;
  }
  .lp-process .lp-steps {
    --cols: 3;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 0;
    margin: 0 0 0 calc(-1 * var(--rf-step-gap) - 1px);
    padding: 0;
    border-top: 1px solid var(--rf-line);
  }
  .lp-process[data-cols="1"] .lp-steps { --cols: 1; }
  .lp-process[data-cols="2"] .lp-steps { --cols: 2; }
  .lp-process[data-cols="4"] .lp-steps { --cols: 4; }
  .lp-process[data-cols="5"] .lp-steps { --cols: 5; }

  .lp-process .lp-step {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    min-width: 0;
    margin: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) var(--rf-step-gap) clamp(1.75rem, 3vw, 2.75rem);
    border: 0;
    border-left: 1px solid var(--rf-line);
    border-bottom: 1px solid var(--rf-line);
  }

  /* Номер кроку — плакатні цифри */
  .lp-process .lp-step-num {
    display: block;
    margin: 0;
    font-weight: 700;
    font-stretch: 76%;
    font-size: var(--rf-num);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rf-ink);
  }

  /* Заголовок кроку */
  .lp-process .lp-step h3 {
    margin: 0;
    font-weight: 660;
    font-stretch: 80%;
    font-size: var(--rf-step-h3);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rf-ink);
    overflow-wrap: anywhere;
  }
  .lp-process .lp-step-text,
  .lp-process .lp-step-text p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--rf-muted);
  }
  .lp-process .lp-step-text p + p { margin-top: 0.5em; }

  /* Малий десктоп / планшет: зменшуємо кількість колонок */
  @media (max-width: 1100px) {
    .lp-process[data-cols="4"] .lp-steps { --cols: 2; }
    .lp-process[data-cols="5"] .lp-steps { --cols: 3; }
  }
  @media (max-width: 860px) {
    .lp-process:is([data-cols="3"], [data-cols="4"], [data-cols="5"]) .lp-steps { --cols: 2; }
  }

  /* Мобільний: стовпчиком, номер зліва */
  @media (max-width: 700px) {
    .lp-process .lp-steps {
      --cols: 1 !important;
      grid-template-columns: minmax(0, 1fr);
      margin-left: 0;
    }
    .lp-process .lp-step {
      grid-template-columns: 4.5rem minmax(0, 1fr);
      column-gap: 1rem;
      border-left: 0;
      padding-inline: 0;
    }
    .lp-process .lp-step-num {
      grid-row: span 2;
      font-size: 2rem;
    }
    .lp-process .lp-step > :not(.lp-step-num) { grid-column: 2; }
  }


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

  .referenzen-section {
    --rf-ink: var(--lp-black, #0a0a0a);
    --rf-muted: var(--lp-grey-700, #4a4a4a);
    --rf-line: var(--lp-line, #0a0a0a);
    --rf-font: "IBM Plex Sans Var", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rf-h3: var(--lp-h3, clamp(2rem, 4.5vw, 3.75rem));
    --rf-head-gap: clamp(2.5rem, 6vw, 5rem);
    margin: 0 0 -1px; /* нижня лінія карток накладається на border-top наступної секції */
    padding: 0;
  }
  .dark .referenzen-section { --rf-ink: #fff; --rf-muted: #c9c9c9; --rf-line: #fff; }

  .referenzen-section * { box-sizing: border-box; border-radius: 0; }

  /* За замовчуванням без відступів і без лінії; вмикаються параметрами */
  .referenzen-section .lp-section {
    margin: 0;
    padding-block: 0;
    border-top: 0;
    font: 400 16px/1.55 var(--rf-font);
    letter-spacing: normal;
    color: var(--rf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .referenzen-section[data-pad-top="true"] .lp-section    { padding-top: clamp(4rem, 9vw, 8.5rem); }
  .referenzen-section[data-pad-bottom="true"] .lp-section { padding-bottom: clamp(4rem, 9vw, 8.5rem); }
  .referenzen-section[data-border="true"] .lp-section     { border-top: 1px solid var(--rf-line); }


  /* Якщо під заголовком є intro — відступ до сітки дає intro */

  .referenzen-section .lp-intro p {
		position: relative;
		font-weight: 400;
		font-size: 1.05rem;
		line-height: 1.65;
		max-width: 42em;
	}
  	.referenzen-section .lp-intro p {
		margin-top: 1.25em;
		margin-bottom: clamp(2.5rem, 6vw, 5rem);
	 }
	

  /* Сітка: рамка зверху/зліва у сітки, справа/знизу у карток — лінії спільні */
  .referenzen-section .lp-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rf-line);
    border-left: 1px solid var(--rf-line);
  }
  .referenzen-section .lp-case {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--rf-line);
    border-bottom: 1px solid var(--rf-line);
  }
  .referenzen-section .lp-case > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 1px solid var(--rf-line);
  }
  .referenzen-section .lp-case-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.6rem;
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 1.75rem);
  }

  /* Типографіка картки — як рендериться в оригіналі */
  .referenzen-section .lp-case h3 {
    order: -1;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rf-muted);
  }
  .referenzen-section .lp-case p {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--rf-muted);
  }
  /* Факт: вузький жирний капітель у розмірі тексту
     (в оригіналі .lp-case p перебиває розмір і колір .lp-case-fact) */
  .referenzen-section .lp-case .lp-case-fact {
    font-weight: 660;
    font-stretch: 80%;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  /* Посилання «■ Zur Referenz» */
  .referenzen-section .lp-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: baseline;
    gap: 0.5em;
    margin-top: auto;
    padding-top: 0.75rem;
    font: 520 0.8rem/1.55 var(--rf-font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rf-ink);
    text-decoration: underline 1px;
    text-underline-offset: 0.35em;
  }
  .referenzen-section .lp-link:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }
  .referenzen-section .lp-link:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: 3px; }
  .referenzen-section .lp-sq {
    flex: none;
    width: 0.45em;
    height: 0.45em;
    background: currentColor;
  }

  /* Планшет: рядками, фото зліва */
  @media (max-width: 900px) {
    .referenzen-section .lp-cases { grid-template-columns: minmax(0, 1fr); }
    .referenzen-section .lp-case { flex-direction: row; }
    .referenzen-section .lp-case > img {
      width: 42%;
      aspect-ratio: auto;
      border-bottom: 0;
      border-right: 1px solid var(--rf-line);
    }
  }
  /* Мобільний: стовпчиком */
  @media (max-width: 620px) {
    .referenzen-section .lp-case { flex-direction: column; }
    .referenzen-section .lp-case > img {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-right: 0;
      border-bottom: 1px solid var(--rf-line);
    }
  }

/* --------------- System: Plakat-Liste ------------------- */
	.lp-sysrows { list-style: none; border-top: 1px solid var(--lp-line); }

	.lp-sysrow {
		display: grid;
		grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 26rem);
		align-items: center;
		gap: clamp(1.25rem, 3vw, 3rem);
		padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
		border-bottom: 1px solid var(--lp-line);
	}
	.lp-sysrow .lp-sys-idx { font-size: 0.78rem; font-weight: 450; letter-spacing: 0.15em; }

	.lp-sysrow h3 {
		font-weight: 680;
		font-stretch: 80%;
		font-size: clamp(1.9rem, 3.6vw, 3.25rem);
		line-height: 0.95;
		letter-spacing: -0.015em;
		text-transform: uppercase;
	}
	.lp-sysrow p {
		font-size: 1rem;
		line-height: 1.55;
		color: var(--lp-grey-700);
		max-width: 26em;
	}
	@media (max-width: 860px) {
		.lp-sysrow { grid-template-columns: 2.2rem 1fr; align-items: baseline; row-gap: 0.5rem; }
		.lp-sysrow p { grid-column: 2; }
	}


/* --------- FAQ --------- */
	.lp-faq { border-top: 1px solid var(--lp-line); max-width: 56rem; }

	.lp-faq details { border-bottom: 1px solid var(--lp-line); }

	.lp-faq summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1.5rem;
		padding: 1.4rem 0;
		font-weight: 560;
		font-size: clamp(1.05rem, 1.6vw, 1.3rem);
		letter-spacing: -0.005em;
	}
	.lp-faq summary::-webkit-details-marker { display: none; }

	.lp-faq summary::after {
		content: "+";
		font-weight: 300;
		font-size: 1.6em;
		line-height: 1;
		flex: none;
		transition: transform 0.3s var(--lp-ease);
	}
	.lp-faq details[open] summary::after { transform: rotate(45deg); }

	.lp-faq details p { padding: 0 0 1.6rem; color: var(--lp-grey-700); max-width: 38em; }



/* ----------- Kontakt --------- */
	.lp-contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(3rem, 6vw, 6rem);
	}
	.lp-contact-pitch h2 {
		font-weight: 700;
		font-stretch: 80%;
		font-size: clamp(2.4rem, 5.5vw, 4.75rem);
		line-height: 0.96;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		margin-bottom: 1.5rem;
	}
	.lp-contact-pitch p {
		font-weight: 300;
		font-size: clamp(1.05rem, 1.5vw, 1.3rem);
		max-width: 28em;
		margin-bottom: 2rem;
	}
	.lp-contact-list { list-style: none; font-size: 0.95rem; }
	.lp-contact-list li {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding-block: 0.55rem;
	}
	.lp-contact-list li::before {
		content: "";
		flex: none;
		width: 0.45em;
		height: 0.45em;
		background: var(--lp-black);
	}
	@media (max-width: 860px) {
		.lp-contact { grid-template-columns: 1fr; }
	}


/* --------- Footer ----------- */
	
	.lp-footer { border-top: 1px solid var(--lp-line); padding-block: 2.25rem; }

	.lp-footer .lp-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem;
	}
	.lp-footer img { height: 40px; width: auto; }

	.lp-footer-meta {
		font-size: 0.8rem;
		color: var(--lp-grey-700);
		display: flex;
		align-items: center;
		gap: 1.5rem;
		flex-wrap: wrap;
	}
	.lp-footer-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }


	/* ---- Scroll-Reveal ---- */
	.lp-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.75s var(--lp-ease), transform 0.75s var(--lp-ease);
		transition-delay: var(--lp-delay, 0s);
	}
	.lp-reveal.is-in { opacity: 1; transform: none; }


	/* ---- Reduced Motion ---- */
	@media (prefers-reduced-motion: reduce) {
		.lp-reveal { opacity: 1; transform: none; }
		.lp-marquee-track { animation: none; }
	}
	
	
/* ------------- Card filter ------------------ */

	
	/* ── Токени + база секції ───────────────────────────────────────── */
	.mba-refs{
	  --mba-black:#0a0a0a;
	  --mba-white:#ffffff;
	  --mba-grey-300:#d9d9d9;
	  --mba-grey-500:#8a8a8a;
	  --mba-grey-700:#4a4a4a;
	  --mba-line:var(--mba-black);
	  --mba-line-soft:var(--mba-grey-300);
	  --mba-font:"IBM Plex Sans Var","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
	  --mba-max:1440px;
	  --mba-gap:clamp(1.5rem,3vw,2.5rem);
	  --mba-ease:cubic-bezier(.22,.61,.21,1);
	  --mba-h5:clamp(1.35rem,2.1vw,1.85rem);

	  font-family:var(--mba-font) !important;
	  font-size:16px;
	  line-height:1.55;
	  color:var(--mba-black);
	  /* Фон секції. Для світло-сірого замініть на var(--mba-grey-100). */
	  background:var(--mba-white) !important;
	  -webkit-font-smoothing:antialiased;
	  padding-block:clamp(4rem, 9vw, 8.5rem);
	}
	.mba-refs *,
	.mba-refs *::before,
	.mba-refs *::after{ box-sizing:border-box; }
	.mba-refs a{ color:inherit; text-decoration:none; }
	.mba-refs ::selection{ background:var(--mba-black); color:var(--mba-white); }
  
	.mba-refs .mba-container{
	  width:100%; max-width:var(--mba-max); margin-inline:auto;
	  padding-inline:clamp(1.25rem,4vw,4rem);
	}
	
	.mba-refs .mba-container p{
		margin-top: 1.25em;
	}
	
	/* ── Кнопка «Filter» ────────────────────────────────────────────── */
	.mba-refs [data-role="toggle"]{
	  display:inline-flex !important; align-items:center; gap:.75em !important;
	  background:var(--mba-black) !important; color:var(--mba-white) !important;
	  border:1px solid var(--mba-black) !important; border-radius:0 !important;
	  font-family:var(--mba-font) !important; font-size:.8rem !important;
	  font-weight:520 !important; letter-spacing:.16em !important;
	  text-transform:uppercase; padding:1.05em 2.2em !important; cursor:pointer;
	  transition:background .25s var(--mba-ease), color .25s var(--mba-ease) !important;
	}
	.mba-refs [data-role="toggle"]:hover,
	.mba-refs [data-role="toggle"]:focus-visible{
	  background:var(--mba-white) !important; color:var(--mba-black) !important;
	}
	.mba-refs [data-role="toggle"]:focus-visible{ outline:1px solid var(--mba-black); outline-offset:3px; }
	.mba-refs [data-role="toggle"] svg{ width:1em !important; height:1em !important; }

	/* ── Панель фільтрів ────────────────────────────────────────────── */
	.mba-refs [data-role="panel"]{
	  margin-top:-1px !important;
	  border:1px solid var(--mba-line) !important; border-radius:0 !important;
	  background:var(--mba-white) !important;
	  padding:clamp(1.5rem,3vw,2.5rem) !important;
	}
	.mba-refs [data-role="panel"] > .grid{
	  display:grid; grid-template-columns:1fr !important;
	  gap:clamp(1.75rem,3vw,2.5rem) !important;
	}
	@media (min-width:640px){
	  .mba-refs [data-role="panel"] > .grid{ grid-template-columns:repeat(2,1fr) !important; }
	}
	@media (min-width:1024px){
	  .mba-refs [data-role="panel"] > .grid{ grid-template-columns:repeat(4,1fr) !important; }
	}

	.mba-refs fieldset{ border:0; margin:0; padding:0; min-width:0; }
	.mba-refs .mba-legend{
	  display:block; width:100%; padding:0 0 .75rem;
	  margin-bottom:.75rem; border-bottom:1px solid var(--mba-line);
	  font-size:.68rem; font-weight:520; letter-spacing:.18em;
	  text-transform:uppercase; color:var(--mba-black);
	}
	.mba-refs .mba-opt{
	  display:flex; align-items:center; gap:.7rem; padding:.4rem 0; cursor:pointer;
	  font-size:.95rem; color:var(--mba-grey-700);
	  transition:color .2s var(--mba-ease);
	}
	.mba-refs .mba-opt:hover{ color:var(--mba-black); }
	.mba-refs .mba-cb{
	  width:14px; height:14px; accent-color:var(--mba-black); cursor:pointer; flex:none;
	}
	/* Група, зафіксована через data-preset */
	.mba-refs fieldset[data-locked]{ opacity:.45; }
	.mba-refs fieldset[data-locked] .mba-opt{ cursor:default; }
	.mba-refs fieldset[data-locked] .mba-cb{ cursor:not-allowed; }

	/* Нижній рядок панелі: лічильник + Zurücksetzen */
	.mba-refs [data-role="panel"] > div:last-child{
	  display:flex; align-items:center; justify-content:space-between; gap:1rem;
	  margin-top:clamp(1.75rem,3vw,2.5rem) !important;
	  padding-top:1.1rem !important;
	  border-top:1px solid var(--mba-line-soft) !important;
	}
	.mba-refs [data-role="count"]{
	  margin:0; font-size:.68rem !important; font-weight:520;
	  letter-spacing:.18em; text-transform:uppercase;
	  color:var(--mba-grey-700) !important;
	}
	.mba-refs [data-role="reset"]{
	  background:none; border:0; padding:0; cursor:pointer;
	  font-family:var(--mba-font) !important; font-size:.8rem !important;
	  font-weight:520 !important; letter-spacing:.16em !important;
	  text-transform:uppercase; color:var(--mba-grey-700) !important;
	  text-decoration:underline; text-decoration-thickness:1px;
	  text-underline-offset:.35em !important;
	  transition:color .2s var(--mba-ease);
	}
	.mba-refs [data-role="reset"]:hover{
	  color:var(--mba-black) !important; text-decoration-thickness:2px;
	}

	/* ── Сітка карток ───────────────────────────────────────────────── */
	.mba-refs [data-role="grid"]{
	  display:grid; grid-template-columns:1fr !important;
	  gap:clamp(2.5rem,4.5vw,4rem) var(--mba-gap) !important;
	  margin-top:clamp(2.5rem,5vw,4rem) !important;
	}
	@media (min-width:768px){
	  .mba-refs [data-role="grid"]{ grid-template-columns:repeat(2,1fr) !important; }
	}
	@media (min-width:1280px){
	  .mba-refs [data-role="grid"]{ grid-template-columns:repeat(3,1fr) !important; }
	}
	/* Коли фільтр прихований — прибираємо верхній відступ у сітки */
	.mba-refs[data-hide-filter] [data-role="grid"]{ margin-top:0 !important; }

	/* ── Картка ─────────────────────────────────────────────────────── */
	.mba-refs .mba-card{
	  display:flex; flex-direction:column;
	  background:transparent; box-shadow:none; border:0;
	}
	.mba-refs .mba-card-media{ overflow:hidden; }
	.mba-refs .mba-card-img{
	  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
	  transition:transform .6s var(--mba-ease);
	}
	.mba-refs .mba-card:hover .mba-card-img{ transform:scale(1.03); }

	.mba-refs .mba-card-body{
	  display:flex; flex:1; flex-direction:column; gap:.6rem;
	  padding:clamp(1rem,1.6vw,1.35rem) 0 0;
	}
	.mba-refs .mba-card-title{
	  margin:0; padding:0; border:0;
	  font-size:var(--mba-h5); font-weight:660; font-stretch:80%;
	  line-height:1.05; letter-spacing:-.015em; text-transform:uppercase;
	  color:var(--mba-black); text-wrap:balance;
	}
	.mba-refs .mba-card-text{
	  flex:1; margin:0; font-size:.95rem; line-height:1.55; color:var(--mba-grey-700);
	}
	.mba-refs .mba-card-link{
	  display:inline-flex; align-items:center; align-self:flex-start; gap:.6em;
	  margin-top:auto; padding-top:.9rem;
	  font-size:.8rem; font-weight:520; letter-spacing:.16em; text-transform:uppercase;
	  color:var(--mba-black); opacity:1;
	  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em;
	  transition:text-decoration-thickness .2s var(--mba-ease);
	}
	.mba-refs .mba-card-link:hover,
	.mba-refs .mba-card-link:focus-visible{
	  opacity:1; text-decoration-thickness:2px;
	}
	.mba-refs .mba-card-link svg{
	  width:.9em !important; height:.9em !important;
	  transition:transform .25s var(--mba-ease);
	}
	.mba-refs .mba-card-link:hover svg{ transform:translateX(3px); }

	/* ── Порожній стан ──────────────────────────────────────────────── */
	.mba-refs [data-role="empty"]{
	  margin:0; padding-block:clamp(4rem,8vw,7rem) !important; text-align:center;
	  font-size:.8rem !important; font-weight:520; letter-spacing:.16em;
	  text-transform:uppercase; color:var(--mba-grey-500) !important;
	}

	.mba-refs [hidden]{ display:none !important; }

	@media (prefers-reduced-motion:reduce){
	  .mba-refs *{ transition:none !important; }
	}
	
	
/* -------- 3-colums-text -------- */
		
	.textcols-section,
	.textcols-section .lp-section {
		padding-top: 0;
		margin-top: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		border-top:0;
	}

	.textcols-section .lp-cols {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--lp-gap);
	}
	.textcols-section .lp-col {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}
	.textcols-section .lp-col-fact {
		font-weight: 700;
		font-stretch: 80%;
		font-size: clamp(1.5rem, 2.4vw, 2.1rem);
		line-height: 1.05;
		letter-spacing: -0.015em;
		text-transform: uppercase;
	}
	.textcols-section .lp-col h3 {
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--lp-grey-700);
		order: -1;
	}
	.textcols-section .lp-col p { font-size: 0.95rem; color: var(--lp-grey-700); }

	@media (max-width: 900px) {
		.textcols-section .lp-cols { grid-template-columns: 1fr; }
	}

/* -------- hero-image ------- */

    .lp-hero-image .lp-h1 {
      font-size: 1.75rem !important;
      line-height: 1.1;
      display: inline-block;
      position: relative;
      padding-bottom: 0.28em;
      background: none;
    }

    /* ================= Планшет / десктоп ================= */
    @media (min-width: 768px) {
      .lp-hero-image .lp-h1 {
        font-size: 4.875rem !important;
      }
    }

    /* кнопка окремим блоком під текстом */
    .lp-hero-image .lp-hero-cta {
      margin-top: 1.5rem;
      display: block;
      text-align: left;
    }
	

/*------------ text-form --------------*/
   
	.text-form-section p {
		font-weight: 300;
		font-size: clamp(1.05rem, 1.5vw, 1.3rem);
		max-width: 28em;
		margin-bottom: 2rem;
		line-height: 1.55;
	} 
	
	.text-form-section .wysiwyg-editor h2 {
		font-weight: 700;
		font-stretch: 80%;
		font-size: clamp(2.4rem, 6vw, 5.5rem);
		line-height: 0.96;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		margin-bottom: 1.5rem;
	}
	 	
		
/* ---------- hero-slider --------------- */
	
    .hero-slider-section .hero-slider-carousel.lp-hero-viewport {
        height: var(--lp-hero-h, 100svh);
        min-height: var(--lp-hero-h, 100svh);
        max-height: var(--lp-hero-h, 100svh);
    }
    @supports not (height: 100svh) {
        .hero-slider-section .hero-slider-carousel.lp-hero-viewport {
            height: var(--lp-hero-h, 100vh);
            min-height: var(--lp-hero-h, 100vh);
            max-height: var(--lp-hero-h, 100vh);
        }
    }

    .hero-slider-section .swiper-slide {
        padding-bottom: clamp(6rem, 12vh, 8rem);
    }

    .hero-slider-section .lp-h1 {
        font-size: 1.75rem !important;
        line-height: 1.1;
        display: inline-block;
        position: relative;
        padding-bottom: 0.28em;
        background: none;
    }

    /* ================= Планшет / десктоп ================= */
    @media (min-width: 768px) {
        .hero-slider-section .lp-h1 {
            /* vh term keeps the headline from eating the whole screen on short windows */
            font-size: 4.875rem !important;
        }
    }

    .hero-slider-section .lp-container {
        width: 100%;
        max-width: 1440px;
        margin-inline: auto;
        padding-inline: clamp(1.25rem, 4vw, 4rem);
    }

    .hero-slider-section .swiper-slide .lp-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-end;
    }
    .hero-slider-section .swiper-slide .lp-container .lp-hero-sub {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100%;
    }
    .hero-slider-section .swiper-slide .lp-container > *,
    .hero-slider-section .swiper-slide .lp-container .lp-hero-sub > * {
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .hero-slider-section .swiper-slide .lp-container,
    .hero-slider-section .swiper-slide .lp-container * {
        text-align: left !important;
    }

    /* CTA on its own line, below the text */
    .hero-slider-section .swiper-slide .lp-hero-cta {
        margin-top: 1.5rem;
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: fit-content;
    }

    .hero-slider-section .hero-slider-wrapper {
        perspective: 1500px;
        transform-style: preserve-3d;
    }

    .hero-slider-section .hero-media-bg-item {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transform-style: preserve-3d;
        backface-visibility: hidden;

        /* default = fade */
        opacity: 0;
        z-index: 0;
        transform: scale(1);
        transition: transform 4000ms cubic-bezier(0.25, 1, 0.3, 1), opacity 1000ms ease-in-out;
    }
    .hero-slider-section .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: scale(1.08);
    }

    /* --- slide --- */
    .hero-slider-section[data-slide-effect="slide"] .hero-media-bg-item {
        opacity: 1;
        z-index: 0;
        transform: translateX(100%) scale(1);
        transition: transform 1000ms cubic-bezier(0.25, 1, 0.3, 1);
    }
    .hero-slider-section[data-slide-effect="slide"] .hero-media-bg-item.prev {
        transform: translateX(-100%) scale(1);
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="slide"] .hero-media-bg-item.next {
        transform: translateX(100%) scale(1);
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="slide"] .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: translateX(0) scale(1.08);
    }

    /* --- cube --- */
    .hero-slider-section[data-slide-effect="cube"] .hero-media-bg-item {
        opacity: 0;
        z-index: 0;
        transform: rotateY(90deg) translateZ(50vw) translateX(50vw);
        transition: transform 1000ms cubic-bezier(0.25, 1, 0.3, 1), opacity 1000ms ease-in-out;
    }
    .hero-slider-section[data-slide-effect="cube"] .hero-media-bg-item.prev {
        transform: rotateY(-90deg) translateZ(50vw) translateX(-50vw);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="cube"] .hero-media-bg-item.next {
        transform: rotateY(90deg) translateZ(50vw) translateX(50vw);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="cube"] .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: rotateY(0deg) translateZ(0) translateX(0) scale(1.08);
    }

    /* --- coverflow --- */
    .hero-slider-section[data-slide-effect="coverflow"] .hero-media-bg-item {
        opacity: 0;
        z-index: 0;
        transform: translateX(50%) rotateY(-45deg) scale(0.8);
        transition: transform 1000ms cubic-bezier(0.25, 1, 0.3, 1), opacity 1000ms ease-in-out;
    }
    .hero-slider-section[data-slide-effect="coverflow"] .hero-media-bg-item.prev {
        transform: translateX(-50%) rotateY(45deg) scale(0.8);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="coverflow"] .hero-media-bg-item.next {
        transform: translateX(50%) rotateY(-45deg) scale(0.8);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="coverflow"] .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: translateX(0) rotateY(0deg) scale(1.08);
    }

    /* --- flip --- */
    .hero-slider-section[data-slide-effect="flip"] .hero-media-bg-item {
        opacity: 0;
        z-index: 0;
        transform: rotateY(180deg);
        transition: transform 1000ms cubic-bezier(0.25, 1, 0.3, 1), opacity 1000ms ease-in-out;
    }
    .hero-slider-section[data-slide-effect="flip"] .hero-media-bg-item.prev {
        transform: rotateY(-180deg);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="flip"] .hero-media-bg-item.next {
        transform: rotateY(180deg);
        opacity: 0;
        z-index: 0;
    }
    .hero-slider-section[data-slide-effect="flip"] .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: rotateY(0deg) scale(1.08);
    }

    /* --- none --- */
    .hero-slider-section[data-slide-effect="none"] .hero-media-bg-item {
        opacity: 0;
        z-index: 0;
        transform: scale(1);
        transition: none !important;
    }
    .hero-slider-section[data-slide-effect="none"] .hero-media-bg-item.active {
        opacity: 1;
        z-index: 1;
        transform: scale(1.08);
    }

    /* Poster image sits below the player, never on top of it */
    .hero-slider-section .hero-poster {
        z-index: 0;
    }

    /* 16:9 Aspect Ratio background video iframe covering */
    .hero-slider-section .iframe-video-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: 10;
    }
    .hero-slider-section .iframe-video-container iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 177.78vh !important;
        height: 100vh !important;
        min-width: 100% !important;
        min-height: 56.25vw !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none;
        border: 0;
    }

    .hero-slider-section .swiper-slide:not(.swiper-slide-active) .lp-reveal {
        transition: none !important;
    }

    /* Styled Swiper pagination bullets */
    .hero-slider-section .swiper-pagination {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-slider-section .swiper-pagination-bullet {
        background: #000000 !important;
        opacity: 0.35 !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 9999px !important;
        transition: all 0.3s ease !important;
        margin: 0 4px !important;
    }

    .hero-slider-section .swiper-pagination-bullet-active {
        background: #000000 !important;
        opacity: 1 !important;
        width: 24px !important; /* Elongated active bullet */
    }