.venture-ashore {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media screen and (min-width: 1121px) {
    body.venture-ashore {
        padding-top: 68px;
    }
}

.venture-ashore-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.venture-ashore-content-morf {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.hs-show-banner-button {
    background: linear-gradient(135deg, var(--blue-80), var(--blue-60));
    border: 1px solid var(--blue-80);
    border-radius: 999px;
    padding: 12px 18px;
    color: var(--light-00);
    font-family: 'Work Sans';
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    box-shadow: 0 14px 30px rgba(2, 29, 48, 0.18);
}

#hs-eu-cookie-confirmation,
.hs-eu-cookie-confirmation,
.hs-cookie-notification-position-bottom,
.hs-cookie-notification-position-top,
.hs-cookie-notification-position-left,
.hs-cookie-notification-position-right,
.hs-cookie-notification-position-bottom-left,
.hs-cookie-notification-position-bottom-right {
    background: transparent !important;
    z-index: 120 !important;
}

#hs-eu-cookie-confirmation-inner,
.hs-eu-cookie-confirmation-inner,
.hs-cookie-notification-inner {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.98)) !important;
    border: 1px solid rgba(19, 110, 180, 0.15) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(7, 31, 50, 0.22) !important;
    color: var(--dark-70) !important;
    max-width: 720px !important;
    margin: 0 auto 24px !important;
    padding: 24px !important;
}

#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom,
.hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom,
.hs-cookie-notification-position-bottom {
    padding: 0 16px 16px !important;
}

#hs-eu-policy-wording,
.hs-eu-cookie-confirmation #hs-eu-policy-wording,
.hs-cookie-notification-inner p {
    color: var(--dark-60) !important;
    font-family: 'Work Sans' !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

#hs-eu-cookie-confirmation .hs-button,
#hs-eu-confirmation-button,
#hs-eu-decline-button,
#hs-eu-cookie-settings-button,
.hs-eu-cookie-confirmation .hs-button {
    border-radius: 999px !important;
    padding: 12px 18px !important;
    font-family: 'Work Sans' !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#hs-eu-confirmation-button,
.hs-eu-cookie-confirmation .hs-button[data-action="accept"] {
    background: var(--blue-80) !important;
    border: 1px solid var(--blue-80) !important;
    color: var(--light-00) !important;
}

#hs-eu-decline-button,
.hs-eu-cookie-confirmation .hs-button[data-action="decline"] {
    background: transparent !important;
    border: 1px solid var(--dark-20) !important;
    color: var(--dark-70) !important;
}

#hs-eu-cookie-settings-button,
.hs-eu-cookie-confirmation .hs-button[data-action="settings"] {
    background: var(--light-10) !important;
    border: 1px solid var(--light-20) !important;
    color: var(--dark-70) !important;
}

@media only screen and (max-width: 767px) {
    #hs-eu-cookie-confirmation-inner,
    .hs-eu-cookie-confirmation-inner,
    .hs-cookie-notification-inner {
        border-radius: 16px 16px 0 0 !important;
        margin-bottom: 0 !important;
        max-width: none !important;
    }
}

/* HEADER START */
/* mains screens */
.venture-ashore-logo img {
    width: 100%;
}

.va-main .venture-ashore-logo {
    width: 420px;
}

.va-main .agency-logo img {
    width: auto;
    max-width: 420px;
    max-height: 82.5px;
    object-fit: contain;
}

.va-main .dsk-second-top-content {
    padding: 14px 32px;
}

/* regular screens */
.va-regular .venture-ashore-logo {
    width: 320px;
}

.va-regular .agency-logo img {
    width: auto;
    max-width: 320px;
    height: 62.5px;
    object-fit: contain;
}

.va-regular .dsk-second-top-content {
    padding: 14px 32px;
}

.dsk-main-top-bar-container {
    background-color: #1B3060;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 52px;
}

.dsk-main-top-bar-menu {
    gap: 4px;
    padding: 4px 0;
    align-items: center;
}

.dsk-nav-left {
    justify-content: flex-start;
}

.dsk-nav-right {
    justify-content: flex-end;
}

/* CSS chevron replacing chevron-bottom.svg */
.nav-caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

/* Phone numbers in nav right — smaller, right-aligned */
.dsk-nav-phone {
    font-size: 11px !important;
    line-height: 1.4;
    text-align: right;
    opacity: 0.9;
    letter-spacing: 0.2px !important;
}

/* Sign In as bordered button */
.dsk-nav-signin-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
}

.dsk-nav-signin-btn:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

.dsk-main-top-bar-content {
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cart-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: relative;
}

    .cart-button span {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--second-C50);
        width: 22px;
        height: 22px;
        border-radius: 10px;
        color: var(--dark-70);
    }

.main-menu-button {
    display: flex;
    padding: 8px 8px;
    color: var(--light-00);
    font-family: var(--main-font);
    font-family: 'Work Sans';
    font-weight: 600;
    font-size: 12px;
    line-height: 180%;
    letter-spacing: 0.8px;
    position: relative;
    opacity: 0.9;
    white-space: nowrap;
}

.main-menu-button:hover {
    opacity: 1;
}

    .main-menu-button a,
    span {
        line-height: 18px;
    }

.dsk-second-top-container {
    background-color: var(--light-00);
    border-bottom: 1px solid #e8e8e8;
}

.dsk-second-top-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Account selector */
.dsk-account-select-options {
    background-color: var(--light-00);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 4px;
    z-index: 1101;
}
.dsk-account-select-options a:hover{
    color: var(--blue-90);  
}



/* Currency selector */
.currency-select {
    display: flex;
    position: relative;
}

.currency-select-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    cursor: pointer;
    color: var(--light-00);
    border-radius: 4px;
    font-family: 'Work Sans';
    font-weight: 500;
}

.currency-select-btn::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    margin-bottom: 3px;
    flex-shrink: 0;
}

.currency-select-btn-disabled-mod {
    opacity: 0.5;
}

