@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&family=Ubuntu:wght@700&display=swap');

:root {
    --txp-blue: #005CB9;
    --txp-blue-dark: #004991;
    --txp-yellow: #FFCC0C;
    --txp-red: #DF271C;
    --txp-white: #fff;
    --txp-red-dark: #b2271f;
    --txp-sky: #DFEFFF;
    --txp-dark-gray: #424242;
    --txp-black: #424242;
}

.hero-with-gradient {
    position: relative;
    overflow: hidden;
}

.trust-pilot-widget-style {
    padding: 50px;
    background-color: #DBEDFF;
    border-bottom: solid;
    border-width: 1px;
    border-color: lightgray;
}

.hero-section {
    position: relative;
    text-align: center;
    padding: 16px 0 20px;
    width: 100%;
    max-width: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,0) 1cm), linear-gradient(183.02deg, #fff 10.79%, rgba(255,255,255,.40) 60.21%, #fff 101.03%), radial-gradient(40vw 36vw at 86% 22%, rgba(223,39,28,.70) 0 40%, rgba(223,39,28,0) 70%), radial-gradient(48vw 40vw at 14% 20%, rgba(250,211,109,.90) 0 40%, rgba(250,211,109,0) 70%), radial-gradient(48vw 38vw at 28% 78%, rgba(0,92,185,.70) 0 35%, rgba(0,92,185,0) 65%), radial-gradient(55vw 45vw at 86% 82%, rgba(250,211,109,.85) 0 40%, rgba(250,211,109,0) 70%);
    background-repeat: no-repeat;
    overflow: clip;
    min-height: 520px;
}

    /* when NEAT is allowed, we turn the gradient off and show the canvas */
    .hero-section.hero--neat {
        background-image: none;
    }

.neat-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}
/* ensure real content sits above the canvas */
.hero-with-gradient > *:not(.neat-canvas) {
    position: relative;
    z-index: 1;
}

.hero-section .hero-inner,
.hero-section h1, .hero-section h2 {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section.hero--neat {
        background-image: none;
    }
    /* still OK; JS will skip NEAT */
}

