/* ==================================================
   GLOBAL START
================================================== */

:root {
    --header-height: 78px;
    --sidebar-width: 88px;

    --navy: #081a33;
    --navy-deep: #061326;

    --aurora-green: #16d8c5;
    --aurora-blue: #1cbecf;
    --aurora-purple: #9035e8;

    --gold: #f3bc77;
    --text-light: #f5f7ff;
    --text-muted: #d5e1ed;

    --footer-height: 66px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    background: var(--navy-deep);
    color: var(--text-light);

    font-family: Arial, Helvetica, sans-serif;
}

body,
button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

img,
svg {
    display: block;
}

[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 15px;

    z-index: 100;

    padding: 12px 20px;

    background: white;
    color: var(--navy);

    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #63f6e5;
    outline-offset: 4px;
}

/* ==================================================
   GLOBAL END
================================================== */


/* ==================================================
   HEADER START
================================================== */

.site-header {
    position: sticky;

    top: 0;
    left: 0;

    z-index: 50;

    height: var(--header-height);

    background: linear-gradient(
        100deg,
        #07182f 0%,
        #10243b 55%,
        #0b2039 100%
    );

    border-bottom: 1px solid rgba(
        89, 224, 216, 0.24
    );
}

.site-header__inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 0 clamp(18px, 3vw, 54px);
}

/* ==================================================
   HEADER END
================================================== */


/* ==================================================
   BRAND START
================================================== */

.site-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    text-decoration: none;
}

.site-brand__icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gold);
}

.site-brand__icon svg {
    width: 100%;
    height: 100%;
}

.site-brand__text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.site-brand__text strong {
    font-size: 17px;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1;
}

.site-brand__text small {
    font-size: 11px;

    font-weight: 700;
    letter-spacing: 0.37em;

    color: var(--gold);
}

/* ==================================================
   BRAND END
================================================== */


/* ==================================================
   HEADER NAVIGATION START
================================================== */

.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    gap: clamp(11px, 1.6vw, 30px);

    min-width: 0;
}

.header-nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 46px;

    padding: 6px 0;

    text-decoration: none;

    color: #e1eaf4;

    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: 600;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.header-nav a::after {
    content: "";

    position: absolute;

    bottom: 3px;
    left: 0;

    width: 100%;
    height: 3px;

    border-radius: 3px;

    background: linear-gradient(
        90deg,
        var(--aurora-green),
        var(--aurora-purple)
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s ease;
}

.header-nav a:hover,
.header-nav a.is-active {
    color: #ffffff;
}

.header-nav a:hover::after,
.header-nav a.is-active::after {
    transform: scaleX(1);
}

/* ==================================================
   HEADER NAVIGATION END
================================================== */


/* ==================================================
   PLAY NOW BUTTONS START
================================================== */

.play-now {
    position: relative;

    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 34px;

    border: 1px solid rgba(
        123, 255, 239, 0.5
    );

    border-radius: 16px;

    background: linear-gradient(
        115deg,
        #04bfae 0%,
        #20d5ce 31%,
        #386be5 68%,
        #9237e8 100%
    );

    color: white;

    text-decoration: none;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 0.025em;

    white-space: nowrap;

    box-shadow:
        0 7px 24px rgba(6, 209, 191, 0.18),
        0 8px 28px rgba(119, 55, 218, 0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.play-now:hover {
    transform: translateY(-2px);

    filter: brightness(1.1);

    box-shadow:
        0 9px 28px rgba(6, 209, 191, 0.32),
        0 8px 35px rgba(119, 55, 218, 0.28);
}

.play-now:active {
    transform: translateY(0);
}

.play-now--header {
    flex-shrink: 0;

    min-height: 46px;

    padding: 0 28px;

    font-size: 14px;
}

.play-now--hero {
    min-width: 190px;

    min-height: 58px;

    font-size: 17px;
}

/* ==================================================
   PLAY NOW BUTTONS END
================================================== */


/* ==================================================
   SECTION NAVIGATION START
================================================== */

.section-nav {
    position: fixed;

    z-index: 40;

    top: var(--header-height);
    bottom: 0;
    left: 0;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 16px 8px;

    background: linear-gradient(
        180deg,
        #0c2942,
        #142f51 60%,
        #102440
    );

    border-right: 1px solid rgba(
        77, 222, 212, 0.2
    );

    overflow-y: auto;
    scrollbar-width: thin;
}

.section-nav__item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 69px;

    padding: 10px 4px;

    border: 1px solid transparent;
    border-radius: 14px;

    text-decoration: none;

    color: #cfdfed;

    font-size: 10px;
    font-weight: 600;

    text-align: center;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.section-nav__item svg {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.2s ease;
}

.section-nav__item:hover {
    color: #ffffff;

    border-color: rgba(
        86, 242, 224, 0.4
    );

    background: rgba(
        40, 211, 200, 0.14
    );
}

.section-nav__item:hover svg {
    transform: translateY(-2px);
}

.section-nav__item.is-active {
    color: #ffffff;

    border-color: rgba(
        128, 255, 240, 0.5
    );

    background: linear-gradient(
        140deg,
        rgba(0, 188, 177, 0.92),
        rgba(47, 111, 199, 0.94) 55%,
        rgba(112, 55, 205, 0.94)
    );

    box-shadow:
        0 5px 20px rgba(2, 179, 174, 0.2);
}

.section-nav__item.is-active svg {
    stroke-width: 2.1;
}

/* ==================================================
   SECTION NAVIGATION END
================================================== */


/* ==================================================
   MAIN CONTENT START
================================================== */

main {
    margin-left: var(--sidebar-width);

    min-height: calc(
        100dvh - var(--header-height)
    );
}

.page-view {
    min-height: calc(
        100dvh - var(--header-height)
    );
}

/* ==================================================
   MAIN CONTENT END
================================================== */


/* ==================================================
   HOME START
================================================== */

.home-view {
    position: relative;

    display: flex;
    align-items: center;

    min-height: calc(
        100dvh - var(--header-height)
    );

    overflow: hidden;

    isolation: isolate;

    background: #102444;
}

/* HOME BACKGROUND START */

.home-background {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    z-index: -2;
}

.home-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 57% center;
}

.home-overlay {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(5, 17, 37, 0.91) 0%,
        rgba(6, 23, 49, 0.83) 20%,
        rgba(7, 26, 52, 0.55) 38%,
        rgba(6, 17, 39, 0.09) 68%,
        rgba(6, 17, 39, 0.03) 100%
    );
}

/* HOME BACKGROUND END */


/* HOME CONTENT START */

.home-content {
    position: relative;

    width: 100%;

    padding:
        clamp(36px, 5vw, 82px)
        clamp(26px, 5vw, 90px);
}

.home-content__inner {
    max-width: 540px;
}

.home-eyebrow {
    margin: 0 0 22px;

    color: #89efe3;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.2em;
}

.home-content h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        48px,
        5.6vw,
        90px
    );

    font-weight: 500;

    letter-spacing: -0.045em;
    line-height: 1.02;

    color: #fff8f1;

    text-wrap: balance;

    text-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25);
}

.home-tagline {
    margin: 20px 0 24px;

    color: #f3bd83;

    font-family: Georgia, serif;

    font-size: clamp(
        22px,
        2.2vw,
        34px
    );

    font-style: italic;

    line-height: 1.15;
}

.home-description {
    max-width: 490px;
}

.home-description p {
    margin: 0 0 15px;

    color: #e5edf8;

    font-size: clamp(
        15px,
        1.12vw,
        18px
    );

    line-height: 1.65;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.25);
}

.home-content .play-now {
    margin-top: 16px;
}

/* HOME CONTENT END */

/* ==================================================
   HOME END
================================================== */


/* ==================================================
   FUTURE SECTION THEMES START
================================================== */

.theme-about {
    --section-background: #16615f;
    --section-accent: #9be5cf;
}

.theme-games {
    --section-background: #40387e;
    --section-accent: #c1a5f4;
}

.theme-promotions {
    --section-background: #ac5845;
    --section-accent: #ffd09a;
}

.theme-events {
    --section-background: #225d94;
    --section-accent: #91d8ee;
}

.theme-dining {
    --section-background: #70314c;
    --section-accent: #f0be94;
}

.theme-rewards {
    --section-background: #286657;
    --section-accent: #b1df9c;
}

/* FUTURE SECTION THEMES END */





/* ==================================================
   TABLET START
================================================== */

@media (max-width: 1200px) {

    :root {
        --sidebar-width: 76px;
    }

    .site-header__inner {
        gap: 18px;
        padding: 0 22px;
    }

    .header-nav {
        gap: 13px;
    }

    .header-nav a {
        font-size: 11px;
    }

    .site-brand__text strong {
        font-size: 14px;
    }

    .home-content__inner {
        max-width: 470px;
    }

    .home-content h1 {
        font-size: clamp(46px, 6vw, 72px);
    }
}

/* ==================================================
   TABLET END
================================================== */


/* ==================================================
   MOBILE NAVIGATION START
================================================== */

@media (max-width: 1000px) {

    :root {
        --header-height: 66px;
        --sidebar-width: 0px;
    }

    .header-nav {
        display: none;
    }

    .site-header__inner {
        padding: 0 16px;
    }

    .section-nav {
        position: fixed;

        top: auto;
        bottom: 0;
        left: 0;

        width: 100%;

        height: calc(
            70px + env(safe-area-inset-bottom)
        );

        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: flex-start;

        padding:
            5px 10px
            calc(5px + env(safe-area-inset-bottom));

        gap: 7px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x proximity;

        scrollbar-width: none;

        background: rgba(
            9, 30, 57, 0.97
        );

        border-right: 0;

        border-top: 1px solid rgba(
            43, 229, 216, 0.35
        );
    }

    .section-nav::-webkit-scrollbar {
        display: none;
    }

    .section-nav__item {
        flex: 0 0 77px;

        min-width: 77px;
        min-height: 57px;

        padding: 7px 4px;

        gap: 4px;

        border-radius: 12px;

        font-size: 10px;

        scroll-snap-align: center;
    }

    .section-nav__item svg {
        width: 23px;
        height: 23px;
    }

    main,
    .site-footer {
        margin-left: 0;
    }

    main {
        min-height: calc(
            100dvh - var(--header-height)
        );
    }

    .page-view {
        min-height: calc(
            100dvh - var(--header-height)
        );
    }

    .site-footer {
        margin-bottom: calc(
            70px + env(safe-area-inset-bottom)
        );
    }
}

/* ==================================================
   MOBILE NAVIGATION END
================================================== */


/* ==================================================
   MOBILE HOME START
================================================== */

