/* ==================================================================
   HOTEL 164
   SERVICES & AMENITIES PAGE

   PAGE-SPECIFIC STYLESHEET
   ---------------------------------------------------------------
   Requires:
   main.css

   Covers:
   • Services hero
   • Animated amenities marquee
   • Hotel amenities
   • Indoor dining
   • Chefs
   • Nearby restaurants
   • Conferencing
   • Upington experiences
   • Hiking / cycling
   • Orange River ferry
   • Casino
   • Airport
   • Wine tasting
   • Accessibility
   • Business travel
   • Final booking CTA
================================================================== */


/* ==================================================================
   01 — PAGE VARIABLES
================================================================== */

.page-services {

    --services-blue:
        #173554;

    --services-blue-light:
        #4769a8;

    --services-teal:
        #12363f;

    --services-green:
        #18372f;

    --services-gold:
        #b89b5e;

    --services-gold-light:
        #dac58d;

    --services-panel:
        rgba(255, 255, 255, .035);

    --services-panel-hover:
        rgba(255, 255, 255, .065);

    --services-border:
        rgba(255, 255, 255, .10);

    --services-radius:
        0;

    background:
        #050a0d;
}



/* ==================================================================
   02 — AMBIENT BACKGROUND
================================================================== */

.page-services main {

    position: relative;

    isolation: isolate;
}


.page-services main::before {

    content: "";

    position: fixed;

    z-index: -2;

    top: 10%;
    right: -25%;

    width: 70vw;
    height: 70vw;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 92, 157, .10),
            transparent 68%
        );

    pointer-events: none;
}


.page-services main::after {

    content: "";

    position: fixed;

    z-index: -2;

    bottom: -30%;
    left: -25%;

    width: 65vw;
    height: 65vw;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 155, 94, .06),
            transparent 68%
        );

    pointer-events: none;
}



/* ==================================================================
   03 — SERVICES HERO
================================================================== */

.services-hero {

    position: relative;

    min-height: 100svh;

    display: grid;

    overflow: hidden;

    isolation: isolate;

    background:
        #071419;
}


.services-hero__media {

    position: absolute;

    z-index: -7;

    inset: -5%;

    overflow: hidden;
}


.services-hero__media::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,
            rgba(3, 7, 10, .54),
            transparent 48%
        );
}


.services-hero__media img {

    width: 100%;
    height: 110%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.68)
        contrast(1.08)
        brightness(.72);

    transform:
        scale(1.06);

    animation:
        servicesHeroBreath
        14s
        var(--ease)
        both;
}


@keyframes servicesHeroBreath {

    from {

        transform:
            scale(1.11);

    }

    to {

        transform:
            scale(1.06);

    }

}


.services-hero__overlay {

    position: absolute;

    z-index: -6;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(2, 5, 7, .64) 0%,
            rgba(4, 10, 14, .16) 34%,
            rgba(5, 17, 23, .38) 63%,
            #071419 100%
        ),

        linear-gradient(
            90deg,
            rgba(2, 6, 9, .57),
            transparent 50%,
            rgba(2, 6, 9, .20)
        );
}


.services-hero__glow {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:

        radial-gradient(
            circle at 76% 24%,
            rgba(65, 100, 185, .43),
            transparent 32%
        ),

        radial-gradient(
            circle at 21% 75%,
            rgba(25, 93, 105, .31),
            transparent 30%
        ),

        radial-gradient(
            circle at 68% 82%,
            rgba(184, 155, 94, .10),
            transparent 24%
        );

    animation:
        heroGlowMove
        10s
        ease-in-out
        infinite alternate;
}


@keyframes heroGlowMove {

    from {

        opacity: .72;

        transform:
            translate3d(
                -1%,
                0,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                2%,
                -2%,
                0
            );

    }

}


.services-hero__grid {

    position: absolute;

    z-index: -4;

    inset: 0;

    opacity: .07;

    background-image:

        linear-gradient(
            rgba(255,255,255,.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 1px,
            transparent 1px
        );

    background-size:
        145px
        145px;

    mask-image:
        radial-gradient(
            circle at 55% 45%,
            #000,
            transparent 80%
        );
}


.services-hero__inner {

    min-height: 100svh;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    padding-top:
        calc(
            var(--header-height)
            + 2.5rem
        );

    padding-bottom:
        2.7rem;
}


.services-hero__top {

    display: flex;

    align-items: center;

    gap: 1rem;

    color:
        rgba(255,255,255,.52);

    font-size: .48rem;

    font-weight: 600;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.services-hero__top i {

    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--services-gold),
            rgba(255,255,255,.15)
        );
}


.services-hero__content {

    align-self: center;

    max-width: 1180px;

    padding-left:
        clamp(
            0rem,
            5vw,
            6rem
        );
}


.services-hero__title {

    max-width: 1100px;

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            4.3rem,
            9.5vw,
            9.5rem
        );

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.045em;

    color: var(--white);
}


.services-hero__title em {

    display: block;

    padding-left:
        clamp(
            1rem,
            8vw,
            10rem
        );

    color:
        var(--services-gold-light);

    font-style: normal;

    text-shadow:
        0 0 40px
        rgba(218, 197, 141, .08);
}


.services-hero__intro {

    max-width: 570px;

    margin:
        2.5rem
        0
        0
        clamp(
            1rem,
            8vw,
            10rem
        );

    color:
        rgba(255,255,255,.68);

    font-size: .77rem;

    font-weight: 300;

    line-height: 1.9;
}


