/* =========================================================
   HIKING-LEBANON
   GLOBAL PUBLIC UI SYSTEM
   ========================================================= */

:root {

    /* BRAND */

    --hl-forest: #1B3A2E;
    --hl-evergreen: #2E533F;
    --hl-sage: #8DA695;

    --hl-white: #FFFFFF;
    --hl-warm-ivory: #F8F5EB;
    --hl-stone: #D7D0C4;

    /* MAIN PUBLIC CANVAS */

    --hl-bg: #FFFFFF;

    /* UI */

    --hl-text: #24352D;
    --hl-muted: #718078;

    --hl-line:
        rgba(27, 58, 46, 0.12);

    --hl-soft:
        rgba(141, 166, 149, 0.15);

    /* SIZE */

    --hl-radius-sm: 9px;
    --hl-radius-md: 14px;
    --hl-radius-lg: 20px;

    --hl-page-width: 1480px;
}


/* =========================================================
   PUBLIC BODY
   ========================================================= */

body.hl-public {

    margin: 0;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        var(--hl-text);

    background:
        var(--hl-bg);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.hl-brand-font {

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


/* =========================================================
   SHARED BUTTON SYSTEM
   ========================================================= */

.hl-btn {

    min-height: 42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 8px;

    padding:
        10px 18px;

    border:
        1px solid transparent;

    border-radius:
        var(--hl-radius-sm);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.035em;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        0.18s ease;
}


.hl-btn-primary {

    background:
        var(--hl-forest);

    border-color:
        var(--hl-forest);

    color:
        var(--hl-ivory);
}


.hl-btn-primary:hover {

    background:
        var(--hl-evergreen);

    border-color:
        var(--hl-evergreen);
}


.hl-btn-secondary {

    background:
        transparent;

    border-color:
        rgba(27, 58, 46, 0.35);

    color:
        var(--hl-forest);
}


.hl-btn-secondary:hover {

    background:
        var(--hl-soft);
}


.hl-btn-soft {

    background:
        var(--hl-soft);

    color:
        var(--hl-forest);
}


/* =========================================================
   PAGE WIDTH
   ========================================================= */

.hl-container {

    width:
        min(
            var(--hl-page-width),
            92vw
        );

    margin:
        0 auto;
}


/* =========================================================
   MOBILE SAFE SPACE
   ========================================================= */

@media (max-width: 700px) {

    body.hl-public {

        padding-bottom:
            88px;
    }

}

/* =========================================================
   HIKING-LEBANON SHARED PUBLIC HEADER
   ========================================================= */

.hl-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: var(--hl-bg);

    border-bottom:
        1px solid rgba(27, 58, 46, 0.12);
}


.hl-header-inner {

    width: min(1800px, 96vw);

    min-height: 92px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 34px;
}


/* BRAND */

.hl-header-brand {

    margin-right: auto;

    display: flex;
    align-items: center;

    gap: 13px;

    color:
        var(--hl-forest);
}


.hl-header-logo {

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    object-fit: cover;

    border-radius: 50%;
}


.hl-header-brand-copy {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1;
}


.hl-header-brand-main {

    display: block;

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

    font-size: 24px;

    line-height: 0.88;

    font-weight: 600;

    letter-spacing:
        0.01em;

    color:
        #1B3A2E;

    white-space: nowrap;
}


/* Larger H + L like locked logo */

.hl-logo-cap {

    font-size: 1.24em;

    line-height: 0.8;
}


/* Registered mark */

.hl-logo-register {

    position: relative;

    top: -0.65em;

    margin-left: 2px;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    font-weight: 600;
}


.hl-header-brand-sub {

    display: block;

    margin-top: 7px;

    font-size: 9px;

    line-height: 1;

    font-weight: 600;

    letter-spacing:
        0.29em;

    color:
        #2E533F;

    white-space: nowrap;
}


/* Third locked brand sentence */

.hl-header-tagline {

    display: block;

    margin-top: 5px;

    font-size: 7px;

    line-height: 1;

    font-weight: 400;

    letter-spacing:
        0.08em;

    color:
        #718078;

    white-space: nowrap;
}


/* DESKTOP NAV */

.hl-desktop-nav {

    display: flex;

    align-items: center;

    gap: 34px;
}


.hl-desktop-nav a {

    position: relative;

    padding: 14px 0;

    font-size: 12px;

    font-weight: 600;

    letter-spacing:
        0.08em;

    color:
        #2E533F;
}


.hl-desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 7px;

    height: 1px;

    background:
        #1B3A2E;

    transform:
        scaleX(0);

    transition:
        transform 0.20s ease;
}


.hl-desktop-nav a:hover::after {

    transform:
        scaleX(1);
}


/* HEADER ACTIONS */

.hl-header-actions {

    display: flex;

    align-items: center;

    gap: 16px;
}


.hl-header-signin {

    padding: 12px 4px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing:
        0.06em;

    color:
        #1B3A2E;
}



/* HAMBURGER */

.hl-menu-toggle {

    width: 46px;
    height: 46px;

    display: none;

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

    padding: 0;

    border:
        1px solid rgba(27, 58, 46, 0.16);

    border-radius:
        10px;

    background:
        transparent;

    color:
        #1B3A2E;
}


.hl-menu-toggle svg {

    width: 23px;
    height: 23px;
}


/* BACKDROP */

.hl-menu-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1190;

    background:
        rgba(17, 35, 26, 0.45);

    opacity: 0;

    visibility: hidden;

    transition:
        0.22s ease;
}


.hl-menu-backdrop.open {

    opacity: 1;

    visibility: visible;
}


/* MOBILE DRAWER */

.hl-mobile-menu {

    position: fixed;

    top: 0;
    right: 0;

    z-index: 1200;

    width: 360px;
    max-width: 88vw;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 22px;

    background:
        var(--hl-bg);

    border-left:
        1px solid rgba(27, 58, 46, 0.12);

    transform:
        translateX(105%);

    transition:
        transform 0.25s ease;
}


.hl-mobile-menu.open {

    transform:
        translateX(0);
}


.hl-mobile-menu-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(27, 58, 46, 0.12);
}


.hl-mobile-brand {

    display: flex;

    align-items: center;

    gap: 10px;
}


.hl-mobile-brand img {

    width: 46px;
    height: 46px;

    border-radius: 50%;
}


.hl-mobile-brand strong {

    display: block;

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

    font-size: 17px;

    color:
        #1B3A2E;
}


.hl-mobile-brand small {

    display: block;

    margin-top: 5px;

    font-size: 8px;

    letter-spacing:
        0.18em;

    color:
        #2E533F;
}


.hl-mobile-menu-close {

    width: 42px;
    height: 42px;

    border: 0;

    background:
        transparent;

    color:
        #1B3A2E;

    font-size: 28px;
}


