/* ===================================================================
   GOOGLE FONT (must be at the very top)
   =================================================================== */
@import url('https://fonts.googleapis.com/css?family=STIX+Two+Text:400,500,600,700,400i,500i,600i,700i&display=swap');

/* ===================================================================
   YOUR ORIGINAL APP.CSS (kept exactly as given)
   =================================================================== */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Default Blazor global error banner — suppress in favor of reconnect UX */
#blazor-error-ui {
    display: none !important;
}

/* ===================================================================
   SITE DESIGN TOKENS & LIGHT UTILITIES (reusable, non-invasive)
   =================================================================== */

:root {
    /* Colors */
    --brand-teal: 0 146 150; /* #009296 */
    --brand-teal-hex: #009296;
    --accent-aqua: 72 225 220; /* #48e1dc */

    --bg-color: 255 255 255 / 1.0;
    --heading-color: 0 59 60;
    --text-color: 0 59 60;
    /* Match your global link color (#006bb7) */
    --link-color: 0 107 183;
    /* Type */
    --heading-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --heading-font-style: normal;
    --heading-font-weight: 500;
    --body-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --body-font-style: normal;
    --body-font-weight: 400;
    --body-font-size: 16;
    /* Rhythm */
    --space-unit: .4rem;
    --heading-gap: calc(8 * var(--space-unit));
    --grid-column-gap: 20px;
    --gutter-sm: 20px;
    --gutter-md: 32px;
    --gutter-lg: 64px;
    /* Fluid sizing */
    --fluid-vw: 100vw;
    --fluid-max-vw: 1536;
    --fluid-calc: (var(--fluid-vw) - 32rem) / (var(--fluid-max-vw) / 10 - 32) + .1rem;
    --fluid-1-065: ((1.065/10 - .1) * var(--fluid-calc));
    --fluid-1-125: ((1.125/10 - .1) * var(--fluid-calc));
    --fluid-1-2: ((1.2  /10 - .1) * var(--fluid-calc));
    --fluid-1-25: ((1.25 /10 - .1) * var(--fluid-calc));
    --fluid-1-3: ((1.3  /10 - .1) * var(--fluid-calc));
    --fluid-1-4: ((1.4  /10 - .1) * var(--fluid-calc));
    --fluid-1-5: ((1.5  /10 - .1) * var(--fluid-calc));
    /* Derived */
    --column-gap: var(--grid-column-gap);
    --gutter: var(--gutter-sm, 20px);
    --row-gap: calc(10 * var(--space-unit));
    --viewport-width: calc(100vw - var(--scrollbar-width, 0));
    /* Heading scale */
    --heading-type-scale: 1.2;
    --h6: calc(var(--body-font-size) + 4);
    --h5: calc(var(--h6) * var(--heading-type-scale));
    --h4: calc(var(--h5) * var(--heading-type-scale));
    --h3: calc(var(--h4) * var(--heading-type-scale));
    --h2: calc(var(--h3) * var(--heading-type-scale));
    --h1: calc(var(--h2) * var(--heading-type-scale));
    --h0: calc(var(--h1) * var(--heading-type-scale));
    --h6-font-size: calc((var(--h6)/1.065) * var(--fluid-1-065));
    --h5-font-size: calc((var(--h5)/1.125) * var(--fluid-1-125));
    --h4-font-size: calc((var(--h4)/1.2) * var(--fluid-1-2));
    --h3-font-size: calc((var(--h3)/1.3) * var(--fluid-1-3));
    --h2-font-size: calc((var(--h2)/1.4) * var(--fluid-1-4));
    --h1-font-size: calc((var(--h1)/1.5) * var(--fluid-1-5));
    --h0-font-size: calc((var(--h0)/1.5) * var(--fluid-1-5));
}

@media (min-width: 1536px) {
    :root {
        --fluid-vw: calc(var(--fluid-max-vw) * 1px);
    }
}

@media (min-width: 600px ) {
    :root {
        --column-gap: calc(var(--grid-column-gap) * 1.6);
        --gutter: var(--gutter-md, 32px);
    }
}

@media (min-width: 1280px) {
    :root {
        --gutter: var(--gutter-lg, 80px);
    }
}

/* Light utilities */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.mobile-only {
    display: none !important;
}

.mobile-hide {
    display: inline !important;
}

@media (max-width: 600px) {
    .mobile-only {
        display: inline-flex !important;
    }

    .mobile-hide {
        display: none !important;
    }
}

/* Optional site-wide container cap */
@media (min-width: 1700px) {
    .container-cap {
        max-width: 1536px;
        margin-inline: auto;
        padding-inline: var(--gutter, 32px);
    }
}

/* --Phone-- */
@media only screen and (max-width : 974px) {
    body {
        overflow-x: hidden;
    }
}

/* ===================================================================
   PROMO CARDS (two side-by-side hero cards)
   =================================================================== */

