/* =========================================================
   SHARK CAR HIRE
   HOMEPAGE SALES / SERVICES LAYER
========================================================= */


/* =========================================================
   TIGHTER HOMEPAGE RHYTHM
========================================================= */

.public-homepage .public-section {
    padding-top: 52px;
    padding-bottom: 52px;
}

.public-homepage .public-home-reward-section {
    padding-top: 52px;
    padding-bottom: 52px;
}

.public-homepage
.public-home-section-heading,
.public-homepage
.public-home-category-heading {
    margin-bottom: 24px;
}


/* =========================================================
   SERVICES SECTION
========================================================= */

.public-home-services-section {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6faff 52%,
            #ffffff 100%
        );
}

.public-home-services-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -260px;
    right: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(71, 119, 186, .10),
            transparent 70%
        );

    pointer-events: none;
}


.public-services-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}


.public-services-controls {
    display: flex;

    align-items: center;

    gap: 8px;
}


.public-services-arrow {
    display: inline-flex;

    width: 44px;
    height: 44px;

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

    border:
        1px solid
        rgba(71, 119, 186, .20);

    border-radius: 50%;

    background: #ffffff;

    color: #4777ba;

    box-shadow:
        0 8px 22px
        rgba(35, 65, 104, .09);

    cursor: pointer;

    transition:
        transform 220ms ease,
        background 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}


.public-services-arrow:hover {
    transform:
        translateY(-3px);

    background: #4777ba;

    color: #ffffff;

    box-shadow:
        0 13px 28px
        rgba(71, 119, 186, .20);
}


.public-services-arrow:active {
    transform:
        scale(.94);
}


/* =========================================================
   SERVICES RAIL — NEVER WRAPS
========================================================= */

.public-services-rail {
    position: relative;

    z-index: 2;

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns:
        calc((100% - 54px) / 4);

    gap: 18px;

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

    padding:
        4px 2px 13px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    cursor: grab;
}


.public-services-rail::-webkit-scrollbar {
    display: none;
}


.public-services-rail.is-dragging {
    cursor: grabbing;

    scroll-snap-type: none;

    user-select: none;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.public-service-card {
    --service-accent: #4777ba;
    --service-soft: #edf4ff;
    --service-soft-two: #ffffff;

    position: relative;

    isolation: isolate;

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

    overflow: hidden;

    display: flex;

    flex-direction: column;

    padding: 22px;

    border:
        1px solid
        rgba(71, 119, 186, .13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            var(--service-soft),
            var(--service-soft-two)
        );

    box-shadow:
        0 11px 32px
        rgba(35, 65, 104, .07);

    scroll-snap-align: start;

    cursor: pointer;

    transition:
        transform 220ms
        cubic-bezier(.2, .75, .25, 1),
        box-shadow 220ms
        cubic-bezier(.2, .75, .25, 1),
        border-color 220ms
        cubic-bezier(.2, .75, .25, 1);
}


.public-service-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -85px;
    right: -85px;

    z-index: -1;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--service-accent) 13%,
            transparent
        );

    transition:
        transform 600ms ease;
}


.public-service-card:hover {
    transform:
        translateY(-7px)
        scale(1.006);

    border-color:
        color-mix(
            in srgb,
            var(--service-accent) 35%,
            #ffffff
        );

    box-shadow:
        0 25px 68px
        rgba(36, 70, 120, .16);
}


.public-service-card:hover::before {
    transform:
        scale(1.30);
}


.public-service-card:active {
    transform:
        translateY(-2px)
        scale(.985);
}


/* =========================================================
   CARD TONES
========================================================= */

.public-service-tone-blue {
    --service-accent: #4777ba;
    --service-soft: #eaf3ff;
    --service-soft-two: #ffffff;
}


.public-service-tone-red {
    --service-accent: #ef4035;
    --service-soft: #fff0ef;
    --service-soft-two: #ffffff;
}


.public-service-tone-sky {
    --service-accent: #4287c7;
    --service-soft: #edf8ff;
    --service-soft-two: #ffffff;
}


