:root {
    --g9: #0b1524;
    --g8: #101f33;
    --g7: #16304c;
    --cream: #f4efe5;
    --paper: #faf7f1;
    --brass: #d3b074;
    --brassl: #ecd9ac;
    --acct: #8a6a2f;
    --ink: #101a28;
    --mut: #5d6877;
    --body: #384454;
    --line: #ddd5c5;
    --line2: #cfc6b4;
    --soft: #aebbcb;
    --softer: #e3e9f0;
    --g9rgb: 11, 21, 36;
    --g7rgb: 22, 48, 76;
    --accrgb: 211, 176, 116;
    --paperrgb: 250, 247, 241;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --serif: "Cormorant Garamond", Georgia, serif
}

* {
    box-sizing: border-box;
    margin: 0
}

html {
    scroll-behavior: smooth
}

body {
    font: 400 1.05rem/1.65 Jost, system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

body.lock {
    overflow: hidden
}

img {
    display: block;
    max-width: 100%
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    list-style: none;
    padding: 0
}

.w {
    width: min(1160px, 100% - 3rem);
    margin-inline: auto
}

h1,
h2,
h3,
.serif {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em
}

em {
    font-style: italic;
    color: var(--brass)
}

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 54px;
    padding: 0 2rem;
    border-radius: 99px;
    background: var(--brass);
    color: var(--g9);
    font: 600 .95rem Jost, sans-serif;
    letter-spacing: .05em;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color .4s, transform .3s var(--ease)
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cream);
    transform: translateY(101%);
    transition: transform .5s var(--ease)
}

.btn:hover::before {
    transform: none
}

.btn--o {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55)
}

.btn--o::before {
    background: #fff
}

.btn--o:hover {
    color: var(--g9)
}

.btn--d {
    background: var(--g7);
    color: var(--cream)
}

.btn--d::before {
    background: var(--brass)
}

.btn--d:hover {
    color: var(--g9)
}

.lbl {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font: 500 .8rem Jost;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass)
}

.lbl::before {
    content: "";
    width: 2.6rem;
    height: 1px;
    background: currentColor
}

.h2 {
    font-size: clamp(2.8rem, 6.4vw, 5.6rem);
    margin-top: 1.1rem;
    text-wrap: balance
}

/* preloader + progress */
.pre {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--g9);
    display: grid;
    place-items: center;
    transition: transform 1.1s var(--ease)
}

.pre.done {
    transform: translateY(-100%)
}

.pre__in {
    text-align: center
}

.pre__logo {
    display: inline-block;
    background: var(--cream);
    border-radius: 18px;
    padding: 8px 14px;
    animation: pop 1s var(--ease) both
}

.pre__logo img {
    height: 72px;
    width: auto
}

.pre__bar {
    width: 160px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    margin: 1.6rem auto 0;
    overflow: hidden
}

.pre__bar i {
    display: block;
    height: 100%;
    background: var(--brass);
    animation: load 1.1s var(--ease) forwards
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

@keyframes load {
    from {
        transform: translateX(-100%)
    }
}

html:not(.js) .pre {
    display: none
}

.prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: var(--brass);
    z-index: 60
}

/* header */
.hd {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: transform .5s var(--ease), background .4s, backdrop-filter .4s
}

.hd.hide {
    transform: translateY(-100%)
}

.hd.bg {
    background: rgba(var(--g9rgb), .82);
    backdrop-filter: blur(14px)
}

.hd .w {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    gap: 1.5rem
}

.logo {
    background: var(--cream);
    border-radius: 14px;
    padding: 4px 10px
}

.logo img {
    height: 46px;
    width: auto
}

.nav {
    display: flex;
    gap: 2.1rem;
    color: #fff;
    font-weight: 500;
    font-size: .97rem
}

.nav a {
    position: relative;
    padding: .3rem 0
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease)
}

.nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left
}

.hd .btn {
    min-height: 46px;
    padding: 0 1.4rem
}

.burger {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    background: transparent;
    cursor: pointer;
    position: relative
}

.burger i {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 1.5px;
    background: #fff;
    transition: .4s var(--ease)
}

.burger i:nth-child(1) {
    top: 19px
}

.burger i:nth-child(2) {
    top: 27px
}