.currency-select-options {
    z-index: 0;
    opacity: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    top: 100%;
    position: absolute;
    background-color: var(--light-00);
    border-top: 1px solid #54656d;
    border-radius: 4px;
    padding: 16px;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.currency-select-options-open {
    z-index: 1101;
    opacity: 1;
    border: 1px solid var(--light-10);
}

.currency-select li {
    display: flex;
    flex-direction: row;
    width: 100%;
    cursor: pointer;
}

    .currency-select li img {
        height: 18px;
        margin-right: 8px;
    }

/* mob phone */
.mob-phone {
    display: flex;
    gap: 8px;
    background-image: url('/content/new/icons/phone-grey.svg');
    background-position: calc(100% - 8px) 50%;
    background-repeat: no-repeat;
    background-size: 24px;
    border-color: var(--dark-30);
    padding: 8px 0;
    min-width: 275px;
}

/* Input search */
.input-search-by-key {
    background-color: var(--light-00);
    border-width: 1px;
    border-style: solid;
    border-radius: 8px 0 0 8px;
    border-color: var(--light-20);
    padding: 12px;
    min-width: 228px;
}

.second-top-send-btn {
    display: flex;
    background-color: var(--acent-50);
    padding: 7px;
    border-color: var(--light-20);
    border-width: 1px;
    margin-left: -1px;
    border-style: solid;
    border-radius: 0 8px 8px 0;
}

/* Mob area */
.mob-menu-container {
    z-index: 1;
    background-color: var(--light-00);
}

.mob-menu-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.mob-menu-top-bar {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
    background-color: #1B3060;
    padding: 12px 16px;
}

.mob-menu-main {
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 100%;
    gap: 8px;
}

.mob-menu-item {
    width: 100%;
    min-height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--light-15);
    text-transform: uppercase;
    font-weight: 500;
    background-image: url('/content/new/icons/chevron-right-grey.svg');
    background-position: calc(100% - 8px) 50%;
    background-repeat: no-repeat;
    background-size: 24px;
}

.mob-menu-group {
    padding: 32px 0px;
}

.mob-main-top-bar-container {
    display: flex;
    flex-direction: row;
    background-color: #1B3060;
    width: 100%;
    justify-content: space-between;
    /* padding: 12px 16px; */
}

    .mob-main-top-bar-container-maindiv {
        display: flex;
        flex-direction: row;
    }

    .mob-main-top-bar-container a,
    .mob-main-top-bar-container button,
    .mob-menu-container button {
        display: flex;
        padding: 12px 16px;
        cursor: pointer;
    }

        .mob-menu-container button li {
            padding-left: 0;
        }


.mob-second-top-container {
    display: flex;
}

    .mob-second-top-container form {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

.mob-currency-select {
    position: relative;
}

.mob-currency-select-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: var(--light-15);
    background-image: url('/content/new/icons/chevron-bottom-grey.svg');
    background-position: calc(100% - 8px) 50%;
    background-repeat: no-repeat;
    background-size: 24px;
}

    .mob-currency-select-btn li,
    .mob-currency-select-options li {
        width: 100%;
        display: flex;
        flex-direction: row;
        font-weight: 500;
        align-items: center;
        gap: 8px;
        padding-left: 16px;
    }

.mob-currency-select-options li {
    padding: 12px;
}

    .mob-currency-select-options li:nth-child(odd) {
        background-color: var(--light-10);
    }

.mob-currency-select-options {
    display: none;
    position: absolute;
    flex-direction: column;
    cursor: pointer;
    width: 100%;
    background-color: var(--light-00);
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: var(--light-15);
    overflow: hidden;
    top: 50px;
}

.mob-currency-select-options-open {
    z-index: 10;
    display: flex;
}

.mob-main-top-bar-container,
.mob-second-top-container {
    display: none;
}

.mob-menu-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 80;
    overflow:auto;
}

.mob-menu-account-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 1120px) {

    .dsk-main-top-bar-container,
    .dsk-second-top-container {
        display: none;
    }

    .mob-main-top-bar-container,
    .mob-second-top-container {
        display: flex;
    }

    .input-search-by-key {
        width: 100%;
        max-width: 480px;
    }
}

/* HEADER END */

/* GUARANTEE */
.hh-h1 {
    max-width: 640px;
    color: var(--light-10);
}

.hg-container-mod {
    background-color: var(--blue-80);
}

.hg-content-mod {
    flex-direction: row;
    padding: 14px 32px;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.hg-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

    .hg-item p {
        color: var(--light-00);
    }

    .hg-item svg {
        width: 22px;
        height: 22px;
        color: var(--blue-90)
    }

@media screen and (max-width: 964px) {

    .hg-item {
        width: calc(50% - 8px);
    }
}

@media screen and (max-width: 640px) {

    .hg-item {
        width: 100%;
        background-size: 24px;
        padding: 0 0 0 42px;
    }

        .hg-item br {
            display: none;
        }
}

/* GUARANTEE END */

/* HOW IT WORKS START */

.hi-container-mod {
    background-color: var(--light-10);
    padding: 72px 5%;
}

.hi-container-groups-mod {
    background-color: var(--light-00);
    padding: 72px 5%;
}

.hi-content-mod {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 0;
}

.hi-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.hi-title {
    font-family: 'Urbanist', sans-serif;  
    font-weight: 700;
    color: var(--blue-90);
    font-size: clamp(22px, 2.8vw, 36px);
}

.hi-subtitle {
    margin: 0;
    max-width: 640px;
    color: var(--dark-70);
    opacity: 0.8;
}

.hi-steps {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

.hi-steps-mod {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.hi-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: var(--blue-40);
    z-index: 0;
}

.hi-steps-mod::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--blue-40);
    z-index: 0;
}

.hi-step {
    text-align: center;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.hi-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--blue-90);
    color: var(--light-00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    margin: 0 auto 20px;
}

.hi-step h5,
.hi-step .h5 {
    padding-bottom: 10px;
}

.hi-step p {
    font-weight: 300;
    color: var(--dark-70);
}

/* HOW IT WORKS END */

/* HORNBLOWER START */

.ghb-container-mod {
    padding: 24px 8px;
    background-color: var(--light-20);
}

