#homeContent {
    --home-image-url1: url('../../img/home/hero-1.webp');
    --home-image-url2: url('../../img/home/hero-2.webp');
    --home-image-url3: url('../../img/home/pouring_chocolate_protein_shake_from_a_blender.png');
    --home-image-url4: url('../../img/home/hero-4.webp');
    --home-image-url5: url('../../img/home/hero-5.webp');
    --home-image-url6: url('../../img/home/hero-6.webp');
    --home-image-url7: url('../../img/home/hero-7.webp');
}


/* No scaleX(-1) here: the hero images carry a readable TAILORBLEND label */
.home-image {
    position: relative;
    filter: brightness(0.8);
    height: 100vh;
    width: auto;
    background: var(--color-white) no-repeat 50%;
    background-position-y: top;
    /* must be here, not only in the 780px block: the `background` shorthand above resets
       background-size to auto, so without this the hero paints at its natural 1678x937 */
    background-size: cover;
}


.image-1 {
    background-image: var(--home-image-url1);
}

.image-2 {
    background-image: var(--home-image-url2);
}

.image-3 {
    background-image: var(--home-image-url3);
}

.image-4 {
    background-image: var(--home-image-url4);
    /* the branded tub sits hard right in this shot, so a centred cover crop drops it
       off-screen on narrow viewports and leaves only the out-of-focus glass */
    background-position-x: 70%;
}

.image-5 {
    background-image: var(--home-image-url5);
}

.image-6 {
    background-image: var(--home-image-url6);
    /* she and the glass sit right of centre, so a centred crop cuts the glass off on a
       phone; desktop is wide enough not to need it and keeps the framing marketing signed off */
    background-position-x: 70%;
}

@media (min-width: 780px) {
    .image-6 {
        background-position-x: 50%;
    }
}

.image-7 {
    background-image: var(--home-image-url7);
}


/* The copy is white, but several heroes are light where it lands (the white tub label
   on 5, the tie-dye shirt and white kitchen on 6, the lit glass on 2). Darken the lower
   hero so the text always has something to sit on. Sits above the slides and below
   .header-container, which is a later positioned sibling. */
#homeCarousel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.25) 35%,
        rgba(0, 0, 0, 0) 65%);
}

.header-container {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-end;
    bottom: 30vh;
    right: 0;
    text-align: end;
    color: var(--color-white);
}

@media(min-width: 450px) {
    .header-container {
        bottom: 20vh;
    }

}

.header-text-container {
    margin-right: 2rem;
}

.your-health {
    text-transform: uppercase;
    font-size: 24px;
}

.your-blend {
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bolder;
    margin-top: -10px;
}

.your-health-blend-intro {
    max-width: 700px;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 3rem;
}

.home-button-container {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    justify-content: end;
    /* match .header-text-container: without this the stacked buttons sit hard against the
       screen edge on phones while the hero copy above them is inset */
    margin-right: 2rem;
}

@media(min-width: 400px){

    .your-health {
       
        font-size: 2.5rem;
    }

    .your-blend {
        font-size: 2.7rem;
        margin-top: -25px;
    }
    .your-health-blend-intro {
       
        font-size: 1rem;
        
    }
}



/* Home CTAs — Create a Blend, Build your Blend with AI, Take the Quiz.
   One shape, one hover behaviour; a variant only swaps the four colour tokens below.
   Class names are doubled in the state selectors to outrank Bootstrap's .btn-primary. */
.btn-home {
    --btn-bg: var(--color-white);
    --btn-fg: var(--color-secondary-dark);
    --btn-bg-hover: var(--color-white);
    /* No resting shadow — Bootstrap's .btn-primary drops a light-grey one on these, which
       marketing did not want. The hover glow stays, and has to be tinted to the button
       rather than to black: these sit on the dark hero, where a black glow is invisible. */
    --btn-shadow: none;
    --btn-shadow-hover: 0 8px 32px rgba(255, 255, 255, 0.45);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 13px 28px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-home.btn-home {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
}

.btn-home.btn-home:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow-hover);
}

