.hero-slider {
    position: relative;
    min-height: clamp(680px, 78vh, 880px);
    overflow: hidden;
    color: var(--text);
    background: var(--background);
    border-bottom: 1px solid var(--border);
    isolation: isolate;
}

.hero-slider__viewport {
    position: relative;
    min-height: inherit;
}

.home-banner {
    position: absolute;
    inset: 0;
    min-height: inherit;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 900ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 900ms;
}

    .home-banner.is-active {
        z-index: 2;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: scale(1);
        transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 900ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
    }

.home-banner__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-image: var( --banner-bg-light, linear-gradient( 135deg, var(--surface), var(--surface-strong) ) );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 280ms ease;
}

html[data-theme="dark"]
.home-banner__background {
    background-image: var( --banner-bg-dark, linear-gradient( 135deg, #111116, #1d1d24 ) );
}

.home-banner__background::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient( 90deg, color-mix( in srgb, var(--background) 94%, transparent ) 0%, color-mix( in srgb, var(--background) 74%, transparent ) 43%, color-mix( in srgb, var(--background) 10%, transparent ) 74%, transparent 100% );
}

html[dir="rtl"]
.home-banner__background::before {
    background: linear-gradient( 270deg, color-mix( in srgb, var(--background) 94%, transparent ) 0%, color-mix( in srgb, var(--background) 74%, transparent ) 43%, color-mix( in srgb, var(--background) 10%, transparent ) 74%, transparent 100% );
}

.home-banner__background::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.18;
    background-image: linear-gradient( var(--border) 1px, transparent 1px ), linear-gradient( 90deg, var(--border) 1px, transparent 1px );
    background-size: 70px 70px;
    mask-image: linear-gradient( to bottom, #000, transparent 92% );
}

.home-banner--crimson {
    --slide-accent: #ef3438;
    --slide-accent-soft: rgba(239, 52, 56, 0.18);
}

.home-banner--gold {
    --slide-accent: #c98a22;
    --slide-accent-soft: rgba(201, 138, 34, 0.2);
}

.home-banner--navy {
    --slide-accent: #3468ef;
    --slide-accent-soft: rgba(52, 104, 239, 0.2);
}

.home-banner--forest {
    --slide-accent: #16835f;
    --slide-accent-soft: rgba(22, 131, 95, 0.2);
}

.home-banner__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.home-banner__shape--one {
    top: 13%;
    inset-inline-end: 8%;
    width: min(38vw, 570px);
    aspect-ratio: 1;
    background: radial-gradient( circle at 35% 30%, color-mix( in srgb, var(--slide-accent) 84%, #ffffff ), var(--slide-accent) 48%, transparent 72% );
    opacity: 0.9;
    box-shadow: 0 40px 120px var(--slide-accent-soft);
}

.home-banner__shape--two {
    right: 31%;
    bottom: -31%;
    width: min(27vw, 410px);
    aspect-ratio: 1;
    background: color-mix( in srgb, var(--surface) 88%, var(--slide-accent) 12% );
    border: 1px solid var(--border);
    opacity: 0.82;
}

html[dir="rtl"]
.home-banner__shape--two {
    right: auto;
    left: 31%;
}

.home-banner__wordmark {
    position: absolute;
    top: 50%;
    inset-inline-end: -0.04em;
    color: color-mix( in srgb, var(--text) 7%, transparent );
    font-size: clamp(110px, 17vw, 300px);
    font-weight: 950;
    letter-spacing: -0.085em;
    line-height: 0.78;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    user-select: none;
}

.home-banner__layout {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: inherit;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    align-items: center;
    gap: clamp(28px, 6vw, 100px);
    padding-top: clamp(50px, 6vw, 86px);
    padding-bottom: clamp(106px, 12vw, 145px);
}

.home-banner__content {
    position: relative;
    z-index: 4;
    max-width: 760px;
}

.home-banner__index {
    display: flex;
    width: min(190px, 42vw);
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
}

    .home-banner__index i {
        height: 1px;
        flex: 1;
        background: var(--border);
    }

.home-banner__eyebrow {
    margin: 0 0 16px;
    color: var(--slide-accent);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1.6;
    text-transform: uppercase;
}

.home-banner__title {
    max-width: 800px;
    margin: 0;
    font-size: clamp(48px, 6.4vw, 104px);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 0.98;
    text-wrap: balance;
}

html[lang="ar"] .home-banner__title {
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.home-banner__text {
    max-width: 590px;
    margin: 25px 0 0;
    color: var(--muted);
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.9;
    text-wrap: pretty;
}

.home-banner__button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
    padding: 13px 22px;
    color: #ffffff;
    background: var(--slide-accent);
    border: 1px solid var(--slide-accent);
    border-radius: 999px;
    box-shadow: 0 14px 35px var(--slide-accent-soft);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

    .home-banner__button svg {
        width: 21px;
        height: 21px;
        transition: transform 220ms ease;
    }

html[dir="rtl"]
.home-banner__button svg {
    transform: scaleX(-1);
}

.home-banner__button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 18px 46px var(--slide-accent-soft);
}

    .home-banner__button:hover svg {
        transform: translateX(4px);
    }

html[dir="rtl"]
.home-banner__button:hover svg {
    transform: scaleX(-1) translateX(4px);
}

.home-banner__model {
    position: relative;
    align-self: stretch;
    min-height: 500px;
    pointer-events: none;
}

    .home-banner__model picture {
        position: absolute;
        inset: 0;
        display: grid;
        align-items: end;
        justify-items: center;
    }

    .home-banner__model img {
        width: min(100%, 820px);
        height: 100%;
        max-height: 760px;
        object-fit: contain;
        object-position: center bottom;
        filter: drop-shadow( 0 30px 40px rgba(0, 0, 0, 0.18) );
        transform-origin: center bottom;
    }

.home-banner__model-fallback {
    position: absolute;
    right: 7%;
    bottom: 0;
    left: 7%;
    height: 88%;
    opacity: 0.78;
}

    .home-banner__model-fallback span {
        position: absolute;
        display: block;
        background: linear-gradient( 160deg, color-mix( in srgb, var(--slide-accent) 92%, #ffffff ), color-mix( in srgb, var(--slide-accent) 58%, #050505 ) );
        box-shadow: 0 30px 80px var(--slide-accent-soft);
    }

        .home-banner__model-fallback span:nth-child(1) {
            top: 4%;
            left: 50%;
            width: 25%;
            aspect-ratio: 1;
            border-radius: 50%;
            transform: translateX(-50%);
        }

        .home-banner__model-fallback span:nth-child(2) {
            top: 24%;
            left: 24%;
            width: 52%;
            height: 54%;
            border-radius: 42% 42% 25% 25% / 25% 25% 18% 18%;
        }

        .home-banner__model-fallback span:nth-child(3) {
            right: 19%;
            bottom: 0;
            left: 19%;
            height: 38%;
            border-radius: 28% 28% 8% 8% / 16% 16% 5% 5%;
        }

.hero-slider__controls {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.hero-slider__controls-inner {
    display: grid;
    min-height: 92px;
    grid-template-columns: auto auto minmax(120px, 1fr);
    align-items: center;
    gap: 20px;
    padding-block: 16px;
    pointer-events: auto;
}

.hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-slider__dot {
    position: relative;
    display: inline-flex;
    min-width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--muted);
    background: color-mix( in srgb, var(--surface) 84%, transparent );
    border: 1px solid var(--border);
    border-radius: 50%;
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

    .hero-slider__dot span {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }

    .hero-slider__dot:hover,
    .hero-slider__dot.is-active {
        color: #ffffff;
        background: var(--accent);
        border-color: var(--accent);
        transform: translateY(-2px);
    }

.hero-slider__navigation {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-slider__arrow {
    display: inline-flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text);
    background: color-mix( in srgb, var(--surface) 84%, transparent );
    border: 1px solid var(--border);
    border-radius: 50%;
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

    .hero-slider__arrow svg {
        width: 20px;
        height: 20px;
    }

html[dir="rtl"]
.hero-slider__arrow svg {
    transform: scaleX(-1);
}

.hero-slider__arrow:hover {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.hero-slider__progress {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: var(--border);
    border-radius: 999px;
}

    .hero-slider__progress span {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--accent);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left center;
    }

html[dir="rtl"]
.hero-slider__progress span {
    transform-origin: right center;
}

.home-banner:not(.is-active)
.home-banner__index,
.home-banner:not(.is-active)
.home-banner__eyebrow,
.home-banner:not(.is-active)
.home-banner__title,
.home-banner:not(.is-active)
.home-banner__text,
.home-banner:not(.is-active)
.home-banner__button {
    opacity: 0;
    transform: translateY(28px);
}

.home-banner.is-active
.home-banner__index,
.home-banner.is-active
.home-banner__eyebrow,
.home-banner.is-active
.home-banner__title,
.home-banner.is-active
.home-banner__text,
.home-banner.is-active
.home-banner__button {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms cubic-bezier(.22, 1, .36, 1), transform 650ms cubic-bezier(.22, 1, .36, 1);
}

.home-banner.is-active
.home-banner__eyebrow {
    transition-delay: 80ms;
}

.home-banner.is-active
.home-banner__title {
    transition-delay: 150ms;
}

.home-banner.is-active
.home-banner__text {
    transition-delay: 220ms;
}

.home-banner.is-active
.home-banner__button {
    transition-delay: 290ms;
}

.home-banner:not(.is-active)
.home-banner__model img,
.home-banner:not(.is-active)
.home-banner__model-fallback {
    opacity: 0;
    transform: translateX(70px) scale(0.96);
}

html[dir="rtl"]
.home-banner:not(.is-active)
.home-banner__model img,
html[dir="rtl"]
.home-banner:not(.is-active)
.home-banner__model-fallback {
    transform: translateX(-70px) scale(0.96);
}

.home-banner.is-active
.home-banner__model img,
.home-banner.is-active
.home-banner__model-fallback {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: opacity 850ms cubic-bezier(.22, 1, .36, 1) 120ms, transform 950ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

.home-introduction {
    padding-block: clamp(70px, 9vw, 130px);
    background: var(--background);
}

.home-introduction__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: end;
    gap: clamp(30px, 7vw, 110px);
}

.home-introduction__eyebrow {
    margin: 0 0 14px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-introduction h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(38px, 5.6vw, 86px);
    letter-spacing: -0.055em;
    line-height: 1.03;
}

html[lang="ar"] .home-introduction h2 {
    letter-spacing: -0.025em;
    line-height: 1.13;
}

.home-introduction__grid > p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.95;
}

.home-features {
    padding-block: clamp(55px, 8vw, 100px);
    background: var(--surface);
    border-block: 1px solid var(--border);
}

.home-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
}

.home-feature {
    min-height: 230px;
    padding: clamp(28px, 4vw, 50px);
    background: var(--surface);
}

.home-feature__number {
    display: inline-block;
    margin-bottom: 30px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.home-feature h2 {
    margin: 0;
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.2;
}

.home-feature p {
    max-width: 360px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 1100px) {
    .hero-slider {
        min-height: 760px;
    }

    .home-banner__layout {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 0.85fr);
        gap: 20px;
    }

    .home-banner__title {
        font-size: clamp(46px, 7.4vw, 80px);
    }
}

@media (max-width: 850px) {
    .hero-slider {
        min-height: 820px;
    }

    .home-banner__layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(350px, 43vh) auto;
        align-items: stretch;
        gap: 0;
        padding-top: 0;
        padding-bottom: 112px;
    }

    .home-banner__model {
        grid-row: 1;
        min-height: 350px;
        order: -1;
    }

        .home-banner__model img {
            max-height: 455px;
        }

    .home-banner__content {
        grid-row: 2;
        align-self: start;
        max-width: 680px;
        margin-top: -18px;
    }

    .home-banner__background::before,
    html[dir="rtl"]
    .home-banner__background::before {
        background: linear-gradient( to bottom, transparent 0%, color-mix( in srgb, var(--background) 18%, transparent ) 34%, color-mix( in srgb, var(--background) 92%, transparent ) 64%, var(--background) 100% );
    }

    .home-banner__shape--one {
        top: 4%;
        inset-inline-end: -8%;
        width: min(78vw, 590px);
    }

    .home-banner__shape--two {
        display: none;
    }

    .home-banner__wordmark {
        top: 19%;
        inset-inline-end: -9%;
        font-size: clamp(95px, 26vw, 190px);
        transform: translateY(-50%) rotate(-90deg);
    }

    .home-banner__title {
        font-size: clamp(44px, 10vw, 72px);
    }

    .home-introduction__grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .home-features__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .hero-slider {
        min-height: 780px;
    }

    .home-banner__layout {
        grid-template-rows: minmax(300px, 39vh) auto;
        padding-bottom: 104px;
    }

    .home-banner__model {
        min-height: 300px;
    }

        .home-banner__model img {
            max-height: 390px;
        }

    .home-banner__content {
        margin-top: -5px;
    }

    .home-banner__index {
        margin-bottom: 15px;
    }

    .home-banner__eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
    }

    .home-banner__title {
        font-size: clamp(40px, 12.5vw, 62px);
    }

    .home-banner__text {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.8;
    }

    .home-banner__button {
        min-height: 50px;
        margin-top: 22px;
        padding: 11px 18px;
        font-size: 12px;
    }

    .hero-slider__controls-inner {
        min-height: 84px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .hero-slider__navigation {
        grid-column: 2;
        grid-row: 1;
    }

    .hero-slider__progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .hero-slider__dot {
        min-width: 36px;
        width: 36px;
        height: 36px;
    }

    .hero-slider__arrow {
        width: 38px;
        height: 38px;
    }

    .home-introduction {
        padding-block: 62px;
    }

        .home-introduction h2 {
            font-size: clamp(36px, 11vw, 56px);
        }
}

@media (max-width: 430px) {
    .hero-slider {
        min-height: 750px;
    }

    .home-banner__layout {
        grid-template-rows: minmax(270px, 36vh) auto;
    }

    .home-banner__title {
        font-size: clamp(38px, 12vw, 52px);
    }

    .home-banner__text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .hero-slider__dots {
        gap: 4px;
    }

    .hero-slider__dot {
        min-width: 32px;
        width: 32px;
        height: 32px;
    }

    .hero-slider__navigation {
        gap: 4px;
    }

    .hero-slider__arrow {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-banner,
    .home-banner *,
    .hero-slider__progress span {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =========================================================
   Scroll Cairo homepage banner UI correction
   ========================================================= */

/* Hide the old 01 ---- 04 counter completely. */
.home-banner__index {
    display: none !important;
}

/* Softer decorative circles. */
.home-banner__shape--one {
    opacity: 0.38 !important;
    box-shadow: 0 28px 88px color-mix( in srgb, var(--slide-accent-soft) 52%, transparent ) !important;
}

.home-banner__shape--two {
    opacity: 0.20 !important;
}

/* All background words use one fixed position and short labels. */
.home-banner__wordmark {
    top: 50% !important;
    inset-inline-end: clamp(12px, 2vw, 34px) !important;
    width: 1em !important;
    color: color-mix( in srgb, var(--text) 5%, transparent ) !important;
    font-size: clamp(104px, 14vw, 250px) !important;
    letter-spacing: -0.075em !important;
    line-height: 0.82 !important;
    text-align: center !important;
    transform: translateY(-50%) rotate(-90deg) !important;
    transform-origin: center !important;
}

/* Remove old arrows and the separate loading line. */
.hero-slider__navigation,
.hero-slider__progress {
    display: none !important;
}

/* Clean control area with no collision with the CTA. */
.hero-slider__controls {
    z-index: 14 !important;
    pointer-events: none;
}

    .hero-slider__controls::before {
        position: absolute;
        inset: auto 0 0;
        height: 84px;
        content: "";
        background: linear-gradient( to top, color-mix( in srgb, var(--background) 90%, transparent ) 0%, color-mix( in srgb, var(--background) 48%, transparent ) 48%, transparent 100% );
        pointer-events: none;
    }

.hero-slider__controls-inner {
    position: relative;
    z-index: 1;
    display: flex !important;
    min-height: 70px !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    padding-block: 14px 20px !important;
    pointer-events: auto;
}

/* Navigation is now points. The active point expands and fills
   according to the remaining loading time. */
.hero-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px !important;
}

.hero-slider__dot {
    position: relative;
    display: inline-flex !important;
    width: 11px !important;
    min-width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    background: color-mix( in srgb, var(--text) 28%, transparent ) !important;
    border: 1px solid color-mix( in srgb, var(--text) 15%, transparent ) !important;
    border-radius: 999px !important;
    backdrop-filter: none !important;
    transform: none !important;
    transition: width 260ms cubic-bezier(.22, 1, .36, 1), flex-basis 260ms cubic-bezier(.22, 1, .36, 1), transform 180ms ease !important;
}

    .hero-slider__dot:hover {
        transform: scale(1.12) !important;
    }

    .hero-slider__dot.is-active {
        width: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
        background: color-mix( in srgb, var(--surface) 72%, transparent ) !important;
        border-color: color-mix( in srgb, var(--text) 18%, transparent ) !important;
    }

    .hero-slider__dot > span {
        position: absolute !important;
        inset: 1px !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        overflow: hidden;
        color: transparent !important;
        background: var(--accent) !important;
        border-radius: inherit;
        font-size: 0 !important;
        line-height: 0 !important;
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;
    }

html[dir="rtl"]
.hero-slider__dot > span {
    transform-origin: right center;
}

.hero-slider__dot.is-active > span {
    opacity: 1;
}

/* Reserve enough room for the point controls and remove the
   desktop collision/black overlap at the lower edge. */
@media (min-width: 851px) {
    .hero-slider {
        min-height: clamp(590px, 70vh, 760px) !important;
    }

    .hero-slider__viewport,
    .home-banner,
    .home-banner__layout {
        min-height: inherit !important;
    }

    .home-banner__layout {
        padding-bottom: 108px !important;
    }

    .home-banner__content {
        padding-bottom: 58px;
    }

    .home-banner__model picture {
        bottom: 24px !important;
    }

    .home-banner__model img {
        max-height: min(72vh, 700px) !important;
    }
}

@media (max-width: 850px) {
    .home-banner__wordmark {
        top: 19% !important;
        inset-inline-end: 7px !important;
        font-size: clamp(88px, 22vw, 170px) !important;
    }

    .hero-slider__controls-inner {
        min-height: 64px !important;
        padding-bottom: 16px !important;
    }
}

@media (max-width: 430px) {
    .hero-slider__dots {
        gap: 7px !important;
    }

    .hero-slider__dot.is-active {
        width: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
    }
}

/* =========================================================
   Banner composition balance — titles, models and CTA
   ========================================================= */

.home-banner__layout {
    grid-template-columns: minmax(0, 0.80fr) minmax(420px, 1.20fr) !important;
    gap: clamp(24px, 3.6vw, 72px) !important;
}

.home-banner__content {
    max-width: 690px !important;
}

.home-banner__title {
    max-width: 690px !important;
    font-size: clamp(44px, 4.55vw, 82px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    text-wrap: initial !important;
}

    .home-banner__title > span {
        display: block;
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
    }

html[lang="ar"] .home-banner__title {
    font-size: clamp(43px, 4.35vw, 78px) !important;
    line-height: 1.10 !important;
    letter-spacing: -0.028em !important;
}

.home-banner__text {
    max-width: 540px !important;
    margin-top: 18px !important;
    font-size: clamp(14px, 1.05vw, 17px) !important;
    line-height: 1.68 !important;
}

.home-banner__button {
    min-height: 51px !important;
    margin-top: 22px !important;
    padding: 11px 19px !important;
    font-size: 12px !important;
}

/*
 * The supplied transparent PNG files do not use identical internal
 * margins. Scale their picture wrappers independently so the visible
 * people appear approximately equal in height.
 */
@media (min-width: 851px) {
    .home-banner__content {
        padding-bottom: 20px !important;
    }

    .home-banner__model picture {
        transform-origin: center bottom;
    }

    [data-slide-key="swag"]
    .home-banner__model picture {
        transform: scale(1.17);
    }

    [data-slide-key="best-sellers"]
    .home-banner__model picture {
        transform: scale(1.16);
    }

    [data-slide-key="sets"]
    .home-banner__model picture {
        transform: scale(1.00);
    }

    [data-slide-key="plus-sizes"]
    .home-banner__model picture {
        transform: scale(1.15);
    }

    .home-banner__model img {
        max-height: min(75vh, 725px) !important;
    }
}

@media (max-width: 1100px) and (min-width: 851px) {
    .home-banner__layout {
        grid-template-columns: minmax(0, 0.86fr) minmax(350px, 1.14fr) !important;
    }

    .home-banner__title {
        font-size: clamp(42px, 5.15vw, 68px) !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(41px, 4.95vw, 65px) !important;
    }
}

@media (max-width: 850px) {
    .home-banner__title {
        font-size: clamp(38px, 8.4vw, 60px) !important;
        line-height: 1.00 !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(37px, 8.1vw, 58px) !important;
        line-height: 1.12 !important;
    }

    .home-banner__title > span {
        width: auto;
        white-space: normal;
    }

    .home-banner__text {
        margin-top: 15px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .home-banner__button {
        margin-top: 18px !important;
    }
}

@media (max-width: 430px) {
    .home-banner__title {
        font-size: clamp(35px, 10.4vw, 48px) !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(34px, 10vw, 46px) !important;
    }
}

/* =========================================================
   Final model normalization and responsive hero composition
   ========================================================= */

/*
 * The model canvases are presented through one shared visual box.
 * This removes the different per-banner scaling values introduced
 * by the previous desktop balancing patch.
 */
.home-banner__model {
    display: grid;
    align-items: end;
    justify-items: center;
    overflow: visible;
}

    .home-banner__model picture {
        position: absolute;
        inset: 0 !important;
        display: grid;
        width: 100%;
        height: 100%;
        align-items: end;
        justify-items: center;
        transform: scale(1.08) !important;
        transform-origin: center bottom !important;
    }

[data-slide-key="swag"]
.home-banner__model picture,
[data-slide-key="best-sellers"]
.home-banner__model picture,
[data-slide-key="sets"]
.home-banner__model picture,
[data-slide-key="plus-sizes"]
.home-banner__model picture {
    transform: scale(1.08) !important;
}

.home-banner__model img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 820px;
    max-height: none !important;
    object-fit: contain;
    object-position: center bottom;
}

/*
 * The large accent circle remains present as a subtle signature,
 * but is now almost invisible.
 */
.home-banner__shape--one {
    opacity: 0.085 !important;
    filter: blur(8px);
    box-shadow: 0 26px 70px color-mix( in srgb, var(--slide-accent-soft) 24%, transparent ) !important;
}

.home-banner__shape--two {
    opacity: 0.055 !important;
}

/* Desktop composition */
@media (min-width: 851px) {
    .hero-slider {
        min-height: clamp(610px, 72vh, 780px);
    }

    .home-banner__layout {
        grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr) !important;
        gap: clamp(22px, 3.2vw, 62px) !important;
        padding-top: clamp(44px, 5vw, 72px);
        padding-bottom: 100px !important;
    }

    .home-banner__content {
        align-self: center;
        max-width: 680px !important;
        padding-bottom: 10px !important;
    }

    .home-banner__model {
        min-height: 500px;
        align-self: stretch;
    }

        .home-banner__model picture {
            bottom: 0 !important;
        }

    .home-banner__title {
        font-size: clamp(43px, 4.35vw, 78px) !important;
        line-height: 0.99 !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(42px, 4.15vw, 74px) !important;
        line-height: 1.10 !important;
    }

    .home-banner__text {
        margin-top: 16px !important;
    }

    .home-banner__button {
        margin-top: 20px !important;
    }
}

/* Tablet and phone layout */
@media (max-width: 850px) {
    .hero-slider {
        min-height: 790px !important;
    }

    .hero-slider__viewport,
    .home-banner {
        min-height: inherit;
    }

    .home-banner__layout {
        display: grid;
        min-height: inherit;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(300px, 42vh) minmax(0, 1fr);
        gap: 0 !important;
        align-items: stretch;
        padding-top: 0 !important;
        padding-bottom: 84px !important;
    }

    .home-banner__model {
        position: relative;
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        min-height: 300px !important;
        overflow: visible;
    }

        .home-banner__model picture {
            inset: 8px clamp(10px, 6vw, 44px) -8px !important;
            width: auto;
            height: auto;
            transform: scale(1) !important;
        }

    [data-slide-key="swag"]
    .home-banner__model picture,
    [data-slide-key="best-sellers"]
    .home-banner__model picture,
    [data-slide-key="sets"]
    .home-banner__model picture,
    [data-slide-key="plus-sizes"]
    .home-banner__model picture {
        transform: scale(1) !important;
    }

    .home-banner__model img {
        width: 100% !important;
        height: 100% !important;
        max-width: 440px;
        object-fit: contain;
        object-position: center bottom;
    }

    .home-banner__content {
        position: relative;
        z-index: 4;
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: 100%;
        max-width: 680px !important;
        margin-top: -18px !important;
        padding: 32px 0 10px !important;
    }

        .home-banner__content::before {
            position: absolute;
            z-index: -1;
            top: -84px;
            right: -24px;
            bottom: -30px;
            left: -24px;
            content: "";
            background: linear-gradient( to bottom, transparent 0%, color-mix( in srgb, var(--background) 74%, transparent ) 26%, color-mix( in srgb, var(--background) 96%, transparent ) 53%, var(--background) 100% );
            pointer-events: none;
        }

    .home-banner__eyebrow {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .home-banner__title {
        max-width: 100% !important;
        font-size: clamp(36px, 8.6vw, 58px) !important;
        line-height: 1.01 !important;
        letter-spacing: -0.045em !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(35px, 8.2vw, 55px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.024em !important;
    }

    .home-banner__title > span {
        display: block;
        width: max-content !important;
        max-width: 100%;
        white-space: nowrap !important;
    }

    .home-banner__text {
        display: -webkit-box;
        max-width: 540px !important;
        margin-top: 14px !important;
        overflow: hidden;
        font-size: 14px !important;
        line-height: 1.62 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-banner__button {
        min-height: 48px !important;
        margin-top: 17px !important;
        padding: 10px 17px !important;
    }

    .home-banner__background::before,
    html[dir="rtl"]
    .home-banner__background::before {
        background: linear-gradient( to bottom, color-mix( in srgb, var(--background) 8%, transparent ) 0%, transparent 30%, color-mix( in srgb, var(--background) 32%, transparent ) 48%, color-mix( in srgb, var(--background) 92%, transparent ) 70%, var(--background) 100% ) !important;
    }

    .home-banner__shape--one {
        top: 7% !important;
        inset-inline-end: -9% !important;
        width: min(78vw, 540px) !important;
        opacity: 0.07 !important;
    }

    .home-banner__wordmark {
        top: 20% !important;
        inset-inline-end: 4px !important;
        font-size: clamp(82px, 21vw, 162px) !important;
        opacity: 0.8;
    }

    .hero-slider__controls::before {
        height: 76px;
    }

    .hero-slider__controls-inner {
        min-height: 64px !important;
        padding-block: 12px 16px !important;
    }
}

/* Narrow phones */
@media (max-width: 560px) {
    .hero-slider {
        min-height: 740px !important;
    }

    .home-banner__layout {
        grid-template-rows: minmax(260px, 36vh) minmax(0, 1fr);
        padding-bottom: 76px !important;
    }

    .home-banner__model {
        min-height: 260px !important;
    }

        .home-banner__model picture {
            inset: 4px 10px -6px !important;
        }

        .home-banner__model img {
            max-width: 360px;
        }

    .home-banner__content {
        margin-top: -10px !important;
        padding-top: 25px !important;
    }

    .home-banner__title {
        font-size: clamp(32px, 9.2vw, 45px) !important;
        line-height: 1.02 !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(31px, 8.8vw, 43px) !important;
        line-height: 1.13 !important;
    }

    .home-banner__text {
        font-size: 13px !important;
        line-height: 1.58 !important;
    }

    .home-banner__button {
        min-height: 46px !important;
        margin-top: 15px !important;
        padding: 9px 16px !important;
        font-size: 11px !important;
    }

    .hero-slider__dot {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }

        .hero-slider__dot.is-active {
            width: 34px;
            flex-basis: 34px;
        }
}

/* Very narrow phones */
@media (max-width: 390px) {
    .hero-slider {
        min-height: 720px !important;
    }

    .home-banner__layout {
        grid-template-rows: minmax(245px, 34vh) minmax(0, 1fr);
    }

    .home-banner__model {
        min-height: 245px !important;
    }

        .home-banner__model img {
            max-width: 330px;
        }

    .home-banner__title {
        font-size: clamp(29px, 8.9vw, 38px) !important;
    }

    html[lang="ar"] .home-banner__title {
        font-size: clamp(28px, 8.5vw, 37px) !important;
    }

    .home-banner__content {
        padding-top: 21px !important;
    }

    .home-banner__text {
        -webkit-line-clamp: 2;
    }
}

/* =========================================================
   FINAL DESKTOP MODEL SIZE AND POSITION
   ========================================================= */

@media (min-width: 851px) {

    .home-banner__model {
        min-height: 500px !important;
        align-self: stretch !important;
        overflow: visible !important;
    }

        .home-banner__model picture,
        [data-slide-key="swag"] .home-banner__model picture,
        [data-slide-key="best-sellers"] .home-banner__model picture,
        [data-slide-key="sets"] .home-banner__model picture,
        [data-slide-key="plus-sizes"] .home-banner__model picture {
            inset: 18px 0 0 !important;
            width: 100% !important;
            height: auto !important;
            transform: translateY(-155px) scale(0.78) !important;
            transform-origin: center bottom !important;
        }

        .home-banner__model img {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            max-width: 720px !important;
            max-height: 100% !important;
            object-fit: contain !important;
            object-position: center bottom !important;
        }
}

/* =========================================================
   MOBILE TUNING V1
   Keeps the uploaded desktop layout unchanged.
   Edit only the custom properties below for mobile tuning.
   ========================================================= */

/* Match each loading bar to its banner button color. */
.hero-slider__dot:nth-child(1) {
    --dot-accent: #ef3438;
}

.hero-slider__dot:nth-child(2) {
    --dot-accent: #c98a22;
}

.hero-slider__dot:nth-child(3) {
    --dot-accent: #3468ef;
}

.hero-slider__dot:nth-child(4) {
    --dot-accent: #16835f;
}

.hero-slider__dot.is-active {
    border-color:
        color-mix(
            in srgb,
            var(--dot-accent) 58%,
            var(--border)
        ) !important;
}

.hero-slider__dot > span {
    background:
        var(--dot-accent, var(--accent)) !important;
    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--dot-accent, var(--accent)) 42%,
            transparent
        );
}

@media (max-width: 850px) {
    /*
     * MOBILE CONTROL PANEL
     *
     * Model:
     * --mobile-model-scale:
     *   1.00 = normal
     *   1.10 = 10% larger
     *   0.90 = 10% smaller
     *
     * --mobile-model-y:
     *   negative value moves model up
     *   positive value moves model down
     *
     * --mobile-model-x-ltr:
     *   positive moves right
     *   negative moves left
     *
     * --mobile-model-x-rtl:
     *   positive moves right
     *   negative moves left
     *
     * Text:
     * --mobile-content-lift:
     *   more negative = text moves upward
     *
     * Spacing:
     * --mobile-content-space:
     *   smaller = dots move closer to CTA
     *
     * --mobile-controls-height:
     *   smaller = dots move closer to bottom edge
     */
    .hero-slider {
        --mobile-stage-height:
            clamp(315px, 92vw, 390px);

        --mobile-content-space: 8px;
        --mobile-controls-height: 34px;

        --mobile-content-lift: -100px;

        --mobile-model-scale: .80;
        --mobile-model-y: -130px;
        --mobile-model-x-ltr: 70px;
        --mobile-model-x-rtl: -70px;

        min-height:
            calc(
                var(--mobile-stage-height)
                + var(--mobile-content-space)
                + var(--mobile-controls-height)
            ) !important;
    }

    .hero-slider__viewport,
    .home-banner {
        min-height: inherit !important;
    }

    /*
     * Show the complete background on mobile without cropping.
     * "contain" preserves the image ratio and shows the full image.
     */
    .home-banner__background,
    html[data-theme="dark"]
    .home-banner__background {
        inset: 0 0 auto !important;

        width: 100% !important;
        height:
            var(--mobile-stage-height) !important;

        background-size: contain !important;
        background-position:
            center top !important;
        background-repeat:
            no-repeat !important;

        background-color:
            var(--background) !important;
    }

    .home-banner__layout {
        min-height: inherit !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            var(--mobile-stage-height)
            auto !important;

        align-content: start !important;
        align-items: stretch !important;

        gap: 0 !important;

        padding-top: 0 !important;
        padding-bottom:
            var(--mobile-controls-height) !important;
    }

    .home-banner__model {
        position: relative !important;
        z-index: 2 !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        min-height:
            var(--mobile-stage-height) !important;

        overflow: visible !important;
    }

    .home-banner__model picture,
    [data-slide-key="swag"]
    .home-banner__model picture,
    [data-slide-key="best-sellers"]
    .home-banner__model picture,
    [data-slide-key="sets"]
    .home-banner__model picture,
    [data-slide-key="plus-sizes"]
    .home-banner__model picture {
        position: absolute !important;
        inset: 0 !important;

        display: grid !important;

        width: 100% !important;
        height: 100% !important;

        align-items: end !important;
        justify-items: center !important;

        transform-origin:
            center bottom !important;
    }

    html[dir="ltr"]
    .home-banner__model picture {
        transform:
            translate(
                var(--mobile-model-x-ltr),
                var(--mobile-model-y)
            )
            scale(
                var(--mobile-model-scale)
            ) !important;
    }

    html[dir="rtl"]
    .home-banner__model picture {
        transform:
            translate(
                var(--mobile-model-x-rtl),
                var(--mobile-model-y)
            )
            scale(
                var(--mobile-model-scale)
            ) !important;
    }

    .home-banner__model img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position:
            center bottom !important;
    }

    /*
     * Lift all text while preserving the original LTR/RTL alignment.
     */
    .home-banner__content {
        position: relative !important;
        z-index: 5 !important;

        grid-column: 1 !important;
        grid-row: 2 !important;

        align-self: start !important;

        width: 100% !important;
        max-width: 680px !important;

        margin-top:
            var(--mobile-content-lift) !important;

        padding:
            18px
            0
            0 !important;
    }

    .home-banner__text {
        margin-top: 12px !important;
    }

    .home-banner__button {
        margin-top: 10px !important;
    }

    /*
     * Keep the points close to the CTA and close to the lower edge.
     */
    .hero-slider__controls {
        bottom: 0 !important;
    }

    .hero-slider__controls::before {
        height:
            var(--mobile-controls-height) !important;
    }

    .hero-slider__controls-inner {
        min-height:
            var(--mobile-controls-height) !important;

        padding:
            0
            0
            2px !important;
    }

    .hero-slider__dots {
        gap: 7px !important;
    }
}

@media (max-width: 560px) {
    .hero-slider {
        --mobile-stage-height:
            clamp(300px, 90vw, 360px);

        --mobile-content-space: 8px;
        --mobile-controls-height: 32px;

        --mobile-content-lift: -72px;
    }
}

@media (max-width: 390px) {
    .hero-slider {
        --mobile-stage-height:
            clamp(286px, 88vw, 335px);

        --mobile-content-space: 8px;
        --mobile-controls-height: 30px;

        --mobile-content-lift: -66px;
    }

    .hero-slider__controls-inner {
        padding-bottom: 0 !important;
    }
}
/* END MOBILE TUNING V1 */
/* Final mobile text vertical position */
@media (max-width: 850px) {
    .hero-slider {
        --mobile-content-lift: -270px !important;
    }
}