.shopify-promo .wrapper-xk3 {
    display: flex;
    padding: 0 40px;
    gap: 20px;
}

.shopify-promo .column-39c {
    flex: 1 1 0;
    aspect-ratio: 1;
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
    background: url(https://cdn.shopify.com/s/files/1/0881/6168/1693/files/img_promo1_desktop.png?v=1755694436) center / cover no-repeat;
}

.shopify-promo .column-39c.rig-rwa {
    background-image: url(https://cdn.shopify.com/s/files/1/0881/6168/1693/files/img_promo2_desktop.png?v=1755694437);
}

.shopify-promo h2 {
    font-family: "STIX Two Text", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.96px;
    margin: 0 auto;
}

.shopify-promo .lef-szw h2 {
    color: #003B3C;
    max-width: 530px;
}

.shopify-promo .lef-szw h2 i {
    color: #009296;
}

.shopify-promo .rig-rwa h2 {
    color: #fff;
}

.shopify-promo .rig-rwa h2 i {
    color: #48e1dc;
}

/* Lg: 1280px–1599px */
@media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .shopify-promo h2 {
        font-size: 2.125rem;
        letter-spacing: -0.68px;
    }
}

/* Md: 960px–1279px */
@media only screen and (min-width: 960px) and (max-width: 1279px) {
    .shopify-promo h2 {
        font-size: 1.75rem;
        letter-spacing: -0.48px;
    }
}

/* SmAndDown: max 959px — stack vertically */
@media only screen and (max-width: 959px) {
    .shopify-promo .wrapper-xk3 {
        flex-direction: column;
        padding: 0 20px;
        gap: 16px;
    }

    .shopify-promo .column-39c {
        flex: none;
        width: 100%;
        aspect-ratio: 1;
        padding: 40px 20px;
    }

    .shopify-promo h2 {
        font-size: 1.75rem;
        letter-spacing: -0.48px;
    }
}

/* ===================================================================
   COLLECTIONS SECTION
   =================================================================== */

.shopify-collections {
    text-align: center;
}

.shopify-collections .wrapper-t4w {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

.shopify-collections .circle-fq6 {
    font-family: "STIX Two Text", serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    color: #003B3C;
    margin: 0 auto 20px;
}

.shopify-collections .circle-fq6 i {
    color: #009296;
}

.shopify-collections .text-ssw {
    font-size: 20px;
    color: #003B3C;
    margin: 0 auto 72px;
    white-space: nowrap;
}

/* 5-circle grid */
.shopify-collections .grid-8j2 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0 0 60px;
    border-bottom: 1px solid #D9E2E2;
}

/* Circle image container */
.shopify-collections .media-8cs {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.shopify-collections .media-ni2 {
    display: block;
    position: absolute;
    inset: 0;
}

.shopify-collections .img-5xe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Label under circle */
.shopify-collections .card-axp {
    margin-top: 28px;
}

.shopify-collections .title-sop a {
    color: #003B3C;
    font-family: "STIX Two Text", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.2px;
    text-align: center;
    display: block;
}

.shopify-collections .title-sop a:hover {
    color: #009296;
}

/* Hover scale (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .shopify-collections .media-ni2 {
        transition: transform 0.4s cubic-bezier(0.38, 0.41, 0.27, 1);
        will-change: transform;
    }
    .shopify-collections .card-ho2:hover .media-ni2 {
        transform: scale(1.03);
    }
}

/* Lg: 1280px–1599px */
@media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .shopify-collections .circle-fq6 {
        font-size: 54px;
    }
}

/* Md: 960px–1279px */
@media only screen and (min-width: 960px) and (max-width: 1279px) {
    .shopify-collections .circle-fq6 {
        font-size: 42px;
        letter-spacing: -0.84px;
        margin-bottom: 16px;
    }
    .shopify-collections .text-ssw {
        font-size: 18px;
        margin-bottom: 40px;
    }
    .shopify-collections .title-sop a {
        font-size: 16px;
    }
    .shopify-collections .grid-8j2 {
        gap: 16px;
    }
}

/* SmAndDown: max 959px — horizontal swipe */
@media only screen and (max-width: 959px) {
    .shopify-collections .wrapper-t4w {
        padding: 0 20px;
    }
    .shopify-collections .circle-fq6 {
        font-size: 30px;
        letter-spacing: -0.6px;
        margin: 0 auto 16px;
    }
    .shopify-collections .text-ssw {
        font-size: 16px;
        white-space: normal;
        margin-bottom: 32px;
    }
    .shopify-collections .grid-8j2 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 16px;
        margin: 0 -20px;
        padding: 0 0 40px 20px;
    }
    .shopify-collections .grid-8j2::-webkit-scrollbar {
        display: none;
    }
    .shopify-collections .grid-8j2 > li {
        flex: 0 0 42%;
        scroll-snap-align: start;
        min-width: 0;
    }
    .shopify-collections .title-sop a {
        font-size: 16px;
    }
}


    /* Custom spacer utility */
    .custom-spacer {
        display: block;
        width: 100%;
        height: var(--desktop-space, 120px); /* default for desktop */
        pointer-events: none; /* it's decorative */
    }

    @media (max-width: 600px) {
        .custom-spacer {
            height: var(--mobile-space, var(--desktop-space, 60px)); /* mobile fallback */
        }
    }




    /* FOR THE TOP SECTION OF THE HOMEPAGE*/

    .text-dz9 {
        text-align: center;
    }

    @media all {
        .overlay-pl7 {
            position: relative;
            z-index: 2;
            max-width: 100%;
            border-radius: var(--overlay-border-radius, 0);
            color: rgb(var(--text-color));
        }
    }

    @media (min-width: 600px) {
        .overlay-pl7 {
            max-width: 582px;
        }
    }

    @media (min-width: 769px) {
        .overlay-pl7 {
            max-width: 65%;
        }

        .overlay-pl7 {
            margin-right: 0;
            margin-left: 0;
        }
    }

    @media (min-width: 1024px) {
        .overlay-pl7 {
            max-width: 50%;
        }
    }

    .overlay-pl7 {
        position: relative;
        z-index: 2;
        max-width: 100%;
        border-radius: var(--overlay-border-radius, 0);
        color: rgb(var(--text-color));
    }

    @media all {
        .overlay-pl7 {
            margin-bottom: var(--ctrl-bottom);
            transform: translateY(30px);
            opacity: 0;
        }

        .overlay-pl7 {
            transform: translateY(0);
            transition: var(--transition-in, transform 1s cubic-bezier(.165, .84, .44, 1), opacity .7s ease-out .3s);
            opacity: 1;
        }
    }

    .overlay-pl7 {
        margin-bottom: var(--ctrl-bottom);
        transform: translateY(30px);
        opacity: 0;
    }

    .overlay-pl7 {
        transform: translateY(0);
        transition: var(--transition-in, transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.7s ease-out 0.3s);
        opacity: 1;
    }


    .text-dz9 {
        text-align: center;
    }

    @media all {
        .overlay-o19 {
            max-width: 100%;
            margin-bottom: calc(4 * var(--space-unit));
        }
    }

    .overlay-o19 {
        max-width: 100%;
        margin-bottom: calc(4 * var(--space-unit));
    }

        .overlay-o19 p {
            color: #003b3c;
        }

        .overlay-o19 p {
            font-size: 20px;
        }

    @media (max-width: 1024px) {
        .overlay-4pt {
            font-size: 32px;
        }

        .overlay-o19.thsap.text-5fs {
            display: none;
        }

        .overlay-o19 p {
            font-size: 16px;
        }
    }


    .overlay-4pt {
        font-size: 54px;
    }

    .overlay-4pt {
        color: rgb(var(--heading-color));
    }

    .overlay-4pt {
        color: #003b3c;
    }

        .overlay-4pt i {
            color: #009296;
        }

    @media (max-width: 1440px) {
        .overlay-4pt {
            font-size: 48px;
        }
    }

    h2, .jypag {
        margin: 0 0 .5em;
        color: rgb(var(--heading-color));
        font-family: var(--heading-font-family);
        font-style: var(--heading-font-style);
        font-weight: var(--heading-font-weight);
        line-height: calc(4px + 2.4ex);
        text-transform: var(--heading-text-transform);
    }

    h2, .jypag {
        font-size: var(--h2-font-size);
        line-height: 1.3;
    }

    h2, .jypag {
        font-family: STIX Two Text,serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    @media (min-width: 1024px) {
        h2, .jypag {
            font-size: 60px;
            line-height: 120%;
            letter-spacing: -1.2px;
        }
    }

    /*SECTION FOR MIDDLE VIDEO HOME PAGE*/
    @import url('https://fonts.googleapis.com/css?family=STIX+Two+Text:400,500,600,700,400i,500i,600i,700i&display=swap');

    @font-face {
        font-family: 'STIXTwoText';
    }



    /* Passionate Section */

    .section-2yl {
        background-color: #F6F2EC;
        padding: 80px 0;
    }

    .content-fsz {
        width: 100%;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }

    .content-msq {
        flex: 1;
        min-width: 0;
        max-width: 760px;
    }

    .content-ppf {
        flex: 0 0 auto;
        width: min(820px, 48%);
    }

    .desktop-3r8 {
        display: flex;
        justify-content: flex-end;
    }

    .content-ppf.mobile-2fg {
        display: none;
    }

    .section-ahc {
        position: relative;
        width: 100%;
        padding: 0;
    }

    .container-q5l {
        width: 100%;
        aspect-ratio: 667 / 770;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        background-color: #000;
        appearance: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: block;
    }

    .container-q5l:focus-visible {
        outline: 3px solid #009296;
        outline-offset: 4px;
    }

    @media (hover: hover) {
        .container-q5l:hover .button-mde {
            transform: translate(-50%, -50%) scale(1.08);
        }
    }

    .video-xzq {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
        cursor: pointer;
        display: block;
    }

    .video-41h {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .container-q5l video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

    .button-mde {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
        border: none;
        padding: 0;
        z-index: 2;
        color: #fff;
        pointer-events: none;
        transition: transform 200ms ease;
    }

    .icon {
        vertical-align: top;
        pointer-events: none;
    }

    .big-avi {
        font-family: "STIX Two Text", serif;
        font-size: 72px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -1.44px;
        color: #003B3C;
        margin: 0 0 40px;
    }

    .big-avi i {
        color: #009296;
        font-weight: 400;
    }

    .text-22p {
        font-family: Inter, sans-serif;
        font-size: 34px;
        color: #003B3C;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    .text-22p p {
        margin: 0;
    }

    .image-dax {
        width: 280px;
        max-width: 100%;
        margin-bottom: 12px;
        display: block;
    }

    .text-nyb {
        font-family: Inter, sans-serif;
        font-size: 18px;
        color: #003B3C;
        margin: 0;
    }

    /* Lg: 1280–1599px */
    @media only screen and (min-width: 1280px) and (max-width: 1599px) {
        .content-fsz {
            gap: 40px;
        }
        .content-msq {
            max-width: 500px;
        }
        .big-avi {
            font-size: 54px;
            letter-spacing: -1.08px;
        }
        .text-22p {
            font-size: 24px;
        }
    }

    /* Md: 960–1279px */
    @media only screen and (min-width: 960px) and (max-width: 1279px) {
        .content-fsz {
            gap: 32px;
        }
        .content-msq {
            max-width: 420px;
        }
        .big-avi {
            font-size: 42px;
            letter-spacing: -0.84px;
            margin-bottom: 28px;
        }
        .text-22p {
            font-size: 24px;
        }
        .image-dax {
            width: 200px;
        }
        .text-nyb {
            font-size: 16px;
        }
    }

    /* SmAndDown: ≤959px */
    @media only screen and (max-width: 959px) {
        .section-2yl {
            padding: 60px 0;
        }
        .content-fsz {
            flex-direction: column;
            padding: 0 20px;
            gap: 28px;
            max-width: none;
        }
        .content-msq {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100%;
            gap: 20px;
        }
        .desktop-3r8 {
            display: none;
        }
        .content-ppf.mobile-2fg {
            display: block;
            width: 100%;
        }
        .big-avi {
            font-size: 36px;
            letter-spacing: -0.72px;
            margin: 0;
        }
        .text-22p {
            font-size: 16px;
            margin: 0;
        }
        .text-22p p {
            text-align: center;
            margin: 0;
        }
        .image-dax {
            width: 200px;
            margin: 0;
        }
        .text-nyb {
            font-size: 16px;
            margin: 0;
        }
    }


    /*Phact Section on Homepage*/

    .wrapper-bih {
        display: flex;
        position: relative;
        margin: 0 auto;
        justify-content: center;
        height: 920px;
        max-width: 1840px;
    }

    @media (max-width: 1679px) and (min-width: 1440px) {
        .wrapper-bih {
            height: calc(720px + (100 * (100vw - 1440px) / 240));
        }
    }

    .split-aoi {
        min-height: 500px;
        box-sizing: border-box;
    }

    .split-aoi {
        background-color: #7ECECF;
        text-align: center;
        display: flex;
        justify-content: space-between;
        border-radius: 20px 0 0 20px;
        flex-direction: column;
        width: 50%;
    }

    .split-5vf {
        min-height: 500px;
        box-sizing: border-box;
    }

    .split-5vf {
        width: 60% !important;
    }

    .split-5vf {
        background-color: #F6F2EC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 120px 80px 120px 140px;
        border-radius: 0px 20px 20px 0px;
    }


    .split-aoi h2 {
        letter-spacing: 2% !important;
        line-height: 130% !important;
        font-weight: 500;
        font-size: 28px;
        font-family: 'Inter:Regular', sans-serif;
        margin: 0 auto;
        color: #009296;
        margin-top: 60px;
        margin-bottom: 50px;
        text-transform: uppercase;
        letter-spacing: unset;
    }

    .logo-146 {
        max-width: 100px;
        margin-bottom: 50px;
    }

    .split-right-ka6 {
        line-height: 110% !important;
        letter-spacing: -2% !important;
        margin-bottom: 25px;
        font-size: 54px;
        font-family: STIX Two Text,Medium sans-serif;
    }

    .text-mqm {
        font-size: 20px;
        margin-bottom: 45px;
    }

    .split-5vf p {
        margin-bottom: 60px;
        max-width: 90%;
    }

    .button-jg9 {
        display: inline-block;
        padding: 13px 0px;
        background: #009296;
        color: #fff;
        text-align: center;
        text-decoration: none;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 1px;
        width: 207px;
        margin: 0 auto;
    }

    .button-jg9 {
        margin: unset;
    }

    .image-cbx {
        max-width: 780px;
        position: relative;
        width: 100%;
        margin: auto;
        z-index: 2;
    }

    .image-cbx img {
        position: relative;
        bottom: 0;
        left: 120px;
        height: auto;
        width: 100%;
        display: block;
        top: 38px;
    }

    .split-right-ka6 i {
        color: #009296;
        font-weight: 400;
        font-family: 'Inter:Regular' sans-serif;
    }

    @media (max-width: 1024px) {
        .wrapper-bih {
            position: relative;
        }
    }

    @media (max-width: 1180px) {
        .wrapper-bih {
            height: auto;
        }
    }

    @media (max-width: 990px) {
        .wrapper-bih {
            flex-direction: column;
        }

        .wrapper-bih {
            flex-direction: column;
            height: unset;
            align-items: center;
        }
    }

    @media (max-width: 1024px) {
        .split-aoi {
            border-radius: 20px;
        }
    }

    @media (max-width: 990px) {
        .split-aoi {
            width: 100%;
            text-align: center;
            padding: 0;
            min-height: auto;
            border-radius: 20px;
            align-items: center;
            overflow: hidden;
        }
    }

    @media (max-width: 1440px) {
        .split-5vf {
            padding: 80px 80px 80px 110px;
        }
    }

    @media (max-width: 1180px) {
        .split-5vf {
            padding: 40px 20px 40px 80px;
        }
    }

    @media (max-width: 990px) {
        .split-5vf {
            width: 100%;
            text-align: center;
            padding: 30px;
        }

        .split-5vf {
            padding: 0px;
        }

        .split-5vf {
            background-color: transparent;
        }

        .split-5vf {
            padding: 60px 20px 0px 20px;
            align-items: center;
        }

        .split-5vf {
            width: 100%;
        }

        .split-5vf {
            width: unset !important;
        }
    }


    @media (max-width: 1440px) {
        .split-aoi h2 {
            font-size: 20px;
        }
    }

    @media (max-width: 1280px) {
        .split-aoi h2 {
            margin-bottom: unset;
        }

        .split-aoi h2 {
            font-size: 18px;
        }
    }

    @media (max-width: 1180px) {
        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 1024px) {
        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 990px) {
        .split-aoi h2 {
            font-size: 22px;
            max-width: 380px;
            margin-top: 50px;
        }

        .split-aoi h2 {
            font-size: 16px;
        }
    }

    @media (max-width: 490px) {
        .split-aoi h2 {
            max-width: 340px;
        }
    }

    @media (max-width: 1440px) {
        .image-cbx {
            width: 100%;
        }
    }

    @media (max-width: 1180px) {
        .image-cbx {
            width: auto;
            position: relative;
            left: unset;
        }
    }

    @media (max-width: 990px) {
        .image-cbx {
            max-width: 500px;
            position: relative;
            left: unset;
            margin-top: 25px;
        }
    }

    @media (max-width: 1440px) {
        .logo-146 {
            margin-bottom: 40px;
        }
    }

    @media (max-width: 1280px) {
        .logo-146 {
            max-width: 90px;
        }
    }

    @media (max-width: 1180px) {
        .logo-146 {
            max-width: 70px;
        }
    }

    @media (max-width: 990px) {
        .logo-146 {
            max-width: 70px;
        }
    }

    @media (max-width: 1440px) {
        .split-right-ka6 {
            margin-bottom: 35px;
        }
    }

    @media (max-width: 1024px) {
        .split-right-ka6 {
            line-height: 42px !important;
            margin-bottom: 20px !important;
        }
    }

    @media (max-width: 1280px) {
        .split-right-ka6 {
            font-size: 34px;
        }
    }

    @media (max-width: 1180px) {
        .split-right-ka6 {
            font-size: 24px;
        }

        .split-right-ka6 {
            font-size: 32px;
        }

        .split-right-ka6 {
            max-width: 530px;
        }
    }

    @media (max-width: 990px) {
        .split-right-ka6 {
            font-size: 32px;
        }

        .split-right-ka6 {
            font-size: 24px;
        }

        .split-right-ka6 {
            font-size: 32px;
            text-align: center;
        }

        .split-right-ka6 {
            max-width: 530px;
        }
    }

    @media (max-width: 1180px) {
        .text-mqm {
            max-width: 530px;
        }
    }

    @media (max-width: 990px) {
        .text-mqm {
            max-width: 530px;
        }
    }

    @media (max-width: 1440px) {
        .text-mqm {
            font-size: 18px;
        }
    }

    @media (max-width: 1141px) {
        .text-mqm {
            font-size: 16px;
        }
    }

    @media (max-width: 1024px) {
        .text-mqm {
            text-align: center;
        }

        .split-5vf p {
            margin-bottom: 30px !important;
        }
    }

    @media (max-width: 1280px) {
        .split-5vf p {
            font-size: 16px;
        }
    }

    @media (max-width: 1180px) {
        .split-5vf p {
            text-align: left;
        }
    }

    @media (max-width: 990px) {
        .split-5vf p {
            text-align: center;
        }
    }

    @media (max-width: 1024px) {
        .button-jg9 {
            width: 190px;
        }
    }

    @media (max-width: 990px) {
        .button-jg9 {
            margin: 0 auto;
        }
    }

    @media (max-width: 1780px) {
        .image-cbx img {
            top: 45px;
        }
    }

    @media (max-width: 1680px) {
        .image-cbx img {
            top: 0;
        }
    }

    @media (max-width: 1540px) {
        .image-cbx img {
            top: 0;
            left: 80px;
        }

        .wrapper-bih {
            height: 750px;
        }
    }

    @media (max-width: 1480px) {
        .image-cbx img {
            left: 80px;
        }
        .wrapper-bih {
            height: 730px;
        }
    }

    @media (max-width: 1440px) {
        .image-cbx img {
            
        }
        .wrapper-bih {
            height: 710px;
        }
    }

    @media (max-width: 1380px) {
        .image-cbx img {

        }

        .wrapper-bih {
            height: 680px;
        }
    }

    @media (max-width: 1280px) {
        .image-cbx img {
            height: 100%;
        }
        .wrapper-bih {
            height: 600px;
        }
    }

    @media (max-width: 1180px) {
        .image-cbx img {
            left: 65px;
        }
        .wrapper-bih {
            height: 550px;
        }
    }

    @media (max-width: 1080px) {
        .image-cbx img {
            
        }

        .wrapper-bih {
            height: 500px;
        }
    }

    @media (max-width: 990px) {
        .image-cbx img {
            left: 0px;
            width: 100%;
        }

        .wrapper-bih {
            flex-direction: column;
        }

        .wrapper-bih {
            flex-direction: column;
            height: unset;
            align-items: center;
        }

        .mobile-k34 {
            display: none;
        }
    }


    /*PROCAPS DIFFERENCE HOMEPAGE*/

    .wrapper-6bo {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 40px;
    }

    .procapsDif {
        color: #009296;
        font-family: 'Inter', sans-serif;
        font-size: 34px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.34px;
        margin-bottom: 16px;
    }

    .procaps-divider {
        width: 50px;
        height: 2px;
        background: #009296;
        border: none;
        margin-bottom: 32px;
    }

    .evolving {
        color: #003B3C;
        font-family: "STIX Two Text";
        font-size: 72px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -1.44px;
        margin: 0;
    }

    .evolving i {
        color: #009296;
        font-style: italic;
    }

    .atProcaps {
        color: #003B3C;
        font-family: Inter, sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.2px;
        padding: 32px 0 48px;
        margin: 0;
    }

    /* Md: 960px–1279px */
    @media only screen and (min-width: 960px) and (max-width: 1279px) {
        .evolving {
            font-size: 48px;
            letter-spacing: -0.96px;
        }
    }

    /* SmAndDown: ≤959px */
    @media only screen and (max-width: 959px) {
        .wrapper-6bo {
            padding: 0 20px;
        }

        .procapsDif {
            font-size: 22px;
        }

        .evolving {
            font-size: 32px;
            letter-spacing: -0.64px;
        }

        .atProcaps {
            font-size: 16px;
            padding: 24px 0 40px;
        }
    }


    /* DIGESTIVE HEALTH VIDEO SECTION — poster image + play button launcher */

    .digestive-video-section {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .digestive-video-launcher {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        border-radius: 20px;
        overflow: hidden;
        background: #e8e8e8; /* light gray placeholder until poster image is added */
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .digestive-video-launcher:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .digestive-poster {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .digestive-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
        transition: transform 0.2s ease;
        pointer-events: none;
    }

    .digestive-video-launcher:hover .digestive-play {
        transform: translate(-50%, -50%) scale(1.06);
    }

    /* Bottom gradient for text readability over any poster */
    .digestive-gradient {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 55%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    .digestive-copy {
        position: absolute;
        left: 40px;
        right: 40px;
        bottom: 32px;
        text-align: left;
        color: #fff;
        pointer-events: none;
    }

    .digestive-title {
        font-family: Inter, sans-serif;
        font-size: 28px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.3px;
        margin: 0 0 8px;
        color: #fff;
    }

    .digestive-subtitle {
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        color: #fff;
        opacity: 0.8;
    }

    .digestive-sep {
        display: inline-block;
        margin: 0 6px;
        opacity: 0.7;
    }

    @media (max-width: 959px) {
        .digestive-video-section { padding: 0 20px; }
        .digestive-video-launcher { border-radius: 12px; }
        .digestive-play svg { width: 64px; height: 64px; }
        .digestive-copy { left: 20px; right: 20px; bottom: 20px; }
        .digestive-title { font-size: 20px; }
        .digestive-subtitle { font-size: 13px; }
    }

    .container-1ss {
        max-width: 1680px !important;
    }

    .container-1ss {
        width: 100%;
        max-width: calc(var(--page-width, 1320px) + var(--gutter) * 2);
        margin: 0 auto;
        padding: 0 var(--gutter);
    }

    @media (min-width: 1025px) {
        .container-1ss {
            max-width: none;
            width: 100%;
            padding-left: 40px;
            padding-right: 40px;
        }
    }

    .section-e8j {
        display: block;
        width: 100%;
        margin: calc(var(--section-gap) * var(--fluid-1-5)) auto;
        padding-bottom: .02px;
    }

    .section-e8j {
        margin: 0px;
    }

    .rel-x55 {
        position: relative;
    }

    .mx-518 {
        margin-left: auto;
        margin-right: auto;
    }

    .fle-phc {
        display: flex;
    }

    .max-w-screen-aco {
        max-width: 1024px;
    }

    .col-nlw {
        flex-direction: column;
    }

    .overflow-o7v {
        overflow: hidden;
    }

    .max-w-screen-aco {
        max-width: 1125px;
    }

    .block-m1z {
        display: block;
    }

    .w-cn2 {
        width: 100%;
    }

    @media all {
        .section-ihm {
            padding-top: 56.3%;
        }

        .section-ihm {
            overflow: hidden;
        }
    }

    .section-6lo .section-ihm {
        border-radius: 14px;
    }

    .cc-animate-ozp.cc-animate-kq7 {
        max-width: 100% !important;
    }

    [data-cc-animate] {
        opacity: 0;
    }

    [data-cc-animate=""].cc-animate-kq7 {
        animation: fade-in calc(var(--aos-animate-duration, 1s) * 0.8) 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

    .abs-1le {
        position: absolute;
    }

    .left-4od {
        left: 0;
    }

    .top-obd {
        top: 0;
    }

    .h-bgd {
        height: 100%;
    }

    @media all {
        .section-ihm .height-8vf {
            height: calc(100% - 2px);
        }
    }

    .media-tiq {
        overflow: hidden;
    }

    .overlay-am5:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-family: inherit;
        font-size: 1em;
        text-decoration: none;
        text-shadow: none;
        cursor: pointer;
    }

    .item-rt9 {
        align-items: center;
    }

    .justify-z6c {
        justify-content: center;
    }

    @media all {
        .section-q6z {
            z-index: 1;
            color: #fff;
            cursor: pointer;
        }

        .section-q6z {
            transition: opacity .4s;
            filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
        }
    }



    .object-xiy {
        object-position: center;
    }

    [loading="lazy"] {
        transition: opacity .5s ease-out;
        opacity: 1;
    }

    .img-sm9 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .visually-8wz {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border-width: 0;
    }

    .icon {
        vertical-align: top;
        pointer-events: none;
    }

    @media all {
        .section-q6z > .icon {
            width: calc(40px + 5%);
            height: auto;
        }
    }

    @media (max-width: 1024px) {
        .container-1ss {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        #sho-a38 {
            display: none;
        }

        .section-ihm {
            margin-top: 50px;
            margin-bottom: 50px;
        }
    }


    @keyframes fade-in {
        0% {
            opacity: 0;
            opacity: 0;
        }

        100% {
            opacity: 1;
            opacity: 1;
        }
    }


    /* Fractional star rating */
    .frating {
        display: inline-flex;
        gap: 4px; /* space between stars */
        vertical-align: middle;
    }

    .frating-star {
        position: relative;
        display: inline-block;
        overflow: hidden; /* ensures the clip width respects the star box */
    }

    .frating-base {
        display: block; /* empty outline behind */
    }

    .frating-clip {
        position: absolute;
        inset: 0;
        overflow: hidden; /* clip the filled star horizontally */
    }

    .frating-fill {
        display: block; /* filled star on top, clipped by .frating-clip width */
    }

/* Reconnect modal — hidden by default */
#components-reconnect-modal {
    display: none;
}

/* Show only when retries exhausted or server rejected circuit (not during in-progress reconnect). */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block !important;
}

.reconnect-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.reconnect-box {
    background: white;
    padding: 32px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    max-width: 360px;
    width: 90vw;
}

.reconnect-box h3 {
    margin: 0 0 8px;
    color: #003b3c;
    font-family: inherit;
}

.reconnect-box p {
    margin: 0 0 20px;
    color: rgba(0, 0, 0, 0.7);
}

.reconnect-box button {
    padding: 10px 24px;
    background: #009296;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
}

.reconnect-box button:hover {
    background: #007a7e;
}


/* Shared MudTextField "brand" styling — apply by adding `Class="custom-input"`
   to a MudTextField. Lives in app.css (global, non-scoped) because MudBlazor's
   inner .mud-input-* elements are outside any single component's scoped CSS
   reach. Used by EmailContactDrawer; should be the standard for any new form
   field site-wide so the look stays consistent. */
.mud-input-control.custom-input .mud-input-outlined-border {
    border-color: #D9E2E2;
    border-radius: 8px !important;
}

.mud-input-control.custom-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #009296 !important;
    border-width: 1px;
}

.mud-input-control.custom-input .mud-input-label {
    color: #406c6d !important;
    font-family: 'Inter', sans-serif;
}

.mud-input-control.custom-input .mud-input-label.mud-input-label-inputcontrol {
    background-color: #fff;
}

/* Helper text — sits below the field, secondary hierarchy. */
.mud-input-control.custom-input .mud-input-helper-text {
    color: #73888A !important;
}

/* Hover border — only when the field is NOT focused (focus has its own teal). */
.mud-input-control.custom-input .mud-input.mud-input-outlined:hover:not(:focus-within) .mud-input-outlined-border {
    border-color: #9DB3B3;
}

/* Error state — brand-friendly red instead of MudBlazor's bright generic red.
   Same red as the .ecd-error-banner so the two read as one visual language.
   `.mud-input-error` lives on different elements depending on what's in error
   (the input element for the border, the label element for the label, the
   helper text element for the helper). Each selector targets the right one. */
.mud-input-control.custom-input .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: #b42318 !important;
}

.mud-input-control.custom-input > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
    color: #b42318 !important;
}