@media (max-width: 700px) {

    :root {
        --header-height: 62px;
    }

    .site-header {
        height: var(--header-height);
    }

    .site-header__inner {
        gap: 10px;
        padding: 0 13px;
    }

    .site-brand {
        gap: 7px;
    }

    .site-brand__icon {
        width: 31px;
        height: 31px;
    }

    .site-brand__text strong {
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .site-brand__text small {
        font-size: 9px;
        letter-spacing: 0.26em;
    }

    .play-now--header {
        margin-left: auto;

        min-height: 41px;

        padding: 0 17px;

        font-size: 12px;

        border-radius: 12px;
    }

    .home-view {
        min-height: max(
            580px,
            calc(100dvh - var(--header-height))
        );

        display: flex;
        align-items: flex-start;
    }

    .home-background img {
        object-fit: cover;

        object-position: center 58%;
    }

    .home-overlay {
        background: linear-gradient(
            180deg,
            rgba(5, 19, 44, 0.90) 0%,
            rgba(6, 20, 47, 0.85) 18%,
            rgba(8, 26, 55, 0.70) 31%,
            rgba(7, 20, 44, 0.26) 48%,
            rgba(7, 20, 44, 0.02) 71%,
            rgba(7, 20, 44, 0.08) 100%
        );
    }

    .home-content {
        padding: 25px 20px 30px;
    }

    .home-content__inner {
        max-width: 440px;
    }

    .home-eyebrow {
        margin-bottom: 11px;

        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .home-content h1 {
        font-size: clamp(
            37px,
            9.4vw,
            59px
        );

        line-height: 1.02;
    }

    .home-tagline {
        margin: 12px 0 12px;

        font-size: clamp(
            19px,
            5.1vw,
            26px
        );
    }

    .home-description p {
        font-size: 13px;
        line-height: 1.48;

        margin-bottom: 8px;
    }

    .home-description p:nth-child(2) {
        display: none;
    }

    .home-content .play-now {
        margin-top: 11px;
    }

    .play-now--hero {
        min-height: 45px;
        min-width: 160px;

        padding: 0 25px;

        font-size: 14px;
        border-radius: 13px;
    }
}

/* ==================================================
   MOBILE HOME END
================================================== */


/* ==================================================
   SMALL MOBILE START
================================================== */

@media (max-width: 380px) {

    .home-content {
        padding: 18px 16px 22px;
    }

    .home-content h1 {
        font-size: 35px;
    }

    .home-tagline {
        font-size: 19px;
        margin: 10px 0;
    }

    .home-description p {
        font-size: 12px;
        line-height: 1.45;
    }

    .home-eyebrow {
        font-size: 9px;
    }

    .site-brand__text strong {
        font-size: 10px;
    }

    .play-now--header {
        padding: 0 12px;
    }
}

/* ==================================================
   SMALL MOBILE END
================================================== */


/* ==================================================
   SHORT MOBILE SCREENS START
================================================== */

@media (max-width: 700px) and (max-height: 650px) {

    .home-view {
        min-height: calc(
            100dvh - var(--header-height)
        );
    }

    .home-content {
        padding-top: 12px;
    }

    .home-eyebrow {
        margin-bottom: 6px;
    }

    .home-content h1 {
        font-size: clamp(33px, 8vw, 43px);
    }

    .home-tagline {
        font-size: 18px;
        margin: 8px 0;
    }

    .home-description p {
        font-size: 11px;
        line-height: 1.35;
    }

    .play-now--hero {
        min-height: 40px;
        margin-top: 7px;
    }

    .home-background img {
        object-position: center 65%;
    }
}

/* ==================================================
   SHORT MOBILE SCREENS END
================================================== */


/* ==================================================
   REDUCED MOTION START
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================================================
   REDUCED MOTION END
================================================== */
/* ==================================================
   ABOUT START
================================================== */

.about-view {
    --about-bg: #155b62;
    --about-deep: #0e414e;
    --about-panel: #104d59;
    --about-text: #f0fffa;
    --about-muted: #cce7e3;
    --about-mint: #a9f4df;
    --about-border: rgba(160, 242, 223, 0.24);

    position: relative;
    min-height: calc(100dvh - var(--header-height));
    padding: clamp(35px, 5vw, 75px) clamp(20px, 5vw, 78px);

    color: var(--about-text);
    background:
        radial-gradient(
            ellipse at 95% 5%,
            rgba(80, 215, 194, 0.20),
            transparent 48%
        ),
        linear-gradient(145deg, #19767a, #155b65 55%, #164e68);

    overflow: hidden;
}

.about-container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-areas:
        "heading intro"
        "switchers switchers"
        "panels panels"
        "closing closing";
    column-gap: clamp(28px, 5vw, 85px);
    align-items: center;

    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ==================================================
   ABOUT INTRO START
================================================== */

.about-intro__heading {
    grid-area: heading;
    min-width: 0;
    margin-bottom: 48px;
}

.about-eyebrow {
    margin: 0 0 18px;
    color: #a8f5e2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-intro__heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 5.3vw, 86px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.about-intro__heading h2 span {
    display: block;
    color: #b9f6dc;
    font-style: italic;
}

.about-intro__description {
    grid-area: intro;
    min-width: 0;
    margin-bottom: 48px;
    padding-left: clamp(18px, 2.5vw, 35px);
    border-left: 2px solid rgba(163, 244, 221, 0.52);
}

.about-intro__description p {
    margin: 0 0 15px;
    color: var(--about-muted);
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.72;
}

.about-intro__description p:last-child {
    margin-bottom: 0;
}

.about-intro__description .about-lead {
    color: #f4fffa;
    font-family: Georgia, serif;
    font-size: clamp(20px, 1.8vw, 27px);
    line-height: 1.3;
}

/* ABOUT INTRO END */


/* ==================================================
   ABOUT SWITCHERS START
================================================== */

.about-switchers {
    grid-area: switchers;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    margin-bottom: 18px;
}

.about-switcher {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
    min-height: 83px;
    padding: 17px 21px;

    border: 2px solid #b2f7e5;
    border-radius: 16px;
    background: linear-gradient(130deg, #dcfff2, #a8e8dc);

    color: #123e49;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: left;

    cursor: pointer;
    box-shadow: 0 6px 19px rgba(3, 39, 48, 0.18);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.about-switcher__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(15, 104, 106, 0.12);
    color: #175c66;
}

.about-switcher__icon svg {
    width: 29px;
    height: 29px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-switcher__text {
    min-width: 0;
    line-height: 1.35;
}

.about-switcher__indicator {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-radius: 50%;
    background: #25898c;
}

.about-switcher.is-active {
    border-color: #abffef;
    background: linear-gradient(
        120deg,
        #078f91 0%,
        #3275c9 52%,
        #7544d5 100%
    );
    color: #ffffff;
    box-shadow:
        0 8px 25px rgba(4, 36, 78, 0.28),
        0 0 0 1px rgba(167, 255, 239, 0.3);
}

.about-switcher.is-active .about-switcher__icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.17);
}

.about-switcher.is-active .about-switcher__indicator {
    background: #d5ffed;
    box-shadow: 0 0 13px rgba(186, 255, 233, 0.9);
}

.about-switcher:focus-visible {
    outline: 3px solid #f5d7a9;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .about-switcher:hover:not(.is-active) {
        transform: translateY(-2px);
        background: #f0fff8;
        border-color: #ffffff;
        box-shadow: 0 9px 24px rgba(3, 39, 48, 0.22);
    }
}

/* ABOUT SWITCHERS END */


/* ==================================================
   ABOUT PANELS START
================================================== */

.about-panels {
    grid-area: panels;
    min-width: 0;
}

.about-panel {
    min-width: 0;
    padding: clamp(25px, 4vw, 50px);

    border: 1px solid var(--about-border);
    border-radius: 22px;
    background: linear-gradient(145deg, #104c55, #115568);

    box-shadow: 0 14px 35px rgba(2, 38, 49, 0.14);
}

.about-panel[hidden] {
    display: none !important;
}

.about-panel__heading {
    max-width: 900px;
    margin-bottom: 32px;
}

.about-panel__label {
    display: block;
    margin-bottom: 13px;
    color: #96ebd6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.about-panel__heading h3 {
    margin: 0 0 18px;
    font-family: Georgia, serif;
    font-size: clamp(33px, 3.4vw, 54px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.about-panel__heading h3 em {
    color: #b0f2d9;
    font-weight: 400;
}

.about-panel__heading > p {
    max-width: 790px;
    margin: 0;
    color: #d1e9e5;
    font-size: 15px;
    line-height: 1.75;
}

/* ABOUT PANELS END */


/* ==================================================
   ABOUT HIGHLIGHTS START
================================================== */

.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-highlight {
    min-width: 0;
    padding: clamp(22px, 2.3vw, 31px);

    border: 1px solid rgba(163, 241, 220, 0.17);
    border-radius: 16px;
    background: rgba(80, 165, 153, 0.13);
}

.about-highlight__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 19px;

    border-radius: 15px;
    background: rgba(121, 239, 209, 0.13);
    color: #a7f5de;
}

.about-highlight__icon svg {
    width: 33px;
    height: 33px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-highlight h4 {
    margin: 0 0 12px;
    color: #f0fff9;
    font-family: Georgia, serif;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 400;
}

.about-highlight p {
    margin: 0;
    color: #c9e4e0;
    font-size: 14px;
    line-height: 1.75;
}

/* ABOUT HIGHLIGHTS END */


/* ==================================================
   ABOUT FIRST VISIT START
================================================== */

.about-visit-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-visit-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px 0;
    border-top: 1px solid rgba(162, 235, 216, 0.28);
}

.about-visit-step__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 78px;
    min-height: 30px;
    padding: 5px 9px;

    border: 1px solid rgba(142, 239, 211, 0.42);
    border-radius: 7px;
    background: rgba(71, 174, 155, 0.16);

    color: #b1f6df;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.about-visit-step h4 {
    margin: 0 0 10px;
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.about-visit-step p {
    margin: 0;
    color: #cee6e1;
    font-size: 14px;
    line-height: 1.75;
}

.about-note {
    margin-top: 25px;
    padding: 23px 27px;

    border-left: 3px solid #a7f5da;
    border-radius: 0 12px 12px 0;
    background: rgba(112, 222, 193, 0.12);
}

.about-note strong {
    display: block;
    margin-bottom: 8px;
    color: #bcf8e1;
    font-size: 14px;
}

.about-note p {
    margin: 0;
    color: #d5eae5;
    font-size: 14px;
    line-height: 1.7;
}

/* ABOUT FIRST VISIT END */


/* ==================================================
   ABOUT VISITOR INFO START
================================================== */

.about-visitor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-info-block {
    min-width: 0;
    padding: 27px;

    border: 1px solid rgba(161, 239, 219, 0.19);
    border-radius: 16px;
    background: rgba(75, 158, 157, 0.15);
}

.about-info-block__label {
    display: block;
    margin-bottom: 14px;
    color: #a6f4dd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.about-info-block h4 {
    margin: 0 0 17px;
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 400;
}

.about-info-block p,
.about-info-block address {
    margin: 0 0 13px;
    color: #cee6e2;
    font-size: 14px;
    font-style: normal;
    line-height: 1.75;
}

.about-info-block p:last-child {
    margin-bottom: 0;
}

.about-hours {
    margin-bottom: 18px;
}

.about-hours > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 13px 0;

    border-bottom: 1px solid rgba(164, 231, 215, 0.2);
}

.about-hours span {
    color: #d3e9e4;
    font-size: 13px;
}

.about-hours strong {
    color: #b0f6df;
    font-size: 13px;
    white-space: nowrap;
}

/* ABOUT VISITOR INFO END */


/* ==================================================
   ABOUT MOBILE INFORMATION START
================================================== */

.about-mobile-info {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 24px;
    padding: 25px 10px;

    border-top: 1px solid rgba(158, 239, 216, 0.38);
    border-bottom: 1px solid rgba(158, 239, 216, 0.2);
}

.about-mobile-info__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    color: #a7f4dc;
}

.about-mobile-info__icon svg {
    width: 44px;
    height: 44px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-mobile-info h4 {
    margin: 0 0 11px;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 400;
}

.about-mobile-info p {
    max-width: 850px;
    margin: 0;
    color: #cee6df;
    font-size: 14px;
    line-height: 1.7;
}

/* ABOUT MOBILE INFORMATION END */


/* ==================================================
   ABOUT CLOSING START
================================================== */

.about-closing {
    grid-area: closing;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 42px;
    padding: 18px 0;
    text-align: center;
}

.about-closing__decoration {
    color: #aff4db;
    font-size: 27px;
}

.about-closing p {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(19px, 2.2vw, 29px);
    line-height: 1.45;
}

.about-closing strong {
    color: #b7f4db;
    font-weight: 400;
    font-style: italic;
}

/* ABOUT CLOSING END */


/* ==================================================
   ABOUT TABLET START
================================================== */

@media (max-width: 1100px) {
    .about-container {
        column-gap: 32px;
    }

    .about-switcher {
        gap: 11px;
        padding: 15px;
        font-size: 13px;
    }

    .about-switcher__icon {
        width: 39px;
        height: 39px;
    }

    .about-visit-step {
        flex-direction: column;
        gap: 13px;
    }
}

/* ABOUT TABLET END */


/* ==================================================
   ABOUT MOBILE START
================================================== */

@media (max-width: 700px) {

    .about-view {
        padding: 28px 16px calc(
            105px + env(safe-area-inset-bottom)
        );
    }

    .about-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* MOBILE HEADING START */

    .about-intro__heading {
        order: 1;
        margin-bottom: 23px;
    }

    .about-eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .about-intro__heading h2 {
        font-size: clamp(40px, 10.5vw, 58px);
    }

    /* MOBILE HEADING END */


    /* MOBILE SWITCHERS START */

    .about-switchers {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 25px;
    }

    .about-switcher {
        min-height: 62px;
        padding: 11px 14px;
        border-radius: 14px;
        font-size: 14px;
    }

    .about-switcher__icon {
        width: 39px;
        height: 39px;
    }

    .about-switcher__icon svg {
        width: 26px;
        height: 26px;
    }

    /* MOBILE SWITCHERS END */


    /* MOBILE ACCORDION PANELS START */

    .about-switchers > .about-panel {
        width: 100%;
        min-width: 0;
        margin: 0 0 6px;
        padding: 22px 17px;

        border: 1px solid rgba(157, 249, 224, 0.38);
        border-radius: 15px;
        background: linear-gradient(145deg, #104d58, #135a68);

        box-shadow: 0 10px 25px rgba(2, 37, 48, 0.16);
    }

    .about-panel__heading {
        margin-bottom: 23px;
    }

    .about-panel__heading h3 {
        font-size: clamp(30px, 8vw, 42px);
    }

    .about-panel__heading > p {
        font-size: 14px;
        line-height: 1.65;
    }

    .about-panels:empty {
        display: none;
    }

    /* MOBILE ACCORDION PANELS END */


    /* MOBILE INTRO START */

    .about-intro__description {
        order: 3;
        margin-bottom: 28px;
        padding-left: 16px;
    }

    .about-intro__description .about-lead {
        font-size: 20px;
    }

    .about-intro__description p {
        font-size: 14px;
        line-height: 1.65;
    }

    /* MOBILE INTRO END */


    /* MOBILE CONTENT START */

    .about-panels {
        order: 4;
        width: 100%;
    }

    .about-highlights,
    .about-visit-steps,
    .about-visitor-grid {
        grid-template-columns: 1fr;
    }

    .about-highlight {
        padding: 22px;
    }

    .about-highlight h4 {
        font-size: 23px;
    }

    .about-visit-step {
        flex-direction: row;
        gap: 14px;
    }

    .about-visit-step__marker {
        min-width: 70px;
        font-size: 9px;
    }

    .about-visit-step h4 {
        font-size: 21px;
    }

    .about-info-block {
        padding: 22px 20px;
    }

    .about-info-block h4 {
        font-size: 24px;
    }

    .about-mobile-info {
        align-items: flex-start;
        gap: 15px;
        padding: 23px 0;
    }

    .about-mobile-info__icon {
        width: 40px;
        height: 40px;
    }

    .about-mobile-info__icon svg {
        width: 34px;
        height: 34px;
    }

    .about-mobile-info h4 {
        font-size: 21px;
    }

    /* MOBILE CONTENT END */


    /* MOBILE CLOSING START */

    .about-closing {
        order: 5;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    .about-closing p {
        font-size: 21px;
    }

    /* MOBILE CLOSING END */
}

/* ABOUT MOBILE END */


/* ==================================================
   ABOUT SMALL MOBILE START
================================================== */

@media (max-width: 380px) {

    .about-view {
        padding-left: 12px;
        padding-right: 12px;
    }

    .about-intro__heading h2 {
        font-size: 38px;
    }

    .about-visit-step {
        flex-direction: column;
        gap: 11px;
    }

    .about-hours > div {
        flex-direction: column;
        gap: 5px;
    }
}

/* ABOUT SMALL MOBILE END */


/* ==================================================
   ABOUT END
================================================== */
/* ==================================================
   CASINO GAMES START
================================================== */

.games-view {
    --games-accent: #d6b8ff;
    --games-text: #f6f0ff;
    --games-muted: #d6cce9;
    --games-border: rgba(203, 175, 255, .24);

    min-height: calc(100dvh - var(--header-height));
    padding: clamp(32px, 5vw, 76px) clamp(16px, 5vw, 78px);
    color: var(--games-text);

    background:
        radial-gradient(ellipse at 95% 0%,
            rgba(167, 99, 232, .35), transparent 48%),
        radial-gradient(ellipse at 0% 90%,
            rgba(47, 105, 198, .25), transparent 50%),
        linear-gradient(145deg, #493d85, #363a78 55%, #29446f);

    overflow: hidden;
}

.games-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    grid-template-areas:
        "heading intro"
        "switchers switchers"
        "panels panels"
        "closing closing";
    align-items: center;
    column-gap: clamp(25px, 5vw, 82px);
    max-width: 1440px;
    margin: 0 auto;
}

/* GAMES INTRO START */

.games-heading {
    grid-area: heading;
    min-width: 0;
    margin-bottom: 42px;
}

.games-eyebrow,
.games-kicker {
    margin: 0 0 14px;
    color: #e3c6ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.games-heading h2 {
    margin: 0;
    font: 400 clamp(45px, 5.3vw, 86px)/1.05 Georgia, serif;
    letter-spacing: -.04em;
}

.games-heading h2 em,
.games-feature h3 em,
.games-panel__heading em {
    color: #f3c992;
    font-weight: 400;
}

.games-lead {
    margin: 18px 0 0;
    font: italic clamp(20px, 2vw, 29px)/1.35 Georgia, serif;
    color: #e5d8ff;
}

.games-intro {
    grid-area: intro;
    margin-bottom: 42px;
    padding-left: 25px;
    border-left: 2px solid #be94ef;
}

.games-intro p {
    margin: 0 0 15px;
    color: var(--games-muted);
    font-size: 15px;
    line-height: 1.75;
}

.games-intro p:last-child {
    margin-bottom: 0;
}

/* GAMES INTRO END */


/* GAMES SWITCHERS START */

.games-switchers {
    grid-area: switchers;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.games-switcher {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;

    min-width: 0;
    min-height: 106px;
    padding: 18px 21px;

    border: 2px solid #ded0ff;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0e9ff, #c6baf4);
    color: #30265c;

    text-align: left;
    cursor: pointer;

    transition: transform .2s ease, background .2s ease,
                box-shadow .2s ease, border-color .2s ease;
}

.games-switcher svg {
    grid-row: span 2;
    width: 39px;
    height: 39px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.games-switcher span {
    font-size: 16px;
    font-weight: 800;
}

.games-switcher small {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}

.games-switcher.is-active {
    background: linear-gradient(125deg, #7547d6, #3b65c6 65%, #178fbc);
    border-color: #e2c8ff;
    color: #fff;
    box-shadow: 0 9px 28px rgba(20, 15, 70, .28);
}

.games-switcher:focus-visible {
    outline: 3px solid #ffdaaa;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .games-switcher:hover:not(.is-active) {
        transform: translateY(-3px);
        background: #fff2ff;
    }
}

/* GAMES SWITCHERS END */


/* GAMES PANELS START */

.games-panels {
    grid-area: panels;
    min-width: 0;
}

.games-panel {
    min-width: 0;
    padding: clamp(20px, 3.5vw, 45px);
    border: 1px solid var(--games-border);
    border-radius: 22px;
    background: linear-gradient(145deg, #322d68, #283967);
}

.games-panel[hidden] {
    display: none !important;
}

.games-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(20px, 3vw, 45px);
    align-items: center;
    margin-bottom: 36px;
}

.games-feature__copy {
    min-width: 0;
}

.games-feature h3 {
    margin: 0 0 19px;
    font: 400 clamp(32px, 3.5vw, 55px)/1.1 Georgia, serif;
}

.games-feature p:not(.games-kicker) {
    margin: 0 0 14px;
    color: var(--games-muted);
    font-size: 14px;
    line-height: 1.75;
}

.games-feature__image {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(214, 184, 255, .3);
}

.games-feature__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    height: auto;
    object-fit: cover;
}

.games-subheading {
    margin: 30px 0 18px;
}

.games-subheading h4,
.games-comparison h4 {
    margin: 0 0 12px;
    font: 400 clamp(25px, 2.5vw, 36px)/1.2 Georgia, serif;
}

.games-subheading p,
.games-comparison > p {
    margin: 0 0 13px;
    color: var(--games-muted);
    font-size: 14px;
    line-height: 1.75;
}

/* GAMES PANELS END */


/* GAMES DETAIL CARDS START */

.games-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.games-detail {
    padding: 25px;
    border: 1px solid rgba(202, 180, 255, .17);
    border-radius: 16px;
    background: rgba(167, 143, 237, .09);
}

.games-detail h4 {
    margin: 0 0 12px;
    font: 400 24px/1.2 Georgia, serif;
    color: #f4dcff;
}

.games-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--games-muted);
}

/* GAMES DETAIL CARDS END */


/* GAMES ACCORDION START */

.games-accordion {
    display: grid;
    gap: 10px;
    margin-bottom: 34px;
}

.games-disclosure {
    min-width: 0;
    border: 1px solid rgba(217, 196, 255, .32);
    border-radius: 15px;
    overflow: hidden;
    background: #473d82;
}

.games-disclosure summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;

    padding: 20px 24px;
    color: #fff;
    cursor: pointer;
    list-style: none;
}

.games-disclosure summary::-webkit-details-marker {
    display: none;
}

.games-disclosure summary span {
    font-size: 17px;
    font-weight: 800;
}

.games-disclosure summary small {
    font-size: 12px;
    color: #e5d7ff;
}

.games-disclosure[open] {
    background: #392f70;
    border-color: #d5adff;
}

.games-disclosure[open] summary {
    background: linear-gradient(115deg, #7351bd, #4c62aa);
}

.games-disclosure__body {
    padding: 8px 24px 24px;
}

.games-disclosure__body p {
    margin: 14px 0 0;
    color: #e0d7f0;
    font-size: 14px;
    line-height: 1.8;
}

.games-disclosure__body strong {
    color: #f6d5a4;
}

/* GAMES ACCORDION END */


/* GAMES COMPARISON START */

.games-comparison {
    margin: 29px 0 0;
    padding: 26px;
    border: 1px solid rgba(207, 182, 255, .25);
    border-radius: 16px;
    background: rgba(106, 90, 173, .2);
}

.games-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 11px;
}

.games-table {
    width: 100%;
    border-collapse: collapse;
    color: #f3edff;
    font-size: 13px;
    line-height: 1.55;
}

.games-table th,
.games-table td {
    padding: 14px 15px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(223, 205, 255, .2);
}

.games-table thead th {
    background: rgba(161, 123, 233, .25);
    color: #fff;
    font-weight: 800;
}

.games-table tbody th {
    color: #f4d2ff;
    font-weight: 800;
}

.games-table tbody tr:last-child th,
.games-table tbody tr:last-child td {
    border-bottom: none;
}

/* GAMES COMPARISON END */


/* GAMES NOTICE AND CLOSING START */

.games-notice {
    margin-top: 27px;
    padding: 20px 24px;
    border-left: 3px solid #ddb5ff;
    background: rgba(205, 167, 255, .12);
    border-radius: 0 12px 12px 0;
}

.games-notice strong {
    display: block;
    margin-bottom: 7px;
    color: #f4d6ff;
}

.games-notice p {
    margin: 0;
    color: var(--games-muted);
    font-size: 14px;
    line-height: 1.65;
}

.games-closing {
    grid-area: closing;
    text-align: center;
    padding-top: 45px;
}

.games-closing p {
    margin: 0 0 10px;
    font: 400 clamp(20px, 2.5vw, 32px)/1.4 Georgia, serif;
}

.games-closing strong {
    color: #f4c99c;
    font-weight: 400;
    font-style: italic;
}

.games-closing span {
    color: #d6c7f0;
    font-size: 11px;
    letter-spacing: .14em;
}

/* GAMES NOTICE AND CLOSING END */


/* GAMES TABLET START */

@media (max-width: 1050px) {
    .games-container {
        column-gap: 25px;
    }

    .games-switcher {
        padding: 14px;
        column-gap: 10px;
    }

    .games-switcher span {
        font-size: 14px;
    }
}

/* GAMES TABLET END */


/* GAMES MOBILE START */

@media (max-width: 700px) {
    .games-view {
        padding: 30px 16px calc(105px + env(safe-area-inset-bottom));
    }

    .games-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .games-heading {
        order: 1;
        margin-bottom: 20px;
    }

    .games-heading h2 {
        font-size: clamp(40px, 10vw, 57px);
    }

    .games-lead {
        font-size: 19px;
        margin-top: 11px;
    }

    .games-switchers {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 0;
    }

    .games-switcher {
        min-height: 71px;
        padding: 12px 16px;
        border-radius: 13px;
    }

    .games-switcher svg {
        width: 32px;
        height: 32px;
    }

    .games-switcher span {
        font-size: 15px;
    }

    .games-switcher small {
        font-size: 11px;
    }

    .games-switchers > .games-panel {
        width: 100%;
        margin: 0 0 8px;
        padding: 22px 16px;
        border-radius: 15px;
    }

    .games-intro {
        order: 3;
        margin: 26px 0 0;
        padding-left: 16px;
    }

    .games-intro p {
        font-size: 13px;
        line-height: 1.65;
    }

    .games-panels {
        order: 4;
    }

    .games-panels:empty {
        display: none;
    }

    .games-feature {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .games-feature h3 {
        font-size: 31px;
    }

    .games-feature__image img {
        aspect-ratio: 1.65;
    }

    .games-detail-grid {
        grid-template-columns: 1fr;
    }

    .games-detail {
        padding: 20px;
    }

    .games-disclosure summary {
        padding: 17px 18px;
    }

    .games-disclosure__body {
        padding: 5px 18px 20px;
    }

    .games-comparison {
        padding: 19px 15px;
    }

    .games-table {
        min-width: 540px;
    }

    .games-closing {
        order: 5;
        padding-top: 30px;
    }
}

/* GAMES MOBILE END */


/* GAMES SMALL MOBILE START */

@media (max-width: 380px) {
    .games-view {
        padding-left: 12px;
        padding-right: 12px;
    }

    .games-heading h2 {
        font-size: 37px;
    }

    .games-switcher {
        grid-template-columns: 31px minmax(0, 1fr);
        padding: 12px;
    }
}

/* GAMES SMALL MOBILE END */


/* ==================================================
   CASINO GAMES END
================================================== */
/* ==================================================
   PROMOTIONS START
================================================== */

.promo-view {
    --promo-gold: #f5c47c;
    --promo-teal: #61e8e3;
    --promo-purple: #bd88ff;
    --promo-navy: #061b30;

    min-height: calc(100dvh - var(--header-height));
    padding: 0 clamp(12px, 2vw, 32px) 54px;

    background:
        radial-gradient(ellipse at 90% 85%, #124d6c55, transparent 55%),
        linear-gradient(145deg, #061729, #092943 75%, #101d39);

    color: #f5f8ff;
}

.promo-layout {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
}

/* ==================================================
   PROMOTIONS HERO START
================================================== */

.promo-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 290px;
    margin-bottom: 13px;
    padding: clamp(25px, 4vw, 54px);

    overflow: hidden;
    background: #071a30;
}

.promo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image:
        url("../images/st-albert-casino-promotions-banner.webp");
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
}

.promo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(4, 14, 34, .97) 0%,
        rgba(4, 14, 34, .91) 29%,
        rgba(4, 14, 34, .64) 49%,
        rgba(4, 14, 34, .05) 100%
    );
}

.promo-hero__content {
    position: relative;
    max-width: 710px;
    z-index: 1;
}

.promo-eyebrow,
.promo-label {
    display: block;
    margin: 0 0 13px;

    color: var(--promo-teal);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.promo-hero h2 {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(39px, 4.3vw, 68px);
    font-weight: 400;

    line-height: 1.06;
    letter-spacing: -.035em;
}

.promo-hero h2 em {
    display: block;
    color: var(--promo-gold);
    font-weight: 400;
}

.promo-hero p:last-child {
    max-width: 620px;
    margin: 0;

    color: #e1eaf5;
    font-size: 15px;
    line-height: 1.7;
}

/* PROMOTIONS HERO END */


/* ==================================================
   PROMOTIONS SWITCHERS START
================================================== */

.promo-switchers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 11px;
    margin: 13px 0;
}

.promo-choice {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 105px;

    padding: 17px;

    border: 1.5px solid;
    border-radius: 13px;

    color: #fff;
    font-family: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.promo-choice--cash {
    background: linear-gradient(120deg, #845016, #30231d);
    border-color: #ffc779;
}

.promo-choice--tournament {
    background: linear-gradient(120deg, #68309b, #261b54);
    border-color: #b67fff;
}

.promo-choice--welcome {
    background: linear-gradient(120deg, #087c83, #07334c);
    border-color: #46e2e3;
}

.promo-choice--dining {
    background: linear-gradient(120deg, #166eae, #10325e);
    border-color: #69bfff;
}

.promo-choice > svg {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;

    stroke: #ffdfa4;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.promo-choice__text {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.promo-choice__text small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
}

.promo-choice__text strong {
    font-size: clamp(17px, 1.5vw, 24px);
    line-height: 1.15;
}

.promo-choice__text > span {
    color: #e1eaf5;
    font-size: 12px;
    line-height: 1.4;
}

.promo-choice__action {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    margin-left: auto;
    border-radius: 50%;

    background: #ffe0a4;
    color: #18344b;
}

.promo-choice__action::before {
    content: "+";
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.promo-choice[aria-expanded="true"] {
    border-width: 2px;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .55),
        0 0 24px rgba(71, 224, 220, .25);
}

.promo-choice[aria-expanded="true"] .promo-choice__action::before {
    content: "−";
}

.promo-choice:focus-visible {
    outline: 3px solid #fff0b7;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .promo-choice:hover {
        transform: translateY(-3px);
        box-shadow: 0 11px 27px rgba(0, 0, 0, .4);
    }
}

/* PROMOTIONS SWITCHERS END */


/* ==================================================
   PROMOTIONS PANELS START
================================================== */

.promo-panel {
    min-width: 0;
    padding: clamp(19px, 2.5vw, 36px);

    border: 1px solid #3e6a81;
    border-radius: 15px;

    background:
        linear-gradient(135deg, #071c32, #0a2d45 70%, #162c4e);
}

.promo-panel[hidden] {
    display: none !important;
}

.promo-feature {
    display: grid;
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);

    gap: clamp(20px, 3vw, 43px);
    align-items: center;
}

.promo-feature__image {
    width: 100%;
    max-width: 355px;

    margin: 0;
    overflow: hidden;

    border: 1px solid #758fa9;
    border-radius: 13px;
}

.promo-feature__image img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 1;

    object-fit: cover;
}

.promo-feature__body {
    min-width: 0;
}

.promo-feature h3 {
    margin: 0 0 13px;

    font: 400 clamp(32px, 3.5vw, 54px)/1.1 Georgia, serif;
}

.promo-feature h3 em {
    color: var(--promo-gold);
    font-weight: 400;
}

.promo-feature__lead {
    color: #9af3e9 !important;

    font: italic clamp(19px, 1.7vw, 26px)/1.4 Georgia, serif !important;
}

.promo-feature__body p:not(.promo-label),
.promo-section-heading p,
.promo-callout p {
    margin: 0 0 13px;

    color: #d9e8f2;
    font-size: 14px;
    line-height: 1.75;
}

.promo-prize {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 13px;
    padding: 16px 23px;

    border: 1px solid #3ce2df;
    border-radius: 10px;

    background: #063246;
}

.promo-prize--purple {
    background: #292451;
    border-color: #b78aff;
}

.promo-prize small {
    color: #b1f4e6;
    font-size: 10px;
    letter-spacing: .12em;
}

.promo-prize strong {
    color: #f6ca88;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1;
}

.promo-prize strong span {
    font-size: 12px;
}

.promo-section-heading {
    max-width: 850px;
    margin: 30px 0 18px;
}

.promo-section-heading h4 {
    margin: 0 0 11px;

    font: 400 clamp(26px, 2.5vw, 37px) Georgia, serif;
}

/* PROMOTIONS PANELS END */


/* ==================================================
   PROMOTIONS INFORMATION START
================================================== */

.promo-metrics,
.promo-details-grid,
.promo-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.promo-metric {
    flex: 0 1 calc((100% - 24px) / 3);

    min-width: 0;
    padding: 22px;

    border: 1px solid #286780;
    border-radius: 11px;

    background: #0c314a;
}

.promo-metric strong {
    display: block;
    margin-bottom: 12px;

    color: #ffcf83;
    font-size: 29px;
}

.promo-metric:nth-child(even) strong {
    color: #72e9ec;
}

.promo-metric h5,
.promo-details-grid h5,
.promo-menu h5 {
    margin: 0 0 10px;
    font-size: 17px;
}

.promo-metric p,
.promo-details-grid p,
.promo-menu p {
    margin: 0;

    color: #d4e5ef;
    font-size: 13px;
    line-height: 1.7;
}

.promo-details-grid article,
.promo-menu article {
    flex: 0 1 calc(50% - 6px);

    min-width: 0;
    padding: 23px;

    border: 1px solid #38647f;
    border-radius: 12px;

    background: #173653;
}

.promo-details-grid h5,
.promo-menu h5 {
    color: #ffd6a0;

    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.promo-menu span {
    display: block;
    margin-bottom: 9px;

    color: #93ece5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.promo-menu strong {
    display: block;
    margin-bottom: 10px;

    color: #ffcb88;
    font-size: 23px;
}

.promo-callout {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-top: 24px;
    padding: 23px;

    border: 1px solid #9473ea;
    border-radius: 11px;

    background: linear-gradient(120deg, #123b53, #302a69);
}

.promo-callout__icon {
    color: #ffcf88;
    font-size: 29px;
}

.promo-callout strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.promo-callout p {
    margin-bottom: 0;
}

/* PROMOTIONS INFORMATION END */


/* ==================================================
   PROMOTIONS FAQ START
================================================== */

.promo-faq {
    margin-top: 14px;
}

.promo-faq__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    width: 100%;
    padding: 19px 24px;

    border: 1px solid #72e2e4;
    border-radius: 12px;

    background: linear-gradient(115deg, #17445f, #4c3c84);
    color: #fff;

    text-align: left;
    cursor: pointer;
}

.promo-faq__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.promo-faq__heading small {
    color: #a8f5e1;
    font-size: 10px;
    letter-spacing: .12em;
}

.promo-faq__heading strong {
    font: 400 clamp(24px, 2.5vw, 35px) Georgia, serif;
}

.promo-faq__heading > span {
    color: #dce8f4;
    font-size: 12px;
}

.promo-faq__icon {
    display: grid;
    place-items: center;
    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    border-radius: 50%;
    background: #a0f4e2;
    color: #173d56;

    font-size: 27px;
    transition: transform .2s ease;
}

.promo-faq__button[aria-expanded="true"] .promo-faq__icon {
    transform: rotate(45deg);
}

.promo-faq__content {
    margin-top: 11px;
    padding: 18px;

    border-radius: 12px;
    background: #12314a;
}

.promo-faq__content[hidden] {
    display: none !important;
}

.promo-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.promo-faq__column {
    display: grid;
    align-content: start;
    gap: 10px;
}

.promo-faq details {
    border: 1px solid #3c6882;
    border-radius: 9px;
    background: #1b415e;
}

.promo-faq summary {
    padding: 16px;

    color: #f7fbff;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.promo-faq details p {
    margin: 0;
    padding: 0 16px 18px;

    color: #d6e6f1;
    font-size: 13px;
    line-height: 1.7;
}

.promo-notice {
    margin: 13px 0 0;
    padding: 15px 20px;

    border: 1px solid #326680;
    border-radius: 9px;

    background: #081d33;
    color: #d6e5ef;

    font-size: 12px;
    line-height: 1.7;
}

.promo-notice strong {
    color: #9af4e5;
}

/* PROMOTIONS FAQ END */


/* ==================================================
   PROMOTIONS TABLET START
================================================== */

@media (max-width: 1180px) {
    .promo-switchers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PROMOTIONS TABLET END */


/* ==================================================
   PROMOTIONS MOBILE START
================================================== */

@media (max-width: 700px) {

    .promo-view {
        padding: 0 12px calc(105px + env(safe-area-inset-bottom));
    }

    .promo-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* MOBILE HERO START */

    .promo-hero {
        order: 1;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 0;
        margin-bottom: 13px;
        padding: 0;

        border-radius: 0 0 15px 15px;
        overflow: hidden;

        background: #071a30;
    }

    .promo-hero::before {
        display: none;
    }

    .promo-hero::after {
        content: "";
        position: relative;
        inset: auto;
        z-index: auto;

        display: block;
        flex: none;

        width: 100%;
        height: clamp(170px, 49vw, 245px);

        background-image:
            url("../images/st-albert-casino-promotions-banner.webp");
        background-size: cover;
        background-position: 72% 45%;
        background-repeat: no-repeat;
    }

    .promo-hero__content {
        position: relative;
        z-index: 1;

        max-width: 100%;
        padding: 25px 18px 20px;
    }

    .promo-hero h2 {
        margin-bottom: 15px;

        font-size: clamp(34px, 8.7vw, 46px);
        line-height: 1.06;
    }

    .promo-hero p:last-child {
        font-size: 13px;
        line-height: 1.6;
    }

    /* MOBILE HERO END */


    /* MOBILE SWITCHERS START */

    .promo-switchers {
        order: 2;

        display: flex;
        flex-direction: column;

        gap: 10px;
        margin: 0;
    }

    .promo-choice {
        min-height: 85px;
        padding: 14px;
    }

    .promo-choice__text strong {
        font-size: 21px;
    }

    .promo-choice__text small {
        font-size: 9px;
    }

    .promo-choice__text > span {
        font-size: 11px;
    }

    .promo-switchers > .promo-panel {
        width: 100%;
        margin: 0 0 8px;
    }

    /* MOBILE SWITCHERS END */


    /* MOBILE PANELS START */

    .promo-panels {
        order: 3;
    }

    .promo-panels:empty {
        display: none;
    }

    .promo-panel {
        padding: 18px 14px;
    }

    .promo-feature {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .promo-feature__image {
        max-width: 270px;
        margin: 0 auto;
    }

    .promo-feature h3 {
        font-size: 32px;
    }

    .promo-prize {
        max-width: 100%;
    }

    .promo-metrics,
    .promo-details-grid,
    .promo-menu {
        gap: 10px;
    }

    .promo-metric,
    .promo-details-grid article,
    .promo-menu article {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .promo-callout {
        padding: 18px;
    }

    /* MOBILE PANELS END */


    /* MOBILE FAQ START */

    .promo-faq {
        order: 4;
        margin-top: 19px;
    }

    .promo-faq__button {
        padding: 17px;
    }

    .promo-faq__grid {
        grid-template-columns: 1fr;
    }

    .promo-notice {
        order: 5;
    }

    /* MOBILE FAQ END */
}

/* PROMOTIONS MOBILE END */


/* ==================================================
   PROMOTIONS END
================================================== */
/* ==================================================
   EVENTS START
================================================== */

.events-view {
    --events-gold: #ffd39c;
    --events-cyan: #88eee4;
    --events-text: #f4f7ff;

    min-height: calc(100dvh - var(--header-height));
    padding: 0 clamp(12px, 2vw, 32px) 55px;

    background:
        radial-gradient(ellipse at 90% 85%, #71457944, transparent 55%),
        linear-gradient(145deg, #101a35, #263350 60%, #263d53);

    color: var(--events-text);
}

.events-layout {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
}

/* EVENTS HERO START */

.events-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 315px;
    padding: clamp(26px, 4vw, 55px);
    margin-bottom: 14px;

    background: #111b35;
    overflow: hidden;
}

.events-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        url("../images/st-albert-casino-events-banner.webp")
        center 40% / cover no-repeat;
}

.events-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(9, 16, 37, .97) 0%,
        rgba(10, 18, 40, .93) 30%,
        rgba(14, 18, 43, .75) 53%,
        rgba(13, 18, 43, .08) 100%
    );
}

.events-hero__content {
    max-width: 690px;
}

.events-eyebrow,
.events-label {
    display: block;
    margin: 0 0 13px;

    color: #9af2e5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.events-hero h2 {
    margin: 0 0 18px;
    font: 400 clamp(39px, 4.4vw, 70px)/1.05 Georgia, serif;
    letter-spacing: -.035em;
}

.events-hero h2 em {
    display: block;
    color: var(--events-gold);
    font-weight: 400;
}

.events-hero__lead {
    color: #ffd5a3 !important;
    font: italic clamp(19px, 1.7vw, 27px)/1.35 Georgia, serif !important;
}

.events-hero__content > p:last-child {
    max-width: 590px;
    margin: 0;
    color: #e3e9f6;
    font-size: 15px;
    line-height: 1.7;
}

/* EVENTS HERO END */


/* EVENTS SWITCHERS START */

.events-switchers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.events-choice {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 112px;
    padding: 17px;

    border: 1.5px solid;
    border-radius: 13px;

    color: #ffffff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.events-choice--music {
    background: linear-gradient(120deg, #174f89, #302057);
    border-color: #8cb9ff;
}

.events-choice--private {
    background: linear-gradient(120deg, #995847, #582b47);
    border-color: #ffc49e;
}

.events-choice--corporate {
    background: linear-gradient(120deg, #187979, #173e58);
    border-color: #82f0e7;
}

.events-choice--weddings {
    background: linear-gradient(120deg, #854f91, #3a335f);
    border-color: #efbafa;
}

.events-choice > svg {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    stroke: #ffe1a9;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.events-choice__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.events-choice__text small {
    color: #c9f9f2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.4;
}

.events-choice__text strong {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.2;
}

.events-choice__text > span {
    color: #e7e6f4;
    font-size: 11px;
    line-height: 1.4;
}

.events-choice__action {
    display: grid;
    place-items: center;
    flex: 0 0 30px;

    width: 30px;
    height: 30px;
    margin-left: auto;

    border-radius: 50%;
    background: #ffe0aa;
    color: #26324b;
}

.events-choice__action::before {
    content: "+";
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.events-choice[aria-expanded="true"] {
    border-width: 2px;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .45),
        0 0 27px rgba(147, 209, 238, .3);
}

.events-choice[aria-expanded="true"] .events-choice__action::before {
    content: "−";
}

.events-choice:focus-visible,
.events-faq button:focus-visible,
.events-faq summary:focus-visible {
    outline: 3px solid #ffe4aa;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .events-choice:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
    }
}

/* EVENTS SWITCHERS END */


/* EVENTS PANELS START */

.events-panel {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 37px);

    border: 1px solid #58738c;
    border-radius: 16px;

    background:
        linear-gradient(135deg, #121e37, #1c304b 65%, #263352);
}

.events-panel[hidden] {
    display: none !important;
}

.events-feature {
    display: grid;
    grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
    align-items: center;
    gap: clamp(22px, 3vw, 45px);
}

.events-feature__image {
    width: 100%;
    max-width: 365px;
    margin: 0;

    overflow: hidden;
    border: 1px solid #8f92b0;
    border-radius: 15px;
}

.events-feature__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.events-feature h3 {
    margin: 0 0 14px;
    font: 400 clamp(33px, 3.4vw, 55px)/1.1 Georgia, serif;
}

.events-feature h3 em {
    color: #f9cb96;
    font-weight: 400;
}

.events-feature__lead {
    color: #a7eee9 !important;
    font: italic clamp(19px, 1.7vw, 26px)/1.4 Georgia, serif !important;
}

.events-feature__body > p:not(.events-label) {
    margin: 0 0 14px;
    color: #dce7f2;
    font-size: 14px;
    line-height: 1.8;
}

/* EVENTS PANELS END */


/* EVENTS INFORMATION START */

.events-section-heading {
    max-width: 850px;
    margin: 34px 0 19px;
}

.events-section-heading h4 {
    margin: 0 0 13px;
    font: 400 clamp(27px, 2.7vw, 39px)/1.2 Georgia, serif;
}

.events-section-heading > p:last-child {
    margin: 0;
    color: #d7e7ed;
    font-size: 14px;
    line-height: 1.7;
}

.events-info-grid,
.events-venue-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.events-info-grid article,
.events-venue {
    flex: 0 1 calc(50% - 7px);
    min-width: 0;
    padding: 25px;

    border: 1px solid #56718c;
    border-radius: 14px;
    background: #253956;
}

.events-info-grid article:nth-child(4n+2) {
    background: #263f4b;
    border-color: #4b8e8b;
}

.events-info-grid article:nth-child(4n+3) {
    background: #45344c;
    border-color: #8f657a;
}

.events-info-grid article:nth-child(4n+4) {
    background: #343a62;
    border-color: #6c71a0;
}

.events-info-grid h5,
.events-venue h5 {
    margin: 0 0 13px;
    color: #ffd5a5;
    font: 400 25px/1.2 Georgia, serif;
}

.events-info-grid p,
.events-venue p {
    margin: 0 0 12px;
    color: #e1e8f1;
    font-size: 14px;
    line-height: 1.75;
}

.events-info-grid p:last-child,
.events-venue p:last-child {
    margin-bottom: 0;
}

.events-venue:first-child {
    background: linear-gradient(135deg, #194d60, #264261);
}

.events-venue:last-child {
    background: linear-gradient(135deg, #513754, #323758);
}

.events-venue__capacity {
    display: inline-block;
    margin-bottom: 15px;
    color: #9ff5e6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

/* EVENTS INFORMATION END */


/* EVENTS CALLOUT START */

.events-callout {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    margin-top: 25px;
    padding: 24px;

    border: 1px solid #d19e81;
    border-radius: 12px;
    background: linear-gradient(110deg, #49334c, #263b62);
}

.events-callout__icon {
    flex-shrink: 0;
    color: #ffdaa5;
    font-size: 30px;
}

.events-callout strong {
    display: block;
    margin-bottom: 10px;
    color: #ffe2b5;
    font-size: 16px;
}

.events-callout p {
    margin: 0;
    color: #e1e9f0;
    font-size: 14px;
    line-height: 1.75;
}

/* EVENTS CALLOUT END */


/* EVENTS FAQ START */

.events-faq {
    margin-top: 17px;
}

.events-faq__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    padding: 22px 25px;

    border: 1px solid #90b9cd;
    border-radius: 13px;

    background: linear-gradient(110deg, #2b4268, #604069);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.events-faq__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.events-faq__heading small {
    color: #a5f6e7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.events-faq__heading strong {
    font: 400 clamp(23px, 2.5vw, 36px) Georgia, serif;
}

.events-faq__heading > span {
    color: #e1e9f3;
    font-size: 12px;
}

.events-faq__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: #a6f6e1;
    color: #193f54;
    font-size: 29px;

    transition: transform .2s ease;
}

.events-faq__button[aria-expanded="true"] .events-faq__icon {
    transform: rotate(45deg);
}

.events-faq__content {
    margin-top: 12px;
    padding: 20px;
    border-radius: 13px;
    background: #182e48;
}

.events-faq__content[hidden] {
    display: none !important;
}

.events-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.events-faq__column {
    display: grid;
    align-content: start;
    gap: 10px;
}

.events-faq details {
    border: 1px solid #59718b;
    border-radius: 10px;
    background: #28435e;
    overflow: hidden;
}

.events-faq details[open] {
    background: #3a3d65;
}

.events-faq summary {
    padding: 17px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.events-faq details p {
    margin: 0;
    padding: 0 17px 19px;
    color: #e0e9f3;
    font-size: 13px;
    line-height: 1.7;
}

/* EVENTS FAQ END */


/* EVENTS CLOSING START */

.events-closing {
    padding: 33px 12px 0;
    text-align: center;
}

.events-closing p {
    margin: 0 0 10px;
    font: 400 clamp(21px, 2.6vw, 33px)/1.4 Georgia, serif;
}

.events-closing strong {
    color: #ffcc98;
    font-style: italic;
    font-weight: 400;
}

.events-closing span {
    color: #bcd2e0;
    font-size: 11px;
    letter-spacing: .1em;
}

/* EVENTS CLOSING END */


/* EVENTS TABLET START */

@media (max-width: 1180px) {
    .events-switchers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* EVENTS TABLET END */


/* EVENTS MOBILE START */

@media (max-width: 700px) {

    .events-view {
        padding: 0 12px calc(105px + env(safe-area-inset-bottom));
    }

    .events-layout {
        display: flex;
        flex-direction: column;
    }

    /* MOBILE HERO START */

    .events-hero {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 0;
        margin-bottom: 14px;
        padding: 0;

        border-radius: 0 0 15px 15px;
        background: #161e39;
    }

    .events-hero::before {
        display: none;
    }

    .events-hero::after {
        content: "";
        position: relative;
        inset: auto;
        z-index: auto;

        display: block;
        flex: none;

        width: 100%;
        height: clamp(175px, 50vw, 240px);

        background:
            url("../images/st-albert-casino-events-banner.webp")
            center 38% / cover no-repeat;
    }

    .events-hero__content {
        padding: 26px 18px 21px;
    }

    .events-hero h2 {
        font-size: clamp(35px, 9vw, 49px);
    }

    .events-hero__lead {
        font-size: 20px !important;
    }

    .events-hero__content > p:last-child {
        font-size: 13px;
        line-height: 1.6;
    }

    /* MOBILE HERO END */


    /* MOBILE SWITCHERS START */

    .events-switchers {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 0;
    }

    .events-choice {
        min-height: 87px;
        padding: 15px;
    }

    .events-choice__text strong {
        font-size: 20px;
    }

    .events-choice__text small {
        font-size: 9px;
    }

    .events-switchers > .events-panel {
        margin: 0 0 9px;
    }

    /* MOBILE SWITCHERS END */


    /* MOBILE PANELS START */

    .events-panels {
        order: 3;
    }

    .events-panels:empty {
        display: none;
    }

    .events-panel {
        padding: 20px 15px;
    }

    .events-feature {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .events-feature__image {
        max-width: 280px;
        margin: 0 auto;
    }

    .events-feature h3 {
        font-size: 34px;
    }

    .events-info-grid article,
    .events-venue {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .events-callout {
        padding: 19px;
    }

    /* MOBILE PANELS END */


    /* MOBILE FAQ START */

    .events-faq {
        order: 4;
        margin-top: 22px;
    }

    .events-faq__button {
        padding: 18px;
    }

    .events-faq__grid {
        grid-template-columns: 1fr;
    }

    .events-closing {
        order: 5;
    }

    /* MOBILE FAQ END */
}

/* EVENTS MOBILE END */


/* ==================================================
   EVENTS END
================================================== */
/* ==================================================
   DINING START
================================================== */

.dining-view {
    --dining-gold: #f3c88c;
    --dining-mint: #9eefd5;
    --dining-cream: #fff0d6;

    min-height: calc(100dvh - var(--header-height));
    padding: 0 clamp(12px, 2vw, 32px) 60px;

    color: #fff8ee;
    background:
        radial-gradient(ellipse at 95% 80%, #75404e55, transparent 55%),
        linear-gradient(140deg, #13282c, #173a3b 55%, #253341);
}

.dining-layout {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
}

/* DINING HERO START */

.dining-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 305px;
    padding: clamp(27px, 4vw, 55px);
    margin-bottom: 14px;

    background: #14262d;
    overflow: hidden;
}

.dining-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        url("../images/st-albert-casino-dining-banner.webp")
        center 45% / cover no-repeat;
}

.dining-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(11, 26, 32, .98) 0%,
        rgba(11, 26, 32, .92) 31%,
        rgba(11, 26, 32, .63) 52%,
        rgba(11, 26, 32, .08) 100%
    );
}

.dining-hero__content {
    position: relative;
    max-width: 690px;
}

.dining-eyebrow,
.dining-label {
    display: block;
    margin: 0 0 13px;

    color: var(--dining-mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.dining-hero h2 {
    margin: 0 0 17px;
    font: 400 clamp(41px, 4.5vw, 72px)/1.04 Georgia, serif;
    letter-spacing: -.035em;
}

.dining-hero h2 em {
    display: block;
    color: var(--dining-gold);
    font-weight: 400;
}

.dining-hero__lead {
    color: #ffd9aa !important;
    font: italic clamp(20px, 1.7vw, 27px)/1.4 Georgia, serif !important;
}

.dining-hero__content > p:last-child {
    max-width: 610px;
    margin: 0;

    color: #e6edeb;
    font-size: 15px;
    line-height: 1.75;
}

/* DINING HERO END */


/* DINING SWITCHERS START */

.dining-switchers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 11px;
    margin-bottom: 14px;
}

.dining-choice {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 110px;
    padding: 17px;

    border: 1.5px solid;
    border-radius: 13px;

    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.dining-choice--grill {
    background: linear-gradient(120deg, #8c492a, #3f2928);
    border-color: #efb77d;
}

.dining-choice--cellys {
    background: linear-gradient(120deg, #135e76, #203450);
    border-color: #74d4e3;
}

.dining-choice--menu {
    background: linear-gradient(120deg, #6e456e, #33294c);
    border-color: #e3addb;
}

.dining-choice--info {
    background: linear-gradient(120deg, #477455, #253e45);
    border-color: #a6e4a3;
}

.dining-choice > svg {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    stroke: #ffe0a9;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dining-choice__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.dining-choice__text small {
    color: #c5f4e9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.4;
}

.dining-choice__text strong {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.2;
}

.dining-choice__text > span {
    color: #ede7e7;
    font-size: 11px;
    line-height: 1.4;
}

.dining-choice__action {
    display: grid;
    place-items: center;
    flex: 0 0 30px;

    width: 30px;
    height: 30px;
    margin-left: auto;

    border-radius: 50%;
    background: #ffdaa6;
    color: #324042;
}

.dining-choice__action::before {
    content: "+";
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.dining-choice[aria-expanded="true"] {
    border-width: 2px;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .45),
        0 0 25px rgba(242, 182, 111, .24);
}

.dining-choice[aria-expanded="true"] .dining-choice__action::before {
    content: "−";
}

.dining-choice:focus-visible,
.dining-faq button:focus-visible,
.dining-faq summary:focus-visible {
    outline: 3px solid #ffe1a5;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .dining-choice:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
    }
}

/* DINING SWITCHERS END */


/* DINING PANELS START */

.dining-panel {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 38px);

    border: 1px solid #668a8e;
    border-radius: 16px;

    background:
        linear-gradient(135deg, #142d36, #1b3941 65%, #293947);
}

.dining-panel[hidden] {
    display: none !important;
}

.dining-feature {
    display: grid;
    grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
    align-items: center;
    gap: clamp(22px, 3vw, 45px);
}

.dining-feature__image {
    width: 100%;
    max-width: 365px;
    margin: 0;

    overflow: hidden;
    border: 1px solid #bb9784;
    border-radius: 15px;
}

.dining-feature__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.dining-feature h3 {
    margin: 0 0 14px;
    font: 400 clamp(32px, 3.5vw, 55px)/1.1 Georgia, serif;
}

.dining-feature h3 em {
    color: var(--dining-gold);
    font-weight: 400;
}

.dining-feature__lead {
    color: #b5f4de !important;
    font: italic clamp(19px, 1.7vw, 26px)/1.4 Georgia, serif !important;
}

.dining-feature__body > p:not(.dining-label) {
    margin: 0 0 14px;
    color: #e1e9e9;
    font-size: 14px;
    line-height: 1.8;
}

/* DINING PANELS END */


/* DINING INFORMATION START */

.dining-section-heading {
    max-width: 900px;
    margin: 35px 0 20px;
}

.dining-section-heading h4 {
    margin: 0 0 12px;
    font: 400 clamp(27px, 2.7vw, 39px)/1.2 Georgia, serif;
}

.dining-section-heading > p:last-child {
    margin: 0;
    color: #d5e5e4;
    font-size: 14px;
    line-height: 1.7;
}

.dining-info-grid,
.dining-menu-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.dining-info-grid article {
    flex: 0 1 calc(50% - 7px);
    min-width: 0;
    padding: 25px;

    border: 1px solid #658684;
    border-radius: 14px;
    background: #284749;
}

.dining-info-grid article:nth-child(4n+2) {
    background: #443b4d;
    border-color: #94748b;
}

.dining-info-grid article:nth-child(4n+3) {
    background: #58443f;
    border-color: #ab806c;
}

.dining-info-grid article:nth-child(4n+4) {
    background: #293e58;
    border-color: #667fa2;
}

.dining-card__number {
    display: block;
    margin-bottom: 12px;
    color: #a6e9d4;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dining-info-grid h5,
.dining-menu-item h5 {
    margin: 0 0 12px;
    color: #ffdcaa;
    font: 400 24px/1.2 Georgia, serif;
}

.dining-info-grid p,
.dining-menu-item p {
    margin: 0;
    color: #e0e9eb;
    font-size: 14px;
    line-height: 1.75;
}

/* DINING INFORMATION END */


/* DINING MENU START */

.dining-menu-item {
    flex: 0 1 calc((100% - 26px) / 3);
    min-width: 0;
    padding: 24px;

    border: 1px solid #6e8e86;
    border-radius: 14px;
    background: #284a48;
}

.dining-menu-item:nth-child(3n+2) {
    background: #4b3a50;
    border-color: #92738d;
}

.dining-menu-item:nth-child(3n+3) {
    background: #55433a;
    border-color: #a37d65;
}

.dining-menu-item > span {
    display: block;
    margin-bottom: 12px;

    color: #a9efd7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dining-menu-item strong {
    display: block;
    margin-bottom: 12px;
    color: #ffe1ae;
    font-size: 22px;
}

/* DINING MENU END */


/* DINING COMPARISON START */

.dining-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.dining-comparison > div {
    padding: 25px;
    border-radius: 14px;
    background: #365451;
    border: 1px solid #74a49a;
}

.dining-comparison > div:last-child {
    background: #37466b;
    border-color: #7d8bba;
}

.dining-comparison h5 {
    margin: 0 0 11px;
    color: #ffdcaa;
    font: 400 25px Georgia, serif;
}

.dining-comparison p {
    margin: 0;
    color: #e0e9ef;
    font-size: 14px;
    line-height: 1.7;
}

/* DINING COMPARISON END */


/* DINING CALLOUT START */

.dining-callout {
    display: flex;
    align-items: flex-start;
    gap: 19px;

    margin-top: 26px;
    padding: 24px;

    border: 1px solid #d0ab7d;
    border-radius: 12px;
    background: linear-gradient(110deg, #604735, #2d4a4e);
}

.dining-callout__icon {
    color: #ffdc9e;
    font-size: 29px;
}

.dining-callout strong {
    display: block;
    margin-bottom: 10px;
    color: #ffe0aa;
    font-size: 16px;
}

.dining-callout p {
    margin: 0;
    color: #edf0e7;
    font-size: 14px;
    line-height: 1.7;
}

/* DINING CALLOUT END */


/* DINING FAQ START */

.dining-faq {
    margin-top: 17px;
}

.dining-faq__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    padding: 22px 25px;

    border: 1px solid #e4b78c;
    border-radius: 13px;

    background: linear-gradient(115deg, #64503d, #294d54);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.dining-faq__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dining-faq__heading small {
    color: #b9f4d9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dining-faq__heading strong {
    font: 400 clamp(23px, 2.5vw, 36px) Georgia, serif;
}

.dining-faq__heading > span {
    color: #f1e9df;
    font-size: 12px;
}

.dining-faq__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: #f6d19b;
    color: #3c493f;
    font-size: 29px;
    transition: transform .2s ease;
}

.dining-faq__button[aria-expanded="true"] .dining-faq__icon {
    transform: rotate(45deg);
}

.dining-faq__content {
    margin-top: 12px;
    padding: 20px;
    border-radius: 13px;
    background: #1c3b42;
}

.dining-faq__content[hidden] {
    display: none !important;
}

.dining-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.dining-faq__column {
    display: grid;
    align-content: start;
    gap: 10px;
}

.dining-faq details {
    border: 1px solid #63847e;
    border-radius: 10px;
    background: #2c5253;
    overflow: hidden;
}

.dining-faq details[open] {
    background: #504657;
}

.dining-faq summary {
    padding: 17px;
    color: #fff8f0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.dining-faq details p {
    margin: 0;
    padding: 0 17px 19px;
    color: #e7efec;
    font-size: 13px;
    line-height: 1.7;
}

/* DINING FAQ END */


/* DINING CLOSING START */

.dining-closing {
    padding: 35px 12px 0;
    text-align: center;
}

.dining-closing p {
    margin: 0;
    font: 400 clamp(22px, 2.7vw, 35px)/1.4 Georgia, serif;
}

.dining-closing strong {
    color: #ffdb9f;
    font-style: italic;
    font-weight: 400;
}

/* DINING CLOSING END */


/* DINING TABLET START */

@media (max-width: 1180px) {
    .dining-switchers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) and (min-width: 701px) {
    .dining-menu-item {
        flex-basis: calc(50% - 7px);
    }
}

/* DINING TABLET END */


/* DINING MOBILE START */

@media (max-width: 700px) {

    .dining-view {
        padding: 0 12px calc(105px + env(safe-area-inset-bottom));
    }

    .dining-layout {
        display: flex;
        flex-direction: column;
    }

    /* MOBILE HERO START */

    .dining-hero {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 0;
        margin-bottom: 14px;
        padding: 0;

        border-radius: 0 0 15px 15px;
        overflow: hidden;
        background: #192d2f;
    }

    .dining-hero::before {
        display: none;
    }

    .dining-hero::after {
        content: "";
        position: relative;
        inset: auto;
        z-index: auto;

        display: block;
        flex: none;

        width: 100%;
        height: clamp(175px, 50vw, 240px);

        background:
            url("../images/st-albert-casino-dining-banner.webp")
            center 45% / cover no-repeat;
    }

    .dining-hero__content {
        padding: 26px 18px 21px;
    }

    .dining-hero h2 {
        font-size: clamp(36px, 9vw, 49px);
    }

    .dining-hero__lead {
        font-size: 20px !important;
    }

    .dining-hero__content > p:last-child {
        font-size: 13px;
        line-height: 1.65;
    }

    /* MOBILE HERO END */


    /* MOBILE SWITCHERS START */

    .dining-switchers {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 0;
    }

    .dining-choice {
        min-height: 87px;
        padding: 15px;
    }

    .dining-choice__text strong {
        font-size: 20px;
    }

    .dining-choice__text small {
        font-size: 9px;
    }

    .dining-switchers > .dining-panel {
        margin: 0 0 9px;
    }

    /* MOBILE SWITCHERS END */


    /* MOBILE PANELS START */

    .dining-panels {
        order: 3;
    }

    .dining-panels:empty {
        display: none;
    }

    .dining-panel {
        padding: 20px 15px;
    }

    .dining-feature {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .dining-feature__image {
        max-width: 280px;
        margin: 0 auto;
    }

    .dining-feature h3 {
        font-size: 34px;
    }

    .dining-info-grid article,
    .dining-menu-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dining-comparison {
        grid-template-columns: 1fr;
    }

    .dining-callout {
        padding: 19px;
    }

    /* MOBILE PANELS END */


    /* MOBILE FAQ START */

    .dining-faq {
        order: 4;
        margin-top: 22px;
    }

    .dining-faq__button {
        padding: 18px;
    }

    .dining-faq__grid {
        grid-template-columns: 1fr;
    }

    .dining-closing {
        order: 5;
    }

    /* MOBILE FAQ END */
}

/* DINING MOBILE END */


/* ==================================================
   DINING END
================================================== */
/* ==================================================
   REWARDS START
================================================== */

.rewards-view {
    --rewards-gold: #f6c983;
    --rewards-aqua: #82f0df;
    --rewards-white: #f9f5ff;

    min-height: calc(100dvh - var(--header-height));
    padding: 0 clamp(12px, 2vw, 32px) 60px;

    color: var(--rewards-white);
    background:
        radial-gradient(ellipse at 90% 80%, #622b6650, transparent 52%),
        linear-gradient(145deg, #211434, #292048 55%, #142c4b);
}

.rewards-layout {
    max-width: 1520px;
    width: 100%;
    margin: 0 auto;
}

/* REWARDS HERO START */

.rewards-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    min-height: 320px;
    padding: clamp(27px, 4vw, 55px);
    margin-bottom: 14px;

    overflow: hidden;
    background: #1d1930;
}

.rewards-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        url("../images/st-albert-casino-rewards-banner.webp")
        70% center / cover no-repeat;
}

.rewards-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(19, 12, 37, .98) 0%,
        rgba(19, 12, 37, .94) 30%,
        rgba(19, 12, 37, .72) 52%,
        rgba(19, 12, 37, .06) 100%
    );
}

.rewards-hero__content {
    max-width: 660px;
}

.rewards-eyebrow,
.rewards-label {
    display: block;
    margin: 0 0 13px;
    color: var(--rewards-aqua);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.rewards-hero h2 {
    margin: 0 0 18px;
    font: 400 clamp(40px, 4.4vw, 70px)/1.05 Georgia, serif;
    letter-spacing: -.035em;
}

.rewards-hero h2 em {
    display: block;
    color: var(--rewards-gold);
    font-weight: 400;
}

.rewards-hero__lead {
    color: #e5c7ff !important;
    font: italic clamp(20px, 1.8vw, 27px)/1.4 Georgia, serif !important;
}

.rewards-hero__content > p:last-child {
    margin: 0;
    max-width: 620px;
    color: #e7e1ef;
    font-size: 15px;
    line-height: 1.75;
}

/* REWARDS HERO END */


/* REWARDS SWITCHERS START */

.rewards-switchers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.rewards-choice {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 112px;
    padding: 17px;

    border: 1.5px solid;
    border-radius: 13px;

    color: white;
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    transition: transform .2s ease, box-shadow .2s ease;
}

.rewards-choice--membership {
    background: linear-gradient(120deg, #80511f, #403041);
    border-color: #f1c47f;
}

.rewards-choice--points {
    background: linear-gradient(120deg, #64318f, #302158);
    border-color: #c28cff;
}

.rewards-choice--exclusive {
    background: linear-gradient(120deg, #087d80, #183a58);
    border-color: #6be6e3;
}

.rewards-choice--join {
    background: linear-gradient(120deg, #88385d, #452445);
    border-color: #ef9cbd;
}

.rewards-choice > svg {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;

    stroke: #ffe1ac;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rewards-choice__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rewards-choice__text small {
    color: #e5dafa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.rewards-choice__text strong {
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.2;
}

.rewards-choice__text > span {
    color: #e8e1ed;
    font-size: 11px;
    line-height: 1.4;
}

.rewards-choice__action {
    display: grid;
    place-items: center;
    flex: 0 0 31px;

    width: 31px;
    height: 31px;
    margin-left: auto;

    border-radius: 50%;
    background: #ffe0a5;
    color: #35244c;
}

.rewards-choice__action::before {
    content: "+";
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.rewards-choice[aria-expanded="true"] {
    border-width: 2px;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.46),
        0 0 28px rgba(202,137,255,.3);
}

.rewards-choice[aria-expanded="true"] .rewards-choice__action::before {
    content: "−";
}

.rewards-choice:focus-visible,
.rewards-faq button:focus-visible,
.rewards-faq summary:focus-visible {
    outline: 3px solid #ffe4b0;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .rewards-choice:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 29px rgba(0,0,0,.4);
    }
}

/* REWARDS SWITCHERS END */


/* REWARDS PANELS START */

.rewards-panel {
    min-width: 0;
    padding: clamp(20px, 2.7vw, 39px);

    border: 1px solid #8679ab;
    border-radius: 16px;

    background: linear-gradient(135deg, #261b43, #283355 75%, #213c54);
}

.rewards-panel[hidden] {
    display: none !important;
}

.rewards-feature {
    display: grid;
    grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
}

.rewards-feature__image {
    width: 100%;
    max-width: 365px;
    margin: 0;

    border: 1px solid #bc9a79;
    border-radius: 15px;
    overflow: hidden;
}

.rewards-feature__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.rewards-feature h3,
.rewards-section-heading h3 {
    margin: 0 0 15px;
    font: 400 clamp(32px, 3.5vw, 55px)/1.1 Georgia, serif;
}

.rewards-feature h3 em,
.rewards-section-heading h3 em {
    color: var(--rewards-gold);
    font-weight: 400;
}

.rewards-feature__lead {
    color: #aaf3e5 !important;
    font: italic clamp(19px, 1.7vw, 26px)/1.4 Georgia, serif !important;
}

.rewards-feature__body > p:not(.rewards-label) {
    margin: 0 0 14px;
    color: #e3deef;
    font-size: 14px;
    line-height: 1.8;
}

.rewards-section-heading {
    max-width: 930px;
    margin: 35px 0 20px;
}

.rewards-section-heading:first-child {
    margin-top: 0;
}

.rewards-section-heading h4 {
    margin: 0 0 12px;
    font: 400 clamp(27px, 2.7vw, 40px)/1.2 Georgia, serif;
}

.rewards-section-heading > p:last-child {
    margin: 0;
    color: #e0dbed;
    font-size: 14px;
    line-height: 1.75;
}

/* REWARDS PANELS END */


/* REWARDS BENEFITS START */

.rewards-benefits,
.rewards-exclusive,
.rewards-join {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.rewards-benefits article,
.rewards-exclusive article,
.rewards-join__step {
    flex: 0 1 calc(50% - 7px);
    min-width: 0;
    padding: 25px;

    border: 1px solid #776da0;
    border-radius: 14px;
    background: #373354;
}

.rewards-benefits article:nth-child(4n+2),
.rewards-exclusive article:nth-child(4n+2),
.rewards-join__step:nth-child(4n+2) {
    background: #224a58;
    border-color: #4a91a2;
}

.rewards-benefits article:nth-child(4n+3),
.rewards-exclusive article:nth-child(4n+3),
.rewards-join__step:nth-child(4n+3) {
    background: #513447;
    border-color: #a06c83;
}

.rewards-benefits article:nth-child(4n+4),
.rewards-exclusive article:nth-child(4n+4),
.rewards-join__step:nth-child(4n+4) {
    background: #4a3b52;
    border-color: #9e779f;
}

.rewards-benefits__icon {
    display: block;
    margin-bottom: 12px;
    color: #f7d08d;
    font-size: 25px;
}

.rewards-benefits h5,
.rewards-exclusive h4,
.rewards-join h4 {
    margin: 0 0 12px;
    color: #ffe0ac;
    font: 400 25px/1.2 Georgia, serif;
}

.rewards-benefits p,
.rewards-exclusive p,
.rewards-join p {
    margin: 0 0 12px;
    color: #e6e1eb;
    font-size: 14px;
    line-height: 1.75;
}

.rewards-benefits p:last-child,
.rewards-exclusive p:last-child {
    margin-bottom: 0;
}

.rewards-exclusive__tag,
.rewards-join__step > span {
    display: block;
    margin-bottom: 15px;
    color: #aef7e2;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

/* REWARDS BENEFITS END */


/* REWARDS POINTS START */

.rewards-number-feature {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 25px;
    align-items: center;
    margin: 28px 0 38px;
}

.rewards-number-feature > div:first-child {
    padding: 35px 30px;
    border: 1px solid #eac392;
    border-radius: 15px;
    background: linear-gradient(145deg, #674d40, #483456);
}

.rewards-number-feature span {
    display: block;
    margin-bottom: 15px;
    color: #ffe1b0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.rewards-number-feature strong {
    display: block;
    color: #ffd18c;
    font-size: clamp(34px, 4.3vw, 60px);
    line-height: 1.1;
}

.rewards-number-feature h4 {
    margin: 0 0 15px;
    font: 400 30px Georgia, serif;
}

.rewards-number-feature p {
    color: #e5e2f0;
    font-size: 14px;
    line-height: 1.8;
}

/* REWARDS POINTS END */


/* REWARDS CALLOUT START */

.rewards-callout {
    margin-top: 27px;
    padding: 23px 26px;

    border: 1px solid #c69de2;
    border-left: 4px solid #e1b0ec;
    border-radius: 12px;

    background: linear-gradient(110deg, #4b3562, #23445c);
}

.rewards-callout strong {
    display: block;
    margin-bottom: 9px;
    color: #ffe0b1;
    font-size: 16px;
}

.rewards-callout p {
    margin: 0;
    color: #e7e6f0;
    font-size: 14px;
    line-height: 1.75;
}

/* REWARDS CALLOUT END */


/* REWARDS FAQ START */

.rewards-faq {
    margin-top: 18px;
}

.rewards-faq__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    padding: 22px 25px;

    border: 1px solid #c19de6;
    border-radius: 13px;

    background: linear-gradient(110deg, #543468, #264768);
    color: white;
    text-align: left;
    cursor: pointer;
}

.rewards-faq__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rewards-faq__heading small {
    color: #c6f6e4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.rewards-faq__heading strong {
    font: 400 clamp(23px, 2.5vw, 36px) Georgia, serif;
}

.rewards-faq__heading > span {
    color: #e8dff0;
    font-size: 12px;
}

.rewards-faq__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: #f3d09d;
    color: #3f3557;
    font-size: 29px;
    transition: transform .2s ease;
}

.rewards-faq__button[aria-expanded="true"] .rewards-faq__icon {
    transform: rotate(45deg);
}

.rewards-faq__content {
    margin-top: 12px;
    padding: 20px;
    border-radius: 13px;
    background: #292744;
}

.rewards-faq__content[hidden] {
    display: none !important;
}

.rewards-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.rewards-faq__column {
    display: grid;
    align-content: start;
    gap: 10px;
}

.rewards-faq details {
    border: 1px solid #8176a0;
    border-radius: 10px;
    background: #393857;
    overflow: hidden;
}

.rewards-faq details[open] {
    background: #304d60;
}

.rewards-faq summary {
    padding: 17px;
    color: #f9f3ff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rewards-faq details p {
    margin: 0;
    padding: 0 17px 19px;
    color: #e5e2ef;
    font-size: 13px;
    line-height: 1.7;
}

/* REWARDS FAQ END */


/* REWARDS CLOSING START */

.rewards-closing {
    padding: 38px 12px 0;
    text-align: center;
}

.rewards-closing span {
    display: block;
    margin-bottom: 12px;
    color: #9df1de;
    font-size: 10px;
    letter-spacing: .16em;
}

.rewards-closing p {
    margin: 0;
    font: 400 clamp(22px, 2.7vw, 36px)/1.4 Georgia, serif;
}

.rewards-closing strong {
    color: #ffd3a0;
    font-style: italic;
    font-weight: 400;
}

/* REWARDS CLOSING END */


/* REWARDS TABLET START */

@media (max-width: 1180px) {
    .rewards-switchers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* REWARDS TABLET END */


/* REWARDS MOBILE START */

@media (max-width: 700px) {

    .rewards-view {
        padding: 0 12px calc(105px + env(safe-area-inset-bottom));
    }

    .rewards-layout {
        display: flex;
        flex-direction: column;
    }

    /* MOBILE HERO START */

    .rewards-hero {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 0;
        margin-bottom: 14px;
        padding: 0;

        border-radius: 0 0 15px 15px;
        overflow: hidden;
        background: #211933;
    }

    .rewards-hero::before {
        display: none;
    }

    .rewards-hero::after {
        content: "";
        position: relative;
        inset: auto;
        z-index: auto;

        display: block;
        flex: none;

        width: 100%;
        height: clamp(175px, 50vw, 240px);

        background:
            url("../images/st-albert-casino-rewards-banner.webp")
            center 56% / cover no-repeat;
    }

    .rewards-hero__content {
        padding: 26px 18px 21px;
    }

    .rewards-hero h2 {
        font-size: clamp(36px, 9vw, 49px);
    }

    .rewards-hero__lead {
        font-size: 20px !important;
    }

    .rewards-hero__content > p:last-child {
        font-size: 13px;
        line-height: 1.65;
    }

    /* MOBILE HERO END */


    /* MOBILE SWITCHERS START */

    .rewards-switchers {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 0;
    }

    .rewards-choice {
        min-height: 87px;
        padding: 15px;
    }

    .rewards-choice__text strong {
        font-size: 20px;
    }

    .rewards-choice__text small {
        font-size: 9px;
    }

    .rewards-switchers > .rewards-panel {
        margin: 0 0 9px;
    }

    /* MOBILE SWITCHERS END */


    /* MOBILE PANELS START */

    .rewards-panels {
        order: 3;
    }

    .rewards-panels:empty {
        display: none;
    }

    .rewards-panel {
        padding: 20px 15px;
    }

    .rewards-feature {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .rewards-feature__image {
        max-width: 280px;
        margin: 0 auto;
    }

    .rewards-feature h3,
    .rewards-section-heading h3 {
        font-size: 34px;
    }

    .rewards-benefits article,
    .rewards-exclusive article,
    .rewards-join__step {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .rewards-number-feature {
        grid-template-columns: 1fr;
    }

    .rewards-callout {
        padding: 19px;
    }

    /* MOBILE PANELS END */


    /* MOBILE FAQ START */

    .rewards-faq {
        order: 4;
        margin-top: 22px;
    }

    .rewards-faq__button {
        padding: 18px;
    }

    .rewards-faq__grid {
        grid-template-columns: 1fr;
    }

    .rewards-closing {
        order: 5;
    }

    /* MOBILE FAQ END */
}

/* REWARDS MOBILE END */


/* ==================================================
   REWARDS END
================================================== */
/* ==================================================
   AURORA SPECTRUM NAVIGATION START
================================================== */

/* NAVIGATION BASE START */

.section-nav {
    --nav-glow: #70e9e3;

    gap: 8px;

    background: linear-gradient(
        160deg,
        #0d2945,
        #152d52 55%,
        #1d2850
    );
}

.section-nav__item {
    position: relative;
    isolation: isolate;

    min-height: 69px;
    padding: 9px 5px;

    border: 1px solid var(--item-border);
    border-radius: 14px;

    background: linear-gradient(
        135deg,
        var(--item-start),
        var(--item-end)
    );

    color: #f4faff;
    font-size: 10px;
    font-weight: 700;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.section-nav__item svg {
    width: 25px;
    height: 25px;

    stroke: var(--item-icon);
    stroke-width: 1.9;

    transition: transform .2s ease;
}

/* NAVIGATION BASE END */


/* INDIVIDUAL SECTION COLORS START */

.section-nav__item[href="#home"] {
    --item-start: #087e91;
    --item-end: #17679e;
    --item-border: #2ed7de;
    --item-icon: #a4ffff;
}

.section-nav__item[href="#about"] {
    --item-start: #176f67;
    --item-end: #205e72;
    --item-border: #4be0be;
    --item-icon: #b0ffe5;
}

.section-nav__item[href="#casino-games"] {
    --item-start: #503780;
    --item-end: #3b407e;
    --item-border: #ad87f1;
    --item-icon: #e1cbff;
}

.section-nav__item[href="#promotions"] {
    --item-start: #87511d;
    --item-end: #6b3d59;
    --item-border: #e8aa64;
    --item-icon: #ffe0a5;
}

.section-nav__item[href="#events"] {
    --item-start: #7d415b;
    --item-end: #5e3a77;
    --item-border: #d888c6;
    --item-icon: #ffd1ea;
}

.section-nav__item[href="#dining"] {
    --item-start: #4c6a3e;
    --item-end: #47604c;
    --item-border: #a7d889;
    --item-icon: #e4ffc9;
}

.section-nav__item[href="#rewards"] {
    --item-start: #6b427f;
    --item-end: #424d8f;
    --item-border: #c097eb;
    --item-icon: #f0d5ff;
}

/* INDIVIDUAL SECTION COLORS END */


/* INTERACTIVE STATES START */

.section-nav__item.is-active {
    z-index: 2;

    border: 2px solid #aaffef;

    background: linear-gradient(
        125deg,
        #07bcb2,
        #3388df 53%,
        #8345de
    );

    color: #ffffff;

    box-shadow:
        0 0 0 1px rgba(113, 255, 225, .28),
        0 4px 19px rgba(8, 206, 195, .25);
}

.section-nav__item.is-active svg {
    stroke: #ffffff;
    stroke-width: 2.2;
}

.section-nav__item:focus-visible {
    outline: 3px solid #ffdc9b;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .section-nav__item:hover {
        transform: translateY(-2px);
        filter: brightness(1.22);

        box-shadow:
            0 5px 17px rgba(0, 16, 40, .32);
    }

    .section-nav__item:hover svg {
        transform: scale(1.1);
    }
}

/* INTERACTIVE STATES END */


/* DESKTOP NAVIGATION START */

@media (min-width: 1001px) {

    .section-nav {
        padding: 15px 7px;
        gap: 8px;

        border-right: 1px solid #3e9baf80;
    }

    .section-nav__item {
        min-height: 69px;
    }
}

/* DESKTOP NAVIGATION END */


/* MOBILE NAVIGATION START */

@media (max-width: 1000px) {

    .section-nav {
        gap: 6px;

        background: linear-gradient(
            105deg,
            #102d4c,
            #1b3159 58%,
            #252951
        );

        border-top: 2px solid #57dfd4;

        box-shadow: 0 -7px 25px rgba(0, 13, 33, .32);
    }

    .section-nav__item {
        flex: 0 0 77px;

        min-width: 77px;
        min-height: 57px;

        padding: 6px 5px;

        border-radius: 12px;

        font-size: 10px;
    }

    .section-nav__item svg {
        width: 23px;
        height: 23px;
    }

    .section-nav__item.is-active {
        box-shadow:
            0 0 0 1px rgba(150, 255, 237, .34),
            0 4px 15px rgba(25, 195, 221, .25);
    }
}

/* MOBILE NAVIGATION END */


/* REDUCED MOTION START */

@media (prefers-reduced-motion: reduce) {

    .section-nav__item,
    .section-nav__item svg {
        transition: none;
    }
}

/* REDUCED MOTION END */


/* ==================================================
   AURORA SPECTRUM NAVIGATION END
================================================== */
/* ==================================================
   SITE FOOTER START
================================================== */

.site-footer {
    position: relative;
    z-index: 5;

    width: auto;
    margin-left: var(--sidebar-width);

    color: #edf5ff;

    background:
        radial-gradient(
            ellipse at 85% 10%,
            rgba(67, 91, 157, .16),
            transparent 55%
        ),
        linear-gradient(
            115deg,
            #07182b 0%,
            #0e2942 55%,
            #1c2947 100%
        );

    border-top: 1px solid rgba(104, 232, 218, .42);
}

/* FOOTER INNER START */

.site-footer__inner {
    display: block;

    width: 100%;
    max-width: 1500px;
    min-height: 0;

    margin: 0 auto;

    padding:
        clamp(34px, 3.2vw, 51px)
        clamp(22px, 4vw, 62px)
        0;

    color: #edf5ff;
}

/* FOOTER INNER END */


/* ==================================================
   FOOTER GRID START
================================================== */

.site-footer__main {
    display: grid;

    width: 100%;

    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(110px, .65fr)
        minmax(155px, .85fr)
        minmax(190px, 1fr);

    align-items: start;
    gap: clamp(24px, 3vw, 45px);
}

.site-footer__identity {
    min-width: 0;
}

/* FOOTER GRID END */


/* ==================================================
   FOOTER BRAND START
================================================== */

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 19px;

    color: #f5c68a;
    font-size: inherit;
    text-decoration: none;
}

.site-footer__brand svg {
    display: block;

    width: 47px;
    height: 47px;
    flex: 0 0 47px;
}

.site-footer__brand-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.site-footer__brand-text strong {
    color: #fffaf4;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .11em;
}

.site-footer__brand-text small {
    color: #f5c68a;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .34em;
}

.site-footer__identity p {
    max-width: 320px;
    margin: 0 0 18px;

    color: #c8dce9;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
}

.site-footer__signature {
    display: block;

    color: #83e9db;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.6;
}

/* FOOTER BRAND END */


/* ==================================================
   FOOTER NAVIGATION START
================================================== */

.site-footer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    gap: 10px;
}

.site-footer__nav h2 {
    position: relative;

    margin: 0 0 14px;
    padding-bottom: 15px;

    color: #ffd29a;
    font: 400 22px/1.2 Georgia, serif;
}

.site-footer__nav h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 42px;
    height: 3px;

    border-radius: 3px;

    background: linear-gradient(
        90deg,
        #16d9c6,
        #9361e2
    );
}

.site-footer__nav a {
    position: relative;
    display: inline-block;

    max-width: 100%;
    padding: 3px 0;

    color: #d6e5ef;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.site-footer__nav a:hover {
    color: #96fff0;
    transform: translateX(3px);
}

.site-footer__brand:focus-visible,
.site-footer__nav a:focus-visible {
    outline: 3px solid #f6d39d;
    outline-offset: 4px;
    border-radius: 3px;
}

/* FOOTER NAVIGATION END */


/* ==================================================
   FOOTER BOTTOM START
================================================== */

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    gap: 15px;

    margin: 29px 0 0;
    padding: 19px 0 21px;

    border-top: 1px solid rgba(135, 218, 217, .25);
}

.site-footer__bottom small {
    display: block;

    margin: 0;

    color: #b5cedd;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.site-footer__age {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    border: 2px solid #f4c688;
    border-radius: 50%;

    color: #ffda9c;
    font-size: 14px;
    font-weight: 800;
}

/* FOOTER BOTTOM END */


/* ==================================================
   FOOTER TABLET START
================================================== */

@media (max-width: 1200px) {

    .site-footer__main {
        grid-template-columns:
            minmax(190px, 1.2fr)
            repeat(3, minmax(0, 1fr));

        gap: 25px;
    }

    .site-footer__nav h2 {
        font-size: 19px;
    }
}

@media (max-width: 900px) {

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .site-footer__identity {
        grid-column: 1 / -1;
    }
}

/* FOOTER TABLET END */


/* ==================================================
   FOOTER MOBILE START
================================================== */

@media (max-width: 1000px) {

    .site-footer {
        margin-left: 0;
        margin-bottom: calc(
            70px + env(safe-area-inset-bottom)
        );
    }
}

@media (max-width: 700px) {

    .site-footer__inner {
        padding: 32px 19px 0;
    }

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 29px 18px;
    }

    .site-footer__identity {
        grid-column: 1 / -1;
    }

    .site-footer__brand svg {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .site-footer__brand-text strong {
        font-size: 16px;
    }

    .site-footer__identity p {
        font-size: 13px;
        margin-bottom: 13px;
    }

    .site-footer__nav {
        gap: 9px;
    }

    .site-footer__nav h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .site-footer__nav a {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .site-footer__bottom {
        margin-top: 28px;
        padding: 17px 0;
    }

    .site-footer__bottom small {
        font-size: 11px;
    }

    .site-footer__age {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {

    .site-footer__inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-footer__main {
        gap: 25px 12px;
    }

    .site-footer__nav h2 {
        font-size: 17px;
    }

    .site-footer__nav a {
        font-size: 11px;
    }
}

/* FOOTER MOBILE END */


/* ==================================================
   LEGAL PAGE FOOTER COMPATIBILITY START
================================================== */

.legal-page .site-footer {
    margin-left: 0;
    margin-bottom: 0;
}

.legal-page .site-footer__main {
    width: 100%;
}

/* LEGAL PAGE FOOTER COMPATIBILITY END */


/* ==================================================
   SITE FOOTER END
================================================== */


/* ==================================================
   LEGAL PAGES START
================================================== */

.legal-page {
    min-width: 320px;

    color: #f3f7ff;
    background: #0a1c32;
}

.legal-page .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
}

.legal-page .site-header__inner {
    gap: clamp(12px, 2vw, 28px);
}

.legal-page .play-now--header {
    margin-left: auto;
}

/* LEGAL NAVIGATION START */

.legal-mobile-nav {
    display: none;
}

/* LEGAL NAVIGATION END */


/* ==================================================
   LEGAL MAIN START
================================================== */

.legal-main {
    position: relative;

    min-height: 55vh;
    margin: 0;

    padding:
        clamp(26px, 4vw, 56px)
        22px
        48px;

    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(89, 95, 169, .21),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 0% 90%,
            rgba(21, 126, 125, .12),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #0b233c,
            #1a2947 70%,
            #252746
        );
}

.legal-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

/* LEGAL MAIN END */


/* ==================================================
   LEGAL INTRO START
================================================== */

.legal-intro {
    position: relative;
    overflow: hidden;

    padding: clamp(27px, 4vw, 48px);

    border: 1px solid rgba(119, 238, 221, .36);
    border-radius: 19px;

    background:
        radial-gradient(
            circle at 95% 15%,
            rgba(139, 95, 211, .20),
            transparent 45%
        ),
        linear-gradient(
            120deg,
            #11364b,
            #25314f
        );

    box-shadow:
        0 12px 35px rgba(0, 10, 30, .15);
}

.legal-intro::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: linear-gradient(
        180deg,
        #3ce5d5,
        #7e79e8,
        #f4c68b
    );
}

.legal-eyebrow {
    display: block;
    margin-bottom: 15px;

    color: #9cf5e3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.legal-intro h1 {
    margin: 0 0 16px;

    color: #fff5e8;

    font: 400 clamp(37px, 5vw, 65px)/1.08 Georgia, serif;
    letter-spacing: -.035em;
}

.legal-intro > p {
    max-width: 820px;
    margin: 0;

    color: #dce8f2;
    font-size: 15px;
    line-height: 1.75;
}

.legal-intro .legal-updated {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    margin: 0 0 20px;
    padding: 9px 15px;

    border: 1px solid rgba(151, 237, 221, .34);
    border-radius: 9px;

    background: rgba(11, 65, 76, .43);

    color: #d4f8ec;
    font-size: 12px;
    font-weight: 700;
}

.legal-updated time {
    color: #ffd29c;
    font-weight: 800;
}

/* LEGAL INTRO END */


/* ==================================================
   LEGAL CONTENT START
================================================== */

.legal-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: stretch;
    gap: 15px;

    margin-top: 17px;
}

.legal-content section {
    min-width: 0;
    margin: 0;

    padding: clamp(23px, 2.5vw, 34px);

    border: 1px solid rgba(129, 169, 199, .27);
    border-radius: 15px;

    background:
        linear-gradient(145deg, #17334e, #1b304b);
}

.legal-content section:nth-child(4n+2) {
    background:
        linear-gradient(145deg, #263655, #2b3154);

    border-color: rgba(159, 144, 211, .3);
}

.legal-content section:nth-child(4n+3) {
    background:
        linear-gradient(145deg, #194149, #1c3650);

    border-color: rgba(115, 205, 190, .27);
}

.legal-content section:nth-child(4n+4) {
    background:
        linear-gradient(145deg, #313449, #30334e);

    border-color: rgba(216, 173, 149, .26);
}

.legal-content h2 {
    position: relative;

    margin: 0 0 18px;
    padding-bottom: 15px;

    color: #ffd29e;
    font: 400 clamp(23px, 2.5vw, 30px)/1.2 Georgia, serif;
}

.legal-content h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 44px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(90deg, #53ead8, #a98ce8);
}

.legal-content p,
.legal-content li {
    color: #dce7f1;
    font-size: 14px;
    line-height: 1.8;
}

.legal-content p {
    margin: 0 0 14px;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul {
    margin: 10px 0 0;
    padding-left: 21px;
}

.legal-content li {
    margin-bottom: 9px;
}

.legal-content strong {
    color: #aef2e4;
}

/* LEGAL CONTENT END */


/* ==================================================
   LEGAL FOOTER START
================================================== */

.legal-page .site-footer {
    margin-left: 0;
    margin-bottom: 0;
}

.legal-page .site-footer__main {
    width: 100%;
}

.legal-page .site-footer__bottom {
    width: 100%;
}

/* LEGAL FOOTER END */


/* ==================================================
   LEGAL TABLET START
================================================== */

@media (max-width: 1000px) {

    .legal-page .header-nav {
        display: none;
    }

    .legal-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        gap: 9px;

        padding: 12px 15px;

        overflow-x: auto;
        scrollbar-width: none;

        background: linear-gradient(
            110deg,
            #102c47,
            #20305b
        );

        border-bottom:
            1px solid rgba(92, 227, 216, .35);
    }

    .legal-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .legal-mobile-nav a {
        display: inline-flex;
        align-items: center;

        flex: 0 0 auto;
        min-height: 40px;

        padding: 9px 14px;

        border: 1px solid rgba(136, 223, 231, .39);
        border-radius: 11px;

        background: linear-gradient(
            125deg,
            #155c77,
            #444080
        );

        color: #ffffff;
        font-size: 12px;
        font-weight: 700;

        text-decoration: none;
        white-space: nowrap;
    }

    .legal-mobile-nav a:hover,
    .legal-mobile-nav a:focus-visible {
        border-color: #a0ffef;
        filter: brightness(1.12);
    }

    .legal-content {
        gap: 12px;
    }
}

/* LEGAL TABLET END */


/* ==================================================
   LEGAL MOBILE START
================================================== */

@media (max-width: 700px) {

    .legal-main {
        padding: 20px 13px 36px;
    }

    .legal-intro {
        padding: 25px 19px;
        border-radius: 15px;
    }

    .legal-eyebrow {
        font-size: 9px;
    }

    .legal-intro h1 {
        font-size: clamp(35px, 9vw, 47px);
    }

    .legal-intro > p {
        font-size: 13px;
        line-height: 1.7;
    }

    .legal-content {
        grid-template-columns: 1fr;
        gap: 11px;

        margin-top: 12px;
    }

    .legal-content section {
        padding: 23px 19px;
        border-radius: 13px;
    }

    .legal-content h2 {
        font-size: 25px;
    }

    .legal-content p,
    .legal-content li {
        font-size: 13px;
        line-height: 1.75;
    }

    .legal-page .play-now--header {
        min-height: 41px;
        padding: 0 15px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {

    .legal-mobile-nav {
        gap: 7px;
        padding: 10px;
    }

    .legal-mobile-nav a {
        padding: 8px 11px;
        font-size: 11px;
    }

    .legal-intro h1 {
        font-size: 34px;
    }
}

/* LEGAL MOBILE END */


/* ==================================================
   LEGAL PAGES END
================================================== */