.hl-mobile-menu-links {

    display: grid;

    margin-top: 18px;
}


.hl-mobile-menu-links a {

    min-height: 54px;

    display: flex;

    align-items: center;

    padding: 0 7px;

    border-bottom:
        1px solid rgba(27, 58, 46, 0.12);

    font-size: 15px;

    font-weight: 600;

    color:
        #2E533F;
}


.hl-mobile-menu-actions {

    margin-top: auto;

    display: grid;

    gap: 10px;

    padding-top: 24px;
}


.hl-mobile-menu-actions .hl-btn {

    width: 100%;

    min-height: 48px;
}


/* TABLET + MOBILE */

@media (max-width: 1000px) {

    .hl-header-inner {

        width: calc(100% - 28px);

        min-height: 74px;

        gap: 12px;
    }


    .hl-desktop-nav,
    .hl-header-actions {

        display: none;
    }


    .hl-menu-toggle {

        display: inline-flex;
    }


    .hl-header-logo {

        width: 48px;
        height: 48px;
    
        flex-basis: 48px;
    }
    
    
    .hl-header-brand-main {
    
        font-size: 19px;
    }
    
    
    .hl-header-brand-sub {
    
        margin-top: 5px;
    
        font-size: 7.5px;
    
        letter-spacing:
            0.20em;
    }
    
    
    .hl-header-tagline {
    
        margin-top: 4px;
    
        font-size: 6px;
    
        letter-spacing:
            0.05em;
    }

}


@media (max-width: 420px) {

    .hl-header-inner {

        width: calc(100% - 20px);
    }


    .hl-header-logo {

        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }


    .hl-header-brand {

        gap: 9px;
    }


    .hl-header-brand-main {

        font-size: 16px;
    }
    
    
    .hl-header-brand-sub {
    
        font-size: 6.5px;
    
        letter-spacing:
            0.14em;
    }
    
    
    .hl-header-tagline {
    
        margin-top: 3px;
    
        font-size: 5.5px;
    
        letter-spacing:
            0.03em;
    }

}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 1000px) {

    .hl-header-inner {

        min-height: 68px;

        gap: 12px;
    }


    .hl-desktop-nav,
    .hl-header-actions {

        display: none;
    }


    .hl-menu-toggle {

        display: inline-flex;
    }


    .hl-header-brand-main {

        font-size: 18px;
    }


    .hl-header-brand-sub {

        font-size: 8px;

        letter-spacing:
            0.18em;
    }

}

/* =========================================================
   SHARED MOBILE BOTTOM NAVIGATION
   ========================================================= */

.hl-bottom-nav {

    display: none;

    position: fixed;

    left: 10px;
    right: 10px;
    bottom: 8px;

    z-index: 1100;

    min-height: 66px;

    padding: 7px 6px;

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

    align-items: center;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid var(--hl-line);

    border-radius:
        17px;

    box-shadow:
        0 10px 35px
        rgba(27, 58, 46, 0.16);
}


.hl-bottom-nav-item {

    min-width: 0;

    min-height: 52px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding: 4px 2px;

    border-radius: 11px;

    color:
        #78847D;

    text-decoration: none;
}


.hl-bottom-nav-item svg {

    width: 20px;
    height: 20px;

    stroke:
        currentColor;
}


.hl-bottom-nav-item span {

    max-width: 100%;

    overflow: hidden;

    font-size: 9px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.hl-bottom-nav-item.active {

    background:
        var(--hl-soft);

    color:
        var(--hl-forest);
}


/* MOBILE */

@media (max-width: 700px) {

    .hl-bottom-nav {

        display: grid;
    }

}


/* VERY SMALL PHONES */

@media (max-width: 380px) {

    .hl-bottom-nav {

        left: 6px;
        right: 6px;
    }


    .hl-bottom-nav-item span {

        font-size: 8px;
    }

}

/* =========================================================
   HIKING-LEBANON HOME HERO
   ========================================================= */

.hl-hero {

    position: relative;

    width: min(1800px, 96vw);

    height: 620px;

    margin: 18px auto 0;

    overflow: hidden;

    border-radius: 18px;

    background: #1B3A2E;
}


.hl-hero-track {

    position: relative;

    width: 100%;
    height: 100%;
}


.hl-hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(-25px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease,
        visibility 0.75s ease;
}


.hl-hero-slide.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);

    z-index: 1;
}


.hl-hero-slide picture,
.hl-hero-slide img {

    width: 100%;
    height: 100%;
}


.hl-hero-slide img {

    display: block;

    object-fit: cover;

    object-position: center;

    animation:
        hlHeroZoom
        8s
        ease-out
        forwards;
}


@keyframes hlHeroZoom {

    from {
        transform:
            scale(1.015);
    }

    to {
        transform:
            scale(1.055);
    }

}


/* IMAGE FUSION */

.hl-hero-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 48, 35, 0.83) 0%,
            rgba(27, 58, 46, 0.55) 35%,
            rgba(27, 58, 46, 0.12) 67%,
            rgba(27, 58, 46, 0.04) 100%
        );

    z-index: 2;
}


/* CONTENT */

.hl-hero-content {

    position: absolute;

    z-index: 3;

    left: 6%;

    top: 50%;

    transform:
        translateY(-50%);

    width:
        min(610px, 48%);

    color: #FFFFFF;
}


.hl-hero-eyebrow {

    margin-bottom: 14px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.22em;

    color:
        rgba(255,255,255,0.80);
}


.hl-hero-content h1,
.hl-hero-content h2 {

    margin:
        0 0 18px;

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

    font-size: 66px;

    line-height: 0.98;

    font-weight: 400;

    color: #FFFFFF;
}


.hl-hero-content p {

    max-width: 520px;

    margin:
        0 0 24px;

    font-size: 15px;

    line-height: 1.65;

    color:
        rgba(255,255,255,0.90);
}


/* HERO BUTTON */

.hl-hero-content
.hl-btn-primary {

    background: #FFFFFF;

    border-color: #FFFFFF;

    color:
        #1B3A2E;
}


.hl-hero-content
.hl-btn-primary:hover {

    background:
        #F8F5EB;

    border-color:
        #F8F5EB;
}


/* DOTS */

.hl-hero-dots {

    position: absolute;

    z-index: 10;

    left: 50%;

    bottom: 20px;

    transform:
        translateX(-50%);

    display: flex;

    gap: 7px;
}


.hl-hero-dots button {

    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.55);

    cursor: pointer;

    transition:
        0.20s ease;
}


.hl-hero-dots button.active {

    width: 30px;

    background: #FFFFFF;
}


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