.public-service-tone-warm {
    --service-accent: #d8892c;
    --service-soft: #fff6e9;
    --service-soft-two: #ffffff;
}


.public-service-tone-indigo {
    --service-accent: #6c6ebd;
    --service-soft: #f0f1ff;
    --service-soft-two: #ffffff;
}


.public-service-tone-mint {
    --service-accent: #358b78;
    --service-soft: #edf9f6;
    --service-soft-two: #ffffff;
}


.public-service-tone-neutral {
    --service-accent: #4777ba;
    --service-soft: #f3f6fa;
    --service-soft-two: #ffffff;
}


/* =========================================================
   SERVICE ICONS
========================================================= */

.public-service-icon {
    position: relative;

    z-index: 3;

    display: flex;

    width: 49px;
    height: 49px;

    flex-shrink: 0;

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

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .82);

    color:
        var(--service-accent);

    box-shadow:
        0 7px 20px
        rgba(30, 60, 100, .08);

    font-size: 19px;

    transition:
        transform 260ms ease;
}


.public-service-card:hover
.public-service-icon {
    transform:
        translateY(-3px)
        rotate(-2deg)
        scale(1.05);
}


.public-service-watermark {
    position: absolute;

    right: -5px;
    bottom: 34px;

    z-index: -1;

    color:
        var(--service-accent);

    font-size: 112px;

    opacity: .055;

    transform:
        rotate(-8deg);

    transition:
        transform 700ms ease,
        opacity 300ms ease;
}


.public-service-card:hover
.public-service-watermark {
    transform:
        translateX(-6px)
        rotate(-4deg)
        scale(1.07);

    opacity: .085;
}


/* =========================================================
   SERVICE COPY
========================================================= */

.public-service-copy {
    position: relative;

    z-index: 2;

    margin-top: 28px;
}


.public-service-copy h3 {
    margin: 0;

    color: #172033;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 23px;
    font-weight: 700;

    line-height: 1.12;
}


.public-service-copy p {
    margin:
        8px 0 0;

    color: #667085;

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

    line-height: 1.48;
}


.public-service-action {
    position: relative;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 7px;

    margin-top: auto;
    padding: 17px 0 0;

    border: 0;

    background: transparent;

    color:
        var(--service-accent);

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

    cursor: pointer;
}


.public-service-action i {
    transition:
        transform 220ms ease;
}


.public-service-card:hover
.public-service-action i {
    transform:
        translateX(5px);
}


.public-services-mobile-hint {
    display: none;

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

    gap: 9px;

    margin-top: 10px;

    color: #8491a5;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.public-home-trust-wrap {
    position: relative;

    z-index: 5;

    padding:
        0 0 18px;

    background: #ffffff;
}


.public-home-trust-strip {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    overflow-x: auto;

    padding:
        17px 20px;

    border:
        1px solid
        #dfe7f1;

    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f5f9ff,
            #ffffff
        );

    box-shadow:
        0 10px 30px
        rgba(35, 65, 104, .055);

    scrollbar-width: none;
}


.public-home-trust-strip::-webkit-scrollbar {
    display: none;
}


.public-home-trust-item {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 8px;

    color: #475467;

    white-space: nowrap;
}


.public-home-trust-item span {
    display: inline-flex;

    width: 31px;
    height: 31px;

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

    border-radius: 10px;

    background: #edf4ff;

    color: #4777ba;

    font-size: 12px;

    transition:
        transform 220ms ease,
        background 220ms ease,
        color 220ms ease;
}


.public-home-trust-item:hover span {
    transform:
        translateY(-2px);

    background: #4777ba;

    color: #ffffff;
}


.public-home-trust-item strong {
    font-size: 11px;
    font-weight: 800;
}


.public-home-trust-divider {
    flex:
        0 0 1px;

    width: 1px;
    height: 28px;

    background: #dfe7f1;
}


/* =========================================================
   SERVICE MODAL
========================================================= */

.public-service-modal {
    position: fixed;

    inset: 0;

    z-index: 4000;

    display: none;

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

    padding: 20px;
}