.btn-home.btn-home:active,
.btn-home.btn-home.active,
.btn-home.btn-home.show,
.btn-check:checked + .btn-home.btn-home,
:not(.btn-check) + .btn-home.btn-home:active {
    background-color: var(--btn-bg-hover);
    color: var(--btn-fg);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* base.css forces `a i` to dark charcoal, which left the AI button's speech bubble grey
   on teal. Take the button's own colour instead: charcoal on white, white on teal. */
.btn-home i {
    color: inherit;
}

/* The practitioner's client-count badge. Bootstrap's .badge padding is taller than the
   button's line box, so it stretched My Clients taller than the CTAs beside it. Pin it
   to the line height so the count rides inside the button instead of growing it. */
.btn-home .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    min-width: 1em;
    padding: 0 0.4em;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    border-radius: 50rem;
}

/* AI variant — teal. Not part of the core palette, local to the home CTAs. */
.btn-home.btn-home--ai {
    --btn-bg: #5BBFB3;
    --btn-fg: var(--color-white);
    --btn-bg-hover: #3A9E92;
    --btn-shadow-hover: 0 8px 32px rgba(85, 195, 182, 0.45);
}

/* Quiz variant — charcoal. Was .btn-home-panel, whose :hover went white without changing
   the white text, so the label vanished. It sits on the light Momentum panel, so unlike
   the hero pair its hover glow is the dark one. */
.btn-home.btn-home--dark {
    --btn-bg: var(--color-secondary);
    --btn-fg: var(--color-white);
    --btn-bg-hover: var(--color-secondary-dark);
    --btn-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.35);
}

@media (min-width: 630px) {
    .header-text-container {
        margin-right: 3rem;
    }
    .home-button-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.2rem;
        justify-content: end;
        margin-right: 3rem;
    }
}




@media(min-width: 780px) {
    .header-text-container {
        margin-right: 5rem;
    }

    .home-button-container {
       
        margin-right: 5rem;
    }


    .your-health {
        font-size: 50px;
    }

    .your-blend {
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
        font-size: 60px;
        font-weight: 500;
    }

    .your-health-blend-intro {
/*        max-width: 40rem;*/
        font-size: 1.1rem;
        font-weight: 500;
        margin-left: 18rem;
    }

    .btn-home {
        font-size: 12px;
        padding: 14px 32px;
    }
}

/* Still used by IndexAlternative.cshtml and the localisation ResourceTest page. */
.btn-home-panel {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: 500;
    font-size: 16px;
    box-shadow: 2px 2px 2px #00000066;
    line-height: 2rem;
    min-width: 220px;
}

    .btn-home-panel:hover {
        background-color: var(--color-white);
    }

    .btn-home-panel:active {
        background-color: var(--color-secondary);
        box-shadow: unset;
    }

    .btn-check:checked + .btn-home-panel, .btn-home-panel.active, .btn-home-panel.show, .btn-home-panel:first-child:active, :not(.btn-check) + .btn-home-panel:active {
        background-color: var(--color-white);
        box-shadow: inset 1px 1px 1px grey;
        color: var(--color-secondary);
    }

/*------*/


/*---PICK YOUR STARTING POINT---*/

.starting-point {
    /* Teal accent — local to this section, not part of the core palette */
    --sp-teal: #5BBFB3;
    --sp-teal-dark: #3A9E92;

    position: relative;
    overflow: hidden;
    padding: 3.5rem 1.5rem 4rem;
    background: linear-gradient(170deg, #181816 0%, #1d1d1b 60%, #161614 100%);
    transform: translateY(-50px);
}

    .starting-point::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(91, 191, 179, 0.055) 0%, transparent 65%);
        pointer-events: none;
    }

.starting-point__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.starting-point__eyebrow {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(91, 191, 179, 0.7);
    margin-bottom: 10px;
}

.starting-point__headline {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-white);
}

.starting-point__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 1rem;
}

.starting-point__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.25rem 2rem 2rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.starting-point__card--featured {
    position: relative;
    background: rgba(91, 191, 179, 0.04);
    border: 1px solid rgba(91, 191, 179, 0.22);
}

    .starting-point__card--featured::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 48px;
        height: 2px;
        background: var(--sp-teal);
        border-radius: 0 0 2px 2px;
    }

.starting-point__title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 10px;
}

/* flex:1 pushes every card's button to the same baseline regardless of copy length */
.starting-point__desc {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 1.5rem;
}

.starting-point__badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(91, 191, 179, 0.6);
    margin-bottom: 18px;
}

.starting-point__btn {
    display: block;
    width: 100%;
    padding: 13px 24px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.2s, color 0.2s;
}

    .starting-point__btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-white);
    }