@media (max-width: 700px) {

    .hl-hero {

        width:
            calc(100% - 20px);

        height:
            650px;

        margin-top:
            10px;

        border-radius:
            15px;
    }


    .hl-hero-slide img {

        object-position:
            center;
    }


    .hl-hero-shade {

        background:
            linear-gradient(
                0deg,
                rgba(18, 48, 35, 0.88) 0%,
                rgba(27, 58, 46, 0.55) 42%,
                rgba(27, 58, 46, 0.08) 76%
            );
    }


    .hl-hero-content {

        left: 24px;

        right: 24px;

        top: auto;

        bottom: 72px;

        width: auto;

        transform: none;
    }


    .hl-hero-content h1,
    .hl-hero-content h2 {

        font-size: 42px;
    }


    .hl-hero-content p {

        font-size: 13px;
    }

}


/* =========================================================
   HIKING-LEBANON SHARED FOOTER
   ========================================================= */

.hl-footer {

    margin-top: 60px;

    background:
        #1B3A2E;

    color:
        #FFFFFF;

    padding:
        34px 4vw;
}


.hl-footer-inner {

    width:
        min(1480px, 92vw);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.5fr 0.7fr 0.7fr;

    gap:
        50px;

    align-items:
        start;
}


/* BRAND */

.hl-footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.hl-footer-brand img {

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    border-radius:
        50%;
}


.hl-footer-brand-main {

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

    font-size:
        24px;

    line-height:
        0.9;

    font-weight:
        600;

    letter-spacing:
        0.01em;

    color:
        #FFFFFF;

    white-space:
        nowrap;
}


.hl-footer-brand-sub {

    margin-top:
        8px;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.29em;

    color:
        #DDE9E1;
}


.hl-footer-tagline {

    margin-top:
        6px;

    font-size:
        8px;

    letter-spacing:
        0.08em;

    color:
        rgba(255,255,255,0.72);
}


/* LINKS */

.hl-footer-links {

    display:
        grid;

    gap:
        10px;
}


.hl-footer-links a {

    font-size:
        13px;

    font-weight:
        500;

    color:
        #FFFFFF;

    text-decoration:
        none;
}


.hl-footer-links a:hover {

    text-decoration:
        underline;
}


/* MOBILE */

@media (max-width: 700px) {

    .hl-footer {

        padding:
            30px 20px 110px;
    }


    .hl-footer-inner {

        width:
            100%;

        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .hl-footer-brand img {

        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }


    .hl-footer-brand-main {

        font-size:
            20px;
    }

}

/* =========================================================
   GUEST EVENT CARDS
   ========================================================= */

.hl-events-grid {

    display: grid;

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

    gap: 22px;
}


.hl-event-card {

    min-width: 0;

    overflow: hidden;

    background:
        #FFFFFF;

    border:
        1px solid var(--hl-line);

    border-radius:
        16px;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;
}


.hl-event-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px
        rgba(27, 58, 46, 0.09);
}


/* IMAGE */

.hl-event-image {

    position: relative;

    display: block;

    height: 235px;

    overflow: hidden;
}


.hl-event-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}


.hl-event-card:hover
.hl-event-image img {

    transform:
        scale(1.035);
}


.hl-event-category {

    position: absolute;

    left: 14px;
    bottom: 14px;

    padding:
        7px 10px;

    border-radius:
        7px;

    background:
        rgba(27, 58, 46, 0.92);

    color:
        #FFFFFF;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* CONTENT */

.hl-event-card-body {

    padding:
        18px;
}


.hl-event-area {

    margin-bottom:
        7px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--hl-sage);
}


.hl-event-card h3 {

    margin:
        0 0 9px;

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

    font-size:
        25px;

    line-height:
        1.1;

    font-weight:
        400;

    color:
        var(--hl-forest);
}


.hl-event-card-body > p {

    min-height:
        48px;

    margin:
        0;

    font-size:
        11px;

    line-height:
        1.55;

    color:
        var(--hl-muted);
}


/* TRAIL QUICK INFORMATION */