.ghb-content {
    padding: 0px;
    background-color: var(--light-00);
    border-radius: 8px;
}

.ghb-hornblower {
    padding: 12px 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--blue-80);
    display: flex;
    justify-content: center;
}

.ghb-logos {
    padding: 12px 0px;
    gap: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    .ghb-logos img {
        display: flex;
        align-self: center;
    }

@media screen and (max-width: 870px) {
    .ghb-container-mod {
        align-items: stretch;
        padding: 0 8px;
    }


    .ghb-hornblower {
        position: relative;
    }

        .ghb-hornblower img {
            object-fit: contain;
            max-width: 100%;
        }

    .ghb-logos {
        flex-direction: column;
        justify-content: center;
        padding: 32px 12px;
    }

        .ghb-logos img {
            max-width: 100%;
        }
}

/* HORNBLOWER END */

/* FOOTER START */
.gf-container-mod {
    background-color: #111827;
    padding: 48px 5% 0;
}

.gf-grid-mod {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.gf-brand-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gf-brand-logo {
    width: 200px;
    margin-bottom: 14px;
}

.gf-brand-desc {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.65;
    max-width: 260px;
}

.gf-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gf-col a {
    display: block;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.65;
    transition: color 0.2s;
}

.gf-col a:hover {
    color: #2BB8CC;
}

.gf-h5-mod {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 8px;
}

.gf-bottom-mod {
    border-top: 1px solid #374151;
    padding: 24px 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.gf-bottom-mod p {
    color: #6b7280;
    font-size: 12px;
}

.gf-bottom-mod a {
    color: #6b7280;
    font-size: 12px;
    transition: color 0.2s;
}

.gf-bottom-mod a:hover {
    color: #9ca3af;
}

@media screen and (max-width: 1120px) {
    .gf-grid-mod {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 640px) {
    .gf-grid-mod {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .gf-bottom-mod {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* FOOTER END */

/* HERO START */

.ghi-content-mod {
    padding: 48px 32px 32px 32px;
    gap: 42px;
}

.ghi-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.gh-selector {
    max-width: 584px;
}

.gh-container {
    display: flex;
    flex-direction: row;
}

.gh-content-mod {
    min-height: 400px;
    max-width: var(--xl);
    padding: 0px;
}

.gh-left {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--blue-80);
    overflow: hidden;
}

    .gh-left h1 {
        color: var(--light-00);
    }

.gh-right {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: var(--blue-80);
}

    .gh-right img {
        position: absolute;
        max-width: 964px;
        object-fit: contain;
        object-position: 50% 0%;
    }

@media screen and (max-width: 964px) {
    .gh-content-mod {
        flex-direction: column;
    }

    .gh-left {
        width: 100%;
        padding: 32px;
    }

    .gh-right {
        width: 100%;
    }

        .gh-right img {
            object-fit: cover;
        }
}

/* HERO END */

/* ASIDE START */

.gm-aside {
    width: 30%;
    padding: 24px 0px;
}

.gm-main-mod {
    width: 70%;
    padding-bottom: 24px;
}

    .gm-main-mod h4 {
        padding: 12px 0px;
    }

@media screen and (max-width: 964px) {
    .gm-content-mod {
        flex-direction: column;
    }

    .gm-aside {
        width: 100%;
        padding: 24px 0px;
    }

    .gm-main-mod {
        width: 100%;
        padding-bottom: 24px;
    }
}

/* ASIDE END */

/* NEWS LETTER START */
.gn-container-mod {
    padding: 24px 8px;
    background-color: var(--light-20);
}

.gn-card-mod {
    background-color: var(--blue-70);
    background-image: url('/content/new/images/nl-ship-01.png'), url('/content/new/images/nl-ship-02.png'), url('/content/new/images/nl-ocean.png');
    background-position-x: 10%, 90%, 0%;
    background-position-y: 115%, -45%, 0%;
    background-size: 168px, 168px, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
    padding: 32px;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}

.gn-card-mod-v2 {
    background-color: var(--light-00);
    border: 1px solid var(--light-00);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}

.gn-content-mod {
    max-width: var(--md);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
}

    .gn-content-mod form {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 8px;
    }

    .gn-content-mod .input-text {
        width: 100%;
    }

@media screen and (max-width: 964px) {
    .va-main .venture-ashore-logo {
        width: 50%;
        max-width: 240px;
    }

    .va-regular .venture-ashore-logo {
        width: 50%;
        max-width: 240px;
    }

    .va-main .agency-logo img {
        height: 40px;
        width: auto;
        max-width: 240px;
    }

    .va-regular .agency-logo img {
        height: 40px;
        width: auto;
        max-width: 240px;
    }

    .gn-card-mod {
        background-image: url('/content/new/images/nl-ocean.png');
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: cover;
    }

    .gn-content-mod form {
        flex-direction: column;
    }

    .gn-content-mod input {
        width: 100%;
    }
}

.gn-iframe-container {
    width: 100%;
    background-color: var(--light-00);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.gn-iframe {
    position: relative;
    top: -48px;
    min-height: 700px;
    max-width: 600px;
    width: 100%;
}

@media screen and (max-width: 824px) {
    .gn-iframe {
        height: 750px;
        width: 100%;
    }
}

@media screen and (max-width: 535px) {
    .gn-iframe {
        height: 800px;
        width: 100%;
    }
}

@media screen and (max-width: 425px) {
    .gn-iframe {
        height: 820px;
        width: 100%;
    }
}

/* NEWS LETTER END */

/* EXPLORE START */
.ge-container-mod {
    background-color: var(--light-20);
}

.ge-content-mod {
    justify-content: center;
    align-items: center;
    padding: 32px;
}

.ge-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ge-title {
    color:var(--blue-90);
    font-weight: 700;
    padding-bottom: 8px;
}

.ge-cards-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    justify-content: center;
}

.ge-region {
    display: flex;
    width: calc(33.33% - 10.66px);
}

    .ge-region a {
        display: flex;
        width: 100%;
        height: 420px;
        align-items: flex-end;
        padding: 8px 16px;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }

.ge-content-small .ge-region a {
    height: 130px;
}

.ge-region h4 {
    display: flex;
    color: var(--light-00);
    position: relative;
    z-index: 3;
}

.ge-region img {
    position: absolute;
    display: flex;
    width: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
}

.ge-region a:after {
    content: "";
    height: 130px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(180deg, #00000000, #170f2db8);
}

@media screen and (max-width: 964px) {
    .ge-region {
        width: calc(50% - 16px);
    }
}

@media screen and (max-width: 640px) {
    .ge-region {
        width: 100%;
    }
}

/* ge-home-grid: the polished tile treatment (aspect-ratio card, hover zoom,
   top-anchored gradient) used by the homepage "Explore All Regions" grid.
   Reusable by any page that wants region tiles to look like Home's. */
.ge-home-grid.ge-cards-grid {
    gap: 16px;
}

.ge-home-grid .ge-region a {
    height: auto;
    aspect-ratio: 16 / 9;
}

.ge-home-grid .ge-region .img-stack {
    position: absolute;
    inset: 0;
    height: 100%;
}

.ge-home-grid .ge-region .img-in {
    transition: transform 0.4s ease;
}

.ge-home-grid .ge-region a:hover .img-in {
    transform: scale(1.05);
}

.ge-home-grid .ge-region a::after {
    height: 100%;
    background: linear-gradient(to top, rgba(27, 48, 96, 0.72) 0%, rgba(27, 48, 96, 0.08) 60%);
}

.ge-home-grid .ge-region h4 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding-left: 4px;
    padding-bottom: 4px;
}

/* EXPLORE END */
/* INFO PAGES START */
.gc-content-mod {
    padding: 40px 32px;
    gap: 16px;
}

.gh-title {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

@media screen and (max-width: 640PX) {
    .gc-content-mod {
        padding: 16px;
    }
}

/* INFO PAGES END */

/* ACCORDIONS HERO START */

.accordion-icon {
    display: flex;
    content: "";
    background-image: url('/content/new/icons/chevron-bottom-grey.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    right: 16px;
    top: 16px;
    transition: all 0.3s;
}

.open .accordion-icon {
    transform: rotate(180deg);
}

/* ACCORDIONS HERO END */

/* LOADING START START */
.gl-cover {
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: var(--light-10);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}

.gl-logo {
    width: 64px;
    height: 64px;
    animation: 2s rotate360 infinite linear;
}

/* LOADING START END */


@media print {
    .noPrint {
        display: none;
    }
}

.em-container-mod {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 72px);
    max-height: 720px;
}

.em-bg-container-mod {
    background-color: var(--light-00);
}

.em-content-mod {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

.em-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: start;
}

.embeddedServiceHelpButton .helpButton,
.embeddedServiceSidebarMinimizedDefaultUI.helpButton {
    right: 200px;
}

    .embeddedServiceHelpButton .helpButton .uiButton {
        background-color: #23a5e1;
        font-family: "Arial", sans-serif;
    }

        .embeddedServiceHelpButton .helpButton .uiButton:focus {
            outline: 1px solid #23a5e1;
        }

.embeddedServiceSidebar.layout-docked .dockableContainer.showDockableContainer,
.embeddedServiceSidebar.layout-float .dockableContainer.showDockableContainer {
    margin-bottom: 50px
}

h2[embeddedService-chatHeader_chatHeader] {
    color: #ffffff !important;
}

.embeddedServiceHelpButton.hb_repositioned_chat_btn {
    z-index: 1111 !important;
}

    .embeddedServiceHelpButton.hb_repositioned_chat_btn .helpButton {
        top: 74px;
        right: 10px !important;
    }

        .embeddedServiceHelpButton.hb_repositioned_chat_btn .helpButton .uiButton {
            border-radius: 8px !important;
            min-width: auto;
        }

@media screen and (max-width: 964px) {
    .embeddedServiceHelpButton .helpButton .uiButton {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5) !important;
        height: 32px !important;
    }
}

/* TEAM SECTION (Shared: About & Groups) ========================================== */

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

.about-team-card {
  background-color: var(--light-00);
  border-radius: 8px;
  border: 1px solid var(--light-20);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-team-person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.about-team-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: transparent;
  border: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.about-team-avatar--rinat {
  background-image: url("/content/new/images/team-member-1.jpg");
}

.about-team-avatar--simonne {
  background-image: url("/content/new/images/team-member-2.jpg");
}

.about-team-avatar--corey {
  background-image: url("/content/new/images/team-member-3.png");
}

.about-team-avatar--olivia {
  background-image: url("/content/new/images/team-member-4.png");
}

.about-team-avatar--triin {
  background-image: url("/content/new/images/team-member-5.png");
  background-size: 150%;
}

.about-team-person-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.about-team-person-name {
  color: var(--blue-90);
  line-height: 1.2;
}

.about-team-person-role {
  color: var(--blue-80);
  line-height: 1.35;
}

.about-team-card--lead {
  grid-column: span 3;
  padding: 32px;
}

.about-team-card--curator {
  grid-column: span 2;
}

.about-team-footer {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-style: italic;
}

.about-team,
.about-advisors,
.about-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

@media screen and (max-width: 1200px) {
  .about-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-team-card--lead,
  .about-team-card--curator {
    grid-column: span 1;
  }

  .about-team-person {
    align-items: flex-start;
  }
}

@media screen and (max-width: 800px) {
  .about-team-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TESTIMONIALS (shared component — used by Groups & Partners
   landing pages so both read as the same site with different copy)
   ============================================================ */
:root {
  --testi-gold: #F2C44E;
}

.testi-container-mod {
  background-color: var(--light-10);
  padding: 72px 5%;
}

.testi-content-mod {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testi-card {
  background: var(--light-00);
  border: 1px solid var(--light-20);
  border-radius: 12px;
  padding: 24px;
}

.testi-stars {
  color: var(--testi-gold);
  font-size: 16px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.testi-card blockquote {
  font-size: 14px;
  color: var(--dark-80);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 16px;
}

.testi-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-90);
}

.testi-meta {
  font-size: 12px;
  color: var(--dark-70);
  margin-top: 2px;
}

@media screen and (max-width: 768px) {
  .testi-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TOUR REVIEW WIDGET (prefix "bkr" - booking review)
   ------------------------------------------------------------
   Lives in shared.css, and not in the account or the trip sheet,
   because the very same star widget is rendered by two pages that
   do NOT share a stylesheet otherwise: the account booking detail
   (_Layout.cshtml) and the public trip page (_LayoutNew.cshtml).
   shared.css is the only sheet both of them load.

   Written in the new Venture Ashore design language, with the
   values taken from the utilities the new trip cards are built
   from in globals.css: .rounded (8px), .border-grey (1px solid
   var(--dark-30)), .back-white, .padding-24, .gap-16, .h5 / .h6 /
   .b1 / .t1 typography and .main-button. Every rule is scoped
   under .venture-ashore (the body class of both layouts) so the
   legacy account rules in v2main.css - which is loaded AFTER this
   file - cannot outrank it.
   ============================================================ */

.venture-ashore .bkrCard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 24px;
  background-color: var(--light-00);
  border: 1px solid var(--dark-30);
  border-radius: 8px;
  font-family: "Work Sans", sans-serif;
}

.venture-ashore .bkrHeading {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--dark-70);
  text-transform: none;
}

.venture-ashore .bkrIntro {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--dark-70);
}

.venture-ashore .bkrForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- star rating input ------------------------------------- */

.venture-ashore .bkrRatingField {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.venture-ashore .bkrLegend,
.venture-ashore .bkrLabel {
  padding: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  color: var(--dark-70);
}

/* The stars are printed 5 -> 1 in the markup so that "input:checked ~ label"
   can reach every star below the chosen one; row-reverse puts them back in
   reading order. position: relative contains the visually hidden radios. */
.venture-ashore .bkrStars {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}

/* Hidden, but NOT display: none - that would drop the radios out of the tab
   order and out of the accessibility tree, and the server rejects rating < 1,
   so a keyboard-only visitor could never submit the form.

   pointer-events: none is load-bearing, not tidying. Being position: absolute
   with no offsets, the five radios pile up over the labels, and the topmost one
   (rvw1) swallowed the mouse: hovering the fifth star hit the INPUT, so
   `label:hover` never matched and the stars stayed grey. The label is the only
   thing that should take the pointer - clicking it still checks the radio
   through `for`, and keyboard focus is untouched. */
.venture-ashore .bkrStars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Deliberately large. The rating is the one field on the page that is mandatory
   and the one a phone has to hit accurately - 42px puts each star well past the
   ~44px minimum touch target once the 6px gap is counted. */
.venture-ashore .bkrStars label {
  cursor: pointer;
  font-size: 42px;
  line-height: 1;
  border-radius: 4px;
  color: var(--light-20);
}

.venture-ashore .bkrStars input:checked ~ label {
  color: var(--blue-70);
}

/* While the mouse is over the group, the stored rating steps aside so the
   preview does not leave stars from the old value lit. */
.venture-ashore .bkrStars:hover input:checked ~ label {
  color: var(--light-20);
}

.venture-ashore .bkrStars:hover label:hover,
.venture-ashore .bkrStars:hover label:hover ~ label {
  color: var(--blue-70);
}

.venture-ashore .bkrStars input:focus + label {
  outline: 2px solid var(--blue-70);
  outline-offset: 2px;
}

/* --- star rating, read only -------------------------------- */

.venture-ashore .bkrRating {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.venture-ashore .bkrStarsStatic {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--blue-70);
}

.venture-ashore .bkrStarsStatic .bkrStarOff {
  color: var(--light-20);
}

/* --- text fields ------------------------------------------- */

.venture-ashore .bkrField {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.venture-ashore .bkrField input[type="text"],
.venture-ashore .bkrField textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--dark-80);
  background-color: var(--light-00);
  border: 1px solid var(--dark-30);
  border-radius: 8px;
}

.venture-ashore .bkrField textarea {
  min-height: 132px;
  resize: vertical;
}

.venture-ashore .bkrField input[type="text"]:focus,
.venture-ashore .bkrField textarea:focus {
  border-color: var(--blue-70);
  outline: 2px solid var(--blue-70);
  outline-offset: 1px;
}

/* --- actions, status, errors ------------------------------- */

.venture-ashore .bkrActions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.venture-ashore .bkrSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--light-00);
  background-color: var(--acent-50);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.venture-ashore .bkrSubmit:hover,
.venture-ashore .bkrSubmit:focus-visible {
  opacity: 0.88;
  color: var(--light-00);
}

.venture-ashore .bkrStatus {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  font-style: italic;
  color: var(--dark-70);
}

.venture-ashore .bkrTitleText {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--dark-70);
  text-transform: none;
}

.venture-ashore .bkrBody {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--dark-70);
  white-space: pre-wrap;
}

.venture-ashore .bkrError {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  color: var(--red-50);
}

/* --- average stars with halves (public trip page) ----------- */

/* The per-review stars above are whole numbers, so they are painted glyph by
   glyph on the server. An average like 4.5 cannot be, so the strip is drawn
   twice - grey underneath, blue on top clipped to (average / 5) - and the
   server sets that width inline. No JS, and the value stays server-computed. */
.venture-ashore .bkrStarsFraction {
  position: relative;
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.venture-ashore .bkrStarsFractionBase {
  color: var(--light-20);
}

.venture-ashore .bkrStarsFractionFill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--blue-70);
}

.venture-ashore .bkrAvgValue {
  color: var(--dark-70);
}

/* Small variant of the fractional star strip, for places where the rating sits
   beside something else rather than heading a section: the tour title and the
   listing card. Same two-layer trick, same server-set fill width - only the type
   size changes, so a half star stays a half star. */
.venture-ashore .bkrStarsFractionSm {
  font-size: 15px;
  letter-spacing: 1px;
}

/* --- tour title row (public trip page) ---------------------- */

/* Two sides, and only two: the heading (title + rating) and the actions.
   Deliberately NOT the generic flex utilities with "wrap". Wrapping solves the
   wrong problem - when the row runs out of width it pushes the BUTTONS onto
   their own line instead of narrowing the title, so Share/Back drift left and
   away from the right edge they belong on. Here the heading is the only thing
   that flexes, so a long tour name breaks onto a second line and the actions
   stay put. */
.venture-ashore .trgTitleRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* min-width: 0 is what actually lets the title break. A flex item defaults to
   min-width: auto, meaning "never shrink below your content" - without this the
   heading refuses to narrow and pushes the buttons off the right edge instead. */
.venture-ashore .trgTitleHeading {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Never compresses: two buttons squeezed into ellipses are two buttons nobody
   can read, and they are the page's only way back. */
.venture-ashore .trgTitleActions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Below this the buttons take most of the width and the title would break every
   two or three words, so the row gives up and stacks instead.

   align-items MUST stay stretch here. Switching to flex-start is the obvious way
   to left-align a stacked column and it silently breaks the title: in column
   direction align-items sets the item's WIDTH, so flex-start makes the heading
   shrink-to-fit its content, the h1 stops wrapping, and a long tour name runs off
   the right edge of the phone. Stretch keeps each row full-width; the buttons are
   already left-aligned by their own container. */
@media screen and (max-width: 640px) {
  .venture-ashore .trgTitleRow {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- rating beside the tour title (public trip page) -------- */

/* A link, not a label: it jumps to the reviews themselves. Underlined only on
   hover so it reads as part of the heading rather than as body copy. */
.venture-ashore .trgTitleRating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.venture-ashore .trgTitleRating:hover .trgTitleRatingValue {
  text-decoration: underline;
}

.venture-ashore .trgTitleRatingValue {
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--dark-70);
}

.venture-ashore .trgTitleRatingCount {
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--dark-70);
}

/* A dot between the average and the count, drawn in CSS so the markup stays two
   plain spans and a screen reader is not read a stray bullet character. */
.venture-ashore .trgTitleRatingCount::before {
  content: "·";
  margin-right: 6px;
}

/* --- rating on the listing card ----------------------------- */

/* Plain text, never a link: the whole card is already one anchor and an anchor
   inside an anchor is invalid markup that browsers resolve by dropping one of
   them - usually the one you wanted. */
.venture-ashore .tour-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.venture-ashore .tour-card-rating-value {
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--dark-70);
}

.venture-ashore .tour-card-rating-count {
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--dark-70);
}

.venture-ashore .bkrCountText {
  color: var(--dark-70);
}

/* --- reviews section (public trip page) --------------------- */

.venture-ashore .bkrControls {
  align-items: stretch;
}

/* Wide enough for the longest option ("Reviewer name (A-Z)"), and padded clear of
   the chevron: .main-select paints a 32px arrow 8px from the right edge but only
   sets padding: 12px all round, so without this the last character of a long
   option sits underneath it. */
.venture-ashore .bkrSort {
  width: auto;
  min-width: 235px;
  padding-right: 46px;
}

.venture-ashore .bkrByline {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  color: var(--dark-70);
}

/* "Verified traveler" mark: the review is tied to a booking that was actually travelled.
   inline-flex so the tick and the label never break apart across a line. */
.venture-ashore .bkrVerified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--blue-05);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--blue-70);
  white-space: nowrap;
}