.hero-subtitle {
    color: var(--TXP-Blue, #005CB9);
    text-align: center;
    font-family: Ubuntu;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 21.6px */
    text-transform: uppercase;
}

.hero-title {
    color: #005CB9; /* fallback */
    font-family: "Ubuntu",sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.2;
    margin: 0;
    display: inline-block;
    width: auto;
    max-width: 100%;
    -webkit-text-fill-color: transparent; /* if you're clipping a gradient */
    -webkit-background-clip: text;
    /* make sure nothing else fattens the edge */
    text-shadow: none !important;
    filter: none !important;
}

@supports (-webkit-background-clip:text) {
    .hero-title {
        background-image: linear-gradient(90deg,#005CB9 0%,#005CB9 64%,#5B6AC7 70%,#C23B45 82%,#FF2E1E 90%,#FF2E1E 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: .5px 0 0 #fff, -.5px 0 0 #fff, 0 .5px 0 #fff, 0 -.5px 0 #fff, .5px .5px 0 #fff, -.5px -.5px 0 #fff, .5px -.5px 0 #fff, -.5px .5px 0 #fff;
    }
}

/* Inner centered canvas */
.hero-inner {
    max-width: 1320px; /* <-- not 92vw */
    width: 100%;
    margin-inline: auto;
    padding: 10px 24px 40px;
}

/* Blue CTA card */
.hero-bs .cta-card {
    background: #005CB9;
    color: #fff;
    padding: 30px 26px 32px 570px; /* top right bottom left */
    width: 880px;
    height: 328px;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    overflow: hidden; /* mask corners */
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

    /* Let content use the full column width */
    .hero-bs .cta-card > * {
        display: block;
        max-width: none;
        text-align: left;
    }

    /* Button */
    .hero-bs .cta-card .btn {
        color: var(--txp-blue);
        background-color: var(--txp-white);
        text-align: center;
        border-radius: 5px;
        font-family: "Open Sans";
        font-weight: 800;
        font-size: 14px;
        line-height: 39px;
        letter-spacing: 0;
        text-align: center;
        color: #005CB9;
        background-color: #ECECEC;
        padding-right: 20px;
        padding-left: 15px;
        gap: 15px;
        margin-left: 0; /* ensure it doesn't get centered by margins */
        align-self: flex-start; /* if parent is grid/flex, don't stretch */
        margin-top: 40px;
        z-index: 2000;
    }

        .hero-bs .cta-card .btn:hover {
            background-color: var(--txp-dark-gray);
            color: white !important;
        }

    /* Eyebrow/title/body type stays the same */
    .hero-bs .cta-card .cta-title {
        color: white;
        font-family: Raleway;
        font-size: 17px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%; /* 20.4px */
        letter-spacing: 1.7px;
    }

    .hero-bs .cta-card .cta-subtitle {
        font-family: "Ubuntu",sans-serif;
        font-weight: 700;
        font-size: 42px;
        line-height: 1.15;
        letter-spacing: 0;
        margin: 0 0 12px;
        text-wrap: balance;
        color: white;
    }

    .hero-bs .cta-card .cta-description {
        color: white;
        font-family: "Open Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 129%; /* 25.8px */
        margin: 0 0 14px;
    }

/* Z-order for the other tiles */
.hero-bs .type-card {
    font-family: "Ubuntu",sans-serif;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0 0 12px;
    text-wrap: balance;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    overflow: hidden;
    width: 391px;
    height: 328px;
    z-index: 2;
}

/* image fills the card */
.hero-bs .type-card__media {
    height: 100%;
}

.hero-bs .type-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* white scrim on the right so text reads over the image */
.hero-bs .type-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: none !important;
    background: none !important;
}

/* text overlay area */
.hero-bs .type-card__body {
    position: absolute;
    z-index: 2;
    right: clamp(16px, 2vw, 28px);
    top: clamp(28px, 4vw, 48px);
    max-width: 80%;
    text-align: right !important;
}

/* Figma typography */
.hero-bs .type-card__title {
    font-family: "Ubuntu",sans-serif;
    font-weight: 700;
    font-size: 31px;
    line-height: 1.2;
    color: #005CB9;
    margin: 0;
}

.hero-bs .type-card__subtitle {
    inline-size: 20ch; /* forces the 2-line wrap */
    font-family: "Raleway",sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #002A54;
    margin: 0;
    display: block;
    margin-left: auto;
}

/* arrow button – 61×61, red circle */
.hero-bs .card-arrow {
    position: absolute;
    z-index: 2;
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    width: 61px;
    height: 61px;
    display: block;
    pointer-events: none; /* keeps the whole card clickable */
}

.hero-row-1 > .col-lg-8 {
    padding-right: 11px;
}

.hero-row-1 > .col-lg-4 {
    padding-left: 11px;
}

.hero-bs .size-card {
    position: relative;
    overflow: hidden;
    border-radius: 40px 0 40px 0; /* TL 40px, TR 0, BR 40px, BL 0 */
    z-index: 1;
    width: 430px;
    height: 324px;
    gap: 32px;
    opacity: 1;
    margin-left: auto;
    flex: 0 0 auto;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

    .hero-bs .size-card .carousel,
    .hero-bs .size-card .carousel-inner,
    .hero-bs .size-card .carousel-item {
        height: 100%;
    }

    .hero-bs .size-card .carousel-item > a {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: stretch; /* make children take full height */
    }

    .hero-bs .type-card__title,
    .hero-bs .type-card__subtitle {
        text-align: right !important;
    }

            /* Size-card: keep color + no underline on hover/focus */
            .hero-bs .size-card .carousel-item > a:hover,
            .hero-bs .size-card .carousel-item > a:focus {
                text-decoration: none;
                color: inherit;
            }

        /* both halves must also have a height */
        .hero-bs .size-card .col-5,
        .hero-bs .size-card .col-7 {
            height: 100%;
        }

            /* image fills its half (override .img-fluid's height:auto) */
            .hero-bs .size-card .col-5 img {
                width: 100%;
                height: 100% !important; /* override .img-fluid’s height:auto */
                object-fit: cover;
                display: block;
            }

        /* optional: vertically center the text block */
        .hero-bs .size-card .col-7 {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

    .hero-bs .size-card .carousel-control-prev,
    .hero-bs .size-card .carousel-control-next {
        display: none !important;
    }

    .hero-bs .size-card .carousel-indicators {
        position: absolute;
        left: 28px; /* distance from left edge of card */
        top: 32px; /* tweak to match mock */
        right: auto;
        bottom: auto;
        margin: 0;
        padding: 0;
        z-index: 500;
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* override Bootstrap’s default bottom-center placement */
        transform: none;
    }

        .hero-bs .size-card .carousel-indicators li {
            list-style: none;
            width: 12px; /* dot size */
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255, 0.95);
            opacity: 1; /* no fading */
            border: 0;
            margin: 0;
            cursor: pointer;
            text-indent: 0;
            flex: 0 0 auto;
        }

        .hero-bs .size-card .carousel-indicators .active {
            background-color: #005CB9;
        }

    .hero-bs .size-card .carousel-inner {
        position: relative;
        z-index: 1;
    }

.carousel-item .inner-pic {
    border-bottom-right-radius: 40px;
}

/* First-row equal heights */
.hero-row-1 {
    /* one knob to tune the tile height across breakpoints */
    --hero-tile-h: clamp(280px, 24vw, 320px);
}

    /* make columns stretch their child card */
    .hero-row-1 > [class*="col-"] {
        display: flex;
    }

    /* make each card fill the column and share the same min height */
    .hero-row-1 .cta-card,
    .hero-row-1 .type-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: var(--hero-tile-h);
    }

    /* keep the image tile covering nicely */
    .hero-row-1 .type-card__media {
        flex: 1 1 auto;
    }

    .hero-row-1 .type-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Figma typography for Order By Size */
.hero-bs .size-card__title {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700; /* Bold */
    font-size: 31px;
    line-height: 1.2; /* 120% */
    letter-spacing: 0;
    color: #005CB9; /* Figma “background” = text color */
    margin: 0 0 6px;
}

.hero-bs .size-card__subtitle {
    font-family: "Raleway", sans-serif;
    font-weight: 500; /* Medium */
    font-size: 16px;
    line-height: 1.2; /* 120% */
    letter-spacing: 0;
    color: #002A54; /* per your note */
    margin: 0;
}

/* Laptop container + <img> */
.hero-bs .laptop {
    min-height: 360px; /* safe fallback before image load */
    position: relative;
    z-index: 1;
    overflow: hidden; /* clip to rounded corners */
    width: 920.27px;
    height: 625px;
    z-index: 5;
    position: relative;
}

.hero-simple {
    padding-top:40px;
}

.hero-row-2 {
    position: relative;
}

.hero-bs .laptop-img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: normal; /* important: no multiply */
    filter: none;
}

/* keep the two columns in row 2 fixed in the grid */
.hero-simple .row.align-items-start > .col-lg-6 {
    position: relative; /* allows z-index on children if needed */
}

.section-title {
    font-family: "Ubuntu",sans-serif;
    font-size: 40px;
    font-style: normal;
    line-height: 46px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #424242;
}

/*--------------------------  Video Image Link template  -------------------------*/
.video-image-link {
    margin: 0 !important; /* REMOVE the 10px side margins */
    width: 100%; /* fill the column */
    max-width: 100%;
    border: none;
    text-decoration: underline;
    color: #DF271C !important;
    font-family: "Ubuntu",sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 25px !important;
}

/* --- Image badge (top-right) --- */
.social-card .sc-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #005CB9; /* Figma blue */
    color: #fff; /* icon color */
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    font-size: 14px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

    .social-card .sc-badge i {
        line-height: 1;
    }

/* --- Title (brand | time) --- */
.social-card .sc-title {
    font-family: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
    line-height: 25px;
    color: #424242;
    margin: 0;
}

    .social-card .sc-title .sep {
        opacity: .6;
    }

/* --- Description --- */
.social-card .sc-desc {
    font-family: Raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 13px;
    line-height: 20px;
    color: #424242;
    margin: 0;
}

.social-card, .card {
    min-width: 0;
}

/* force the desired counts for this row only */
.social-grid .col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 20px;
}              /* <576px: 1 */

@media (min-width: 576px)  { .social-grid > .col { flex:0 0 50%;  max-width:50%;  } } /* sm: 2 */
@media (min-width: 992px)  { .social-grid > .col { flex:0 0 33.333333%; max-width:33.333333%; } } /* lg: 3 */
@media (min-width: 1200px) { .social-grid > .col { flex:0 0 25%;  max-width:25%;  } } /* xl: 4 */
@media (min-width: 1400px) { .social-grid > .col { flex:0 0 20%;  max-width:20%;  } } /* xxl: 5 */

/* keep the link pinned */
.social-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Line clamp (show ~3 lines, ellipsis) */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Red link --- */
.social-card .sc-link {
    background-color: white;
    font-family: Raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 14px;
    line-height: 31px;
    color: #DF271C;
    margin-top: auto; /* sticks to bottom */
    align-self: flex-start; /* keeps the link left-aligned */
}