.hl-event-specs {

    display: grid;

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

    gap:
        8px;

    margin-top:
        16px;

    padding:
        13px 0;

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

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


.hl-event-specs small {

    display: block;

    margin-bottom:
        4px;

    font-size:
        7px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        #8B968F;
}


.hl-event-specs strong {

    display: block;

    font-size:
        10px;

    font-weight:
        600;

    color:
        var(--hl-evergreen);
}


/* BOTTOM */

.hl-event-card-footer {

    margin-top:
        15px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        12px;
}


.hl-event-card-footer > span {

    font-size:
        9px;

    color:
        var(--hl-muted);
}


.hl-event-card-footer
.hl-btn {

    min-height:
        38px;

    padding:
        9px 13px;

    font-size:
        10px;
}


/* EXPLORE MORE */

.hl-events-more {

    display: flex;

    justify-content: center;

    margin-top:
        24px;
}


/* TABLET */

@media (max-width: 1000px) {

    .hl-events-grid {

        grid-template-columns:
            1fr 1fr;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .hl-events-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .hl-event-image {

        height:
            220px;
    }


    .hl-event-card h3 {

        font-size:
            23px;
    }


    .hl-event-card-body > p {

        min-height:
            0;
    }

}


/* =========================================================
   HIKING-LEBANON BUTTON FIX
   GREEN BUTTON = WHITE TEXT
   ========================================================= */

.hl-btn,
.hl-btn:link,
.hl-btn:visited {
    text-decoration: none;
}

.hl-btn-primary,
.hl-btn-primary:link,
.hl-btn-primary:visited {
    background: #1B3A2E;
    border: 1px solid #1B3A2E;
    color: #FFFFFF !important;
}

.hl-btn-primary:hover,
.hl-btn-primary:focus,
.hl-btn-primary:active {
    background: #2E533F;
    border-color: #2E533F;
    color: #FFFFFF !important;
}


/* =========================================================
   SHARED AUTH POPUP
   ========================================================= */

.hl-auth-backdrop {

    position: fixed;
    inset: 0;

    z-index: 3000;

    background:
        rgba(15, 36, 27, 0.58);

    opacity: 0;
    visibility: hidden;

    transition: 0.20s ease;
}


.hl-auth-backdrop.open {

    opacity: 1;
    visibility: visible;
}


.hl-auth-modal {

    position: fixed;
    inset: 0;

    z-index: 3010;

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

    padding: 20px;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transition: 0.20s ease;
}


.hl-auth-modal.open {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.hl-auth-card {

    position: relative;

    width: 100%;
    max-width: 460px;

    max-height: none;

    overflow: visible;
    
    padding: 24px 28px;

    background: #FFFFFF;

    border:
        1px solid var(--hl-line);

    border-radius: 18px;

    box-shadow:
        0 28px 80px
        rgba(20, 45, 34, 0.24);
}


.hl-auth-close {

    position: absolute;

    top: 12px;
    right: 14px;

    width: 38px;
    height: 38px;

    border: 0;

    background: transparent;

    color: var(--hl-forest);

    font-size: 28px;

    cursor: pointer;
}


/* BRAND */

/* =========================================================
   AUTH BRAND — SAME WEBSITE IDENTITY
   ========================================================= */

.hl-auth-brand {

    display: flex;
    align-items: center;

    gap: 13px;

    padding-right: 42px;

    margin-bottom: 25px;
}


.hl-auth-brand-logo {

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    object-fit: cover;

    border-radius: 50%;
}


.hl-auth-brand-copy {

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    line-height: 1;
}


.hl-auth-brand-main {

    display: block;

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

    font-size: 24px;

    line-height: .88;

    font-weight: 600;

    letter-spacing: .01em;

    color: #1B3A2E;

    white-space: nowrap;
}


.hl-auth-brand-main .hl-logo-cap {

    font-size: 1.24em;

    line-height: .8;
}


.hl-auth-brand-main .hl-logo-register {

    position: relative;

    top: -.65em;

    margin-left: 2px;

    font-family: Arial, sans-serif;

    font-size: 7px;

    font-weight: 600;
}


.hl-auth-brand-sub {

    display: block;

    margin-top: 7px;

    font-size: 9px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .29em;

    color: #2E533F;

    white-space: nowrap;
}


.hl-auth-brand-tagline {

    display: block;

    margin-top: 5px;

    font-size: 7px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: .08em;

    color: #718078;

    white-space: nowrap;
}


@media (max-width: 520px) {

    .hl-auth-brand-logo {

        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    .hl-auth-brand-main {

        font-size: 19px;
    }


    .hl-auth-brand-sub {

        font-size: 7.5px;
    }


    .hl-auth-brand-tagline {

        font-size: 6px;
    }

}


/* TABS */

.hl-auth-tabs {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    margin-bottom: 25px;

    padding: 4px;

    background:
        rgba(141, 166, 149, 0.12);

    border-radius: 10px;
}


.hl-auth-tabs button {

    min-height: 40px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--hl-muted);

    font-weight: 600;

    cursor: pointer;
}


.hl-auth-tabs button.active {

    background: #FFFFFF;

    color: var(--hl-forest);

    box-shadow:
        0 3px 12px
        rgba(27, 58, 46, 0.08);
}


/* VIEWS */

.hl-auth-view {

    display: none;
}


.hl-auth-view.active {

    display: block;
}


.hl-auth-view h2 {

    margin:
        0 0 7px;

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

    font-size: 30px;

    font-weight: 400;

    color: var(--hl-forest);
}


.hl-auth-view > p {

    margin:
        0 0 20px;

    font-size: 12px;

    line-height: 1.5;

    color: var(--hl-muted);
}


/* FORM */

.hl-auth-form {

    display: grid;

    gap: 12px;
}


.hl-auth-form label {

    display: grid;

    gap: 6px;
}


.hl-auth-form label > span {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--hl-muted);
}


.hl-auth-form input {

    width: 100%;

    height: 45px;

    box-sizing: border-box;

    padding: 0 12px;

    border:
        1px solid
        rgba(27, 58, 46, 0.20);

    border-radius: 9px;

    background: #FFFFFF;

    color: var(--hl-text);

    outline: none;
}


.hl-auth-form input:focus {

    border-color:
        var(--hl-sage);

    box-shadow:
        0 0 0 3px
        rgba(141, 166, 149, 0.14);
}


.hl-auth-submit {

    width: 100%;

    min-height: 46px;

    margin-top: 5px;

    color: #FFFFFF !important;
}


.hl-auth-link,
.hl-auth-back {

    border: 0;

    background: transparent;

    color: var(--hl-evergreen);

    cursor: pointer;
}


.hl-auth-link {

    margin-top: 2px;

    font-size: 11px;
}


.hl-auth-back {

    margin-bottom: 15px;

    padding: 0;

    font-size: 11px;
}


/* HEADER BUTTON */

.hl-header-signin {

    border: 0;

    background: transparent;

    cursor: pointer;
}


/* =========================================================
   REGISTER FORM COMPACT 2-COLUMN LAYOUT
   ========================================================= */

[data-hl-auth-panel="register"] .hl-auth-form {

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

    column-gap: 12px;

    row-gap: 10px;
}


[data-hl-auth-panel="register"] .hl-auth-form > input[type="hidden"] {

    display: none;
}


[data-hl-auth-panel="register"] .hl-auth-consent,
[data-hl-auth-panel="register"] .hl-auth-message,
[data-hl-auth-panel="register"] .hl-auth-submit {

    grid-column:
        1 / -1;
}


[data-hl-auth-panel="register"] .hl-auth-form input:not([type="checkbox"]) {

    height: 40px;
}


[data-hl-auth-panel="register"] .hl-auth-form label > span {

    font-size: 8px;
}


[data-hl-auth-panel="register"] .hl-auth-consent {

    margin-top: 2px;
}


[data-hl-auth-panel="register"] .hl-auth-submit {

    min-height: 42px;

    margin-top: 0;
}

/* MOBILE */

@media (max-width: 520px) {

    .hl-auth-modal {

        padding: 12px;
    }


    .hl-auth-card {

        padding:
            24px 18px;

        border-radius: 16px;
    }


    .hl-auth-view h2 {

        font-size: 27px;
    }

}

/* =========================================================
   AUTH FORM MESSAGES
   ========================================================= */

.hl-auth-message {

    display: none;

    padding: 10px 12px;

    border-radius: 8px;

    font-size: 11px;

    line-height: 1.45;
}


.hl-auth-message.error {

    display: block;

    background:
        #FFF2F1;

    border:
        1px solid #E9B9B4;

    color:
        #8A3028;
}


.hl-auth-message.success {

    display: block;

    background:
        #EDF6F0;

    border:
        1px solid #BBD4C3;

    color:
        #1B3A2E;
}


.hl-auth-submit:disabled {

    opacity: 0.65;

    cursor: wait;
}

/* =========================================================
   AUTH LEGAL CONSENT
   ========================================================= */

.hl-auth-consent {

    display: grid !important;

    grid-template-columns:
        18px 1fr;

    align-items: start;

    gap: 9px !important;

    margin-top: 4px;
}


.hl-auth-consent input {

    width: 16px !important;
    height: 16px !important;

    margin-top: 2px;

    accent-color:
        var(--hl-forest);
}


.hl-auth-consent > span {

    font-size: 10px !important;

    line-height: 1.5;

    font-weight: 400 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;

    color:
        var(--hl-muted) !important;
}


.hl-auth-consent a {

    color:
        var(--hl-forest);

    font-weight: 700;

    text-decoration:
        underline;
}

@media (max-width: 620px) {

    [data-hl-auth-panel="register"] .hl-auth-form {

        grid-template-columns:
            1fr;
    }


    [data-hl-auth-panel="register"] .hl-auth-consent,
    [data-hl-auth-panel="register"] .hl-auth-message,
    [data-hl-auth-panel="register"] .hl-auth-submit {

        grid-column:
            auto;
    }


    .hl-auth-card {

        max-height:
            92vh;

        overflow-y:
            auto;
    }

}

/* =========================================================
   MEMBER EXPERIENCES / CLOSED EVENTS
   ========================================================= */

.hl-member-experiences {

    width:
        min(
            var(--hl-page-width),
            94vw
        );

    margin:
        80px auto;

    padding:
        0;
}


.hl-member-experiences-head {

    margin-bottom:
        28px;
}


.hl-section-eyebrow {

    display: block;

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .22em;

    color:
        var(--hl-sage);
}


.hl-member-experiences-head h2 {

    margin:
        0;

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

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1;

    font-weight:
        400;

    color:
        var(--hl-forest);
}


.hl-member-experiences-head p {

    max-width:
        650px;

    margin:
        12px 0 0;

    font-size:
        13px;

    line-height:
        1.6;

    color:
        var(--hl-muted);
}


/* MAIN TWO-COLUMN AREA */

.hl-experience-showcase {

    display:
        grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    gap:
        18px;

    align-items:
        stretch;
}


/* LEFT */

.hl-experience-reviews {

    min-height:
        470px;

    padding:
        34px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--hl-line);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            rgba(141,166,149,.10)
        );
}