/* Green rather than the pill's blue: the tick is the "yes, this happened" mark, and it reads as
   confirmation on its own even where the pill background does not render. */
.venture-ashore .bkrVerifiedTick {
  font-size: 12px;
  line-height: 1;
  color: var(--second-A50);
}

/* The date the reviewer travelled, on its own line under the by-line. Lighter than the
   name it follows: it is context, not the thing being read. */
.venture-ashore .bkrTravelDate {
  color: var(--dark-30);
}

/* --- review card header ------------------------------------
   Title on the left, everything about WHO wrote it on one line to the right, and
   the by-line dropping to a line of its own when the title needs the room.
   align-items: baseline, not center: the title is 16px and the meta 14px, and
   centring them would leave the two texts sitting on different lines to the eye. */
.venture-ashore .bkrCardHead {
  display: flex;
  flex-direction: row;
  /* wrap. This was nowrap, on the reasoning that the title "should be the thing
     that gives" - but the meta is flex: 0 0 auto, so the title was the only thing
     that COULD give, and it gave all the way down to min-content. Measured at
     1024px with a 46-character title: an 88px column, one word per line, six lines
     deep; at 700px it reached zero width and took the page into horizontal
     overflow. A title is the content of the card and the by-line is chrome, so the
     chrome is what moves. Wrapping is self-adjusting - a card whose meta is short
     (anonymous reviewer, no travel date) still renders the compact one-line
     header, because flexbox only breaks the line when the two genuinely do not
     fit. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* Only applies once the meta has wrapped, and 16px is far too much air between a
     title and its own by-line. */
  row-gap: 6px;
}