.open .burger i:nth-child(1) {
    top: 23px;
    transform: rotate(45deg)
}

.open .burger i:nth-child(2) {
    top: 23px;
    transform: rotate(-45deg)
}

.menu {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--g9);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 2rem 3rem;
    clip-path: circle(0 at calc(100% - 3rem) 2.6rem);
    transition: clip-path .8s var(--ease)
}

.open .menu {
    clip-path: circle(150% at calc(100% - 3rem) 2.6rem)
}

.menu a.m {
    display: block;
    font: 500 clamp(2.4rem, 10vw, 3.6rem)/1.15 var(--serif);
    opacity: 0;
    transform: translateY(24px);
    transition: .7s var(--ease)
}

.open .menu a.m {
    opacity: 1;
    transform: none;
    transition-delay: calc(.25s + var(--i)*.07s)
}

@media(max-width:980px) {

    .nav,
    .hd .btn {
        display: none
    }

    .burger {
        display: block
    }
}

/* hero */
.hero {
    position: relative;
    height: 100svh;
    min-height: 680px;
    color: #fff;
    background: var(--g9);
    overflow: hidden
}

.slide {
    position: absolute;
    inset: -7% 0;
    opacity: 0;
    transition: opacity 1.8s ease;
    transform: translate3d(0, var(--py, 0), 0)
}

.slide.on {
    opacity: 1
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);
    transition: transform 9s linear
}

.slide.on img {
    transform: scale(1)
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 60% at 10% 100%, rgba(var(--accrgb), .28), transparent 70%), linear-gradient(180deg, rgba(var(--g9rgb), .7), rgba(var(--g9rgb), .18) 40%, rgba(var(--g9rgb), .9))
}

.hero__in {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(8rem, 17vh, 10.5rem)
}

.hero h1 {
    font-size: clamp(3.6rem, 10.5vw, 9.4rem);
    line-height: .9;
    letter-spacing: -.025em;
    margin-top: 1.4rem
}

.ln {
    display: block;
    overflow: hidden;
    padding-bottom: .08em
}

.ln>span {
    display: block;
    transform: translateY(112%)
}

.ready .ln>span {
    animation: up 1.3s var(--ease) forwards;
    animation-delay: calc(.35s + var(--i)*.15s)
}

html:not(.js) .ln>span {
    transform: none
}

@keyframes up {
    to {
        transform: none
    }
}

.fade {
    opacity: 0;
    transform: translateY(22px)
}

.ready .fade {
    animation: fin 1.1s var(--ease) forwards;
    animation-delay: calc(.9s + var(--i, 0)*.12s)
}

html:not(.js) .fade {
    opacity: 1;
    transform: none
}

@keyframes fin {
    to {
        opacity: 1;
        transform: none
    }
}

.hero p.lead {
    max-width: 34rem;
    margin-top: 1.6rem;
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    color: var(--softer)
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem
}

.hero__meta {
    position: absolute;
    z-index: 2;
    right: max(1.5rem, calc((100vw - 1160px)/2));
    bottom: clamp(8rem, 17vh, 10.5rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 500 .9rem Jost;
    letter-spacing: .14em
}

.hero__meta i {
    display: block;
    width: 90px;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    position: relative;
    overflow: hidden
}

.hero__meta i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: 0;
    animation: tick 6s linear infinite
}

@keyframes tick {
    to {
        transform: scaleX(1)
    }
}

.scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 1.4rem;
    width: 1px;
    height: 58px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden
}

.scroll::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 50%;
    background: var(--brass);
    animation: sc 2s var(--ease) infinite
}

@keyframes sc {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(220%)
    }
}

@media(max-width:700px) {

    .hero__meta,
    .scroll {
        display: none
    }
}

/* booking */
.bk {
    position: relative;
    z-index: 6;
    margin-top: -4.2rem
}

.bk form {
    display: grid;
    grid-template-columns: 1.3fr 1fr .7fr auto;
    gap: .6rem;
    padding: .8rem;
    background: rgba(var(--paperrgb), .95);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 26px;
    box-shadow: 0 40px 80px rgba(var(--g9rgb), .35)
}

.bk label {
    display: block;
    padding: .65rem 1rem;
    border-radius: 18px;
    background: var(--cream);
    transition: box-shadow .3s
}