.hl-review-event-label {

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    color:
        var(--hl-sage);
}


.hl-review-summary h3 {

    margin:
        9px 0 18px;

    max-width:
        500px;

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

    font-size:
        29px;

    line-height:
        1.08;

    font-weight:
        400;

    color:
        var(--hl-forest);
}


.hl-review-rating-line {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        27px;
}


.hl-review-big-rating {

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

    font-size:
        48px;

    line-height:
        1;

    color:
        var(--hl-forest);
}


.hl-review-stars {

    color:
        #B89344;

    font-size:
        20px;

    letter-spacing:
        2px;
}


.hl-review-rating-line small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--hl-muted);

    font-size:
        9px;
}


.hl-review-list {

    display:
        grid;

    gap:
        12px;
}


.hl-review-card {

    padding:
        16px 18px;

    border:
        1px solid
        rgba(27,58,46,.10);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.78);
}


.hl-review-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.hl-review-card-top strong {

    font-size:
        11px;

    color:
        var(--hl-forest);
}


.hl-review-stars-small {

    font-size:
        13px;

    letter-spacing:
        1px;
}


.hl-review-card p {

    margin:
        10px 0 0;

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

    font-size:
        15px;

    line-height:
        1.55;

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


/* RIGHT */

.hl-experience-event {

    overflow:
        hidden;

    border:
        1px solid
        var(--hl-line);

    border-radius:
        18px;

    background:
        #FFFFFF;
}


.hl-closed-event-image {

    position:
        relative;

    height:
        255px;

    overflow:
        hidden;
}


.hl-closed-event-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.hl-closed-event-badge {

    position:
        absolute;

    left:
        18px;

    bottom:
        16px;

    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        rgba(27,58,46,.90);

    color:
        #FFFFFF;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .13em;
}


.hl-closed-event-content {

    padding:
        22px 24px 25px;
}


.hl-closed-event-category {

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        var(--hl-sage);
}


.hl-closed-event-content h3 {

    margin:
        7px 0 6px;

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

    font-size:
        27px;

    font-weight:
        400;

    color:
        var(--hl-forest);
}


.hl-closed-event-area {

    margin:
        0;

    font-size:
        11px;

    color:
        var(--hl-muted);
}


.hl-closed-event-description {

    margin:
        14px 0 17px;

    font-size:
        12px;

    line-height:
        1.55;

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


.hl-closed-event-specs {

    display:
        grid;

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

    gap:
        8px;

    margin-bottom:
        18px;
}


.hl-closed-event-specs span {

    padding:
        9px 10px;

    border-radius:
        9px;

    background:
        var(--hl-soft);

    font-size:
        10px;

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


.hl-closed-event-specs strong {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    color:
        var(--hl-muted);
}


/* ROTATION DOTS */

.hl-experience-controls {

    display:
        flex;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        18px;
}


.hl-experience-dot {

    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--hl-stone);

    cursor:
        pointer;

    transition:
        .2s ease;
}


.hl-experience-dot.active {

    width:
        23px;

    border-radius:
        999px;

    background:
        var(--hl-forest);
}


/* TABLET */

@media (max-width: 900px) {

    .hl-experience-showcase {

        grid-template-columns:
            1fr;
    }


    .hl-experience-reviews {

        min-height:
            auto;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .hl-member-experiences {

        margin:
            55px auto;
    }


    .hl-experience-reviews {

        padding:
            22px 18px;
    }


    .hl-review-summary h3 {

        font-size:
            24px;
    }


    .hl-review-big-rating {

        font-size:
            40px;
    }


    .hl-closed-event-image {

        height:
            220px;
    }


    .hl-closed-event-content {

        padding:
            19px 17px 21px;
    }


    .hl-closed-event-content h3 {

        font-size:
            24px;
    }


    .hl-closed-event-specs {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MEMBER EXPERIENCES
   RESTORE APPROVED ORIGINAL DESIGN
   ========================================================= */

#hlExperienceReviews,
#hlExperienceEvent {
    box-sizing: border-box;
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

#hlExperienceReviews {
    background: #fbfcfa;
    border: 1px solid #d7ded9;
    border-radius: 18px;
    padding: 34px 38px;
    min-height: 590px;
    overflow: hidden;
}


/* MEMBER REVIEWS */

#hlExperienceReviews .hl-experience-eyebrow {
    color: #8DA695;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}


/* EVENT TITLE */

#hlExperienceReviews .hl-experience-review-title {
    margin: 0 0 20px;
    color: #123a2c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 400;
}


/* RATING AREA */

#hlExperienceReviews .hl-experience-rating-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}


#hlExperienceReviews .hl-experience-rating-number {
    color: #173e31;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    line-height: 1;
    font-weight: 400;
}


#hlExperienceReviews .hl-experience-rating-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}


#hlExperienceReviews .hl-experience-rating-stars {
    color: #bf9135;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 2px;
}


#hlExperienceReviews .hl-experience-rating-caption {
    color: #6e756f;
    font-size: 11px;
}


/* =========================================================
   5 REVIEW CARDS
   ========================================================= */

#hlExperienceReviews .hl-experience-review-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