.social-card .sc-title .brand {
    text-transform: capitalize;
}

.social-wrap {
    max-width: 1600px;
    margin-inline: auto;
}

.summary-video {
    background-color: #ECECEC;
    align-items: flex-start;
}

.TXP-GRAY {
    background-color: #ECECEC !important;
}

@media(max-width: 400px) {
    .video-image-link {
        min-width: 270px;
        max-width: 270px;
        margin: 5px 2px 10px 2px !important;
    }
}

.video-image-link:hover {
    text-decoration: none;
    color: #333;
}

.video-image-link .title {
    display: block;
    margin-top: 5px;
}

.video-image-link .sub-title {
    display: block;
}

.video-image-link > img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

.subscribe-title {
    color: #005CB9; /* fallback */
    font-family: "Ubuntu",sans-serif;
    font-weight: 700;
    font-size: 61px;
    line-height: 1.2;
    margin: 0;
    display: inline-block;
    width: auto;
    max-width: 100%;
}

@supports (-webkit-background-clip:text) {
    .subscribe-title {
        background-image: linear-gradient(90deg,#005CB9 0%,#005CB9 64%,#5B6AC7 70%,#C23B45 82%,#FF2E1E 90%,#FF2E1E 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.subscribe-subtitle {
    font-family: "Ubuntu",sans-serif !important;
    font-weight: 700 !important;
    font-size: 25px !important;
    line-height: 120% !important;
    letter-spacing: 0% !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Optional: your outer pill (if you keep it) */
.subscribe-embed {
    width: min(540px, 84vw);
    height: 92px;
    margin: 24px auto 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16,24,40,.16);
    padding: 12px; /* 76 - 2*12 = 52 inner height */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    /* vendor adds a <div style="text-align:center"> wrapper */
    .subscribe-embed > div {
        width: 100% !important;
        text-align: left !important;
    }

    /* Make any AC form instance fill the pill */
    .subscribe-embed [id^="_form_"][id$="_"] {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

        /* Lay out the row */
        .subscribe-embed [id^="_form_"][id$="_"] ._form-content {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            margin: 0 !important;
        }

        /* ✅ Flex the correct item so the input can grow */
        .subscribe-embed [id^="_form_"][id$="_"] ._form_element {
            flex: 1 1 auto !important;
            min-width: 0 !important; /* critical for flex children to shrink/grow */
            margin: 0 !important;
        }

        /* Input fills its flex item */
        .subscribe-embed [id^="_form_"][id$="_"] ._field-wrapper {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
        }

        /* Email input (covers both text/email just in case) */
            .subscribe-embed [id^="_form_"][id$="_"] ._field-wrapper > input[type="text"],
            .subscribe-embed [id^="_form_"][id$="_"] ._field-wrapper > input[type="email"] {
                display: block !important;
                width: 100% !important;
                height: 52px !important;
                border: 0 !important;
                border-radius: 8px !important;
                padding: 0 16px !important;
                font-family: "Raleway", sans-serif !important;
                font-weight: 400 !important;
                font-size: 20px !important;
                line-height: 1.2 !important;
                background: #fff !important; /* was #7B7B7B */
                color: #111 !important; /* readable on white */
            }

        /* kill vendor push-down just in case */
        .subscribe-embed [id^="_form_"][id$="_"] ._inline-style button._inline-style {
            position: static !important;
            top: auto !important;
        }

        /* Placeholder color on white */
        .subscribe-embed [id^="_form_"][id$="_"] input::placeholder {
            color: #6B7280 !important; /* neutral gray */
        }

        /* Button wrapper + button fixes */
        .subscribe-embed [id^="_form_"][id$="_"] ._button-wrapper {
            margin: 0 !important;
            align-self: center !important;
        }

        .subscribe-embed [id^="_form_"][id$="_"] ._submit {
            width: 119px !important;
            height: 50px !important;
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important; /* no inherited 52px */
            white-space: nowrap !important;
            /* Typography */
            font-family: "Raleway", sans-serif !important;
            font-weight: 800 !important; /* ExtraBold */
            font-size: 14px !important;
            line-height: 39px !important; /* matches height */
            letter-spacing: 0 !important;
            text-align: center !important;
            text-transform: none !important; /* keep as typed */
        }

        /* Tidy up extras */
        .subscribe-embed [id^="_form_"][id$="_"] ._form-label {
            display: none !important;
        }

        .subscribe-embed [id^="_form_"][id$="_"] ._clear-element {
            display: none !important;
        }

/* Make sure the section has room for the orbit */
.subscribe-section {
    position: relative;
    display: grid;
    place-items: center; /* center the core block */
    overflow: hidden;
    background-image: url("../images/subscribe_back.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: clamp(640px, 88vh, 960px); /* was clamp(520px, 80vh, 760px) */
    padding-block: clamp(24px, 6vh, 72px); /* optional extra breathing room */
}

/* --- mobile fixes --- */
@media (max-width: 670px) {

    /* Let the pill grow vertically */
    .subscribe-embed {
        height: auto; /* was fixed 76px */
        padding: 10px; /* a bit tighter padding */
    }

        /* Allow wrapping instead of forcing one row */
        .subscribe-embed [id^="_form_"][id$="_"] ._form-content {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 10px !important;
        }

        /* Input takes full width on its own line */
        .subscribe-embed [id^="_form_"][id$="_"] ._form_element {
            flex: 1 1 100% !important;
            min-width: 0 !important;
        }

        .subscribe-embed [id^="_form_"][id$="_"] ._field-wrapper {
            width: 100% !important;
        }

        .subscribe-embed [id^="_form_"][id$="_"] input[type="text"],
        .subscribe-embed [id^="_form_"][id$="_"] input[type="email"] {
            height: 48px !important;
            font-size: 16px !important; /* avoids iOS zoom-on-focus */
            line-height: 1.3 !important;
        }

        /* Button goes to next line, full width, centered text */
        .subscribe-embed [id^="_form_"][id$="_"] ._button-wrapper {
            width: 100% !important;
            margin: 0 !important;
        }

        .subscribe-embed [id^="_form_"][id$="_"] ._submit {
            width: 100% !important;
            height: 44px !important;
            line-height: 44px !important;
            font-size: 16px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
}

/* Core (titles + form) sits above orbits */
.subscribe-core {
    position: relative;
    z-index: 2;
}

/* Homepage Orby Section*/

/* The container MUST be relative so items don't fly to the top of the whole page */
.orbit-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.orbit-item {
    position: absolute !important;
    top: 0;
    left: 0;
    width: clamp(175px, 20vw, 230px);
    aspect-ratio: 3 / 4;
    pointer-events: none !important;
    perspective: 1200px;
    z-index: 1;
    will-change: transform;
    border: 6px solid #ffffff;
    border-radius: 30px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden !important;
}

    .orbit-item:hover {

    }

.orbit-card-front,
.orbit-card-back,
.orbit-card-front img {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: inherit; /* Forces the leaf shape onto every layer */
    overflow: hidden;
}

    .orbit-card-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (max-width: 767px) {
    .orbit-item {
        width: 130px !important; /* Slightly smaller for grid fit */
        border-radius: 30px !important;
        border-width: 4px !important;
    }
}
/* End Orbit section */


/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .orbit-item {
        transition: none !important;
        animation: none !important;
    }
}

@media (min-width: 992px) {
    .hero-row-1 .col-lg-8 {
        flex: 0 0 69%;
        max-width: 69%;
    }

    .hero-row-1 .col-lg-4 {
        flex: 0 0 31%;
        max-width: 31%;
    }
}

/* 1200–1600: force the hero’s stage to the RIGHT, let the LEFT spill */
@media (min-width:1200px) and (max-width:1299.98px) {

    /* Full-bleed wrapper so outer containers can't constrain us */
    .hero-section {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow-x: hidden; /* we only want the left to disappear */
    }

    /* Right-align using the RTL trick (beats container centering/gutters) */
    .hero-inner {
        direction: rtl; /* right-aligns inline content */
        box-sizing: border-box;
        width: 100%; /* let the wrapper own the width */
        padding: 10px 0 80px; /* move side paddings to the stage below */
    }

    /* The fixed 1320px stage itself (switch back to LTR for content) */
    .hero-bs {
        direction: ltr;
        display: inline-block; /* participates in RTL right alignment */
        width: 1320px; /* fixed canvas */
        box-sizing: border-box;
        padding: 0 24px 0 0; /* keep only a RIGHT gutter */
    }

        /* Nix the right overhang Bootstrap adds on rows */
        .hero-bs > .row {
            margin-right: 0;
        }

    /* Remove top-level col padding so totals never exceed 1320 */
    .hero-row-1 > .col-lg-8,
    .hero-row-1 > .col-lg-4,
    .hero-row-2 > .col-left,
    .hero-row-2 > .col-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* make rows stay on one line in this band */
    .hero-row-1, .hero-row-2 {
        flex-wrap: nowrap;
    }

        /* create the visual gap by pushing only the RIGHT columns leftward */
        .hero-row-1 > .col-lg-4 {
            margin-left: 24px;
        }

        .hero-row-2 > .col-right {
            margin-left: 24px;
        }

    /* tiles still fill their columns */
    .hero-bs .cta-card,
    .hero-bs .type-card {
        width: 100% !important;
        max-width: none !important;
        height: 328px !important;
    }

    /* force identical tile heights (override Bootstrap .h-100) */
    .hero-row-1 .cta-card {
        margin-bottom: 0 !important;
    }

    .hero-bs > .row {
        margin-right: 80px;
    }
}

/* 1300–1600: keep the RIGHT edge visible; let extra spill LEFT */
@media (min-width:1300px) and (max-width:1600px) {

    /* Hide horizontal scroll; don't change your layout math */
    .hero-section {
        overflow-x: clip;
    }

    /* Make the hero stage 1320 and RIGHT-aligned */
    .hero-inner {
        box-sizing: border-box;
        width: 1320px; /* fixed stage width */
        max-width: none; /* stop auto-centering */
        margin-left: auto; /* anchor to RIGHT */
        margin-right: 0;
        /* keep your existing side padding */
        padding-inline: 24px;
    }

    /* Cancel ONLY the RIGHT negative margin on top-level rows so the
     stage doesn't overhang on the right (no right shaving) */
    .hero-bs > .row {
        margin-right: 20px;
    }

    /* Let the stage slide further LEFT by removing left padding on the
     first columns in each row (keeps your nested col-* intact) */
    .hero-row-1 > .col-lg-8 {
        padding-left: 0;
    }

    .hero-row-2 .col-left {
        padding-left: 0;
    }

    /* You added 15px right padding earlier on this col — neutralize it so
     totals stay within 1320 and the right edge never gets clipped */
    .hero-row-2 .col-right {
        padding-right: 15px !important; /* match Row 1’s right gutter */
    }

    .hero-bs .cta-card,
    .hero-bs .type-card {
        width: 100% !important; /* override 880px / 391px */
        max-width: none;
    }
}

/* Only overlap the laptop at ≥ lg (1200px in your setup) */
@media (min-width: 1200px) {
    .hero-simple .laptop-wrap {
        position: relative;
        z-index: 5; /* above the blue CTA */
        height: 0; /* <- no layout height */
        overflow: visible; /* allow the laptop to show */
    }

        /* move the *child* (figure) instead of the column */
        .hero-simple .laptop-wrap .laptop {
            z-index: 5;
            transform: translate(-404px, -425px); /* your figma offsets */
            position: absolute; /* <- out of flow */
            top: -68px;
            left: -85px;
            width: 1080px;
            height: 755px;
        }

    /* the carousel should not be translated */
    .hero-simple .size-card {
        margin-left: 6px; /* remove the compensating nudge */
    }

    /* Content width is 1272px (1320 - 48 padding), 58% ≈ 738px */
    .hero-row-2 .col-left {
        flex: 0 0 42%;
        max-width: 42%;
        padding-right: 12px;
    }

    .hero-row-2 .col-right {
        flex: 0 0 58%;
        max-width: 58%;
        padding-left: 12px;
        padding-right: 15px !important;
    }

    .hero-row-2 .size-card {
        width: 711px; /* fixed figma width */
        height: 162px;
        margin-left: auto; /* stick to the right edge */
    }
}

body.home .video-side {
    width: 90%;
    height: 90%;
    position: relative;
    margin-top: 9.5%;
    margin-left: 10%;
}

@media (max-width: 1200px) {
    body.home .video-side {
        width: 100%;
        height: 100%;
        margin-left: 0%;
    }
}

@media (max-width: 970px) {
    body.home .video-side {
        width: 100%;
        height: 100%;
        margin-left: 4%;
        margin-bottom: 0px;
        margin-top: 40px;
    }
}

@media (max-width: 700px) {
    body.home .video-side {
        width: 100%;
        height: 100%;
        margin-left: 4%;
        margin-bottom: 80px;
        margin-top: 10px;
    }
}

body.home .video-side video {
    box-sizing: border-box;
    background-size: 100% 100%;
    padding: 0% 13.88% 4.3% 14%;
    top: 0%;
    left: 0%;
    width: 94%;
    height: 88%;
}

@media (max-width:1600px) {
    .hero-bs .cta-card .btn {
        margin-top: 20px;
    }
}

@media (min-width: 1200px) and (max-width:1439.98px) {
    body.home .video-side .video {
        box-sizing: border-box !important;
        background-size: 100% 100% !important;
        padding: 0% 13.88% 4.3% 14% !important;
        top: 0% !important;
        left: 0% !important;
        width: 94% !important;
        height: 88% !important;
    }
}

/* 970–1199: CTA + laptop on row 1, two tiles side-by-side on row 2 */
@media (min-width:700px) and (max-width:1199.98px) {

    /* Make the stage a 2-col grid */
    .hero-bs {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        column-gap: 24px;
        row-gap: 24px;
        align-items: stretch !important;
        position: relative;
        /* ===== NEW: bleed knobs (default OFF for 970–1200) ===== */
        --cta-bleed: 0px; /* how far the blue bg extends left */
        --lap-bleed-x: 0px; /* extra laptop shift left */
    }

    /* Collapse the .row wrappers so their children become grid items */
    .hero-row-1,
    .hero-row-2 {
        display: contents;
    }

    /* IMPORTANT: neutralize Bootstrap’s lg column caps while they’re grid items */
    .hero-bs .col-lg-4,
    .hero-bs .col-lg-6,
    .hero-bs .col-lg-8 {
        flex: initial !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important; /* allows nice shrinking in grid */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Kill row overhangs inside this grid */
    .hero-bs > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The CTA column creates the grid area the laptop sits over */
    .hero-row-1 > .col-lg-8 {
        grid-column: 1 / -1;
        grid-row: 1;
        position: relative;
        z-index: 1;
    }

        /* ===== NEW: bleed the blue background left using ::before ===== */
        .hero-row-1 > .col-lg-8::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: calc(var(--cta-bleed) * -1);
            right: 0;
            background: #005CB9;
            border-radius: 40px 0 40px 0;
            z-index: 0;
            pointer-events: none;
        }

        /* Ensure CTA content sits above the bleed layer */
        .hero-row-1 > .col-lg-8 .cta-card {
            position: relative;
            z-index: 1;
        }

    /* The laptop wrapper shares the same grid area as the CTA */
    .hero-simple .laptop-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
        position: relative;
        height: 0; /* no layout height, we overlay */
        overflow: visible;
        z-index: 2;
    }

    /* knobs you can tune */
    .hero-bs {
        --lap-x: -7%; /* left nudge  */
        --lap-y: -10%; /* up nudge    */
        --lap-scale: .84; /* overall size (make smaller to look shorter) */
        --tile-h: 328px;
    }

    .hero-simple .laptop-wrap .laptop {
        z-index: 5;
        /* ===== CHANGED: keep your figma translate, add extra bleed only under 970 ===== */
        transform: translate(-404px, -425px) translateX(var(--lap-bleed-x));
        position: absolute; /* <- out of flow */
        top: 330px;
        left: 320px;
        width: 600px;
        height: 430px;
    }

    /* Row 2: side-by-side tiles */
    .hero-row-2 .col-right { /* Order By Size card */
        grid-column: 1 / 2;
        grid-row: 2;
        position: relative;
        z-index: 3;
    }

    .hero-row-1 > .col-lg-4 { /* Transfer Type card (from row 1) */
        grid-column: 2 / 3;
        grid-row: 2;
        position: relative;
        z-index: 3;
    }

    /* 2) Make BOTH row-2 tiles stretch */
    .hero-row-2 .col-right,
    .hero-row-1 > .col-lg-4 {
        align-self: stretch;
        height: var(--tile-h) !important; /* you already use --tile-h */
    }

    /* No fixed widths on tiles in this band */
    .hero-bs .cta-card,
    .hero-bs .type-card,
    .hero-bs .size-card {
        width: 100% !important;
        max-width: none !important;
    }

    .hero-bs .cta-card,
    .hero-bs .type-card,
    .hero-bs .size-card {
        height: var(--tile-h) !important; /* all three = 328px */
    }

    /* Make the content actually fill the forced height */
    .hero-bs .type-card__media,
    .hero-bs .type-card__img {
        height: 100%;
    }

    .hero-bs .type-card__img {
        width: 100%;
        object-fit: cover;
    }

    /* size-card internals must stretch too */
    .hero-bs .size-card .carousel,
    .hero-bs .size-card .carousel-inner,
    .hero-bs .size-card .carousel-item,
    .hero-bs .size-card .col-5,
    .hero-bs .size-card .col-7 {
        height: 100% !important;
    }

    /* Keep CTA text clear of the laptop */
    .hero-bs .cta-card {
        padding-left: 540px !important;
        padding-right: 26px !important;
    }

    /* Make the two lower tiles the same height as CTA */
    .hero-bs .type-card,
    .hero-bs .size-card {
        height: 328px !important;
    }

    .hero-bs .size-card {
        height: 330px !important;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 40px 0 40px 0;
    }

    /* ValueProp container */
    .hero-row-2 .txp-valueprop {
        width: 100%;
        max-width: none !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 24px;
        column-gap: 32px;
        padding: 24px 28px;
        margin-left: 0;
        height: 100% !important;
    }

    .hero-row-2 .txp-valueprop__item {
        width: 100%;
    }

    .hero-row-2 .txp-valueprop__sep {
        display: none;
    }

    /* ... keep the rest of your carousel + socialproof rules unchanged ... */

    body.home .hero-socialproof {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    body.home .hero-socialproof {
        grid-column: 1 / -1;
    }

    body.home .hero-socialproof__inner {
        max-width: 920px;
        width: 100%;
        margin: 0 auto;
        padding: 0 24px;
    }

    body.home .hero-socialproof__top {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
}

/* 700–969: keep Bootstrap layout; only bleed BLUE + overlay LAPTOP */
@media (min-width:700px) and (max-width:969.98px) {

    /* how far the blue/laptop bleeds left (tune) */
    body.home .hero-bs {
        --bleed: clamp(120px, calc(624px - 52vw), 260px);
    }

    /* draw the blue “spill” behind the CTA area */
    body.home .hero-row-1 > .col-lg-8 {
        position: relative;
        overflow: visible !important;
    }

        body.home .hero-row-1 > .col-lg-8::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: calc(-1 * var(--bleed));
            background: #005CB9;
            border-top-left-radius: 40px;
            border-bottom-right-radius: 40px;
            z-index: 0;
        }

    /* CTA card sits above the ::before */
    body.home .hero-bs .cta-card {
        position: relative;
        z-index: 1;
        background: transparent !important;
        overflow: visible !important;
        /* keep copy clear of the laptop */
        padding: 32px 26px 32px clamp(360px, 53vw, 560px) !important;
    }

    /* KEY: laptop-wrap must have NO layout height so it can overlap up */
    body.home .hero-simple .laptop-wrap {
        position: relative;
        height: 0;
        overflow: visible;
        z-index: 2;
        margin-bottom: 0 !important; /* fights mb-4 on this breakpoint */
    }

        /* pull the laptop left+up to overlap the blue panel */
        body.home .hero-simple .laptop-wrap .laptop {
            position: absolute !important;
            left: calc(-1 * var(--bleed)) !important;
            top: -70px !important;
            transform: scale(.98) !important;
            transform-origin: left top;
            max-width: none !important;
            pointer-events: none;
        }

    /* optional: if mt-4 is pushing row 2 down too much in this band */
    body.home .hero-simple .hero-row-2 {
        margin-top: 0 !important;
    }

    .hero-section.hero-simple .hero-inner {
        padding-bottom: 16px !important; /* lighter cushion for this band */
    }
}

/* 380–699: stack everything vertically, no bleed */
@media (min-width:0px) and (max-width:699.98px) {
    .hero-row-1,
    .hero-row-2 {
        display: flex !important;
        flex-direction: column;
    }

    .hero-section.hero-simple {
        padding-bottom: 0px !important;
        margin-bottom: 0 !important;
    }

    .hero-bs {
        display: flex !important;
        flex-direction: column;
        gap: 24px;
        row-gap: 10px;
    }

    .hero-row-1,
    .hero-row-2 {
        display: contents !important; /* exposes columns as flex items */
    }

    /* Full-width columns */
    .hero-bs [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reorder */
    .hero-row-1 > .col-lg-8 {
        order: 1;
    }
    /* CTA */
    .hero-row-2 .col-left {
        order: 2;
    }
    /* Laptop -> second */
    .hero-row-1 > .col-lg-4 {
        order: 3;
    }
    /* Transfer Type */
    .hero-row-2 .col-right {
        order: 4;
    }
    /* Size card */

    .hero-row-1 > .col-lg-8::before {
        content: none !important;
    }
    /* cancel bleed bg */

    .hero-bs .cta-card {
        padding: 28px 20px !important; /* simple, even padding */
    }

    .hero-simple .laptop-wrap {
        position: relative !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important; /* outer allows bleed */
        height: auto !important;
    }

    /* DO NOT absolute-position inside the Bootstrap column */
    .hero-simple .laptop {
        position: relative !important;
        width: 880px !important; /* adjust */
        max-width: none !important;
        margin: 0 !important;
        line-height: 0; /* prevents weird inline gaps if any */
        left: 86px !important;
        transform: translate(calc(100vw - 100% - 48px), -40px) !important;
    }

    .hero-simple .laptop-crop {
        height: 470px !important;
        overflow: hidden !important; /* make it explicit & predictable */
        position: relative;
        padding-right: 140px !important;
        margin-right: -140px !important;
    }

    body.home .video-side {
        width: 100%;
        height: 100%;
        margin-left: 4%;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }

        body.home .video-side video {
            top: 0% !important;
            left: 0% !important;
            width: 95% !important;
            height: 88% !important;
        }

    .hero-bs .type-card {
        margin: -70px 0 12px !important;
    }

    /* kill any debug outline that may be lingering */
    .hero-simple .laptop-wrap {
        outline: none !important;
    }

    /* no left-bleed background at this size */
    .hero-row-1 > .col-lg-8::before {
        content: none !important;
    }

    .hero-bs .cta-card .cta-title {
        margin-top: 10px !important;
    }

    .hero-bs .cta-card .btn {
        margin-top: 10px !important;
    }

    /* Stack the two lower cards */
    .hero-row-2 {
        margin-top: 12px !important; /* was 20px */
    }

        .hero-row-2 .col-left,
        .hero-row-2 .col-right {
            margin-bottom: 16px;
        }

    /* give the card a real height at this size */
    body.home .hero-bs .size-card {
        height: clamp(220px, 58vw, 320px) !important;
        width: 100% !important;
    }

    /* Bootstrap carousel needs these to be 100% for the inner to fill */
    body.home #heroSizeCarousel,
    body.home #heroSizeCarousel .carousel-inner,
    body.home #heroSizeCarousel .carousel-item {
        height: 100% !important;
    }

        /* your new slide wrapper should fill the card */
        body.home #heroSizeCarousel .hero-slide-link,
        body.home #heroSizeCarousel .hero-slide {
            display: block;
            height: 100%;
        }

        /* image fills the card */
        body.home #heroSizeCarousel .hero-slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* keep your caption overlay behaving */
        body.home #heroSizeCarousel .hero-slide-caption {
            position: absolute;
            left: 30px;
            text-align:left;
            right: 0;
            bottom: 0;
        }

    /* Comfortable type sizes on small screens */
    .hero-bs .cta-subtitle {
        font-size: clamp(28px, 7vw, 36px);
    }

    .hero-bs .cta-description {
        font-size: 16px;
    }

    body.home .hero-bs .hero-socialproof {
        order: 999 !important; /* always last */
        width: 100%;
        margin-bottom: 40px !important;
    }

    /* ValueProp container */
    .hero-row-2 .txp-valueprop {
        width: 100%;
        max-width: none !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 24px;
        column-gap: 32px;
        padding: 24px 28px;
        margin-left: 0;
        height: 100% !important;
        margin-top: 30px;
    }

    .hero-row-2 .txp-valueprop__item {
        width: 100%;
    }

    .hero-row-2 .txp-valueprop__sep {
        display: none;
    }

    body.home .hero-simple .hero-title-wrap.mb-5 { /* wrapper */
        text-align: center !important;
    }

        body.home .hero-simple .hero-title-wrap.mb-5 > h1.hero-title { /* actual H1 */
            max-width: 100% !important;
            display: block !important;
            margin: 0 auto !important;
            text-align: center !important;
            background-image: linear-gradient(90deg, #005CB9 0%, #005CB9 64%, #5B6AC7 70%, #C23B45 82%, #FF2E1E 90%, #FF2E1E 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }

    .hero-bs .cta-card .btn {
        margin-top: 30px !important;
    }
}

/* sm-width weird zone: keep keyboard overflow window but nudge laptop left
   so it aligns with section margin (Figma): */
@media (min-width: 668px) and (max-width: 699.98px) {
    .hero-simple .laptop {
        transform: translate(calc(100vw - 100% - 48px - 15px), -40px) !important;
        /*                                             ^ nudge LEFT */
    }
}

@media (min-width:0px) and (max-width:370px) {
    .hero-bs .cta-card .btn {
        margin-top: 0px !important;
    }
}

/* HOME ONLY: fix “Get Your T-Shirt Business Started” video cards between 440–900 */
@media (min-width:0px) and (max-width:900px) {

    body.home .summary-video .video-image-link {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 991px) {
    .tw-step-tab {
        margin-top: 20px !important;
    }
}

/* Tighten the bottom of the hero on phones */
@media (max-width: 699.98px) {
    /* Remove the inner 80px pad that’s causing most of the gap */
    .hero-section.hero-simple .hero-inner {
        padding-bottom: 8px !important; /* was 80px */
    }

    /* Make sure no Bootstrap mb-4 survives on the laptop column */
    .hero-section.hero-simple .laptop-wrap.mb-4 {
        margin-bottom: 0 !important;
    }

    /* Ensure the last row/cards don’t add extra bottom margin */
    .hero-section.hero-simple .hero-row-2 {
        margin-bottom: 0 !important;
    }

        .hero-section.hero-simple .hero-row-2 > [class*="col-"]:last-child,
        .hero-section.hero-simple .card {
            margin-bottom: 0 !important;
        }

    /* If the next block is the Trustpilot wrapper, trim its top padding */
    .hero-section.hero-simple + .trust-pilot-widget-style {
        padding-top: 12px !important; /* was 50px */
        margin-top: 0 !important;
    }
}


/* Fallback art when no image is available */
.social-card .sc-fallback {
    aspect-ratio: 16 / 9; /* keeps a nice media shape */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.social-card .sc-fallback-text {
    font-family: Raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* keep it tidy */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Brand-ish gradients */
.social-card--facebook .sc-fallback {
    background: linear-gradient(135deg,#1778f2,#48a0ff);
}

.social-card--instagram .sc-fallback {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-card--x .sc-fallback,
.social-card--twitter .sc-fallback {
    background: linear-gradient(135deg,#0f1419,#1f2937);
}

.social-card--tiktok .sc-fallback {
    background: linear-gradient(135deg,#fe2c55,#25f4ee);
}

.social-card--youtube .sc-fallback {
    background: linear-gradient(135deg,#ff0000,#ff5757);
}

.social-card--linkedin .sc-fallback {
    background: linear-gradient(135deg,#0a66c2,#3ba0f2);
}

.social-card--pinterest .sc-fallback {
    background: linear-gradient(135deg,#bd081c,#e03a49);
}

.social-card--social .sc-fallback {
    background: linear-gradient(135deg,#5b6ac7,#c23b45);
}

/* Make a consistent media box */
.social-card .sc-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #ECECEC; /* blends */
    overflow: hidden;
    position: relative;
}

    /* Image fills the media box */
    .social-card .sc-media > img.card-img-top {
        width: 100%;
        height: 100%;
        object-position: center;
        display: block;
    }

    /* Default: cover (no ugly bars) */
    .social-card .sc-media > img.card-img-top {
        object-fit: cover;
    }

        /* Only when you want to preserve wide text: contain */
        .social-card .sc-media > img.card-img-top.fit-contain {
            object-fit: contain;
        }

/* Rotating hero subheadings – simple, layout-safe */
.hero-subheading-rotator {
    display: inline-block; /* behaves like the old single hero-title wrapper */
}

    /* all subheadings hidden by default */
    .hero-subheading-rotator .hero-subheading-slide {
        display: none;
    }

        /* only the active one is shown + animated */
        .hero-subheading-rotator .hero-subheading-slide.is-active {
            display: inline-block; /* keep same look as .hero-title */
            animation: heroSubheadingSlideUp 0.6s ease;
        }

@keyframes heroSubheadingSlideUp {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.row-sheets-msg {
    text-align: right;
    color: green;
}

/*.single-image-msg, .gang-sheet-msg {
font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-weight: 700;
font-size: 18px;
color: #424242;
}*/

/*.gangsheet-msg {
font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-weight: 700;
font-size: 18px;
color: #424242;
}*/

@media (min-width: 1600px) {
    .hero-bs .hero-row-1 .cta-card {
        --bleed: 40px; /* tune */
        width: calc(100% + var(--bleed));
        margin-left: calc(-1 * var(--bleed));
    }
}

/* Make the slide behave like a card */
#heroSizeCarousel .carousel-item,
#heroSizeCarousel .hero-slide-link {
    height: 100%;
    display: block;
}

#heroSizeCarousel .hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* important for radius */
    border-radius: 40px 0 40px 0; /* match your card */
}

/* Image should cover the entire slide */
#heroSizeCarousel .hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark fade behind text for readability */
#heroSizeCarousel .hero-slide::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* Caption on top of fade */
#heroSizeCarousel .hero-slide-caption {
    position: absolute;
    left: 28px;
    text-align: left;
    bottom: 22px;
    z-index: 2;
    max-width: 80%;
    color: #fff;
}

    /* Scope richtext defaults so it looks intentional */
    #heroSizeCarousel .hero-slide-caption h5 {
        margin: 0 0 8px 0;
    }

    #heroSizeCarousel .hero-slide-caption p {
        margin: 0;
    }

#heroSizeCarousel .hero-slide-caption {
    color: var(--txp-yellow);
    font-family: "Ubuntu Sans", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 149%;
    margin: 0 0 8px 0;
    left: 30px;
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

#heroSizeCarousel .hero-slide-link {
    color: inherit;
    text-decoration: none;
}

/* Restore Bootstrap's visibility rules */
#heroSizeCarousel .carousel-item {
    display: none;
}

    #heroSizeCarousel .carousel-item.active,
    #heroSizeCarousel .carousel-item-next,
    #heroSizeCarousel .carousel-item-prev {
        display: block;
    }

    /* Optional: guarantee only the active caption is visible */
    #heroSizeCarousel .carousel-item .hero-slide-caption {
        opacity: 0;
    }

    #heroSizeCarousel .carousel-item.active .hero-slide-caption {
        opacity: 1;
    }

/* ===== ValueProp control ===== */
.txp-valueprop {
    display: grid;
    grid-template-columns: 117px 1px 117px 1px 117px 1px 117px;
    align-items: center;
    justify-content: center;
    column-gap: 26px; /* creates the breathing room around the 1px divider */

    width: 709px;
    height: 138px;
    padding: 0 26px;
    background: #F4F4F4;
    border-radius: 40px 0;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);
    margin-left: auto;
    margin-right: -42px;
}

/* last separator shouldn’t exist (or hide it) */
.txp-valueprop__sep:last-child {
    display: none;
}

/* each item */
/* item needs to be positioning context for divider */
.hero-row-2 .txp-valueprop__item {
    display: grid; /* make it a real box */
    width: 100%; /* fill the 117px column */
    position: relative;
    padding: 18px 0 16px; /* controls top/bottom cut */
    text-align: center;
    justify-items: center; /* <-- this is the missing one */
    align-content: start; /* keeps it from stretching weirdly */
}

/* icon */
.txp-valueprop__icon {
    place-items: center; /* stronger than flex for SVGs */
    width: 51.136px;
    height: 51.136px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txp-blue);
    margin-bottom: 10px;
}

    /* normalize FA svg/i sizes */
    .txp-valueprop__icon i,
    .txp-valueprop__icon svg {
        display: block;
        margin: 0 auto;
        width: 51.136px;
        height: 51.136px;
        font-size: 51.136px;
    }

/* text */
.txp-valueprop__text {
    width: 117px;
    min-height: 34px;
    font-family: Raleway, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* separators: “cut” top/bottom (don’t touch icon/text) */
.txp-valueprop__sep {
    background: #D0CFCF;
    width: 1px;
    align-self: stretch;
    margin: 18px 0 16px; /* top/bottom cut */
}

/* only in the hero right column area */
.hero-row-2 .col-right {
    padding-right: 0 !important;
    margin-right: 0 !important;
    overflow: visible; /* default, but make it explicit */
}

/* only in the hero right column area */
.hero-row-2 .col-right {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* tile link should look like a tile, not a hyperlink */
.hero-row-2 .txp-valueprop__item,
.hero-row-2 .txp-valueprop__item:visited,
.hero-row-2 .txp-valueprop__item:hover,
.hero-row-2 .txp-valueprop__item:focus,
.hero-row-2 .txp-valueprop__item:active {
    color: var(--txp-blue); /* same as icons */
    text-decoration: none !important; /* kill underline */
    outline: none;
}

/* ensure the label inherits the tile color */
.hero-row-2 .txp-valueprop__text {
    text-decoration: none;
    color: var(--txp-black);
    text-align: center;
    font-family: Raleway;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 123.077% */
}

/* ===== Hero Social Proof (Trustpilot) ===== */
.hero-socialproof {
    text-align: center;
    margin-top: 60px;
}

.hero-socialproof__inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* star badge (45x45) */
.hero-socialproof__badge {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #17AE70;
}

.hero-socialproof__badge-img {
    width: 45px;
    height: 45px;
    display: block;
    object-fit: cover;
}

/* title */
.hero-socialproof__title {
    font-family: Ubuntu, sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    background: linear-gradient(269deg, #DF271C 15.11%, #005CB9 52.59%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* body text (Kentico richtext) */
.hero-socialproof__text {
    color: #000;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 920px; /* keeps it readable on ultrawide */
}

    /* Kentico often wraps in <p> */
    .hero-socialproof__text p {
        margin: 0;
    }

@media (max-width: 575.98px) {
    .hero-socialproof__title {
        font-size: 26px;
    }

    .hero-socialproof__text {
        font-size: 16px;
    }
}

.hero-socialproof__top {
    display: inline-flex; /* keeps it tight and centered */
    align-items: center;
    gap: 12px;
    justify-content: center;
    white-space: nowrap; /* prevents breaking into two lines */
}

.hero-socialproof__title {
    margin: 0; /* kill default block spacing */
    display: inline-block; /* ensures it can sit next to the badge */
}

/* if it still wraps on smaller widths, allow wrap only then */
@media (max-width: 480px) {
    .hero-socialproof__top {
        white-space: normal;
    }
}

/* 1) Disable slide and use fade */
#heroSizeCarousel.carousel .carousel-item,
#heroSizeCarousel.carousel .carousel-item-next,
#heroSizeCarousel.carousel .carousel-item-prev,
#heroSizeCarousel.carousel .carousel-item.active {
    transform: none !important;
}

#heroSizeCarousel.carousel .carousel-item {
    opacity: 0;
    transition: opacity .6s ease !important;
    display: block !important;
    position: absolute;
    inset: 0;
}

    #heroSizeCarousel.carousel .carousel-item.active {
        opacity: 1;
        position: relative;
    }

/* 2) Caption animation (fine to keep) */
#heroSizeCarousel .hero-slide-caption.hero-subheading-slide {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
}

#heroSizeCarousel .carousel-item.active .hero-slide-caption.hero-subheading-slide {
    opacity: 1;
    transform: translateY(0);
}

/* 3) Zoom MUST come last */
#heroSizeCarousel .hero-slide {
    overflow: hidden;
}

#heroSizeCarousel .hero-slide-img--zoom {
    transform: scale(1.10) translateZ(0);
    transition: transform 1.2s ease;
    will-change: transform;
}

#heroSizeCarousel .carousel-item.active .hero-slide-img--zoom {
    transform: scale(1) translateZ(0);
}

