@import url("https://use.typekit.net/vcm6ysi.css");
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
:root{
  --color-heading: #1A1A1A;
  --color-body: #1A1A1A;
  --color-background-light: #F7F7F7;
  --color-background-medium: #e6e6e6;
  --color-background-dark: #1A1A1A;
  --color-main: #1A1A1A;
  --color-accent: #746047;
  --font-body: "Mulish", sans-serif;
  --font-heading: "Calistoga", serif;
  --font-accent: 'degular-mono', sans-serif;
  --animate: all .35s ease-in-out;
  --shadow: 0 0 1.6rem hsla(0 0% 0% / .16);

    --brand-color: #072448;
    --sea-green: #54D2D2;
    --yellow: #F8A23A;
    --lighter-yellow: #FFCB00;
    --medium-blue: #3F7BAC;
    --teal: #17568A;
    --white: #fff;
    --black: #000;
    --dark-gray: #1A1A1A;
    --light-blue: #e0f3f8;
    --aqua: #0096d6;
    --orange: #f4541f;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
html{
  font-size: 62.5%;
}
body{
    font-family: var(--font-body);
  color: var(--color-body);
  background:   var(--brand-color);
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 300;
}
main{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  background:   var(--brand-color);
}
strong{
    font-weight: 600;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    margin: 0 0 1.6rem;
    font-weight: 400;
    color: var(--color-heading);
    font-family: var(--font-accent);
    text-transform: capitalize;
}
h5, .h5,
h6, .h6{
  color: var(--color-main);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.button{
    background: hsla(0 0% 100% / .0);
    border: 1px solid hsla(0 0% 100% / 1);
    padding: .6vh 2vw .4vh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100vh;
    text-decoration: none;
    color: white;
    gap: .4rem;
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 300;
}
.button:hover,
.button:active{
    background: white;
    color: var(--color-heading);
}
.interactive-map{
    position: relative;
    width: 100svw;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-wrapper{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 100svh;
    max-width: 100svw;
}
.logo-wrapper{
    width: 16rem;
    height: auto;
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
}
.logo-wrapper img{
    width: 100%;
    height: auto;
}
.menu-btn{
    position: absolute;
    top: 5.2rem;
    right: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-size: 1.4rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: hsla(0 0% 100% / .08);
    backdrop-filter: blur(20px);
    border: 1px solid hsla(0 0% 100% / .16);
    padding: .8rem 2.4rem;
    border-radius: 4rem;
    line-height: 1;
    transition: var(--animate);
    cursor: pointer;
    z-index: 1;
}
.menu-btn:hover,
.menu-btn:active{
    background: white;
    color: var(--color-heading);
}
.menu-btn svg{
    height: 1.4rem;
    fill: white;
    transition: var(--animate);
}
.menu-btn:hover svg,
.menu-btn:active svg{
    fill: var(--color-heading);
}
.menu-btn.is-active {
    transform: translateX(calc(-40rem - 1.6rem));
}
.menu-btn__label {
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: var(--animate);
}
.menu-btn__label--close {
    display: none;
}
.menu-btn.is-active .menu-btn__label--open {
    display: none;
}
.menu-btn.is-active .menu-btn__label--close {
    display: flex;
}
/* ── Menu Drawer ── */
.menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 40rem;
    height: 100svh;
    background-color: transparent;
    background-image: linear-gradient(305deg, hsla(0 0% 100% / .16), hsla(0 0% 0% / .16));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid hsla(0 0% 100% / .16);
    box-shadow: 0 0 8rem hsla(0 0% 0% / .32);
    z-index: 30;
    transform: translateX(100%);
    transition: transform .35s ease-in-out;
    pointer-events: none;
    padding: 8rem 3.2rem 3.2rem;
    overflow-y: auto;
}
.menu-drawer.is-active {
    transform: translateX(0);
    pointer-events: all;
}
.menu-drawer nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.menu-drawer nav > ul > li {
    border-bottom: 1px solid hsla(0 0% 100% / .12);
    padding-bottom: 1.2rem;
    margin-bottom: .8rem;
}
.menu-drawer nav > ul > li > a {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: white;
    text-decoration: none;
    transition: var(--animate);
    margin-bottom: .8rem;
}
.menu-drawer nav > ul > li > a:hover,
.menu-drawer nav > ul > li > a:active{
    color: var(--yellow);
}
.menu-drawer nav ul ul {
    gap: .2rem;
}
.menu-drawer nav ul ul li a {
    display: block;
    font-size: 1.4rem;
    color: white;
    text-decoration: none;
    padding: .4rem 0;
    transition: var(--animate);
    letter-spacing: .02em;
}
.menu-drawer nav ul ul li a:hover,
.menu-drawer nav ul ul li a:active {
    color: var(--yellow);
    padding-left: .8rem;
}

/* ── Sub-modals ── */
.sub-poi-wrapper {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 25;
}

.sub-poi {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(56rem, calc(100vw - 4rem));
    background-color: transparent;
    background-image: linear-gradient(305deg, hsla(210 60% 20% / .6), hsla(210 60% 10% / .6));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid hsla(0 0% 100% / .2);
    box-shadow: 0 0 8rem hsla(0 0% 0% / .4);
    padding: 0;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity .35s ease-in-out, transform .35s ease-in-out;
}
.sub-poi.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.sub-poi-close {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    background: none;
    border: 1px solid hsla(0 0% 100% / .4);
    color: white;
    font-family: var(--font-accent);
    font-size: 1.2rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .6rem 1.4rem;
    border-radius: 4rem;
    cursor: pointer;
    background: hsla(0 0% 0% / .32);
    transition: var(--animate);
    z-index: 2;
}
.sub-poi-close:hover,
.sub-poi-close:active {
    background: white;
    color: var(--color-heading);
    border-color: white;
}

.sub-poi-inner h2 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    color: white;
    font-family: var(--font-heading);
}
.sub-poi-inner p {
    font-size: 1.5rem;
    line-height: 1.6;
    color: hsla(0 0% 100% / .8);
}

/* ── POI Overlay ── */
.poi-overlay {
    position: fixed;
    inset: 0;
    background: hsla(0 0% 0% / 0);
    pointer-events: none;
    transition: background .35s ease-in-out;
    z-index: 10;
}
.poi-overlay.is-active {
    background: hsla(0 0% 0% / .45);
    pointer-events: all;
}

/* ── POI Modals ── */
.poi-content-wrapper {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.poi {
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
    transform: translateX(50%) translateY(0);
    width: min(56rem, calc(100vw - 4rem));
    border-radius: 1.6rem 0 0 1.6rem;
    box-shadow: var(--shadow);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease-in-out, transform .35s ease-in-out;
    background-color: transparent;
    background-image: linear-gradient(305deg, hsla(0 0% 100% / .16), hsla(0 0% 0% / .16));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0px 80px 0 hsla(0 0% 0% / 0.32);
    border-left: 1px solid hsla(0 0% 100% / .16);
}
.poi.is-active {
    opacity: 1;
    transform: translateX(0) translateY(0);
    pointer-events: all;
}

.poi-close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    background: none;
    line-height: 1;
    cursor: pointer;
    border: 1px solid white;
    padding: .4rem;
    opacity: 1;
    border-radius: 50%;
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    z-index: 2;
    transition: var(--animate);
    touch-action: manipulation;
}
.poi-close:hover,
.poi-close:active { background: white; color: var(--color-heading); }

.poi-step-label {
    display: block;
    font-family: var(--font-accent);
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    margin-bottom: 0.8rem;
}

.poi-inner h2 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    color: white;
    font-family: var(--font-heading);
}