.services-hero__bottom {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 2rem;
}


.services-hero__mini {

    display: flex;

    align-items: center;

    gap: .8rem;

    color:
        rgba(255,255,255,.42);

    font-size: .45rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.services-hero__mini i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--services-gold);

    box-shadow:
        0 0 12px
        rgba(184,155,94,.45);
}



/* ==================================================================
   04 — MARQUEE
================================================================== */

.services-marquee {

    position: relative;

    z-index: 10;

    overflow: hidden;

    border-top:
        1px solid
        var(--line-soft);

    border-bottom:
        1px solid
        var(--line-soft);

    background:

        linear-gradient(
            90deg,
            #061014 0%,
            #0b252d 35%,
            #11252b 55%,
            #071318 100%
        );
}


.services-marquee::before,
.services-marquee::after {

    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    bottom: 0;

    width: 130px;

    pointer-events: none;
}


.services-marquee::before {

    left: 0;

    background:

        linear-gradient(
            90deg,
            #061014,
            transparent
        );
}


.services-marquee::after {

    right: 0;

    background:

        linear-gradient(
            -90deg,
            #061014,
            transparent
        );
}


.services-marquee__track {

    display: flex;

    width: max-content;

    animation:
        servicesMarquee
        36s
        linear
        infinite;
}


.services-marquee:hover
.services-marquee__track {

    animation-play-state:
        paused;
}


.services-marquee__group {

    display: flex;

    align-items: center;
}


.services-marquee span {

    padding:
        1.05rem
        2rem;

    color:
        rgba(255,255,255,.58);

    font-size: .5rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;

    transition:
        color .3s ease;
}


.services-marquee span:hover {

    color:
        var(--services-gold-light);
}


.services-marquee i {

    color:
        var(--services-gold);

    font-size: .43rem;

    animation:
        marqueeStar
        3s
        linear
        infinite;
}


@keyframes servicesMarquee {

    to {

        transform:
            translateX(-50%);

    }

}


@keyframes marqueeStar {

    to {

        transform:
            rotate(360deg);

    }

}



/* ==================================================================
   05 — AMENITIES
================================================================== */

.amenities-section {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #071419,
            #0a1e24 48%,
            #061014
        );
}


.amenities-section__orb {

    position: absolute;

    top: -18%;
    right: -20%;

    width: 800px;
    max-width: 75vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .19;

    background:

        radial-gradient(
            circle,
            #4067a7,
            #12333f 44%,
            transparent 70%
        );

    filter:
        blur(30px);

    animation:
        floatingOrb
        12s
        ease-in-out
        infinite alternate;
}


@keyframes floatingOrb {

    to {

        transform:
            translate(
                -4%,
                6%
            )
            scale(1.07);

    }

}


.amenities-heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    align-items: end;

    gap: 4rem;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.amenities-heading__copy {

    max-width: 500px;

    margin: 0;

    padding-bottom: .8rem;

    color:
        var(--grey-400);

    font-size: .74rem;

    font-weight: 300;
}



/* ==================================================================
   06 — AMENITY CARDS
================================================================== */

.amenities-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        var(--services-border);

    border-left:
        1px solid
        var(--services-border);

    perspective: 1000px;
}


.amenity-card {

    position: relative;

    min-height: 355px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 1.8rem;

    border-right:
        1px solid
        var(--services-border);

    border-bottom:
        1px solid
        var(--services-border);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.026),
            rgba(255,255,255,.003)
        );

    transition:

        transform
        .55s
        var(--ease),

        background
        .45s
        ease,

        box-shadow
        .55s
        ease;
}


.amenity-card::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:

        radial-gradient(
            circle at 50% 110%,
            rgba(66, 103, 184, .30),
            transparent 60%
        ),

        linear-gradient(
            145deg,
            rgba(218,197,141,.05),
            transparent 45%
        );

    transition:
        opacity .5s ease;
}


.amenity-card::after {

    content: "";

    position: absolute;

    top: -40%;
    left: -100%;

    width: 60%;
    height: 180%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.06),
            transparent
        );

    transform:
        rotate(20deg);

    transition:
        left
        .8s
        var(--ease);
}


.amenity-card:hover {

    z-index: 4;

    transform:
        translateY(-9px);

    background:
        var(--services-panel-hover);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.18);
}


.amenity-card:hover::before {

    opacity: 1;
}


.amenity-card:hover::after {

    left: 150%;
}


.amenity-card__number {

    position: relative;

    z-index: 3;

    color:
        rgba(255,255,255,.27);

    font-family:
        var(--font-display);

    font-size: 1.15rem;
}


.amenity-card__icon {

    position: relative;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 60px;
    height: 60px;

    margin:
        3.3rem
        0
        2rem;

    border:
        1px solid
        rgba(218,197,141,.28);

    border-radius: 50%;

    color:
        var(--services-gold-light);

    background:
        rgba(218,197,141,.025);

    font-size: 1.25rem;

    transition:

        color
        .4s
        ease,

        background
        .4s
        ease,

        box-shadow
        .4s
        ease,

        transform
        .55s
        var(--ease);
}


.amenity-card:hover
.amenity-card__icon {

    color:
        #080b0d;

    background:
        var(--services-gold-light);

    box-shadow:

        0 0 0 7px
        rgba(218,197,141,.05),

        0 0 35px
        rgba(218,197,141,.16);

    transform:
        rotate(12deg)
        scale(1.07);
}