#hlExperienceReviews .hl-experience-review-card {
    background: #ffffff;
    border: 1px solid #dfe4e0;
    border-radius: 13px;
    padding: 12px 16px;
    box-sizing: border-box;
}


#hlExperienceReviews .hl-experience-review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}


#hlExperienceReviews .hl-experience-review-name {
    color: #173e31;
    font-size: 12px;
    font-weight: 700;
}


#hlExperienceReviews .hl-experience-review-stars {
    color: #bf9135;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 1px;
}


#hlExperienceReviews .hl-experience-review-comment {
    margin: 0;
    color: #17251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.35;
}


/* =========================================================
   RIGHT EVENT CARD
   ========================================================= */

#hlExperienceEvent {
    background: #ffffff;
    border: 1px solid #d7ded9;
    border-radius: 18px;
    overflow: hidden;
    min-height: 590px;
}


#hlExperienceEvent .hl-experience-featured-event {
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* IMAGE */

#hlExperienceEvent .hl-experience-featured-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}


#hlExperienceEvent .hl-experience-featured-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* COMPLETED EXPERIENCE BADGE */

#hlExperienceEvent .hl-experience-completed-badge {
    position: absolute;
    left: 20px;
    bottom: 18px;
    background: #1B3A2E;
    color: #ffffff;
    padding: 7px 13px;
    border-radius: 20px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .4px;
}


/* CONTENT */

#hlExperienceEvent .hl-experience-featured-content {
    padding: 25px 26px 26px;
}


#hlExperienceEvent .hl-experience-featured-category {
    color: #8DA695;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}


#hlExperienceEvent .hl-experience-featured-content h3 {
    margin: 0 0 8px;
    color: #123a2c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    line-height: 1.12;
    font-weight: 400;
}


#hlExperienceEvent .hl-experience-featured-date {
    color: #727a75;
    font-size: 12px;
    margin-bottom: 16px;
}


#hlExperienceEvent .hl-experience-featured-description {
    color: #21322b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}


/* META BOXES */

#hlExperienceEvent .hl-experience-featured-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}


#hlExperienceEvent .hl-experience-meta-item {
    background: #eef2ef;
    border-radius: 11px;
    padding: 12px 13px;
    min-height: 50px;
    box-sizing: border-box;
}


#hlExperienceEvent .hl-experience-meta-item span {
    display: block;
    color: #587065;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 4px;
}


#hlExperienceEvent .hl-experience-meta-item strong {
    display: block;
    color: #183d30;
    font-size: 12px;
    font-weight: 500;
}


/* BUTTON */

#hlExperienceEvent .hl-experience-details-button {
    appearance: none;
    background: #ffffff;
    color: #173e31;
    border: 1px solid #9baaa2;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}


#hlExperienceEvent .hl-experience-details-button:hover {
    background: #1B3A2E;
    border-color: #1B3A2E;
    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    #hlExperienceReviews,
    #hlExperienceEvent {
        min-height: auto;
    }

    #hlExperienceReviews {
        padding: 27px 24px;
    }

    #hlExperienceReviews .hl-experience-review-title {
        font-size: 26px;
    }

    #hlExperienceEvent .hl-experience-featured-image {
        height: 240px;
    }

}


@media (max-width: 620px) {

    #hlExperienceReviews {
        padding: 23px 18px;
    }

    #hlExperienceReviews .hl-experience-review-title {
        font-size: 23px;
    }

    #hlExperienceReviews .hl-experience-rating-number {
        font-size: 42px;
    }

    #hlExperienceReviews .hl-experience-review-card {
        padding: 11px 13px;
    }

    #hlExperienceEvent .hl-experience-featured-content {
        padding: 21px 18px 23px;
    }

    #hlExperienceEvent .hl-experience-featured-content h3 {
        font-size: 25px;
    }

    #hlExperienceEvent .hl-experience-featured-meta {
        grid-template-columns: 1fr;
        gap: 7px;
    }

}

/* =========================================================
   CONTACT - PARTNERS GRID
   ========================================================= */

.hl-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin-top: 16px;
}

.hl-partner-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hl-partner-item strong {
    font-size: 13px;
    font-weight: 700;
    color: #1B3A2E;
    line-height: 1.2;
}

.hl-partner-item span {
    font-size: 14px;
    line-height: 1.45;
    color: #2E533F;
}

@media (max-width: 640px) {

    .hl-partners-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FOOTER LAYOUT FIX
   ========================================================= */

.hl-footer-inner {
    display: grid;
    grid-template-columns: minmax(300px, 1.6fr) 1fr 1fr;
    align-items: start;
    gap: 50px;
}

.hl-footer-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 6px;
}

.hl-footer-column a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.hl-footer-column a:hover {
    text-decoration: underline;
}


/* TABLET */

@media (max-width: 900px) {

    .hl-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .hl-footer-brand {
        grid-column: 1 / -1;
    }

}


/* MOBILE */

@media (max-width: 620px) {

    .hl-footer-inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hl-footer-brand {
        grid-column: auto;
    }

}

/* =========================================================
   HEADER SIGN IN
   ========================================================= */

.hl-header-signin {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: #1B3A2E;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.hl-header-signin:hover {
    opacity: 0.7;
}


/* MOBILE */

@media (max-width: 900px) {

    .hl-header-signin {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .hl-header-signin::before {
        content: "👤";
        font-size: 19px;
        line-height: 1;
    }

}

/* =========================================================
   PUBLIC SECTION NAVIGATION + EXPAND
   ========================================================= */

#events,
#experiences,
#explore,
#contact {
    scroll-margin-top: 115px;
}


.hl-section-head-with-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}


.hl-section-expand {
    flex: 0 0 auto;
    margin-bottom: 4px;
}


/* MOBILE */

@media (max-width: 620px) {

    #events,
    #experiences,
    #explore,
    #contact {
        scroll-margin-top: 90px;
    }


    .hl-section-head-with-action {
        align-items: center;
        gap: 14px;
    }


    .hl-section-expand {
        font-size: 11px;
        padding: 10px 14px;
    }

}


html {
    scroll-behavior: smooth;
}

#events,
#experiences,
#explore,
#contact {
    scroll-margin-top: 115px;
}

@media (max-width: 620px) {

    #events,
    #experiences,
    #explore,
    #contact {
        scroll-margin-top: 90px;
    }

}

/* =========================================================
   EXPLORE CARD IMAGE
   SAME SOURCE + SAME DISPLAY DESKTOP / MOBILE
   ========================================================= */

.hl-explore-image {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}


/* MOBILE */

@media (max-width: 700px) {

    .hl-explore-image {
        display: block;
        width: 100%;
        height: 210px;
        object-fit: cover;
    }

}