.bk label:focus-within {
    box-shadow: 0 0 0 2px var(--brass)
}

.bk span.k {
    display: block;
    font: 500 .72rem Jost;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mut)
}

.bk select,
.bk input {
    width: 100%;
    border: 0;
    background: transparent;
    font: 500 1.02rem Jost;
    color: var(--ink);
    padding: .15rem 0;
    outline: 0
}

.bk .btn {
    min-height: 64px;
    border-radius: 18px
}

@media(max-width:860px) {
    .bk form {
        grid-template-columns: 1fr 1fr
    }

    .bk label:first-child,
    .bk .btn {
        grid-column: 1/-1
    }
}

/* marquee */
.mq {
    overflow: hidden;
    white-space: nowrap;
    padding: clamp(4rem, 8vw, 7rem) 0 1rem
}

.mq__t {
    display: inline-flex;
    animation: mq 45s linear infinite;
    font: 500 clamp(4rem, 11vw, 10rem)/1 var(--serif);
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--g7rgb), .35)
}

.mq__t span {
    padding-right: 3rem
}

.mq__t span:nth-child(even) {
    font-style: italic;
    -webkit-text-stroke: 0;
    color: var(--brass)
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* story */
.story {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(5rem, 10vw, 9rem)
}

.story__g {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center
}

.story__txt {
    font: 500 clamp(1.9rem, 3.8vw, 3.3rem)/1.18 var(--serif);
    margin-top: 1.4rem
}

.story__txt span {
    opacity: .16;
    transition: opacity .35s
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line)
}

.stats b {
    display: block;
    font: 500 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--serif);
    color: var(--g7)
}

.stats small {
    font-size: .9rem;
    color: var(--mut)
}

.pics {
    position: relative;
    aspect-ratio: 4/5
}

.pics .a {
    position: absolute;
    inset: 0 14% 12% 0;
    border-radius: 999px 999px 24px 24px;
    overflow: hidden
}

.pics .b {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 24px 120px 24px 24px;
    overflow: hidden;
    border: 8px solid var(--paper)
}

.pics img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    transform: translate3d(0, var(--py, 0), 0)
}

@media(max-width:860px) {
    .story__g {
        grid-template-columns: 1fr
    }

    .pics {
        max-width: 480px
    }
}

/* stacked stays */
.stays {
    background: var(--g9);
    color: var(--cream);
    padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem)
}

.stays .h2 em {
    color: var(--brassl)
}

.stays .sub {
    max-width: 34rem;
    margin-top: 1.2rem;
    color: var(--soft)
}

.stack {
    margin-top: clamp(2.5rem, 5vw, 4.5rem)
}

.card {
    position: sticky;
    top: calc(96px + var(--n)*22px);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: min(72vh, 640px);
    margin-bottom: 5vh;
    background: var(--paper);
    color: var(--ink);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    transform-origin: 50% 0;
    will-change: transform
}

.card:nth-child(even) {
    grid-template-columns: 1fr 1.15fr
}

.card:nth-child(even) .card__img {
    order: 2
}

.card__img {
    position: relative;
    overflow: hidden;
    min-height: 280px
}

.card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease)
}

.card:hover .card__img img {
    transform: scale(1.07)
}

.card__no {
    position: absolute;
    left: 1.4rem;
    top: 1rem;
    font: italic 500 4.4rem/1 var(--serif);
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .4)
}

.card__b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.6rem, 4vw, 4rem)
}

.card h3 {
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    color: var(--g7);
    margin: .9rem 0 .6rem
}

.card .m {
    color: var(--mut)
}

.card p.d {
    margin-top: 1rem;
    color: var(--body)
}

.card .pr {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.6rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line)
}

.card .pr b {
    font: 500 3rem/1 var(--serif);
    color: var(--acct)
}

.card .pr span {
    color: var(--mut)
}

@media(max-width:860px) {

    .card,
    .card:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0;
        top: calc(84px + var(--n)*14px)
    }

    .card:nth-child(even) .card__img {
        order: 0
    }

    .card__img {
        min-height: 220px;
        aspect-ratio: 16/10
    }
}

/* included */
.inc {
    padding: clamp(5rem, 10vw, 9rem) 0
}