.amenity-card__content {

    position: relative;

    z-index: 3;

    margin-top: auto;
}


.amenity-card__label {

    color:
        var(--services-gold-light);

    font-size: .42rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.amenity-card h3 {

    margin:
        .5rem
        0
        .8rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.8rem,
            2.8vw,
            2.8rem
        );

    font-weight: 400;

    line-height: 1;
}


.amenity-card p {

    max-width: 380px;

    margin: 0;

    color:
        var(--grey-500);

    font-size: .64rem;

    line-height: 1.85;
}


.amenity-card__line {

    position: absolute;

    z-index: 3;

    right: 1.8rem;
    bottom: 1.2rem;
    left: 1.8rem;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            var(--services-gold),
            rgba(255,255,255,.13),
            transparent
        );

    transform:
        scaleX(.12);

    transform-origin: left;

    transition:
        transform
        .7s
        var(--ease);
}


.amenity-card:hover
.amenity-card__line {

    transform:
        scaleX(1);
}



/* ==================================================================
   07 — DINING
================================================================== */

.dining-service {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #071015,
            #102329 48%,
            #071014
        );
}


.dining-service::after {

    content: "";

    position: absolute;

    bottom: -15%;
    left: -10%;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(184,155,94,.09),
            transparent 68%
        );

    pointer-events: none;
}


.dining-service__glow {

    position: absolute;

    top: -25%;
    right: -18%;

    width: 850px;
    max-width: 82vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #3d64a1,
            #123641 43%,
            transparent 69%
        );

    filter: blur(30px);
}


.dining-service__heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    gap: 4rem;

    align-items: end;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.dining-service__intro {

    max-width: 490px;

    margin: 0;

    padding-bottom: .8rem;

    color:
        var(--grey-400);

    font-size: .74rem;
}


.dining-service__layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.1fr
        .7fr;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    align-items: center;
}



/* ==================================================================
   08 — DINING IMAGE
================================================================== */

.dining-service__main-image {

    position: relative;

    min-height: 660px;

    overflow: hidden;

    margin: 0;

    border:
        1px solid
        var(--services-border);

    background: #111;
}


.dining-service__main-image::before {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 1rem;

    border:
        1px solid
        rgba(255,255,255,.10);

    pointer-events: none;

    opacity: .7;

    transition:
        inset
        .6s
        var(--ease);
}


.dining-service__main-image:hover::before {

    inset: 1.5rem;
}


.dining-service__main-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.74)
        contrast(1.05);

    transition:

        transform
        1.2s
        var(--ease),

        filter
        .8s
        ease;
}


.dining-service__main-image:hover img {

    transform:
        scale(1.05);

    filter:
        saturate(.9)
        contrast(1.02);
}


.dining-service__shade {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            transparent 42%,
            rgba(3,8,10,.84)
        );
}


.dining-service__main-image
figcaption {

    position: absolute;

    z-index: 4;

    left: 1.8rem;
    bottom: 1.8rem;

    display: grid;
}


.dining-service__main-image
figcaption span {

    color:
        var(--services-gold-light);

    font-size: .44rem;

    font-weight: 600;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.dining-service__main-image
figcaption strong {

    margin-top: .3rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    font-weight: 400;
}


.dining-service__copy {

    max-width: 540px;
}


.dining-service__symbol {

    display: block;

    width: fit-content;

    margin-bottom: 2rem;

    color:
        var(--services-gold-light);

    font-size: 1.25rem;

    animation:
        diningStar
        8s
        linear
        infinite;
}


@keyframes diningStar {

    to {

        transform:
            rotate(360deg);

    }

}


.dining-service__copy h3 {

    margin-bottom: 1.7rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.3rem
        );

    font-weight: 400;

    line-height: .97;
}


.dining-service__copy p {

    color:
        var(--grey-400);

    font-size: .7rem;

    line-height: 1.9;
}


.dining-service__details {

    display: flex;

    flex-wrap: wrap;

    gap: .6rem;

    margin-top: 2rem;
}


.dining-service__details span {

    position: relative;

    overflow: hidden;

    padding:
        .7rem
        .95rem;

    border:
        1px solid
        var(--services-border);

    color:
        var(--grey-300);

    font-size: .43rem;

    font-weight: 600;

    letter-spacing: .17em;

    text-transform: uppercase;

    transition:

        color
        .35s
        ease,

        border-color
        .35s
        ease,

        transform
        .35s
        var(--ease);
}


.dining-service__details span:hover {

    color:
        var(--black);

    border-color:
        var(--services-gold-light);

    background:
        var(--services-gold-light);

    transform:
        translateY(-3px);
}



/* ==================================================================
   09 — CHEF SECTION
================================================================== */

.chef-section {

    position: relative;

    z-index: 2;

    margin-top:
        clamp(
            6rem,
            11vw,
            11rem
        );

    padding-top:
        clamp(
            4rem,
            7vw,
            7rem
        );

    border-top:
        1px solid
        var(--services-border);
}


.chef-section__heading {

    display: flex;

    justify-content:
        space-between;

    align-items: end;

    gap: 3rem;

    margin-bottom: 3rem;
}


.chef-section__heading span {

    color:
        var(--services-gold-light);

    font-size: .45rem;

    font-weight: 600;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.chef-section__heading h3 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    font-weight: 400;
}


.chef-grid {

    display: grid;

    grid-template-columns:
        1.3fr
        .7fr;

    gap: 1.3rem;
}