.poi-inner p {
    font-size: 1.5rem;
    line-height: 1.5;
    color: white;
}
.poi .img-wrapper,
.sub-poi .img-wrapper{
    width: 100%;
    height: auto;
    position: relative;
    aspect-ratio: 4 / 3;
}
.poi .img-wrapper img,
.sub-poi .img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.poi-inner-content{
    padding: 3.2rem;
}
.poi-inner-content ul{
    border-top: 1px solid hsla(0 0% 100% / .16);
    margin: 1.6rem 0 0 0;
    padding: 1.6rem 0 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.poi-inner-content ul li{
    margin: 0;
    padding: 0;
}
.content{
    max-width: 1264px;
    margin: 0 auto;
    width: 100%;
}
header{
    width: 100%;
    padding: 1.6rem;
    position: fixed;
    z-index: 1;
    top: 0;
    background: hsla(213 82% 15% / .8);
}
header .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}
header .logo{
    width: 16rem;
    display: block;
    margin: 0;
}
header .logo img{
    width: 100%;
    height: auto;
}
header h1{
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 400;
}
main.error-page{
    height: auto;
}
main.error-page section{
    padding: 4.8rem 2.4rem;
    min-height: calc(100svh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}
main.error-page .content{
    text-align: center;
    max-width: 56rem;
}
main.error-page h1, main.error-page .h1, main.error-page h2, main.error-page .h2, main.error-page h3, main.error-page .h3, main.error-page h4, main.error-page .h4, main.error-page h5, main.error-page .h5, main.error-page h6, main.error-page .h6, main.error-page p{
    color: white;
}
main.error-page p{
    margin: 0 0 2.4rem;
}
footer{
    padding: 2.4rem;
    border-top: 1px solid hsla(0 0% 100% / .08);
}
footer p{
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
    color: hsla(0 0% 100% / .4);
}
footer p a{
    color: hsla(0 0% 100% / .4);
    transition: var(--animate);
}
footer p a:hover{
    color: white;
}
.poi .img-wrapper, 
.sub-poi .img-wrapper{
    overflow: hidden;
}
.poi .img-wrapper .swiper-button-next,
.poi .img-wrapper .swiper-button-prev, 
.sub-poi .img-wrapper .swiper-button-next, 
.sub-poi .img-wrapper .swiper-button-prev{
    display: none;
}
.poi-slider{
    aspect-ratio: 4 / 3;
}
.poi-slider .swiper-pagination{
    bottom: 12px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: .8rem;
}
.poi-slider .swiper-pagination-bullet{
    width: 1.2rem;
    height: 1.2rem;
    background: white;
    opacity: .72;
}
.poi-slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--yellow);
    opacity: 1;
}
h1.page-title{
    position: absolute;
    top: 4.4rem;
    left: 50%;
    transform: translate(-50% , 0);
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 400;
    z-index: 1;
}
section.static-map{
    width: 100vw;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
}
section.static-map img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.static-map .map-item{
    position: absolute;
    background: white;
    color: var(--brand-color);
    padding: .8rem 3.2rem;
    border-radius: 4rem;
    font-size: 1.6rem;
    line-height: 1;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    z-index: 3;
}
section.static-map .item-line{
    position: absolute;
    height: .1rem;
    border-radius: .1rem;
    background: white;
    z-index: 1;
}
section.static-map .item-dot{
    width: .8rem;
    height: .8rem;
    background: white;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}