.inc__g {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.inc ol {
    counter-reset: n
}

.inc li {
    counter-increment: n;
    display: flex;
    gap: 1.4rem;
    align-items: baseline;
    padding: 1.5rem 0;
    font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif);
    position: relative
}

.inc li::before {
    content: counter(n, decimal-leading-zero);
    font: 500 .95rem Jost;
    letter-spacing: .12em;
    color: var(--acct);
    min-width: 2rem
}

.inc li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--line2);
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform 1.2s var(--ease)
}

.inc li.in::after {
    transform: none
}

@media(max-width:860px) {
    .inc__g {
        grid-template-columns: 1fr
    }
}

/* safe band + quotes + faq */
.safe {
    background: var(--g7);
    color: var(--cream);
    padding: clamp(4rem, 8vw, 7rem) 0
}

.safe__g {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.safe__g div {
    padding: 1.8rem 1.4rem 0 0
}

.safe__g h3 {
    font-size: 1.9rem;
    color: var(--brassl)
}

.safe__g p {
    margin-top: .6rem;
    color: var(--soft);
    font-size: .98rem
}

@media(max-width:860px) {
    .safe__g {
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }
}

.qt {
    padding: clamp(5rem, 10vw, 9rem) 0;
    text-align: center;
    background: var(--cream)
}

.qt__s {
    position: relative;
    min-height: 15rem;
    margin-top: 2rem
}

.qt__s blockquote {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: .9s var(--ease);
    font: 500 clamp(1.8rem, 3.8vw, 3.2rem)/1.2 var(--serif);
    max-width: 60rem;
    margin: auto
}

.qt__s blockquote.on {
    opacity: 1;
    transform: none
}

.qt cite {
    display: block;
    margin-top: 1.6rem;
    font: 500 .85rem Jost;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--acct)
}

.qt__d {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: 1rem
}

.qt__d button {
    width: 34px;
    height: 3px;
    border: 0;
    background: var(--line2);
    cursor: pointer;
    padding: 0
}

.qt__d button.on {
    background: var(--g7)
}

.faq {
    padding: clamp(4rem, 8vw, 7rem) 0
}

.faq__l {
    max-width: 820px;
    margin-top: 2.4rem
}

details {
    border-bottom: 1px solid var(--line);
    padding: 1.4rem 0
}

summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif)
}

summary::-webkit-details-marker {
    display: none
}

summary::after {
    content: "+";
    font: 400 2rem/1 Jost;
    color: var(--acct);
    transition: transform .4s var(--ease)
}

details[open] summary::after {
    transform: rotate(45deg)
}

details p {
    margin-top: .8rem;
    color: var(--mut);
    max-width: 40rem
}

/* cta + footer */
.cta2 {
    position: relative;
    color: #fff;
    text-align: center;
    padding: clamp(7rem, 16vw, 13rem) 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--g9)
}

.cta2 img {
    position: absolute;
    inset: -10% 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    z-index: -2;
    transform: translate3d(0, var(--py, 0), 0)
}

.cta2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(var(--g9rgb), .78), rgba(var(--g9rgb), .6))
}

.cta2 h2 {
    font-size: clamp(3rem, 8vw, 7.4rem);
    max-width: 14ch;
    margin: 1rem auto 2.2rem
}

.cta2 .cta {
    justify-content: center
}

footer {
    background: var(--g9);
    color: var(--soft);
    padding: 4.5rem 0 6rem;
    overflow: hidden
}

.fg {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
    font-size: .97rem
}

.fg h3 {
    font: 600 .8rem Jost;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 1rem
}

.fg li {
    margin-bottom: .45rem
}

.fg a:hover {
    color: #fff
}

.mark {
    margin-top: 3rem;
    font: 500 clamp(3rem, 12.5vw, 12rem)/.9 var(--serif);
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--accrgb), .35)
}

@media(max-width:860px) {
    .fg {
        grid-template-columns: 1fr 1fr
    }
}

.wa {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 40;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: ring 2.4s ease-out infinite
}

.wa svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

@keyframes ring {
    to {
        transform: scale(1.6);
        opacity: 0
    }
}

/* reveal */
.js .rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: var(--d, 0s)
}

.js .rv.in {
    opacity: 1;
    transform: none
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }

    .js .rv,
    .fade,
    .ln>span {
        opacity: 1 !important;
        transform: none !important
    }

    .pre {
        display: none
    }

    .slide:first-child {
        opacity: 1
    }

    .story__txt span {
        opacity: 1 !important
    }
}