.chef-card {

    position: relative;

    min-height: 540px;

    overflow: hidden;

    border:
        1px solid
        var(--services-border);

    background: #071419;

    cursor: default;

    transition:

        transform
        .6s
        var(--ease),

        border-color
        .4s
        ease;
}


.chef-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(218,197,141,.28);
}


.chef-card figure {

    position: absolute;

    inset: 0;

    margin: 0;
}


.chef-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.66)
        brightness(.72);

    transition:

        transform
        1.15s
        var(--ease),

        filter
        .8s
        ease;
}


.chef-card:hover img {

    transform:
        scale(1.055);

    filter:
        saturate(.88)
        brightness(.67);
}


.chef-card::before {

    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 30%,
            rgba(4,8,10,.93)
        );
}


.chef-card::after {

    content: "✦";

    position: absolute;

    z-index: 4;

    top: 1.3rem;
    right: 1.4rem;

    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 50%;

    color:
        var(--services-gold-light);

    font-size: .7rem;

    backdrop-filter:
        blur(8px);

    transition:

        transform
        .5s
        var(--ease),

        background
        .35s
        ease;
}


.chef-card:hover::after {

    color: var(--black);

    background:
        var(--services-gold-light);

    transform:
        rotate(90deg);
}


.chef-card__content {

    position: absolute;

    z-index: 4;

    left: 1.8rem;
    right: 1.8rem;
    bottom: 1.8rem;
}


.chef-card__content > span {

    color:
        var(--services-gold-light);

    font-size: .43rem;

    font-weight: 600;

    letter-spacing: .21em;

    text-transform: uppercase;
}


.chef-card__content h4 {

    margin:
        .45rem
        0
        .8rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.7rem
        );

    font-weight: 400;

    line-height: 1;
}


.chef-card__content p {

    max-width: 500px;

    margin: 0;

    color:
        rgba(255,255,255,.64);

    font-size: .64rem;

    line-height: 1.8;
}



/* ==================================================================
   10 — NEARBY DINING
================================================================== */

.nearby-dining {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            160deg,
            #050a0d,
            #08171c 55%,
            #050a0d
        );
}


.nearby-dining__orb {

    position: absolute;

    left: -20%;
    top: 7%;

    width: 850px;
    max-width: 80vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .15;

    background:

        radial-gradient(
            circle,
            #315995,
            #12313d 44%,
            transparent 70%
        );

    filter: blur(25px);
}


.nearby-dining__heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    gap: 4rem;

    align-items: end;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            7rem
        );
}


.nearby-dining__intro {

    max-width: 500px;

    margin: 0;

    padding-bottom: .8rem;

    color:
        var(--grey-400);

    font-size: .72rem;
}



/* ==================================================================
   11 — RESTAURANT CARDS
================================================================== */

.nearby-restaurants-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1rem;

    perspective: 1200px;
}


.nearby-restaurant-card {

    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--services-border);

    background:

        linear-gradient(
            145deg,
            #0b1c22,
            #071014
        );

    transition:

        transform
        .55s
        var(--ease),

        border-color
        .4s
        ease,

        box-shadow
        .5s
        ease;
}


.nearby-restaurant-card:hover {

    z-index: 3;

    transform:
        translateY(-10px)
        scale(1.01);

    border-color:
        rgba(218,197,141,.30);

    box-shadow:
        0 28px 65px
        rgba(0,0,0,.22);
}


.nearby-restaurant-card figure {

    position: relative;

    aspect-ratio:
        4 / 3;

    margin: 0;

    overflow: hidden;
}


.nearby-restaurant-card figure::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(3,7,9,.52)
        );
}


.nearby-restaurant-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.7)
        brightness(.87);

    transition:

        transform
        1.05s
        var(--ease),

        filter
        .7s
        ease;
}


.nearby-restaurant-card:hover img {

    transform:
        scale(1.07);

    filter:
        saturate(.93)
        brightness(.88);
}


.nearby-restaurant-card__index {

    position: absolute;

    z-index: 3;

    top: 1rem;
    left: 1rem;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius: 50%;

    color: var(--white);

    font-family:
        var(--font-display);

    font-size: .95rem;

    background:
        rgba(5,10,13,.28);

    backdrop-filter:
        blur(8px);

    transition:
        color .35s ease,
        background .35s ease;
}


.nearby-restaurant-card:hover
.nearby-restaurant-card__index {

    color: var(--black);

    background:
        var(--services-gold-light);
}


.nearby-restaurant-card__content {

    min-height: 250px;

    padding:
        1.5rem;
}


.nearby-restaurant-card__content
> span {

    color:
        var(--services-gold-light);

    font-size: .41rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.nearby-restaurant-card h3 {

    margin:
        .55rem
        0
        .8rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.6rem,
            2.4vw,
            2.5rem
        );

    font-weight: 400;

    line-height: 1.04;

    transition:
        color .35s ease;
}


.nearby-restaurant-card:hover h3 {

    color:
        var(--services-gold-light);
}


.nearby-restaurant-card p {

    margin: 0;

    color:
        var(--grey-500);

    font-size: .62rem;

    line-height: 1.8;
}


.nearby-dining__note {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        160px
        1fr;

    gap: 2rem;

    margin-top: 3rem;

    padding:
        1.5rem
        0;

    border-top:
        1px solid
        var(--services-border);

    border-bottom:
        1px solid
        var(--services-border);
}


