#hero.exp-commercial-hero {
    --hero-gold: #f2b84b;
    min-height: calc(100svh - var(--nav-h, 64px)) !important;
    padding-block: max(132px, var(--hero-clear-logo, 132px)) 120px;
    color: #fff;
}

#hero.exp-commercial-hero > .exp-backdrop {
    inset: -36px 0 -36px auto;
    width: 85%;
    height: calc(100% + 72px);
}

#hero.exp-commercial-hero .exp-shade {
    background: linear-gradient(90deg, #071c12f5 4%, #071c12e8 23%, #071c1266 43%, transparent 65%, #071c1240),
        linear-gradient(0deg, #061a12c9, transparent 37%, #061a122e 85%);
}

.exp-reference #hero.exp-commercial-hero .exp-inner {
    width: min(88%, 1540px);
    max-width: 1540px;
    margin-inline: auto;
    flex: 0 0 auto;
    align-self: center;
    padding: 0;
}

#hero.exp-commercial-hero .exp-title {
    width: min(60%, 780px);
    font: 700 clamp(37px, 4.25vw, 74px)/1.01 Georgia, serif;
    letter-spacing: -.038em;
    text-wrap: initial;
    margin: 0;
}

#hero.exp-commercial-hero .exp-title > span {display: block;}
#hero.exp-commercial-hero .exp-eyebrow {
    color: var(--hero-gold);
    letter-spacing: .045em;
    font-size: clamp(12px, 1.2vw, 19px);
    font-weight: 750;
}
#hero.exp-commercial-hero .exp-eyebrow::before {display: none;}
#hero.exp-commercial-hero .exp-script {
    color: var(--hero-gold);
    font-family: Georgia, serif !important;
    font-size: clamp(33px, 4.2vw, 75px);
    max-width: 63%;
    margin-block: 10px 24px;
    position: relative;
}
#hero.exp-commercial-hero .exp-script::after {
    content: ""; display: block; width: min(240px,65%); height: 7px;
    border-top: 3px solid var(--hero-gold); border-radius: 50%;
    position: absolute; bottom: -13px; left: 0; rotate: -1deg;
}

#hero.exp-commercial-hero .exp-description {max-width: min(49%, 49ch); line-height: 1.4;}
#hero.exp-commercial-hero .exp-points {max-width: min(69%, 760px); gap: 10px 0;}
#hero.exp-commercial-hero .exp-points li {min-width: 0;}
#hero.exp-commercial-hero .exp-points small {display: block; color: inherit;}
#hero.exp-commercial-hero .exp-actions {gap: 16px;}
#hero.exp-commercial-hero .exp-actions {margin-bottom: 16px;}
#hero.exp-commercial-hero .exp-actions .exp-button {min-height: 56px; background: var(--button-bg,linear-gradient(#ffdf7a,#f2b84b));}
#hero.exp-commercial-hero .exp-actions .exp-secondary {background: var(--button-bg,#071c1260);}
#hero.exp-commercial-hero .exp-actions .exp-secondary {border-color: #fff;}
#hero.exp-commercial-hero .exp-hero-booking {
    position: absolute;
    z-index: 2;
    right: max(4%, calc((100% - 1540px) / 2));
    top: 50%;
    translate: 0 -50%;
    width: min(22%, 305px);
    border: 0;
    padding: 0;
    background: none;
    display: grid;
    gap: 12px;
}

.exp-hero-booking-card {
    display: grid;
    gap: 8px;
    padding: clamp(14px, 2vw, 26px);
    background: #071b11ed;
    border: 1px solid #f2b84b;
    border-radius: 19px;
}
.exp-hero-booking-card strong {color: #f2b84b; font: 700 clamp(22px, 2.35vw, 39px)/1.05 Georgia, serif;}
.exp-hero-booking-card small {color: #fff;}
.exp-hero-wildlife {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(68%, 710px);
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
}
.exp-hero-wildlife .exp-photo {
    width: clamp(44px, 5.1vw, 86px);
    height: clamp(44px, 4.2vw, 70px);
    flex: none;
    border: 1px solid #f2b84b99;
    border-radius: 10px;
}
.exp-hero-wildlife > span:last-child {
    border-inline-start: 1px solid #f2b84b66;
    padding-inline-start: 13px;
    max-width: 190px;
    font-size: clamp(12px, 1.1vw, 17px);
}
.exp-hero-wildlife:focus-visible {outline: 2px solid #f2b84b;outline-offset: 4px;}
.exp-hero-rating {text-align: center;}
.exp-review-dots {
    letter-spacing: .14em;
    color: #1ac487;
    background: linear-gradient(90deg, #1ac487 var(--review-fill), #c1cfc6 var(--review-fill));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#hero.exp-commercial-hero .exp-hero-next {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
    border: 1px solid #f2b84b80; border-radius: 12px; padding: 12px 14px;
    color: white; background: #071b11ed; text-decoration: none;
    font-size: 15px;
    padding: 18px 20px;
}
#hero.exp-commercial-hero .exp-hero-next span,
#hero.exp-commercial-hero .exp-hero-next small {width: 100%;}
#hero.exp-commercial-hero .exp-hero-next strong {font-size: clamp(22px,2.1vw,34px);}
#hero.exp-commercial-hero .exp-hero-next strong {color: var(--hero-gold);}
@media (min-width: 1001px) {
    #hero.exp-commercial-hero .exp-points {flex-wrap: nowrap;}
}

#hero.exp-commercial-hero .exp-scroll-cue {
    width: 52px; height: 52px; display: grid; place-items: center;
    border: 1px solid #ffffffcc; border-radius: 50%; bottom: 70px;
    background: #06180d66;
    min-width: 0; padding: 0;
}
#hero.exp-commercial-hero .exp-scroll-cue > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
#hero.exp-commercial-hero .exp-scroll-cue svg {color: white;}

@media (max-width: 900px) {
    #hero.exp-commercial-hero .exp-hero-booking {
        position: relative; top: auto; right: auto; translate: none;
        width: min(88%, 440px); margin: 22px auto 0 6%;
    }
    #hero.exp-commercial-hero .exp-title {width: 100%;}
    #hero.exp-commercial-hero .exp-script {max-width: 100%;}
    #hero.exp-commercial-hero .exp-description {max-width: 58ch;}
    #hero.exp-commercial-hero .exp-points {max-width: 100%;}
    #hero.exp-commercial-hero .exp-hero-wildlife {width: 100%;}
}
@media (max-width: 650px) {
    #hero.exp-commercial-hero {padding-top: max(235px, 38svh);}
    #hero.exp-commercial-hero > .exp-backdrop {width: 100%; height: max(360px, 53svh);}
    #hero.exp-commercial-hero .exp-shade {background: linear-gradient(0deg,#071c12 56%,#071c12a3 73%,#071c121a 100%);}
    #hero.exp-commercial-hero .exp-title {font-size: clamp(32px, 9.6vw, 54px);}
    #hero.exp-commercial-hero .exp-hero-wildlife {flex-wrap: wrap;}
    #hero.exp-commercial-hero .exp-hero-wildlife > span:last-child {max-width: none;}
}