@media(max-width:700px) {}

/* premium finish */
.btn {
    background: linear-gradient(135deg, var(--brassl), var(--brass));
    box-shadow: 0 8px 24px rgba(var(--accrgb), .28)
}

.btn--o,
.btn--d {
    box-shadow: none
}

.btn--o {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55)
}

.stays {
    background: radial-gradient(900px 520px at 88% 0, rgba(var(--accrgb), .13), transparent 62%), linear-gradient(180deg, var(--g9), var(--g8))
}

.safe {
    background: radial-gradient(800px 400px at 0 100%, rgba(var(--accrgb), .12), transparent 60%), linear-gradient(180deg, var(--g8), var(--g7))
}

.card {
    border: 1px solid rgba(var(--accrgb), .4)
}

.card__no {
    color: var(--brassl)
}

.hero::after {
    background: radial-gradient(90% 60% at 10% 100%, rgba(var(--accrgb), .2), transparent 70%), linear-gradient(180deg, rgba(var(--g9rgb), .6), rgba(var(--g9rgb), .12) 42%, rgba(var(--g9rgb), .88))
}

.story em,
.nb em,
.inc em,
.faq em,
.qt em {
    color: var(--acct)
}

.story .lbl,
.nb .lbl,
.inc .lbl,
.faq .lbl,
.qt .lbl {
    color: var(--acct)
}

.mq__t span:nth-child(even) {
    color: var(--acct)
}

.hd.bg {
    background: rgba(var(--g9rgb), .85)
}

.cta2::before {
    background: linear-gradient(180deg, rgba(var(--g9rgb), .8), rgba(var(--g9rgb), .62))
}

/* explore nearby */
.nb {
    background: var(--paper);
    padding: clamp(5rem, 10vw, 9rem) 0
}

.nb__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap
}

.nb__head .sub {
    max-width: 24rem;
    color: var(--mut)
}

.nb__g {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    margin-top: clamp(2.5rem, 5vw, 4rem)
}

.nb__l {
    border-top: 1px solid var(--line)
}

.nb__l li {
    position: relative;
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 2.4rem 1.35rem 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: padding .5s var(--ease)
}

.nb__l li::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-14px, -50%);
    opacity: 0;
    color: var(--acct);
    font-size: 1.5rem;
    transition: .5s var(--ease)
}

.nb__l li.on {
    padding-left: 1.4rem
}

.nb__l li.on::after {
    opacity: 1;
    transform: translate(0, -50%)
}

.nb__l li::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--brass), transparent);
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform .8s var(--ease)
}

.nb__l li.on::before {
    transform: none
}

.nb__d b {
    font: 500 clamp(2.6rem, 4.6vw, 4.2rem)/1 var(--serif);
    color: transparent;
    -webkit-text-stroke: 1px var(--acct);
    transition: color .4s
}

.nb__l li.on .nb__d b {
    color: var(--acct)
}

.nb__d small {
    font: 500 .78rem Jost;
    letter-spacing: .18em;
    margin-left: .3rem;
    color: var(--mut)
}

.nb__n {
    font: 500 clamp(1.6rem, 2.8vw, 2.4rem)/1.05 var(--serif)
}

.nb__n small {
    display: block;
    margin-top: .4rem;
    font: 500 .72rem Jost;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mut)
}

.nb__m {
    display: none
}

.nb__p {
    position: sticky;
    top: 110px;
    aspect-ratio: 4/5;
    border-radius: 28px;
    background: var(--g9)
}

.nb__p::before {
    content: "";
    position: absolute;
    inset: -14px 14px 14px -14px;
    border: 1px solid rgba(var(--accrgb), .7);
    border-radius: 28px;
    z-index: -1
}

.nb__p img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .9s ease, transform 1.8s var(--ease)
}

.nb__p img.on {
    opacity: 1;
    transform: none
}

.nb__p::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, transparent 55%, rgba(var(--g9rgb), .7));
    pointer-events: none
}

.nb__cap {
    position: absolute;
    left: 1.6rem;
    bottom: 1.4rem;
    z-index: 2;
    color: #fff;
    font: 500 1.9rem/1 var(--serif)
}