.nearby-dining__note span {

    color:
        var(--services-gold-light);

    font-size: .43rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.nearby-dining__note p {

    max-width: 650px;

    margin: 0;

    color:
        var(--grey-400);

    font-size: .66rem;
}



/* ==================================================================
   12 — CONFERENCING
================================================================== */

.conference-service {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #071216,
            #0a1e25 50%,
            #060d10
        );
}


.conference-service__orb {

    position: absolute;

    top: -25%;
    left: -20%;

    width: 900px;
    max-width: 85vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #365d99,
            #13333e 45%,
            transparent 70%
        );

    filter: blur(30px);
}


.conference-service__layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .9fr
        1.05fr;

    gap:
        clamp(
            4rem,
            10vw,
            10rem
        );

    align-items: center;
}


.conference-service__visual {

    position: relative;

    padding:
        2rem
        2rem
        3rem
        0;
}


.conference-service__image {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5.35;

    overflow: hidden;

    margin: 0;

    border:
        1px solid
        var(--services-border);
}


.conference-service__image::before {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 1rem;

    border:
        1px solid
        rgba(255,255,255,.09);

    pointer-events: none;

    transition:
        inset
        .5s
        var(--ease);
}


.conference-service__image:hover::before {

    inset: 1.45rem;
}


.conference-service__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.68)
        contrast(1.05);

    transition:
        transform
        1.15s
        var(--ease);
}


.conference-service__image:hover img {

    transform:
        scale(1.05);
}


.conference-service__shade {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 48%,
            rgba(3,7,9,.82)
        );
}


.conference-service__image
figcaption {

    position: absolute;

    z-index: 4;

    left: 1.6rem;
    bottom: 1.6rem;

    display: flex;

    align-items: baseline;

    gap: .75rem;
}


.conference-service__image
figcaption span {

    color:
        var(--services-gold-light);

    font-size: .42rem;

    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.conference-service__image
figcaption strong {

    font-family:
        var(--font-display);

    font-size: 4.2rem;

    font-weight: 400;

    line-height: .8;
}


.conference-service__image
figcaption small {

    color:
        rgba(255,255,255,.55);

    font-size: .43rem;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.conference-service__copy {

    max-width: 720px;
}


.conference-service__features {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    margin:
        2.5rem
        0;

    border-top:
        1px solid
        var(--services-border);
}


.conference-service__features div {

    position: relative;

    display: grid;

    grid-template-columns:
        40px
        1fr;

    gap: .6rem;

    padding:
        1.05rem
        .5rem
        1.05rem
        0;

    overflow: hidden;

    border-bottom:
        1px solid
        var(--services-border);

    transition:
        padding
        .45s
        var(--ease),

        background
        .35s
        ease;
}


.conference-service__features
div:hover {

    padding-left: .7rem;

    background:

        linear-gradient(
            90deg,
            rgba(218,197,141,.05),
            transparent
        );
}


.conference-service__features
div:nth-child(odd) {

    border-right:
        1px solid
        var(--services-border);
}


.conference-service__features
div:nth-child(even) {

    padding-left: 1rem;
}


.conference-service__features
div:nth-child(even):hover {

    padding-left: 1.6rem;
}


.conference-service__features span {

    color:
        var(--services-gold-light);

    font-family:
        var(--font-display);

    font-size: 1.05rem;
}


.conference-service__features p {

    margin: 0;

    color:
        var(--grey-300);

    font-size: .59rem;
}



/* ==================================================================
   13 — LOCAL UPINGTON EXPERIENCES
================================================================== */

.local-experiences {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            145deg,
            #07161b,
            #0b232a,
            #061014
        );
}


.local-experiences__glow {

    position: absolute;

    right: -19%;
    top: 0;

    width: 900px;
    max-width: 85vw;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: .18;

    background:

        radial-gradient(
            circle,
            #3b63a1,
            #143641 44%,
            transparent 70%
        );

    filter:
        blur(28px);
}


.local-experiences__heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    align-items: end;

    gap: 4rem;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.local-experiences__intro {

    max-width: 500px;

    margin: 0;

    padding-bottom: .8rem;

    color:
        var(--grey-400);

    font-size: .73rem;
}



/* ==================================================================
   14 — EXPERIENCE CARDS
================================================================== */

.local-experiences-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1.2rem;
}


.local-experience-card {

    position: relative;

    min-height: 490px;

    overflow: hidden;

    border:
        1px solid
        var(--services-border);

    background:
        #091419;

    transition:

        transform
        .6s
        var(--ease),

        border-color
        .4s
        ease,

        box-shadow
        .5s
        ease;
}


.local-experience-card:hover {

    z-index: 3;

    transform:
        translateY(-8px);

    border-color:
        rgba(218,197,141,.28);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.20);
}


.local-experience-card--large {

    min-height: 620px;
}


.local-experience-card--wide {

    grid-column:
        1 / -1;

    min-height: 540px;
}


.local-experience-card figure {

    position: absolute;

    inset: 0;

    margin: 0;
}


.local-experience-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.66)
        brightness(.75);

    transition:

        transform
        1.15s
        var(--ease),

        filter
        .8s
        ease;
}


.local-experience-card:hover img {

    transform:
        scale(1.06);

    filter:
        saturate(.9)
        brightness(.69);
}


.local-experience-card__shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(3,7,9,.04),
            rgba(3,7,9,.16) 37%,
            rgba(3,7,9,.93)
        );
}