.starting-point__btn--teal {
    font-weight: 900;
    background: var(--sp-teal);
    border-color: var(--sp-teal);
    color: var(--color-white);
}

    .starting-point__btn--teal:hover {
        background: var(--sp-teal-dark);
        border-color: var(--sp-teal-dark);
        color: var(--color-white);
        box-shadow: 0 8px 32px rgba(85, 195, 182, 0.45);
    }

@media (min-width: 700px) {

    .starting-point {
        padding: 3.5rem 3rem 4rem;
    }

    /* auto-fit holds ZA at three columns and centres the two US cards */
    .starting-point__grid {
        grid-template-columns: repeat(auto-fit, minmax(0, 20rem));
    }
}

/*testimonials*/
.testimonials-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.testimonials-header__eyebrow {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    /* --color-primary is too light to read on white; this is the darkest teal in the palette */
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.testimonials-header__headline {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--color-secondary-dark);
}

/* No font-size step-up above 700px: this headline now matches .starting-point__headline,
   which holds 1.375rem at every width. */

.testimonial-item__name {
    font-weight: 700;
}

.testimonial-item__credential {
    font-style: italic;
}
/*---MOMENTUM MULTIPLY BANNER---*/

.momentum-banner {
    display: grid;
    grid-template-columns: 1fr;
    /* deep enough to read as its own band against the white testimonials section above */
    background-color: #efeae3;
    overflow: hidden;
    margin-top: 4rem;
}

.momentum-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2rem;
}

.momentum-logo {
    background-image: url(../../img/rebrand/momentum-banner/Momentum_logo_red.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 11rem;
    height: 6rem;
    margin-bottom: 1.5rem;
}

.momentum-eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.5rem;
}

.momentum-headline {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--color-secondary-dark);
    margin-bottom: 1.25rem;
}

.momentum-body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.momentum-fine {
    font-size: 10px;
    font-style: italic;
    color: #aaa;
    margin-bottom: 2rem;
}

.momentum-image {
    background: url('../../img/home/mm-banner.webp') no-repeat center / cover;
    min-height: 16rem;
}

@media (min-width: 768px) {
    .momentum-banner {
        grid-template-columns: 1fr 1fr;
        min-height: 420px;
    }

    .momentum-content {
        justify-content: center;
        padding: 3.5rem 3.25rem;
    }

    .momentum-headline {
        font-size: 2.25rem;
    }

    .momentum-image {
        min-height: 100%;
    }
}

/*---3X4 GENETICS CO-BRANDING BANNER---*/

.genetics-banner {
    /* 3X4 brand accent colours — local to this banner, not part of the core palette */
    --gx-purple: #663399;
    --gx-blue: #5882C8;
    --gx-gold: #C5A846;
    --gx-teal: #58C2B5;
    --gx-teal-dark: #4AB0A4;
    --gx-ink: #282D2C;

    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.genetics-banner__card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1440px;
    border: 1px solid #E8ECEF;
    border-radius: 10px;
    background: #FAFBFC;
    overflow: hidden;
}

.genetics-banner__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(197, 168, 70, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 10% 100%, rgba(102, 51, 153, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 0%, rgba(88, 130, 200, 0.03) 0%, transparent 35%);
    z-index: 0;
    pointer-events: none;
}

.genetics-banner__card > * {
    position: relative;
    z-index: 1;
}

.genetics-banner__accent {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--gx-purple) 0%, var(--gx-blue) 50%, var(--gx-gold) 100%);
}

.genetics-banner__content {
    flex: 1;
    padding: 36px 36px 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.genetics-banner__logos {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.genetics-banner__logo {
    display: block;
    width: auto;
}

.genetics-banner__logo--3x4 {
    height: 26px;
}

.genetics-banner__logo--tb {
    /* black wordmark sized so its text matches the 3X4 "GENETICS" text — adjust to taste */
    height: 18px;
}

.genetics-banner__logo-divider {
    width: 1px;
    height: 20px;
    background: #CCC;
}

.genetics-banner__badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gx-purple);
    border: 1px solid rgba(102, 51, 153, 0.25);
    padding: 3px 10px;
    border-radius: 100px;
    margin-left: 6px;
}

.genetics-banner__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gx-ink);
    line-height: 1.3;
    margin-bottom: 12px;
}

.genetics-banner__text {
    font-size: 13.5px;
    font-weight: 400;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}

.genetics-banner__instruction {
    font-size: 12.5px;
    font-weight: 500;
    color: #777;
    line-height: 1.6;
    margin-bottom: 22px;
}