/* min-width: 0 is what lets a flex item shrink below its content. Kept so a single
   unbreakably long word in a title cannot push the card wider than the card - it is
   no longer what handles long titles, since wrapping now does that. */
.venture-ashore .bkrCardHead .bkrTitleText {
  flex: 1 1 auto;
  min-width: 0;
}

.venture-ashore .bkrCardMeta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* Never shrinks: these are already-minimal labels, and compressing the row only
     wraps "Verified traveler" into a two-line pill. When it will not fit beside the
     title it takes a line of its own instead - see the head rule above. */
  flex: 0 0 auto;
  /* Deliberately NOT margin-left: auto. That pinned the meta right, which is what
     justify-content already does while it shares the title's row - and on a wrapped
     row it would strand the by-line against the right edge under a left-aligned
     title. Left is also right for a review with no title at all: the meta then lines
     up with the body text below it instead of floating off on its own. */
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  color: var(--dark-70);
}

.venture-ashore .bkrMetaSep {
  color: var(--dark-30);
}

/* The stars sit inline here rather than in their own .bkrRating row, so the
   letter-spacing that suited a standalone block would push the separator away. */
.venture-ashore .bkrCardMeta .bkrStarsStatic {
  font-size: 16px;
  letter-spacing: 0;
}

/* On a phone the meta is its own line under the title, left-aligned with it -
   right-aligned metadata under a left-aligned title reads as two columns that
   are not there. */
