/* Reusable campaign intro: copy and assets come from PromotionLandingViewModel. */
.campaign-intro {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
    background: #e9dbc9;
    color: #120d05;
    font-family: Roboto,'Noto Sans Thai',sans-serif;
}

.campaign-intro__background {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-intro__heading {
    position: absolute;
    inset: 7.5% 4% auto;
    text-align: center;
}

.campaign-intro__eyebrow {
    margin: 0 0 1.1vw;
    padding-left: .5em;
    font-size: clamp(12px,1.75vw,30px);
    line-height: 1.3;
    letter-spacing: .5em;
    font-weight: 500;
}

.campaign-intro__heading h1 {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding-left: .12em;
    font-size: clamp(30px,5.5vw,94px);
    line-height: 1.15;
    letter-spacing: .12em;
    font-weight: 400;
    background: linear-gradient(105deg,#090805 20%,#231604 54%,#8d5d1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    overflow-wrap: anywhere;
}

.campaign-intro__subtitle {
    margin: 1.2vw 0 0;
    font-size: clamp(12px,1.95vw,34px);
    font-weight: 400;
    line-height: 1.5;
    color: #090805;
}

.campaign-intro__button {
    position: absolute;
    left: 50%;
    bottom: 4.5%;
    transform: translateX(-50%);
    display: block;
    width: 40%;
    max-width: 700px;
    border-radius: 24px;
    text-decoration: none;
    color: #f4dfaa;
    transition: filter .2s, box-shadow .2s;
}

    .campaign-intro__button > img {
        display: block;
        width: 100%;
        height: auto;
    }

    .campaign-intro__button > span {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5em;
        padding: 0 8%;
        font-size: clamp(12px,1.5vw,25px);
        font-weight: 500;
        letter-spacing: .2em;
        white-space: nowrap;
        color: #eedba6;
    }

.campaign-intro__arrow {
    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: 0;
}

.campaign-intro__button:hover {
    filter: brightness(1.15);
    color: #fff0c8;
    text-decoration: none;
    box-shadow: 0 6px 28px rgba(184,126,43,.35);
}

.campaign-intro__button:focus-visible {
    outline: 3px solid #805113;
    outline-offset: 5px;
}

@media (max-width:767px) {
    .campaign-intro {
        aspect-ratio: auto;
        min-height: 610px;
    }

    .campaign-intro__background {
        inset: auto auto 0 50%;
        width: 160%;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
        object-fit: contain;
    }

    .campaign-intro__heading {
        inset: 36px 20px auto;
    }

    .campaign-intro__eyebrow {
        font-size: 14px;
        margin-bottom: 14px;
        letter-spacing: .34em;
    }

    .campaign-intro__heading h1 {
        font-size: clamp(30px,6.7vw,50px);
        letter-spacing: .08em;
        line-height: 1.2;
    }

    .campaign-intro__subtitle {
        max-width: 90%;
        margin: 16px auto 0;
        font-size: 15px;
        line-height: 1.6;
    }

    .campaign-intro__button {
        width: min(82%,480px);
        bottom: 4%;
    }

        .campaign-intro__button > span {
            font-size: clamp(12px,2.4vw,17px);
            letter-spacing: .15em;
        }
}

@media (max-width:420px) {
    .campaign-intro {
        min-height: 540px;
    }
}
/* Reward options banner, shared by campaign pages. */
.campaign-information {
    background: var(--campaign-background, #fcf6f0);
    padding: 100px 0px 0px;
    color: var(--campaign-text, #231703);
    font-family: Roboto,'Noto Sans Thai',sans-serif;
}

.campaign-information__inner {
    width: min(1280px,calc(100% - 128px));
    margin: 0 auto;
}

.campaign-information__heading {
    text-align: center;
}

    .campaign-information__heading h2 {
        display: inline-block;
        margin: 0;
        max-width: 100%;
        font-size: clamp(26px,3.4vw,46px);
        font-weight: 400;
        line-height: 1.3;
        background: var(--campaign-heading, linear-gradient(105deg,#100c05 5%,#342207 45%,#99621f 100%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        overflow-wrap: anywhere;
    }

    .campaign-information__heading p {
        margin: 16px 0 0;
        color: var(--campaign-muted, #9d703e);
        font-size: clamp(16px,2vw,25px);
        font-weight: 400;
        line-height: 1.5;
    }

.campaign-information__banner {
    margin: 0;
}

    .campaign-information__banner img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (max-width:991px) {
    .campaign-information__inner {
        width: calc(100% - 64px);
    }
}

@media (max-width:575px) {
    .campaign-information {
        padding: 32px 0 24px;
    }

    .campaign-information__inner {
        width: calc(100% - 32px);
    }

    .campaign-information__heading h2 {
        font-size: 26px;
    }

    .campaign-information__heading p {
        margin-top: 12px;
        font-size: 16px;
    }

    .campaign-information__banner {
        margin-top: 12px;
    }
}

/* How to join: campaign media banner. */
.campaign-media {
    background: var(--campaign-background, #fcf6f0);
    padding: 100px 0 54px;
    color: var(--campaign-text, #231703);
    font-family: Roboto,'Noto Sans Thai',sans-serif;
}

.campaign-media__inner {
    width: min(1280px,calc(100% - 128px));
    margin: 0 auto;
}

.campaign-media__heading {
    text-align: center;
}

    .campaign-media__heading h2 {
        display: inline-block;
        max-width: 100%;
        margin: 0;
        font-size: clamp(26px,3.4vw,46px);
        font-weight: 400;
        line-height: 1.3;
        background: var(--campaign-heading, linear-gradient(105deg,#100c05 5%,#342207 45%,#99621f 100%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

        .campaign-media__heading h2::after {
            content: '';
            display: block;
            width: 82%;
            height: 1px;
            margin: 9px auto 0;
            background: #d7b697;
        }

    .campaign-media__heading p {
        margin: 14px 0 0;
        color: var(--campaign-muted, #9d703e);
        font-size: clamp(16px,2vw,25px);
        font-weight: 400;
        line-height: 1.5;
    }

.campaign-media__banner {
    margin: 28px 0 0;
}

    .campaign-media__banner img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (max-width:991px) {
    .campaign-media__inner {
        width: calc(100% - 64px);
    }
}

@media (max-width:575px) {
    .campaign-media {
        padding: 32px 0 36px;
    }

    .campaign-media__inner {
        width: calc(100% - 32px);
    }

    .campaign-media__heading h2 {
        font-size: 28px;
    }

    .campaign-media__heading p {
        font-size: 16px;
    }

    .campaign-media__banner {
        margin-top: 22px;
    }
}
/* Final campaign call to action. */
.campaign-cta {
    background: var(--campaign-background, #fcf6f0);
    padding: 32px 0 88px;
    font-family: Roboto,'Noto Sans Thai',sans-serif;
}

.campaign-cta__inner {
    width: min(1280px,calc(100% - 128px));
    margin: 0 auto;
}

.campaign-cta__banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    background: #eee0cb;
    min-height: 300px;
    aspect-ratio: 3.2 / 1;
    display: flex;
    align-items: center;
}

.campaign-cta__background {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-cta__content {
    width: 48%;
    padding: 36px 0 36px 4.2%;
    color: var(--campaign-text, #100c05);
}

    .campaign-cta__content h2 {
        margin: 0;
        font-size: clamp(23px,2.5vw,36px);
        font-weight: 400;
        line-height: 1.3;
        background: var(--campaign-heading, linear-gradient(105deg,#100c05 5%,#342207 45%,#99621f 100%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.campaign-cta__subtitle {
    margin: 5px 0 0;
    color: var(--campaign-text, #342207);
    font-size: clamp(17px,1.7vw,25px);
    font-weight: 400;
    line-height: 1.4;
}

    .campaign-cta__subtitle::after {
        content: '';
        display: block;
        width: 52%;
        height: 1px;
        background: #c5a17a;
        margin: 14px 0 12px;
    }

.campaign-cta__description {
    margin: 0 0 20px;
    color: var(--campaign-text, #100c05);
    max-width: 440px;
    font-size: clamp(13px,1.1vw,16px);
    font-weight: 400;
    line-height: 1.5;
}

.campaign-cta__button {
    display: block;
    position: relative;
    width: 200px;
    max-width: 100%;
    border-radius: 999px;
    text-decoration: none;
    transition: filter .15s;
}

    .campaign-cta__button img {
        width: 100%;
        height: auto;
        display: block;
    }

    .campaign-cta__button > span {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #100c05;
        font-size: 15px;
        font-weight: 600;
    }

        .campaign-cta__button > span > span {
            font-size: 24px;
            line-height: 1;
        }

    .campaign-cta__button:hover {
        filter: brightness(1.08);
    }

    .campaign-cta__button:focus-visible {
        outline: 3px solid #8d5d1c;
        outline-offset: 4px;
    }

@media (max-width:991px) {
    .campaign-cta__inner {
        width: calc(100% - 64px);
    }

    .campaign-cta__content {
        width: 52%;
    }
}

@media (max-width:575px) {
    .campaign-cta {
        padding: 20px 0 48px;
    }

    .campaign-cta__inner {
        width: calc(100% - 32px);
    }

    .campaign-cta__banner {
        aspect-ratio: auto;
        min-height: 400px;
        align-items: flex-start;
    }

    .campaign-cta__background {
        object-position: right bottom;
        opacity: .3;
    }

    .campaign-cta__content {
        width: 100%;
        padding: 30px 24px;
    }

        .campaign-cta__content h2 {
            font-size: 28px;
        }

    .campaign-cta__subtitle {
        font-size: 20px;
    }

    .campaign-cta__description {
        margin-top: 16px;
        font-size: 15px;
    }

    .campaign-cta__button {
        width: 210px;
    }
}

/* Theme values are inherited by all shared campaign sections. */
.campaign--light {
    --campaign-background: #fcf6f0;
    --campaign-muted: #9d703e;
    --campaign-heading: linear-gradient(105deg,#100c05 5%,#342207 45%,#99621f 100%);
}
.campaign--dark {
    --campaign-background: #050505;
    --campaign-text: #ededed;
    --campaign-muted: #ededed;
    --campaign-heading: linear-gradient(105deg,#f1cba6 5%,#d5a77d 45%,#a6764b 100%);
    background: var(--campaign-background);
}
.campaign--dark .campaign-information__heading h2 { text-transform: uppercase; }
.campaign--dark .campaign-information__heading h2::after {
    content: ''; display: block; width: 100%; height: 1px;
    margin: 9px auto 0; background: #b58a60;
}
.campaign--dark .campaign-information__banner { margin-top: 40px; }
.campaign--dark .campaign-cta__banner { border: 1px solid #c6a078; background: #050505; aspect-ratio: 3.05 / 1; }
.campaign--dark .campaign-cta__description { color: #aaa; }
.campaign--dark .campaign-cta__content { width: 49%; }
.campaign-cta__logo { display: block; width: 150px; max-width: 50%; height: auto; margin-bottom: 32px; }
.campaign-media__descriptions {
    display: grid; grid-template-columns: repeat(var(--campaign-step-count, 4), minmax(0, 1fr));
    gap: 20px; text-align: center; color: var(--campaign-text, #231703);
}
.campaign-media__descriptions p { margin: 0; font-size: clamp(12px,1.3vw,18px); line-height: 1.5; }
@media (max-width:575px) {
    .campaign--dark .campaign-information__banner { margin-top: 24px; }
    .campaign--dark .campaign-cta__content { width: 100%; }
    .campaign--dark .campaign-cta__background { opacity: .45; }
    .campaign-media__descriptions { gap: 6px; }
    .campaign-media__descriptions p { font-size: 10px; overflow-wrap: anywhere; }
    .campaign-cta__logo { margin-bottom: 24px; }
}
/* Image-based luxury intro shares the campaign stylesheet. */

        .luxury-rewards-intro {
            position: relative;
            background: #090806;
            font-family: Roboto, 'Noto Sans Thai', sans-serif;
        }

        .luxury-rewards-intro__background {
            display: block;
            width: 100%;
            height: auto;
        }

        .luxury-rewards-intro__actions {
            position: absolute;
            top: 80.9%;
            left: 16.9%;
            width: 21%;
            text-align: center;
        }

        .luxury-rewards-intro__button {
            position: relative;
            display: block;
            border-radius: 999px;
            color: #100c05;
            text-decoration: none;
            transition: filter .2s;
        }

            .luxury-rewards-intro__button img {
                display: block;
                width: 100%;
                height: auto;
            }

        .luxury-rewards-intro__button-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .65em;
            font-size: clamp(12px, 1.45vw, 28px);
            font-weight: 600;
        }

        .luxury-rewards-intro__arrow {
            width: .5em;
            height: .5em;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: rotate(45deg);
        }

        .luxury-rewards-intro__button:hover {
            filter: brightness(1.1);
            color: #100c05;
            text-decoration: none;
        }

        .luxury-rewards-intro__terms {
            display: inline-block;
            margin-top: .85vw;
            color: #b5b5b5;
            font-size: clamp(10px, 1.05vw, 20px);
            line-height: 1.5;
        }

            .luxury-rewards-intro__terms:hover {
                color: #fff;
            }

        .luxury-rewards-intro a:focus-visible {
            outline: 2px solid #f3d59d;
            outline-offset: 4px;
        }

        @media (max-width: 575px) {
            .luxury-rewards-intro__actions {
                position: static;
                width: min(70%, 300px);
                margin: 0 auto;
                padding: 16px 0 24px;
            }

            .luxury-rewards-intro__button-label {
                font-size: 16px;
            }

            .luxury-rewards-intro__terms {
                margin-top: 12px;
                font-size: 12px;
            }
        }