/* =========================================================
   MOBILE GUEST EVENTS
   SINGLE CARD AUTO CAROUSEL
   ========================================================= */

@media (max-width: 700px) {

    .hl-events-mobile-carousel {

        position: relative;

        display: block;

        overflow: hidden;
    }


    .hl-events-mobile-carousel
    .hl-event-card {

        width: 100%;

        margin: 0;

        will-change:
            transform,
            opacity;
    }


    .hl-mobile-event-current {

        position: relative;

        transform:
            translateX(0);

        opacity: 1;
    }


    .hl-mobile-event-next {

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        transform:
            translateX(105%);

        opacity: 0.65;
    }


    .hl-mobile-event-enter {

        transform:
            translateX(0);

        opacity: 1;

        transition:
            transform 0.60s ease,
            opacity 0.60s ease;
    }


    .hl-mobile-event-leave {

        transform:
            translateX(-105%);

        opacity: 0.45;

        transition:
            transform 0.60s ease,
            opacity 0.60s ease;
    }


    /*
     * MOBILE HAS NO EXPLORE MORE BUTTON.
     * ALL EVENTS ROTATE AUTOMATICALLY.
     */

    #hlEventsMoreButton {

        display: none !important;
    }

}

/* =========================================================
   HIKING-LEBANON
   MOBILE COMING EVENTS ROTATOR
   ========================================================= */

@media (max-width: 700px) {

    /*
     * One visible event only.
     */

    #eventsBox.hl-events-mobile-rotator {

        position: relative;

        display: block;

        width: 100%;

        overflow: hidden;

        isolation: isolate;
    }


    #eventsBox.hl-events-mobile-rotator
    .hl-event-card {

        width: 100%;

        max-width: none;

        margin: 0;

        box-sizing: border-box;

        backface-visibility: hidden;

        -webkit-backface-visibility: hidden;

        will-change:
            transform,
            opacity;
    }


    /*
     * Current card stays in normal document flow,
     * so the section keeps its correct height.
     */

    #eventsBox
    .hl-mobile-event-active {

        position: relative;

        z-index: 1;

        transform:
            translate3d(0, 0, 0);

        opacity: 1;
    }


    /*
     * Next card begins just outside right edge.
     */

    #eventsBox
    .hl-mobile-event-incoming {

        position: absolute;

        z-index: 2;

        top: 0;
        left: 0;

        transform:
            translate3d(102%, 0, 0);

        opacity: 0.72;

        pointer-events: none;
    }


    /*
     * Next card enters from right.
     */

    #eventsBox
    .hl-mobile-event-incoming.hl-mobile-event-arrive {

        transform:
            translate3d(0, 0, 0);

        opacity: 1;

        transition:
            transform 650ms
                cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
                ),
            opacity 450ms ease;
    }


    /*
     * Existing card exits left.
     */

    #eventsBox
    .hl-mobile-event-active.hl-mobile-event-outgoing {

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

        opacity: 0.45;

        transition:
            transform 650ms
                cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
                ),
            opacity 400ms ease;
    }


    /*
     * Mobile does not need Explore More because
     * the complete event array rotates.
     */

    #events
    .hl-events-more {

        display: none;
    }


    /*
     * Respect accessibility preference.
     */

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

        #eventsBox
        .hl-mobile-event-incoming.hl-mobile-event-arrive,

        #eventsBox
        .hl-mobile-event-active.hl-mobile-event-outgoing {

            transition-duration:
                0.01ms;
        }

    }

}

/* =========================================================
   MEMBER EXPERIENCES
   MOBILE COMPACT REVIEW MODE
   ========================================================= */


/*
 * Desktop:
 * compact rating inside event is hidden.
 */

.hl-experience-mobile-top-review {
    display: none;
}


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

@media (max-width: 600px) {

    /*
     * Remove the large five-review panel
     * from mobile only.
     */

    #hlExperienceReviews {
        display: none !important;
    }


    /*
     * Member experience becomes one clean card.
     */

    .hl-experience-showcase {
        display: block;
    }


    /*
     * Show one top review inside event details.
     */

    #hlExperienceEvent
    .hl-experience-mobile-top-review {

        display: block;

        margin:
            13px 0 16px;

        padding:
            10px 12px;

        background:
            #f4f7f5;

        border:
            1px solid #dce5df;

        border-radius:
            10px;
    }


    #hlExperienceEvent
    .hl-experience-mobile-top-review-label {

        display: block;

        margin-bottom: 5px;

        color:
            #8DA695;

        font-size:
            8px;

        font-weight:
            700;

        letter-spacing:
            .10em;
    }


    #hlExperienceEvent
    .hl-experience-mobile-top-review-row {

        display: flex;

        align-items: center;

        justify-content:
            space-between;

        gap: 12px;
    }


    #hlExperienceEvent
    .hl-experience-mobile-top-review-row strong {

        min-width: 0;

        overflow: hidden;

        color:
            #173e31;

        font-size:
            11px;

        font-weight:
            700;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    #hlExperienceEvent
    .hl-experience-mobile-top-review-stars {

        flex:
            0 0 auto;

        color:
            #bf9135;

        font-size:
            13px;

        line-height: 1;

        letter-spacing:
            1px;

        white-space:
            nowrap;
    }

}

/* =========================================================
   MOBILE MEMBER EXPERIENCE
   TOP RATING INSIDE QUICK INFO ROW
   ========================================================= */

@media (max-width: 600px) {

    #hlExperienceEvent
    .hl-experience-featured-meta {

        display: grid;

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

        gap: 8px;
    }


    #hlExperienceEvent
    .hl-experience-meta-item {

        min-width: 0;
    }


    #hlExperienceEvent
    .hl-experience-top-rating {

        background:
            #f5f8f6;

        border-radius:
            9px;

        padding:
            8px;
    }


    #hlExperienceEvent
    .hl-top-rating-member {

        display: block;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 10px;
    }


    #hlExperienceEvent
    .hl-top-rating-stars {

        margin-top: 3px;

        color:
            #bf9135;

        font-size:
            12px;

        line-height: 1;

        letter-spacing:
            1px;

        white-space: nowrap;
    }

}

/* =========================================================
   MOBILE MEMBER EXPERIENCE
   COMPACT ONE-SCREEN LAYOUT
   ========================================================= */