@media (max-width: 640px) {
  .venture-ashore .bkrCardHead {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The travel date gets a line to itself here rather than wrapping wherever it
     lands, and its leading separator goes with it - a middle dot stranded at the
     end of the line above is the tell that a layout was never looked at on a
     phone. */
  .venture-ashore .bkrTravelDate {
    flex-basis: 100%;
  }

  .venture-ashore .bkrMetaSepTravel {
    display: none;
  }
}

/* --- travelers mention -------------------------------------- */
/* The whole block is display:none until the script finds enough repeated phrases to
   fill it, so there is no empty heading on a tour with three reviews. */
.venture-ashore .bkrMentions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.venture-ashore .bkrMentionsHeading {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--dark-70);
  text-transform: none;
}

.venture-ashore .bkrChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.venture-ashore .bkrChip {
  padding: 6px 14px;
  background: var(--light-00);
  border: 1px solid var(--dark-30);
  border-radius: 999px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--dark-70);
  cursor: pointer;
}

.venture-ashore .bkrChip:hover,
.venture-ashore .bkrChip:focus-visible {
  border-color: var(--blue-70);
  color: var(--blue-70);
}

/* The phrase currently in the search box. Driven by the box, not by the last click, so
   typing a phrase by hand lights its chip too. */
.venture-ashore .bkrChipOn {
  background: var(--blue-05);
  border-color: var(--blue-70);
  color: var(--blue-70);
  font-weight: 600;
}