/* 992–1199: WRAP like a grid (Bootstrap controls columns) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .video-band-5 {
        flex-wrap: wrap; /* allow wrap */
        overflow: visible; /* no scroll */
    }

        .video-band-5 .video-image-link {
            width: 100%;
            max-width: 100%;
        }
}

/* 1200+: FORCE 5-up */
@media (min-width: 1200px) {
    .video-band-5 {
        flex-wrap: nowrap;
    }

        .video-band-5 > [class*="col-"] {
            flex: 0 0 20%;
            max-width: 20%;
        }

        .video-band-5 .video-image-link {
            width: 100%;
            max-width: none;
        }

            .video-band-5 .video-image-link img {
                width: 100%;
                height: auto;
                display: block;
            }
}

/* 1200+: FORCE 5-up */
@media (max-width: 991px) {
    .tw-step-1 {
        height: auto !important;
    }
}

@media (max-width: 720px) {
    .subscribe-title {
        font-size: 42px !important;
    }

    .subscribe-subtitle {
        font-size: 20px !important;
    }
}

@media (min-width:1200px) {
    .txp-valueprop {
        margin-top: 8px !important;
    }
}

/* Ensure inactive slides don't catch clicks */
.carousel-item {
    pointer-events: none;
    z-index: 0;
}

    /* Only the active slide can be clicked */
    .carousel-item.active {
        pointer-events: auto;
        z-index: 1;
    }