.mud-input-control.custom-input .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-error {
    color: #b42318 !important;
}

.mud-input-control.custom-input .mud-input-helper-text.mud-input-error {
    color: #b42318 !important;
}

/* Required asterisk — inherits the label color (medium teal #406c6d) so it
   reads as part of the label rather than a separate alert. MudBlazor doesn't
   color it; we previously over-styled it red, which felt loud on first load. */
.mud-input-control.custom-input.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: inherit;
}

/* Shared brand button — apply by adding `Class="btn-brand"` to a MudButton.
   Lives in app.css (global, non-scoped) because MudBlazor's button element
   is portaled outside any component's scoped CSS reach. */
.btn-brand {
    background-color: #009296 !important;
    color: white !important;
    border-radius: 9999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 12px 28px !important;
    height: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transition: background-color 0.2s !important;
}

.btn-brand:hover {
    background-color: #00b4ae !important;
}

/* Field geometry — generous outlined input height (~64px, vs MudBlazor's
   default ~60px). Padding-top/bottom = 20px, with the resting label at
   translateY(21px) so it sits visually centered AND aligned with where
   typed text will appear (no perceptual jump when the user types). */
.mud-input-control.custom-input .mud-input > input.mud-input-root-outlined,
.mud-input-control.custom-input .mud-input > div.mud-input-slot.mud-input-root-outlined {
    padding-top: 20px;
    padding-bottom: 20px;
}