/* --- review photos (not switched on yet) -------------------- */
/* The rail is rendered on every card so the layout is already shaped for images: a two
   column card with the thumbnails on the right, collapsing under the text on a narrow
   screen. Reviews cannot carry photos yet, so the whole thing is hidden here - turning
   it on means deleting this one rule and filling the rail. A card whose rail is empty
   keeps its text at full width either way, so the column is never reserved. */
.venture-ashore .bkrPhotoRail {
  display: none;
}

/* Account page: tells the customer the by-line their review will carry. */
.venture-ashore .bkrPublishAs {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  color: var(--dark-70);
}

.venture-ashore .bkrEmpty {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--dark-70);
}

/* The shared button classes carry `margin-top: auto` for card footers; inside this
   flex column that would fight the section gap, so it is reset here. */
.venture-ashore .bkrShowMore {
  align-self: center;
  margin-top: 0;
}

/* The badge sits in the trip page chips row and is an anchor, so it needs the
   link decoration removed to look like the .pill-tag chips beside it. */
.venture-ashore .bkrBadge {
  text-decoration: none;
  color: var(--light-00);
  cursor: pointer;
}

.venture-ashore .bkrBadge:hover,
.venture-ashore .bkrBadge:focus-visible {
  color: var(--light-00);
  opacity: 0.88;
}

.venture-ashore .bkrBadgeStar {
  font-size: 14px;
  line-height: 1;
}

/* Reachable by a screen reader, invisible on screen. */
.venture-ashore .bkrSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   STANDALONE REVIEW PAGE (prefix "bkrp" - booking review page)
   ------------------------------------------------------------
   /review and /review/{bookingId}/{token}. Extends the bkr block
   above rather than restating it: the card, the star input, the
   text fields, the submit button and the hint text are already
   defined there and are shared with the account booking page.
   Only the pieces that exist nowhere else live here - the page
   header, the booking context strip, the reward banner, the
   coupon reveal and the moderation-state strips.

   Values come from the same utilities in globals.css the rest of
   the new design language is built from (--blue-70, --acent-50,
   --dark-70, --light-20, --blue-05, 8px radius, "Work Sans").
   Scoped under .venture-ashore - the body class of _LayoutNew -
   so the legacy rules in v2main.css, which loads AFTER this
   file, cannot outrank it.
   ============================================================ */

.venture-ashore .bkrpPage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 72px;
  font-family: "Work Sans", sans-serif;
}

.venture-ashore .bkrpPage.bkrpNarrow {
  max-width: 560px;
}

/* The card carries a bottom margin for the stacked lists it was written for;
   this page spaces its children with gap, so the two would double up. */
.venture-ashore .bkrpPage .bkrCard {
  margin: 0;
}

.venture-ashore .bkrpHead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venture-ashore .bkrpHead h1 {
  margin: 0;
  color: var(--blue-90);
}

.venture-ashore .bkrpSub {
  margin: 0;
  color: var(--dark-70);
}

.venture-ashore .bkrpCentred {
  align-items: center;
  text-align: center;
}

.venture-ashore .bkrpDone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--second-A50);
  color: var(--light-00);
  font-size: 28px;
  line-height: 1;
}

/* --- booking context strip --------------------------------- */

.venture-ashore .bkrpContext {
  display: flex;
  flex-direction: row;
  gap: 18px;
  padding: 18px;
  background-color: var(--blue-05);
  border: 1px solid var(--light-20);
  border-radius: 8px;
}

/* The gradient is the FALLBACK layer. The tour photo (GetTripImageForBooking) is
   painted on top of it; when the trip has none, or the src fails, the img is
   never rendered / removes itself and this shows through. A broken-image icon on
   a page the customer reached from our own email is worse than brand colour. */
.venture-ashore .bkrpThumb {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--blue-70) 0%, var(--blue-40) 55%, var(--second-A50) 100%);
}

.venture-ashore .bkrpThumb::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -6px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 50% 50% 0 0;
}

/* Above the ::after wave, so the photo covers the fallback completely rather than
   being tinted by it. object-fit keeps a landscape tour photo from stretching. */
.venture-ashore .bkrpThumbImg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venture-ashore .bkrpContextBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.venture-ashore .bkrpContextTitle {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25em;
  color: var(--blue-90);
}