.local-experience-card::after {

    content: "↗";

    position: absolute;

    z-index: 4;

    right: 1.4rem;
    top: 1.4rem;

    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(255,255,255,.23);

    border-radius: 50%;

    color:
        var(--services-gold-light);

    background:
        rgba(4,9,12,.25);

    backdrop-filter:
        blur(8px);

    opacity: 0;

    transform:
        translate(
            -5px,
            5px
        );

    transition:

        opacity
        .35s
        ease,

        transform
        .45s
        var(--ease),

        color
        .35s
        ease,

        background
        .35s
        ease;
}


.local-experience-card:hover::after {

    opacity: 1;

    color: var(--black);

    background:
        var(--services-gold-light);

    transform:
        translate(0)
        rotate(45deg);
}


.local-experience-card__number {

    position: absolute;

    z-index: 4;

    top: 1.5rem;
    left: 1.5rem;

    font-family:
        var(--font-display);

    font-size: 1.4rem;

    color:
        rgba(255,255,255,.66);
}


.local-experience-card__content {

    position: absolute;

    z-index: 4;

    left: 1.7rem;
    right: 1.7rem;
    bottom: 1.7rem;

    transition:
        transform
        .5s
        var(--ease);
}


.local-experience-card:hover
.local-experience-card__content {

    transform:
        translateY(-6px);
}


.local-experience-card__content
> span {

    color:
        var(--services-gold-light);

    font-size: .43rem;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.local-experience-card h3 {

    margin:
        .45rem
        0
        .8rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.2rem,
            4vw,
            4.1rem
        );

    font-weight: 400;

    line-height: .98;
}


.local-experience-card p {

    max-width: 610px;

    margin: 0;

    color:
        rgba(255,255,255,.66);

    font-size: .65rem;

    line-height: 1.8;
}



/* ==================================================================
   15 — BRAND STATEMENT
================================================================== */

.service-statement {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            8rem,
            15vw,
            15rem
        )
        0;

    text-align: center;

    background:
        #050a0c;
}


.service-statement::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 20%;

    background:

        linear-gradient(
            var(--services-gold),
            transparent
        );
}


.service-statement__glow {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 900px;
    max-width: 95vw;

    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    background:

        radial-gradient(
            circle,
            rgba(66,101,181,.24),
            rgba(184,155,94,.07) 42%,
            transparent 70%
        );

    filter: blur(22px);

    animation:
        statementGlow
        7s
        ease-in-out
        infinite alternate;
}


@keyframes statementGlow {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);

        opacity: .72;

    }

}


.service-statement__inner {

    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin: auto;
}


.service-statement__symbol {

    display: block;

    width: fit-content;

    margin:
        0
        auto
        2rem;

    color:
        var(--services-gold-light);

    font-size: 1.3rem;

    animation:
        statementStar
        9s
        linear
        infinite;
}


@keyframes statementStar {

    to {

        transform:
            rotate(360deg);

    }

}


.service-statement p {

    margin-bottom: 1rem;

    color:
        var(--grey-500);

    font-size: .48rem;

    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;
}


.service-statement h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.3rem,
            7.5vw,
            7.5rem
        );

    font-weight: 400;

    line-height: .9;
}


.service-statement h2 em {

    display: block;

    color:
        var(--services-gold-light);

    font-style: normal;
}


.service-statement__small {

    display: block;

    margin-top: 2.5rem;

    color:
        rgba(255,255,255,.31);

    font-size: .44rem;

    font-weight: 600;

    letter-spacing: .23em;

    text-transform: uppercase;
}



/* ==================================================================
   16 — ACCESSIBILITY
================================================================== */

.accessibility-service {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:

        linear-gradient(
            150deg,
            #07151a,
            #0a1f26,
            #061014
        );
}


.accessibility-service__heading {

    display: grid;

    grid-template-columns:
        1.2fr
        .65fr;

    align-items: end;

    gap: 4rem;

    margin-bottom:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.accessibility-service__intro {

    max-width: 470px;

    margin: 0;

    color:
        var(--grey-400);

    font-size: .73rem;
}


.accessibility-service__layout {

    display: grid;

    grid-template-columns:
        1fr
        .85fr;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    align-items: stretch;
}


.accessibility-service__image {

    position: relative;

    min-height: 620px;

    overflow: hidden;

    margin: 0;

    border:
        1px solid
        var(--services-border);
}


.accessibility-service__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.69)
        contrast(1.04);

    transition:
        transform
        1.1s
        var(--ease);
}


.accessibility-service__image:hover img {

    transform:
        scale(1.05);
}


.accessibility-service__shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(3,8,10,.78)
        );
}


.accessibility-service__image > span {

    position: absolute;

    left: 1.6rem;
    bottom: 1.6rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );

    color: var(--white);
}


.accessibility-features {

    display: flex;

    flex-direction: column;
}


.accessibility-feature {

    position: relative;

    display: grid;

    grid-template-columns:
        55px
        1fr;

    gap: 1rem;

    overflow: hidden;

    padding:
        1.7rem
        0;

    border-bottom:
        1px solid
        var(--services-border);

    transition:

        padding
        .45s
        var(--ease),

        background
        .35s
        ease;
}


.accessibility-feature:first-child {

    border-top:
        1px solid
        var(--services-border);
}


.accessibility-feature::before {

    content: "";

    position: absolute;

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

    width: 2px;

    background:
        var(--services-gold-light);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform
        .45s
        var(--ease);
}