@media (max-width: 600px) {

    /* CARD */
    #hlExperienceEvent
    .hl-experience-featured-event {
        border-radius: 16px;
        overflow: hidden;
    }


    /* REDUCE IMAGE HEIGHT */
    #hlExperienceEvent
    .hl-experience-featured-image {
        height: 210px;
    }

    #hlExperienceEvent
    .hl-experience-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* REDUCE CONTENT PADDING */
    #hlExperienceEvent
    .hl-experience-featured-content {
        padding: 16px 18px 18px;
    }


    /* CATEGORY */
    #hlExperienceEvent
    .hl-experience-featured-category {
        margin-bottom: 5px;
        font-size: 9px;
    }


    /* TITLE */
    #hlExperienceEvent
    .hl-experience-featured-content h3 {
        margin: 0 0 4px;
        font-size: 28px;
        line-height: 1.08;
    }


    /* DATE */
    #hlExperienceEvent
    .hl-experience-featured-date {
        margin-bottom: 10px;
        font-size: 11px;
    }


    /* REMOVE LARGE SEPARATE TOP-RATING BOX */
    #hlExperienceEvent
    .hl-experience-mobile-top-review {
        display: none !important;
    }


    /* DESCRIPTION - MAX 2 LINES */
    #hlExperienceEvent
    .hl-experience-featured-description {
        margin: 0 0 14px;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;

        font-size: 11px;
        line-height: 1.45;
    }


    /* QUICK INFO - 4 ITEMS IN ONE ROW */
    #hlExperienceEvent
    .hl-experience-featured-meta {
        display: grid;

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

        gap: 6px;

        margin-top: 0;
        margin-bottom: 14px;
    }


    #hlExperienceEvent
    .hl-experience-meta-item {
        min-width: 0;

        padding: 0;

        background: transparent;
        border: 0;
    }


    #hlExperienceEvent
    .hl-experience-meta-item span {
        display: block;

        margin-bottom: 4px;

        font-size: 7px;
        line-height: 1.1;

        letter-spacing: .06em;
    }


    #hlExperienceEvent
    .hl-experience-meta-item strong {
        display: block;

        font-size: 9px;
        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* TOP RATING COMPACT */
    #hlExperienceEvent
    .hl-experience-top-rating {
        padding: 0;

        background: transparent;
        border-radius: 0;
    }


    #hlExperienceEvent
    .hl-top-rating-member {
        display: none;
    }


    #hlExperienceEvent
    .hl-top-rating-stars {
        margin-top: 0;

        font-size: 10px;
        line-height: 1;

        letter-spacing: 0;

        white-space: nowrap;
    }


    /* SMALLER DETAILS BUTTON */
    #hlExperienceEvent
    .hl-experience-details-button {
        min-height: 38px;

        padding: 9px 14px;

        font-size: 10px;

        border-radius: 9px;
    }

}

/* =========================================================
   MOBILE EXPLORE ROTATOR
   ========================================================= */

@media (max-width: 700px) {

    #exploreBox.hl-explore-mobile-rotator {

        position: relative;

        display: block;

        width: 100%;

        overflow: hidden;

        isolation: isolate;
    }


    #exploreBox.hl-explore-mobile-rotator
    .card {

        width: 100%;

        max-width: none;

        margin: 0;

        box-sizing: border-box;

        backface-visibility: hidden;

        -webkit-backface-visibility: hidden;

        will-change:
            transform,
            opacity;
    }


    #exploreBox
    .hl-mobile-explore-active {

        position: relative;

        z-index: 1;

        transform:
            translate3d(0, 0, 0);

        opacity: 1;
    }


    #exploreBox
    .hl-mobile-explore-incoming {

        position: absolute;

        z-index: 2;

        top: 0;
        left: 0;

        width: 100%;

        transform:
            translate3d(102%, 0, 0);

        opacity: 0.72;

        pointer-events: none;
    }


    #exploreBox
    .hl-mobile-explore-incoming.hl-mobile-explore-arrive {

        transform:
            translate3d(0, 0, 0);

        opacity: 1;

        transition:
            transform 650ms
                cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
                ),
            opacity 450ms ease;
    }


    #exploreBox
    .hl-mobile-explore-active.hl-mobile-explore-outgoing {

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

        opacity: 0.45;

        transition:
            transform 650ms
                cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
                ),
            opacity 400ms ease;
    }


    #exploreMoreButton {

        display: none !important;
    }

}

/* =========================================================
   MOBILE CONTACT COMPACT LAYOUT
   GENERAL + PARTNERS ONLY
   ========================================================= */

@media (max-width: 640px) {

    /* =====================================================
       GENERAL CARD
       Compact information into 2 columns
       ===================================================== */

    #contact .grid3 > article:nth-child(1) .card-body {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            8px 14px;

        align-items: start;
    }


    #contact .grid3 > article:nth-child(1) h3 {

        grid-column:
            1 / -1;

        margin-bottom:
            4px;
    }


    #contact .grid3 > article:nth-child(1) p {

        margin:
            0;

        font-size:
            11px;

        line-height:
            1.35;
    }


    #contact .grid3 > article:nth-child(1) p:nth-of-type(1) {

        grid-column:
            1 / -1;
    }


    #contact .grid3 > article:nth-child(1) p:nth-of-type(2),

    #contact .grid3 > article:nth-child(1) p:nth-of-type(3) {

        grid-column:
            auto;
    }



    /* =====================================================
       PARTNERS CARD
       Keep 2 columns on mobile
       ===================================================== */

    #contact .hl-partners-grid {

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

        gap:
            10px 14px;

        margin-top:
            10px;
    }


    #contact .hl-partner-item {

        gap:
            2px;
    }


    #contact .hl-partner-item strong {

        font-size:
            10px;

        line-height:
            1.15;
    }


    #contact .hl-partner-item span {

        font-size:
            11px;

        line-height:
            1.3;
    }



    /* =====================================================
       CONTACT CARDS
       Reduce unnecessary vertical space
       ===================================================== */

    #contact .card-body {

        padding:
            16px;
    }


    #contact .card-body h3 {

        margin-top:
            0;

        margin-bottom:
            8px;
    }

}

/* =========================================================
   MOBILE FOOTER
   KEEP NAV + LEGAL IN TWO COLUMNS
   ========================================================= */

@media (max-width: 620px) {

    .hl-footer-inner {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            20px 26px;

        align-items: start;
    }


    /* BRAND STAYS FULL WIDTH ON TOP */

    .hl-footer-brand {

        grid-column:
            1 / -1;

        margin-bottom:
            4px;
    }


    /* LEFT COLUMN:
       EVENTS / EXPERIENCES / EXPLORE */

    .hl-footer-inner
    .hl-footer-column:nth-child(2) {

        grid-column:
            1;
    }


    /* RIGHT COLUMN:
       PRIVACY / TERMS */

    .hl-footer-inner
    .hl-footer-column:nth-child(3) {

        grid-column:
            2;

        align-items:
            flex-end;

        text-align:
            right;
    }


    .hl-footer-column {

        gap:
            10px;

        padding-top:
            0;
    }


    .hl-footer-column a {

        font-size:
            12px;

        line-height:
            1.3;
    }

}