.public-service-modal.is-open {
    display: flex;
}


.public-service-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(19, 32, 52, .60);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


.public-service-modal-panel {
    position: relative;

    z-index: 1;

    width:
        min(
            530px,
            100%
        );

    max-height:
        90vh;

    overflow-y: auto;

    padding: 31px;

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

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    box-shadow:
        0 35px 100px
        rgba(15, 31, 55, .30);

    animation:
        public-service-modal-enter
        260ms ease both;
}


@keyframes public-service-modal-enter {

    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.public-service-modal-close {
    position: absolute;

    top: 17px;
    right: 17px;

    display: flex;

    width: 40px;
    height: 40px;

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

    border: 0;
    border-radius: 50%;

    background: #f1f4f8;

    color: #172033;

    cursor: pointer;

    transition:
        transform 220ms ease,
        background 220ms ease,
        color 220ms ease;
}


.public-service-modal-close:hover {
    transform:
        rotate(5deg);

    background: #fff1f0;

    color: #ef4035;
}


.public-service-modal-icon {
    display: flex;

    width: 59px;
    height: 59px;

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

    border-radius: 18px;

    background: #edf4ff;

    color: #4777ba;

    font-size: 23px;
}


.public-service-modal-kicker {
    margin-top: 18px;

    color: #ef4035;

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

    letter-spacing: .12em;

    text-transform: uppercase;
}


.public-service-modal-panel h2 {
    margin:
        6px 0 0;

    color: #172033;

    font-size: 34px;

    line-height: 1.05;
}


.public-service-modal-description {
    margin:
        14px 0 0;

    color: #667085;

    font-size: 15px;

    line-height: 1.65;
}


.public-service-modal-best {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 20px;

    padding: 15px;

    border:
        1px solid
        #dfe7f1;

    border-radius: 15px;

    background: #ffffff;
}


.public-service-modal-best > span {
    display: flex;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: #edf4ff;

    color: #4777ba;
}


.public-service-modal-best small {
    display: block;

    color: #667085;

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

    letter-spacing: .07em;

    text-transform: uppercase;
}


.public-service-modal-best strong {
    display: block;

    margin-top: 3px;

    color: #172033;

    font-size: 13px;

    line-height: 1.45;
}


.public-service-modal-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}


/* =========================================================
   DESKTOP / TABLET
========================================================= */

@media (max-width: 1100px) {

    .public-services-rail {
        grid-auto-columns:
            calc((100% - 36px) / 3);
    }


    .public-home-trust-strip {
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .public-homepage .public-section {
        padding-top: 43px;
        padding-bottom: 43px;
    }


    .public-homepage
    .public-home-reward-section {
        padding-top: 43px;
        padding-bottom: 43px;
    }


    .public-services-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .public-services-controls {
        align-self: flex-end;

        margin-top: -54px;
    }


    .public-services-rail {
        grid-auto-columns: 84%;

        gap: 13px;
    }


    .public-service-card {
        min-height: 250px;

        padding: 20px;
    }


    .public-service-copy {
        margin-top: 24px;
    }


    .public-services-mobile-hint {
        display: flex;
    }


    .public-home-trust-wrap {
        padding-bottom: 10px;
    }


    .public-home-trust-strip {
        gap: 12px;

        padding:
            14px 15px;

        border-radius: 15px;
    }


    .public-home-trust-divider {
        height: 24px;
    }


    .public-home-trust-item strong {
        font-size: 10px;
    }


    .public-service-modal-panel {
        padding:
            27px 19px 22px;
    }


    .public-service-modal-panel h2 {
        font-size: 29px;
    }


    .public-service-modal-actions {
        flex-direction: column;
    }


    .public-service-modal-actions
    .public-btn {
        width: 100%;
    }

}


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

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

    .public-service-card,
    .public-service-icon,
    .public-service-watermark,
    .public-services-arrow,
    .public-home-trust-item span {
        transition: none;
    }


    .public-service-modal-panel {
        animation: none;
    }

}