.accessibility-feature:hover {

    padding-left: 1.1rem;

    background:

        linear-gradient(
            90deg,
            rgba(218,197,141,.055),
            transparent
        );
}


.accessibility-feature:hover::before {

    transform:
        scaleY(1);
}


.accessibility-feature > span {

    color:
        var(--services-gold-light);

    font-family:
        var(--font-display);

    font-size: 1.2rem;
}


.accessibility-feature h3 {

    margin:
        0
        0
        .4rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.4rem,
            2vw,
            2rem
        );

    font-weight: 400;
}


.accessibility-feature p {

    max-width: 420px;

    margin: 0;

    color:
        var(--grey-500);

    font-size: .61rem;
}



/* ==================================================================
   17 — BUSINESS TRAVEL
================================================================== */

.business-service {

    position: relative;

    overflow: hidden;

    padding:
        var(--section-space)
        0;

    background:
        #061014;
}


.business-service__gradient {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 78% 45%,
            rgba(65,98,168,.23),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(184,155,94,.055),
            transparent 28%
        );
}


.business-service__layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    align-items: center;

    gap:
        clamp(
            4rem,
            10vw,
            10rem
        );
}


.business-service__copy {

    max-width: 700px;
}


.business-service__tags {

    display: flex;

    flex-wrap: wrap;

    gap: .6rem;

    margin-top: 2.2rem;
}


.business-service__tags span {

    position: relative;

    overflow: hidden;

    padding:
        .67rem
        .92rem;

    border:
        1px solid
        var(--services-border);

    color:
        var(--grey-300);

    font-size: .43rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

    transition:

        color
        .35s
        ease,

        border-color
        .35s
        ease,

        transform
        .35s
        var(--ease),

        background
        .35s
        ease;
}


.business-service__tags span:hover {

    color:
        var(--black);

    border-color:
        var(--services-gold-light);

    background:
        var(--services-gold-light);

    transform:
        translateY(-3px);
}


.business-service__visual {

    position: relative;

    padding:
        0
        2rem
        3rem
        0;
}


.business-service__image {

    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5.05;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        var(--services-border);
}


.business-service__image::after {

    content: "164";

    position: absolute;

    right: -1rem;
    bottom: -1.2rem;

    color:
        rgba(255,255,255,.055);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            7rem,
            12vw,
            11rem
        );

    line-height: .8;

    pointer-events: none;
}


.business-service__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.7)
        contrast(1.04);

    transition:
        transform
        1.15s
        var(--ease);
}


.business-service__image:hover img {

    transform:
        scale(1.05);
}



/* ==================================================================
   18 — FINAL CTA
================================================================== */

.services-final {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            9rem,
            16vw,
            16rem
        )
        0;

    text-align: center;

    background:
        #05090b;
}


.services-final__glow {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 950px;
    max-width: 95vw;

    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    background:

        radial-gradient(
            circle,
            rgba(65,98,176,.27),
            rgba(184,155,94,.07) 40%,
            transparent 69%
        );

    filter: blur(25px);

    animation:
        finalGlow
        8s
        ease-in-out
        infinite alternate;
}


@keyframes finalGlow {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.1);

    }

}


.services-final__grid {

    position: absolute;

    inset: 0;

    opacity: .055;

    background-image:

        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size:
        120px
        120px;

    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 72%
        );
}


.services-final__inner {

    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin: auto;
}


.services-final .eyebrow {

    justify-content:
        center;
}


.services-final h2 {

    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.6rem,
            8vw,
            8rem
        );

    font-weight: 400;

    line-height: .88;
}


.services-final h2 em {

    display: block;

    color:
        var(--services-gold-light);

    font-style: normal;
}


.services-final__copy {

    max-width: 570px;

    margin:
        2rem
        auto
        0;

    color:
        var(--grey-400);

    font-size: .72rem;

    line-height: 1.9;
}


.services-final__actions {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    margin-top: 3rem;
}



/* ==================================================================
   19 — GLOBAL SERVICES PAGE HOVER DETAILS
================================================================== */

.page-services
.display-title em {

    position: relative;
}


.page-services
.editorial-link {

    position: relative;
}


.page-services
.editorial-link::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -.4rem;
    left: 0;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            var(--services-gold-light),
            transparent
        );

    transform:
        scaleX(.2);

    transform-origin: left;

    transition:
        transform
        .45s
        var(--ease);
}


.page-services
.editorial-link:hover::after {

    transform:
        scaleX(1);
}



/* ==================================================================
   20 — FUN SECTION NUMBER INTERACTION
================================================================== */

.page-services
.section-number {

    transition:

        color
        .55s
        ease,

        transform
        .65s
        var(--ease);
}


.page-services
section:hover
.section-number {

    color:
        rgba(218,197,141,.085);

    transform:
        translateX(8px);
}



/* ==================================================================
   21 — LARGE DESKTOP
================================================================== */

@media (min-width: 1400px) {

    .amenity-card {

        min-height: 390px;
    }


    .nearby-restaurant-card__content {

        min-height: 270px;
    }


    .local-experience-card {

        min-height: 540px;
    }


    .local-experience-card--large {

        min-height: 690px;
    }

}



/* ==================================================================
   22 — SMALL DESKTOP
================================================================== */

@media (max-width: 1199.98px) {

    .amenities-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .nearby-restaurants-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .chef-card {

        min-height: 500px;
    }

}