.genetics-banner__instruction strong {
    color: var(--gx-teal);
    font-weight: 600;
}

.genetics-banner__cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.genetics-banner__cta-primary {
    display: inline-block;
    background: var(--gx-teal);
    color: var(--color-white);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 12px 26px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.genetics-banner__cta-primary:hover {
    background: var(--gx-teal-dark);
    color: var(--color-white);
}

.genetics-banner__cta-secondary {
    font-size: 11.5px;
    font-weight: 400;
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
}

.genetics-banner__cta-secondary:hover {
    color: var(--gx-purple);
}

.genetics-banner__cta-secondary span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.genetics-banner__image {
    flex-shrink: 0;
    width: 420px;
    min-height: 280px;
    overflow: hidden;
    background: #f0f0ee;
}

.genetics-banner__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

@media (max-width: 800px) {
    .genetics-banner__card {
        flex-direction: column;
    }

    .genetics-banner__accent {
        order: -1;
        width: auto;
        height: 4px;
        background: linear-gradient(90deg, var(--gx-purple) 0%, var(--gx-blue) 50%, var(--gx-gold) 100%);
    }

    .genetics-banner__content {
        padding: 28px 24px;
    }

    .genetics-banner__title {
        font-size: 20px;
    }

    .genetics-banner__cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .genetics-banner__image {
        order: 1;
        width: 100%;
        min-height: 200px;
        height: 220px;
    }
}

/*---PRODUCT PROPERTIES---*/

.product-properties {
    background-color: var(--color-secondary-dark);
    color: var(--color-white);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 3rem 1rem 3rem 1rem;
    font-weight: 400;
    text-transform: uppercase;
}

.product-properties-item-divider {
    margin: 0 0.5rem 0 0.5rem;
}


/*---PRODUCT VARIATIONS---*/

.product-options-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: transparent;
    margin-left: 4rem;
    margin-right: 4rem;
}


/* The panel box is square at every breakpoint (320px, then 400px on desktop) and masked
   to a circle. The photos are square too, so `cover` fits the whole image with nothing
   cropped but the corners. The old 30rem background-size overflowed a 320px box, which
   is why the phone only showed the middle two-thirds of each shot. */
.product-options-item--image__drink,
.product-options-item--image__shake2,
.product-options-item--image__porridge {
    min-width: 20rem;
    min-height: 20rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50rem;
}

.product-options-item--image__drink {
    background-image: url("../../img/home/drink-home.webp");
}

.product-options-item--image__shake2 {
    background-image: url("../../img/home/shake-home.webp");
}

.product-options-item--image__porridge {
    background-image: url("../../img/home/porridge-home.webp");
}


.product-options-item--text {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    margin: 3rem 0 3rem 0;
    text-align: center;
}

    .product-options-item--text.product-options-item--text__top {
        display: none;
    }

    .product-options-item--text.product-options-item--text__bottom {
        display: flex;
    }

.product-options--text__heading {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.product-options--text__info {
    font-size: 1rem;
}

@media (min-width: 1000px) {
    .product-options-container {
        flex-flow: row nowrap;
        align-items: center;
        background-color: rgba(37, 42, 41, 0.03);
        justify-content: space-evenly;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }


    .product-options-item--image__shake2 {
        height: 25rem;
        min-width: 25rem;
        margin-left: 3rem;
    }

    .product-options-item--image__drink {
        height: 25rem;
        min-width: 25rem;
        margin-right: 3rem;
    }

    .product-options-item--image__porridge {
        height: 25rem;
        min-width: 25rem;
        margin-left: 3rem;
    }

    /* US runs Drink before Protein, which lands Porridge on the same side as
       Protein. Flip it so the image keeps alternating down the page. */
    .product-options-container--image-right {
        flex-direction: row-reverse;
    }

        .product-options-container--image-right .product-options-item--image__porridge {
            margin-left: 0;
            margin-right: 3rem;
        }

    .product-options-item--text {
        max-width: 50rem;
        margin: 0rem 5rem 0rem 5rem;
    }

        .product-options-item--text.product-options-item--text__top {
            display: flex;
        }

        .product-options-item--text.product-options-item--text__bottom {
            display: none;
        }

    .product-options--text__heading {
        font-size: 1.6rem;
    }

    .product-options--text__info {
        font-size: 1.2rem;
    }
}