.nb__cap span {
    display: block;
    margin-bottom: .4rem;
    font: 500 .72rem Jost;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brassl)
}

@media(max-width:860px) {
    .nb__g {
        grid-template-columns: 1fr
    }

    .nb__p {
        display: none
    }

    .nb__l li {
        grid-template-columns: 5rem 1fr;
        padding-right: 0
    }

    .nb__l li::after {
        display: none
    }

    .nb__l li.on {
        padding-left: 0
    }

    .nb__m {
        grid-column: 1/-1;
        width: 100%;
        aspect-ratio: 16/10;
        object-fit: cover;
        border-radius: 18px;
        margin-top: .4rem
    }

    .nb__l li:not(.on) .nb__m {
        display: none
    }

    .nb__l li.on .nb__m {
        display: block
    }
}

/* story: a day at the campsite */
.day {
    position: relative;
    height: 340vh;
    background: var(--g9)
}

.day__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    color: #fff
}

.day__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 1.3s ease, transform 7s linear
}

.day__bg img.on {
    opacity: 1;
    transform: scale(1)
}

.day__pin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--g9rgb), .85), rgba(var(--g9rgb), .35) 60%, rgba(var(--g9rgb), .15)), linear-gradient(180deg, rgba(var(--g9rgb), .45), transparent 35%, rgba(var(--g9rgb), .7))
}

.day__in {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem
}

.day .lbl {
    color: var(--brass)
}

.day .h2 em {
    color: var(--brassl)
}

.day__steps {
    position: relative;
    min-height: 25rem
}

.step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.6rem, 3.6vw, 3rem);
    border-radius: 26px;
    background: rgba(var(--g9rgb), .45);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .18);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    pointer-events: none
}

.step.on {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.step__n {
    position: absolute;
    right: 1.4rem;
    top: .4rem;
    font: 500 clamp(5rem, 9vw, 8rem)/1 var(--serif);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .28)
}

.step__t {
    font: 500 .78rem Jost;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brassl)
}

.step h3 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    margin: .8rem 0 1rem
}

.step p {
    color: var(--softer);
    max-width: 30rem
}

.day__dots {
    position: absolute;
    left: max(1.5rem, calc((100vw - 1160px)/2));
    bottom: 2.4rem;
    z-index: 3;
    display: flex;
    gap: .6rem;
    align-items: center;
    font: 500 .85rem Jost;
    letter-spacing: .14em
}

.day__dots i {
    display: block;
    width: 44px;
    height: 2px;
    background: rgba(255, 255, 255, .3);
    transition: .6s var(--ease)
}

.day__dots i.on {
    width: 80px;
    background: var(--brass)
}

.facts {
    background: var(--paper);
    padding: clamp(3rem, 6vw, 5rem) 0
}

.facts .stats {
    margin: 0;
    border: 0;
    padding: 0
}

.facts .stats>div {
    text-align: center
}

.facts .stats b {
    color: var(--acct)
}

@media(max-width:860px) {
    .day {
        height: 300vh
    }

    .day__in {
        grid-template-columns: 1fr;
        align-content: space-between;
        padding: 7rem 0 5rem;
        gap: 1rem
    }

    .day .h2 {
        font-size: clamp(2.4rem, 10vw, 3.4rem)
    }

    .day__steps {
        min-height: 17rem
    }

    .step {
        padding: 1.4rem
    }

    .step__n {
        font-size: 4rem
    }

    .day__dots {
        bottom: 1.6rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .day {
        height: auto
    }

    .day__pin {
        position: static;
        height: auto;
        padding: 5rem 0
    }

    .day__in {
        height: auto;
        grid-template-columns: 1fr
    }

    .day__steps {
        min-height: 0;
        display: grid;
        gap: 1rem
    }

    .step {
        position: static;
        opacity: 1;
        transform: none
    }

    .day__bg img:first-child {
        opacity: 1;
        transform: none
    }

    .day__dots {
        display: none
    }
}

/* button variants must beat the gold gradient */
.btn.btn--o {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55)
}

.btn.btn--o:hover {
    color: var(--g9)
}

.btn.btn--d {
    background: var(--g7);
    color: var(--cream);
    box-shadow: none
}

.btn.btn--d:hover {
    color: var(--g9)
}