.venture-ashore .bkrpFacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark-70);
}

.venture-ashore .bkrpFacts b {
  font-weight: 600;
  color: var(--dark-80);
}

/* --- posting-as -------------------------------------------- */

.venture-ashore .bkrpAs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--light-20);
  border-radius: 8px;
}

.venture-ashore .bkrpAvatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--blue-90);
  color: var(--light-00);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.venture-ashore .bkrpAsText {
  font-size: 13.5px;
  line-height: 1.35em;
  color: var(--dark-70);
}

.venture-ashore .bkrpAsText b {
  font-weight: 600;
  color: var(--blue-90);
}

/* --- reward banner and coupon ------------------------------ */

.venture-ashore .bkrpReward {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--second-A50);
  border-radius: 8px;
  background-color: #eef8f4;
}

.venture-ashore .bkrpGift {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--second-A50);
  color: var(--light-00);
  font-size: 18px;
  line-height: 1;
}

.venture-ashore .bkrpRewardText {
  font-size: 14px;
  line-height: 1.4em;
  color: #1f5c4b;
}

.venture-ashore .bkrpRewardText b {
  display: block;
  font-weight: 650;
}

.venture-ashore .bkrpCoupon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed var(--second-A50);
  border-radius: 10px;
  background-color: #eef8f4;
  text-align: center;
}

.venture-ashore .bkrpCouponLabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2f7d5e;
}

/* Monospace and letter-spaced because this is a string the customer has to copy
   by eye: the point is telling 0 from O and 1 from l, not decoration. */
.venture-ashore .bkrpCouponCode {
  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1f5c4b;
}

.venture-ashore .bkrpCouponFine {
  font-size: 12.5px;
  line-height: 1.45em;
  color: var(--dark-70);
}

/* --- moderation state strips ------------------------------- */

.venture-ashore .bkrpState {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--second-C50);
  border-radius: 8px;
  background-color: #fff5ee;
  font-size: 14px;
  line-height: 1.4em;
  color: #8a5320;
}

.venture-ashore .bkrpState.bkrpStateLive {
  border-color: var(--second-A50);
  background-color: #eef8f4;
  color: #1f5c4b;
}

.venture-ashore .bkrpBadge {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--second-C50);
  color: var(--light-00);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.venture-ashore .bkrpState.bkrpStateLive .bkrpBadge {
  background-color: var(--second-A50);
}

/* --- notices ----------------------------------------------- */

.venture-ashore .bkrpNotice {
  padding: 14px 16px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45em;
}

.venture-ashore .bkrpNotice b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.venture-ashore .bkrpNoticeInfo {
  border-color: var(--blue-40);
  background-color: var(--blue-05);
  color: var(--blue-90);
}

.venture-ashore .bkrpNoticeBad {
  border-color: var(--acent-50);
  background-color: #fdf0ee;
  color: #8d3b2c;
}

/* --- actions ----------------------------------------------- */

.venture-ashore .bkrpActions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

/* bkrpCentred only sets align-items, which on a ROW centres the cross axis - the buttons would still
   sit left. This centres the main axis, which is what "centred" means to anyone reading the markup. */
.venture-ashore .bkrpActions.bkrpCentred {
  justify-content: center;
}

/* The line under the two buttons on the thank-you screen. Quiet on purpose: it is a reason to click
   the button above it, not a second thing to read. */
.venture-ashore .bkrpNext {
  margin: 0;
  text-align: center;
  color: var(--dark-70);
}

/* --- honeypot -----------------------------------------------
   Positioned off-screen rather than display:none or hidden: a bot
   that skips inputs its own layout engine reports as invisible
   would step over the trap, and the cheap ones do exactly that
   check. A person never reaches it - the markup keeps it out of
   the tab order (tabindex="-1") and out of the accessibility tree
   (aria-hidden). */
.venture-ashore .bkrpTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .venture-ashore .bkrpContext {
    flex-direction: column;
  }

  .venture-ashore .bkrpThumb {
    width: 100%;
    height: 120px;
  }
}

/* ---- REVIEW DISCLOSURE & CONSENT -------------------------------------------------------------
   Added 2026-08-14. Three small pieces, all of them legally load-bearing rather than decorative:

   .bkrVerifiedNote  the "every review is from a real traveler" line under the rating. A claim, so
                     it must not look like a marketing flourish - quiet, factual, next to the number
                     it is vouching for.
   .bkrIncentive     the per-review "this traveler received a discount code" disclosure. The FTC
                     rule and the UK DMCC both require it to be CLEAR - so it may not be smaller,
                     greyer or further away than the rest of the card. Deliberately NOT muted.
   .bkrpConsent      the publish checkbox on the review page.                                    */
.venture-ashore .bkrVerifiedNote {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #157347;
}

.venture-ashore .bkrIncentive {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-left: 3px solid #c9a227;
    background: #fdf8e7;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #4a3c00;
}

/*  Bare text, no card. Boxing the opt-out gave it the weight of a warning, when what it actually is
    is a footnote to the by-line above it - so it is set to match .bkrpAsText exactly. */
.venture-ashore .bkrpConsent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.venture-ashore .bkrpConsent input[type="checkbox"] {
    /*  transform: none undoes globals.css, which scales EVERY checkbox on the site by 2. That rule
        made this one render at an effective 32px - larger than the bold text beside it, so the
        opt-out read as the loudest thing in the block. Setting width/height alone does not fix it:
        the transform scales whatever size is set, so the size has to be declared AND the scale
        dropped. Scoped to .bkrpConsent so no other screen's checkboxes move.  */
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    /* Nudged down so the box lines up with the first line of the label, not with the block. */
    margin: 1px 0 0;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Same size, leading and colour as .bkrpAsText - these two lines are the same kind of remark and
   should read as one voice. */
.venture-ashore .bkrpConsent label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.35em;
    color: var(--dark-70);
    cursor: pointer;
}

.venture-ashore .bkrpConsent label b {
    font-weight: 600;
    color: var(--blue-90);
}

.venture-ashore .bkrpRewardGate {
    display: block;
    margin-top: 4px;
}