.mud-input-control.custom-input .mud-input-label-outlined:not(.mud-shrink) {
    transform: translate(14px, 21px) scale(1);
}

/* ===================================================================
   Skeleton system (brand-matched loading states)
   ===================================================================
   Shared utility for placeholder UI shown while content loads. Use
   anywhere a real layout takes >150ms to render — homepage carousel,
   collection grid, PDP, cart, etc. Goal: fill perceived loading
   time with structure so the page feels alive and committed before
   data arrives, with zero layout shift when content lands.

   Pattern: subtle teal-tinted shimmer in the brand color palette,
   gentle 1.4s cycle (slow enough to feel calm, fast enough to feel
   alive). Honors prefers-reduced-motion: animation off, gradient
   stays so the placeholder is still distinguishable.

   Usage — set width/height + variant via local classes or inline
   style; .brand-skel just provides the surface treatment:

     <div class="brand-skel" style="width: 80%; height: 18px;"></div>

   Compose for richer placeholders (image area, text rows, etc.) —
   see HighestRatedProductsComponent or FastSimonSearchOverlay for
   real examples.
*/

.brand-skel {
    display: block;
    background: linear-gradient(
        90deg,
        rgba(0, 59, 60, 0.06) 0%,
        rgba(0, 59, 60, 0.12) 50%,
        rgba(0, 59, 60, 0.06) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: brand-skel-shimmer 1.4s ease-in-out infinite;
}

.brand-skel--circle { border-radius: 50%; }
.brand-skel--pill   { border-radius: 999px; }

/* On cream-tile backgrounds (#F6F2EC), the default tone is too
   subtle to see. This variant lifts the contrast just enough to
   register as a placeholder without becoming distracting. */
.brand-skel--on-cream {
    background: linear-gradient(
        90deg,
        rgba(0, 59, 60, 0.04) 0%,
        rgba(0, 59, 60, 0.10) 50%,
        rgba(0, 59, 60, 0.04) 100%
    );
    background-size: 200% 100%;
}

@keyframes brand-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-skel { animation: none; }
}