section.static-map .map-item.item01{
    top: 65%;
    left: 20vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line01{
    left: 18.5%;
    top: 71.5%;
    transform: rotate(40deg);
    width: 6.5vw;
}
section.static-map .item-dot01{
    left: 24%;
    top: 75%;
}
section.static-map .map-item.item02{
    top: 60%;
    left: 33vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line02{
    left: 30.5%;
    top: 68%;
    transform: rotate(54deg);
    width: 5.8vw;
}
section.static-map .item-dot02{
    left: 35%;
    top: 72%;
}
section.static-map .map-item.item03{
    top: 36%;
    left: 30vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line03{
    left: 28.2%;
    top: 42%;
    transform: rotate(50deg);
    width: 4.8vw;
}
section.static-map .item-dot03{
    left: 32%;
    top: 45%;
}
section.static-map .map-item.item04{
    top: 85%;
    left: 37vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line04{
    left: 36%;
    top: 86.85%;
    transform: rotate(0deg);
    width: 2.5vw;
}
section.static-map .item-dot04{
    left: 38.25%;
    top: 86.5%;
}
section.static-map .map-item.item05{
    top: 94%;
    left: 57vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line05{
    left: 39.5%;
    top: 93.25%;
    transform: rotate(43deg);
    width: 2.25vw;
}
section.static-map .item-dot05{
    left: 39.5%;
    top: 91.5%;
}
section.static-map .map-item.item06{
    top: 85%;
    left: 53vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line06{
    left: 39.2%;
    top: 84.1%;
    transform: rotate(40deg);
    width: 3.65vw;
}
section.static-map .item-dot06{
    left: 39.5%;
    top: 82%;
}
section.static-map .map-item.item07{
    top: 72%;
    left: 64vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line07{
    left: 43.75%;
    top: 74.45%;
    transform: rotate(0deg);
    width: 5.5vw;
}
section.static-map .item-dot07{
    left: 43.5%;
    top: 74%;
}
section.static-map .map-item.item08{
    top: 27%;
    left: 41vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line08{
    left: 34.75%;
    top: 41%;
    transform: rotate(66deg);
    width: 12.5vw;
}
section.static-map .item-dot08{
    left: 43.25%;
    top: 51%;
}
section.static-map .map-item.item09{
    top: 15%;
    left: 42vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line09{
    left: 40%;
    top: 22%;
    transform: rotate(64deg);
    width: 5vw;
}
section.static-map .item-dot09{
    left: 43.5%;
    top: 25.8%;
}
section.static-map .map-item.item10{
    top: 8%;
    left: 51vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line10{
    left: 41.5%;
    top: 24.25%;
    transform: rotate(84deg);
    width: 16vw;
}
section.static-map .item-dot10{
    left: 50%;
    top: 38%;
}
section.static-map .map-item.item11{
    top: 15%;
    left: 61vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line11{
    left: 51%;
    top: 21%;
    transform: rotate(-83deg);
    width: 3.5vw;
}
section.static-map .item-dot11{
    left: 52.25%;
    top: 24%;
}
section.static-map .map-item.item12{
    top: 27%;
    left: 80vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line12{
    left: 61.75%;
    top: 31.75%;
    transform: rotate(-20deg);
    width: 12vw;
}
section.static-map .item-dot12{
    left: 61.75%;
    top: 35%;
}
section.static-map .map-item.item13{
    top: 60%;
    left: 66vw;
    transform: translate(-100%, 0);
}
section.static-map .item-line13{
    left: 65%;
    top: 63%;
    transform: rotate(9deg);
    width: 2.5vw;
}
section.static-map .item-dot13{
    left: 67.5%;
    top: 63%;
}
section.static-map .map-item.item14{
    top: 70%;
    left: 90vw;
    transform: translate(-100%, 0);
    min-width: 21.1rem;
}
section.static-map .item-line14{
    left: 72%;
    top: 71.9%;
    transform: rotate(0deg);
    width: 3vw;
}
section.static-map .item-dot14{
    left: 72%;
    top: 71.5%;
}
section.static-map .map-item.item15{
    top: 42%;
    left: 86vw;
    min-width: 21.5rem;
    transform: translate(-100%, 0);
}
section.static-map .item-line15{
    top: 47%;
    left: 50.2%;
    transform: rotate(-5deg);
    width: 30vw;
}
section.static-map .item-dot15{
    left: 50%;
    top: 49%;
}
section.static-map .map-item.item16{
    top: 49%;
    left: 89vw;
    transform: translate(-100%, 0);
    min-width: 29.3rem;
}
section.static-map .item-line16{
    left: 53.4%;
    top: 50.25%;
    transform: rotate(2deg);
    width: 28vw;
}
section.static-map .item-dot16{
    left: 53.4%;
    top: 49%;
}
section.static-map .map-item.item17{
    top: 83.5%;
    left: 84vw;
    min-width: 13.3rem;
    transform: translate(-100%, 0);
}
section.static-map .item-line17{
    left: 61.4%;
    top: 85.45%;
    width: 15vw;
}
section.static-map .item-dot17{
    left: 61%;
    top: 85%;

}

/* ── Touch-screen optimizations ── */
.menu-btn,
.sub-poi-close,
.button,
.menu-drawer nav a,
.poi-overlay{
    touch-action: manipulation;
}
.sub-poi-close{
    min-width: 4.4rem;
    min-height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menu-drawer nav ul ul li a{
    min-height: 4.4rem;
    display: flex;
    align-items: center;
}
.poi-inner-content ul li .button{
    min-height: 4.4rem;
}
@media (pointer: coarse) {
    .menu-btn{
        padding: 1.2rem 2.8rem;
        font-size: 1.6rem;
    }
    .menu-drawer{
        width: min(48rem, 85vw);
    }
    .menu-btn.is-active{
        transform: translateX(calc(-1 * min(48rem, 85vw) - 1.6rem));
    }
    .menu-drawer nav > ul > li > a{
        font-size: 2.4rem;
        padding: .6rem 0;
    }
    .menu-drawer nav ul ul li a{
        font-size: 1.6rem;
        padding: .8rem 0;
    }
    .poi-inner-content ul li .button{
        padding: 1rem 2.4rem;
        font-size: 1.6rem;
    }
    .poi{
        width: min(56rem, calc(100vw - 2rem));
    }
    .sub-poi{
        width: min(56rem, calc(100vw - 2rem));
    }
    .poi-inner-content{
        padding: 2.4rem;
    }
}