/* ==================================================================
   23 — TABLET
================================================================== */

@media (max-width: 991.98px) {

    .services-hero__content {

        padding-left: 0;
    }


    .services-hero__title em {

        padding-left:
            clamp(
                1rem,
                7vw,
                4rem
            );
    }


    .services-hero__intro {

        margin-left:
            clamp(
                1rem,
                7vw,
                4rem
            );
    }


    .amenities-heading,
    .dining-service__heading,
    .nearby-dining__heading,
    .local-experiences__heading,
    .accessibility-service__heading {

        grid-template-columns: 1fr;

        gap: 1.5rem;
    }


    .amenities-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .dining-service__layout {

        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .dining-service__main-image {

        min-height: 580px;
    }


    .chef-grid {

        grid-template-columns: 1fr;
    }


    .conference-service__layout,
    .business-service__layout {

        grid-template-columns: 1fr;

        gap: 5rem;
    }


    .conference-service__visual,
    .business-service__visual {

        width:
            min(
                82%,
                650px
            );

        margin:
            0
            auto;
    }


    .local-experiences-grid {

        grid-template-columns: 1fr;
    }


    .local-experience-card--wide {

        grid-column: auto;
    }


    .accessibility-service__layout {

        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .accessibility-service__image {

        width:
            min(
                85%,
                700px
            );

        min-height: 560px;
    }

}



/* ==================================================================
   24 — MOBILE
================================================================== */

@media (max-width: 767.98px) {

    .services-hero__top {

        display: block;
    }


    .services-hero__top i,
    .services-hero__top span:last-child {

        display: none;
    }


    .services-hero__title {

        font-size:
            clamp(
                4rem,
                19vw,
                6.7rem
            );
    }


    .services-hero__title em {

        padding-left: 1rem;
    }


    .services-hero__intro {

        margin-left: 1rem;
    }


    .services-hero__bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 1rem;
    }


    .services-hero__mini {

        display: none;
    }


    .services-marquee span {

        padding:
            1rem
            1.3rem;
    }


    .amenities-grid {

        grid-template-columns: 1fr;
    }


    .amenity-card {

        min-height: 315px;

        padding: 1.5rem;
    }


    .amenity-card__icon {

        margin:
            2.5rem
            0
            1.7rem;
    }


    .dining-service__main-image {

        min-height: 490px;
    }


    .chef-section__heading {

        align-items: flex-start;

        flex-direction: column;

        gap: .4rem;
    }


    .chef-card {

        min-height: 460px;
    }


    .nearby-restaurants-grid {

        grid-template-columns: 1fr;
    }


    .nearby-restaurant-card__content {

        min-height: auto;
    }


    .nearby-dining__note {

        grid-template-columns: 1fr;

        gap: .7rem;
    }


    .conference-service__visual,
    .business-service__visual {

        width: 100%;
    }


    .conference-service__features {

        grid-template-columns: 1fr;
    }


    .conference-service__features
    div:nth-child(odd) {

        border-right: 0;
    }


    .conference-service__features
    div:nth-child(even) {

        padding-left: 0;
    }


    .conference-service__features
    div:nth-child(even):hover {

        padding-left: .7rem;
    }


    .local-experience-card,
    .local-experience-card--large,
    .local-experience-card--wide {

        min-height: 500px;
    }


    .accessibility-service__image {

        width: 100%;

        min-height: 490px;
    }


    .services-final__actions {

        align-items: center;

        flex-direction: column;

        gap: 1rem;
    }

}



/* ==================================================================
   25 — SMALL MOBILE
================================================================== */

@media (max-width: 430px) {

    .services-hero__title {

        font-size:
            clamp(
                3.7rem,
                20vw,
                5.3rem
            );
    }


    .amenity-card {

        min-height: 300px;
    }


    .dining-service__main-image {

        min-height: 430px;
    }


    .chef-card {

        min-height: 420px;
    }


    .conference-service__image {

        aspect-ratio:
            4 / 5.8;
    }


    .accessibility-service__image {

        min-height: 440px;
    }


    .local-experience-card,
    .local-experience-card--large,
    .local-experience-card--wide {

        min-height: 475px;
    }


    .local-experience-card__content {

        left: 1.3rem;
        right: 1.3rem;
        bottom: 1.3rem;
    }


    .local-experience-card h3 {

        font-size:
            2.4rem;
    }

}



/* ==================================================================
   26 — TOUCH DEVICES

   Removes hover behaviours that can feel sticky on phones.
================================================================== */

@media (hover: none) {

    .amenity-card:hover,
    .chef-card:hover,
    .nearby-restaurant-card:hover,
    .local-experience-card:hover {

        transform: none;
    }


    .local-experience-card::after {

        opacity: 1;

        transform: none;
    }


    .amenity-card::after {

        display: none;
    }

}



/* ==================================================================
   27 — REDUCED MOTION
================================================================== */

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

    .services-hero__media img,
    .services-hero__glow,
    .services-marquee__track,
    .amenities-section__orb,
    .dining-service__symbol,
    .service-statement__glow,
    .service-statement__symbol,
    .services-final__glow,
    .services-marquee i {

        animation: none !important;
    }


    .amenity-card,
    .chef-card,
    .nearby-restaurant-card,
    .local-experience-card,
    .dining-service__main-image img,
    .conference-service__image img,
    .business-service__image img,
    .accessibility-service__image img {

        transition: none !important;
    }

}