/* Import CSS files in order */
@import url("reset.css");
@import url("variables.css?v=20260928-1");
@import url("base.css?v=20260928-1");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

html.lenis,
html.lenis body {
    scroll-behavior: auto;
}

:root {
    --header-height:9rem;
    --menu-height:6rem;
    --section-gutter:calc( var(--header-height) + var(--gap));
}

header{position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: var(--header-height); background-color: rgba(var(--primary-dark-color-rgb), 75%); backdrop-filter: blur(5px); display: flex; align-items: center; transition: var(--transition);}
header .container{display: flex; align-items: center;}
header .container .logo{flex: 1 0 0%; z-index: 999;}
header .container .header-links{ z-index: 999; flex: 1 0 0%; display: flex; justify-content: flex-end;}

.logo img{width: 15.7rem;}

nav{display: flex; align-items: center; justify-content: center;}
nav a, .header-links a{display: flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; font-size: var(--fs-lg); font-family: var(--font-family); color: var(--off-white-color); height: var(--menu-height); padding: 0 var(--gap);}
@media(width > 991px){
    header.inverse{background-color: rgba(255, 255, 255, 75%); border-bottom: .1rem solid var(--primary-color);}
    header.inverse nav a, header.inverse .header-links a{color: var(--primary-color);}
    header:not(.inverse) .logo .logo-white{display: block;}
    header.inverse .logo .logo-white{display: none;}
    header:not(.inverse) .logo .logo-primary{display: none;}
    header nav a{transition: opacity .25s ease;}
    header nav:has(a:is(:hover, :focus-visible)) a:not(:is(:hover, :focus-visible)){opacity: .5;}
    header .header-links a{text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .35em; text-decoration-thickness: .08em; transition: text-decoration-color .25s ease;}
    header .header-links a:is(:hover, :focus-visible){text-decoration-color: currentColor;}
} 
@media(width < 992px){
    nav{position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; flex-direction: column; align-items: stretch; justify-content: center; padding: var(--header-height) var(--gutter) var(--gutter); background-color: var(--primary-dark-color); gap: 0; transition: var(--transition); opacity: 0; visibility: hidden; pointer-events: none;}
    nav a{justify-content: flex-start; width: 100%; height: auto; min-height: clamp(7rem, 13vw, 10rem); padding: 1rem 0; border-bottom: .1rem solid rgba(255, 255, 255, .35); font-family: var(--headding-font); font-size: clamp(3.6rem, 6vw, 6.4rem); line-height: 1.1;}
    nav a:first-child{border-top: .1rem solid rgba(255, 255, 255, .35);}
    nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
    header .logo .logo-primary{display: none;}
} 



.home-hero-section{height: 100dvh; position: relative; isolation:isolate; display: flex;}
.home-hero-section::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/home-hero-bg.jpg') left center no-repeat; background-size: cover; z-index: -1;}
.home-hero-section::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(33, 33, 33, 25%); z-index: -1;}
.home-hero-floating-block{position: absolute; right: 0; top: 0; width: 25vw; height: 100dvh; background: url('../images/home-hero-go-to-page.jpg') center center no-repeat; background-size: cover; transition: var(--transition); padding: calc(var(--gap) * 2) var(--gutter) calc(var(--gap) * 2) calc(var(--gap) * 2); display: flex; align-items: flex-end; color: var(--off-white-color);}
.home-hero-floating-block:hover{width: 40vw;}
.home-hero-section .container{display: flex; align-items: center;}
.home-hero-section-content > *{color: var(--off-white-color);}
.home-hero-section-content h1{line-height: 1;}
.home-hero-section-content h1:not(:last-child){margin-bottom: var(--gutter-half);}
.home-hero-section-content p{line-height: 1.2;}
.home-hero-floating-block .arrow-link{gap: 0; color: var(--off-white-color);}
.home-hero-floating-block .arrow-link span{line-height: 1;}
.home-hero-floating-block .arrow-link span:first-child{padding-right: var(--gutter-half); width: 0; transition: var(--transition);}
.home-hero-floating-block .arrow-link svg path{stroke: var(--off-white-color);}
.home-hero-floating-block:hover .arrow-link span:first-child{width: auto;}
@media(width < 992px){
    .home-hero-floating-block{display: none;}
}

.hero-section{height: 100dvh; position: relative; isolation:isolate; display: flex; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.hero-section > img{object-fit: cover; width: 100%; height: 100%; position: relative; z-index: -1;}
.hero-section .container{display: flex; align-items: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%;}
.hero-section::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(33, 33, 33, 25%); z-index: -1;}


main{padding: var(--section-gutter) 0;}
.section{padding: var(--section-gutter) 0;}
.section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: calc(var(--lg-space) / 2);}


figure img{object-fit: cover; width: 100%; height: 100%;}




.post-grid_type-1{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lg-space) var(--gap);}
@media(width > 991px){
    .breakfast-relax-grid .scroll-block figure{height: 100%;}
}
@media(width < 992px){
    .post-grid_type-1{grid-template-columns: 1fr;}
}

.post-grid_type-2{display: grid; grid-template-columns: 25% 1fr; gap: var(--lg-space) var(--gap);}
.post-grid_type-2 .inner-grid{display: grid; grid-template-columns: 1fr 25%; gap: var(--lg-space) var(--gap);}
.post-grid_type-2 .inner-grid:not(:last-child){margin-bottom: var(--section-gutter);}
.pin-trigger-2 .inner-grid > .image figure{overflow: hidden;}
.pin-trigger-2 .inner-grid > .image figure img{display: block;}
.editorial-parallax{overflow: hidden;}
.editorial-parallax img{display: block;}
@media(prefers-reduced-motion: no-preference){
    .pin-trigger-2 .inner-grid > .image figure img{will-change: transform;}
    .editorial-parallax img{will-change: transform;}
    .experience-offer-image img{will-change: transform;}
}
@media(width >= 768px){
    .pin-trigger-2 .inner-grid{grid-template-columns: minmax(0, 1fr) minmax(25rem, 25%); column-gap: calc(var(--gap) + var(--gutter-half));}
    .pin-trigger-2 .inner-grid > :last-child{display: flex; justify-content: flex-end; align-items: flex-start;}
}
@media(width < 992px){
    .post-grid_type-2{grid-template-columns: 1fr;}
}
@media(width < 768px){
    .post-grid_type-2 .inner-grid{grid-template-columns: 1fr;}
    .post-grid_type-2 .inner-grid > :last-child > *{width: 100%;}
    .post-grid_type-2 .inner-grid > :last-child > * > article figure img{width: auto; object-fit: none;}
}
.post-grid_type-3{display: grid; grid-template-columns: 35% 1fr; gap: var(--lg-space) var(--gap);}
.post-grid_type-3 > :first-child{padding: var(--section-gutter) 0;}
@media(width > 1660px){
    .post-grid_type-3 > :last-child > figure{margin-right: calc((( 100vw - var(--container-width)) / 2) * -1);}
}
@media(width < 1661px){
    .post-grid_type-3 > :last-child > figure{margin-right: calc(var(--gutter) * -1)}
}
@media(width < 992px){
    .post-grid_type-3{grid-template-columns: 1fr;}
    .post-grid_type-3 > :first-child{padding: 0;}
    .post-grid_type-3 > :last-child > figure{margin-right: 0;}
}

.post-grid_type-4{display: grid; grid-template-columns: 70% 1fr; gap: var(--gutter-2);}
.post-grid_type-4 .image-grid{display: grid; grid-template-columns: 70% 1fr; gap: var(--gutter-2)}
.post-grid_type-4 .image-grid div{display: flex; flex-direction: column;}
.post-grid_type-4 .image-grid div figure{flex: 1 0 0%;}
.post-grid_type-4 .image-grid div > :not(:last-child){margin-bottom: var(--gutter-2);}
.post-grid_type-4 .image-grid figure img{object-fit: cover; width: 100%; height: 100%;}
.room-detail-grid{display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start;}
.room-detail-gallery{display: grid; gap: var(--md-space); min-width: 0;}
.room-detail-photo{overflow: hidden;}
.room-detail-photo-square{aspect-ratio: 1;}
.room-detail-photo-landscape{aspect-ratio: 3 / 2;}
.room-detail-photo img{display: block; width: 100%; height: 100%; object-fit: cover;}
.room-detail-info-column{display: flex; justify-content: flex-end; align-items: flex-start; min-width: 0;}
.room-detail-info{width: 100%; max-width: 38rem;}
@media(width < 992px){
    .room-detail-grid{grid-template-columns: 1fr;}
    .room-detail-info-column{justify-content: flex-start;}
    .room-detail-info{max-width: none; padding-top: 0; padding-bottom: 0;}
}
@media(width < 1300px){
    .post-grid_type-4{grid-template-columns: 1fr;}
}
@media(width < 992px){
    .post-grid_type-4 .image-grid{grid-template-columns: 1fr;}
}

.post-grid_type-5{display: grid; grid-template-columns: 1fr 70%; gap: var(--gutter-2);}
@media(width < 992px){
    .post-grid_type-5{grid-template-columns: 1fr;}
}

.experience-seasonal{padding: calc(var(--section-gutter) * .65) 0;}
.experience-seasonal-grid{display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--lg-space) var(--gap); align-items: start;}
.experience-seasonal-grid h6{line-height: 1.2;}
.experience-seasonal-grid p{max-width: 79rem;}
.experience-offer-grid{align-items: start;}
.experience-offer-heading, .experience-offer-content{min-width: 0;}
@media(width >= 1200px){
    .post-grid_type-2 .experience-offer-grid{grid-template-columns: minmax(0, 1fr) minmax(25rem, 25%); column-gap: calc(var(--gap) + var(--gutter-half));}
    .experience-offer-details{display: flex; justify-content: flex-end; align-items: flex-start;}
    .experience-offer-content{width: 25rem;}
    .experience-offer-heading, .experience-offer-content{padding-top: var(--section-gutter);}
}
.experience-offer-content{display: flex; flex-direction: column; gap: var(--gutter);}
.experience-offer-extra > :not(:last-child){margin-bottom: var(--gutter);}
.experience-offer-image figure{aspect-ratio: 4 / 5; overflow: hidden;}
.experience-offer-image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.experience-step{border-top: .1rem solid rgba(var(--primary-dark-color-rgb), .2); margin-top: var(--gutter-2); padding-top: var(--gutter-2);}
@media(width < 1200px){
    .post-grid_type-2.experience-offer{grid-template-columns: 1fr; gap: var(--gutter-2);}
    .post-grid_type-2 .experience-offer-grid{display: flex; flex-direction: column; gap: var(--gutter-2);}
    .experience-offer-details{display: contents;}
    .experience-offer-content{display: contents;}
    .experience-offer-summary{order: -1;}
    .experience-offer-image{order: 0; width: 100%;}
    .experience-offer-extra{order: 1;}
}
@media(width < 992px){
    .experience-seasonal-grid{grid-template-columns: 1fr;}
}

.post-grid_type-6{display: grid; grid-template-columns: 40% 1fr; gap: var(--lg-space) var(--gap);}
@media(width < 992px){
    .post-grid_type-6{grid-template-columns: 1fr;}
}
.post-grid_type-6_inverse{display: grid; grid-template-columns: 1fr 40%; gap: var(--lg-space) var(--gap);}
@media(width < 992px){
    .post-grid_type-6_inverse{grid-template-columns: 1fr;}
}



article h2, article h4{color: var(--primary-color);}
article p{color: var(--primary-dark-color);}

.image{position: relative;}
.image-label{position: absolute; right: calc(var(--gap) * 2); top: var(--gap); z-index: 1; color: var(--off-white-color);}

.button-section{height: 100dvh; display: flex; align-items: center; background-color: var(--off-white-color); backdrop-filter: blur(5px);}
.button-section .container{display: flex; align-items: center; justify-content: center;}


.grid{display: grid;}
.grid-column-3{grid-template-columns: repeat(3, 1fr); gap: calc(var(--gutter) * 2) var(--gutter);}
@media(width < 992px){
    .grid-column-3{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 768px){
    .grid-column-3{grid-template-columns: 1fr;}
}

.product > :not(:last-child){margin-bottom: var(--gutter);}
.product-image{position: relative;}
.product-image-text{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: var(--gutter); font-size: var(--fs-md); color: var(--off-white-color); background-color: rgba(var(--primary-dark-color-rgb), 60%); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: var(--transition);} 
.product figure{aspect-ratio: 1/1.3;}
.product figure img{object-fit: cover; width: 100%; height: 100%;}
.product-content-header:not(:last-child){margin-bottom: 1rem;}
.product-content-header{display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--primary-color);}
.product-content p{color: var(--primary-dark-color);}
.product:hover .product-image-text{opacity: 1; visibility: visible;}

.testimonial-block{padding: var(--section-gutter) 0; border-top: .1rem solid var(--primary-color);}
.testimonial-header:not(:last-child), .testimonial-slider-wrapper:not(:last-child){margin-bottom: calc(var(--md-space) * 2);}
.testimonial-header h5{color: var(--primary-color);}
.testimonial-slide p{font-family: var(--headding-font); color: var(--primary-dark-color);}
.testimonial-slide{padding-left: var(--section-gutter); padding-right: var(--section-gutter);}
.testimonial-logos{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gutter) var(--lg-space);}

.testimonial-slider-wrapper .swiper-pagination{position: static; font-size: var(--fs-md); color: var(--primary-color);}
.testimonial-slider-wrapper .swiper-slide{height: auto; display: flex; align-items: center; opacity: 0 !important;}
.testimonial-slider-wrapper .swiper-slide.swiper-slide-active{opacity: 1 !important;}
.testimonial-slider-wrapper .testimonial-slide{width: 100%;}
.testimonial-slider-wrapper{position: relative;}
.testimonial-slider-wrapper .slider-controls{display: flex; align-items: center; justify-content: space-between; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 9;}
.testimonial-slider-wrapper .slider-controls .slider-control{cursor: pointer;}
.testimonial-slider-wrapper .swiper-wrapper{position: relative;}
.testimonial-slider-wrapper .swiper-wrapper .slider-control.swiper-button-disabled{opacity: 30%; pointer-events: none;}
.testimonial-slide{padding-left: calc(var(--gutter) + var(--gutter-half)); padding-right: calc(var(--gutter) + var(--gutter-half));}

footer{border-top: .1rem solid var(--primary-color);}
.footer-content{padding: var(--section-gutter) 0;}
.copyright{display: flex; align-items: center; justify-content: space-between; gap: var(--gutter);}
.footer-links{text-transform: uppercase; font-size: var(--fs-sm); display: flex; align-items: center; gap: 1rem var(--gutter); flex-wrap: wrap;}
.footer-links a{color: var(--primary-color); white-space: nowrap;}
.footer-content{display: grid; grid-template-columns: 1fr auto; gap: var(--gutter);}
.footer-content > *{display: flex; flex-direction: column; gap: var(--section-gutter);}
.footer-content > :first-child{max-width: 60rem;}
.newsletter-form-wrap{display: flex; flex-direction: column; justify-content: space-between;}
.newsletter-form-wrap h6{color: var(--primary-color);}
.newsletter-form-wrap h6:not(:last-child){margin-bottom: var(--gutter);}
.newsletter-form{display: flex;}
.newsletter-form > *{height: 5.6rem; border: .1rem solid var(--primary-color); background: none;}
.newsletter-form > :first-child{flex: 1 0 0%;}
.newsletter-form > :last-child{aspect-ratio: 1; border-left: 0;}
.newsletter-form button{ background-color: var(--primary-color); display: grid; place-items: center; cursor: pointer;}
.newsletter-form input{padding: 0 var(--gutter);  color: var(--primary-color); font-size: var(--fs-md); font-family: var(--font-family);}
.newsletter-form input::placeholder{font-style: italic; color: var(--primary-color); opacity: 50%;}
.newsletter-form input:focus::placeholder{opacity: 0; visibility: hidden;}
.footer-contact-block{display: flex; flex-wrap: wrap; gap: var(--gutter);}
.footer-contact-block > *{flex: 1 0 0%; gap: var(--gutter-half); display: flex; flex-direction: column; justify-content: space-between;} 
.footer-contact-headding:not(:last-child){margin-bottom: var(--gutter);}
.footer-contact-block p{color: var(--primary-dark-color); overflow-wrap: anywhere;}
.footer-contact-block .footer-contact-headding{color: var(--primary-color); font-weight: 600;}
@media(width > 991px){
    .footer-content > :first-child > .footer-logo{order: 2;}
    .newsletter-form-wrap, .footer-contact-block{min-height: 21rem;}
}
@media(width < 992px){
    .footer-content{grid-template-columns: 1fr;;}
    .footer-content > *{gap: var(--gutter);}
    .footer-content > :first-child{max-width: 100%;}
    .newsletter-form-wrap h6{max-width: 100%;}
    .footer-contact-block > *{flex: none;}
    .footer-contact-headding:not(:last-child){margin-bottom: 0;}
    .newsletter-form input{padding: 0 var(--gutter-half);}
}

.floating-link{width: 8rem; height: 7rem; background-color: var(--off-white-color); border-radius: 10rem 0 0 10rem; border: .1rem solid var(--primary-color); border-right: 0; display: flex; align-items: center; padding: var(--gutter-half);}
@media(width < 992px){
   .floating-link{width: 6rem; height: 5rem; padding: 1rem;} 
}

.room-stay-info{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lg-space);}
.room-stay-info > *{min-width: 0; color: var(--primary-dark-color);}
.room-stay-info-services-list{columns: 2; column-gap: var(--gutter-2);}
.room-stay-info-services-list li{break-inside: avoid;}
.room-stay-info-notes{border-top: .1rem solid rgba(var(--primary-dark-color-rgb), .2); padding-top: var(--gutter-2);}
.room-stay-info-notes p + p{margin-top: var(--gutter-half);}
.room-stay-info-times h6{margin-bottom: var(--gutter);}
.room-stay-info-time + .room-stay-info-time{border-top: .1rem solid rgba(var(--primary-dark-color-rgb), .2); margin-top: var(--gutter); padding-top: var(--gutter);}
.room-stay-info-label{color: var(--primary-dark-color); font-family: var(--font-semibold); font-size: var(--fs-md);}
.room-stay-info-hour{color: var(--primary-dark-color); font-family: var(--headding-font); font-size: clamp(2.6rem, 2.8vw, 3.8rem); line-height: 1.15; margin: .6rem 0 1.4rem;}
.room-stay-info-time > :last-child{color: var(--primary-dark-color);}
@media(width < 1200px){
    .room-stay-info-services-list{columns: 1;}
}
@media(width < 992px){
    .room-stay-info{grid-template-columns: 1fr;}
}

.rooms-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter-2);}
.room-listing-photo{aspect-ratio: 1.15 / 1;}
.room-listing-photo img{display: block; width: 100%; height: 100%; object-fit: cover;}
.room{border: .1rem solid var(--primary-color); padding: var(--gutter-2);}
.room-card-link{display: block; color: inherit; text-decoration: none; background-color: var(--off-white-color); transition: background-color .35s ease;}
.room-card-link:is(:hover, :focus-visible){background-color: var(--cream-color);}
.room-card-link:is(:hover, :focus-visible) .arrow-link > :first-child{width: 4rem;}
.room-card-link:focus-visible{outline: .2rem solid var(--primary-color); outline-offset: .3rem;}
.room > :not(:last-child){margin-bottom: var(--gutter-2);}
.room-header{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem var(--gutter-2);}
.room-header h6{color: var(--primary-color);}
.room-header-options{display: flex; align-items: center; justify-content: space-between; margin: 0 calc(var(--gutter-half) * -1);}
.room-header-options p{font-size: var(--fs-sm); white-space: nowrap; color: var(--primary-color); padding: 0 var(--gutter-half); position: relative; line-height: 1;}
.room-header-options p:not(:last-child)::after{position: absolute; right: 0; top: 50%; content: ""; width: .4rem; aspect-ratio: 1; background-color: var(--primary-color); border-radius: 100%;}
.room{min-width: 0;}
.room-slider-wrapper{overflow: hidden;}
.room-slider figure{aspect-ratio: 1.15/1;}
.room-slider figure img{object-fit: cover; width: 100%; height: 100%;}
.room-slider-wrapper{position: relative;}
.room-slider-wrapper .swiper-pagination{position: absolute; left: var(--gutter-2); bottom: var(--gutter-2); width: auto; color: var(--off-white-color); transform: translateX(-6rem); transition: var(--transition);}
.room-slider-wrapper:hover .swiper-pagination{transform: translateX(0);}
.room-slider-wrapper .slider-controls{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 9; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter-2);}
.room-slider-wrapper .slider-controls > :first-child, .room-slider-wrapper .slider-controls > :last-child{transition: var(--transition); cursor: pointer;}
.room-slider-wrapper .slider-controls > :first-child{transform: translateX(-6rem);}
.room-slider-wrapper .slider-controls > :last-child{transform: translateX(6rem);}
.room-slider-wrapper:hover .slider-controls > :first-child, .room-slider-wrapper:hover .slider-controls > :last-child{transform: translateX(0);}
.room-slider-wrapper .slider-controls .slider-control.swiper-button-disabled{opacity: 25%; pointer-events: none;}
@media(width < 992px){
    .rooms-grid{grid-template-columns: 1fr;}
}





.pin-block.flex-column > :not(:last-child){margin-bottom: var(--gutter);}

.swiper-notification{display: none;}

.hero-options:not(:last-child){margin-bottom: var(--gutter);}
.hero-options{display: flex; align-items: center; margin: 0 calc(var(--gutter-half) * -1);}
.hero-options p{white-space: nowrap; color: var(--off-white-color); padding: 0 var(--gutter-half); position: relative; line-height: 1;}
.hero-options p:not(:last-child)::after{position: absolute; right: 0; top: 50%; content: ""; width: .4rem; aspect-ratio: 1; background-color: var(--off-white-color); border-radius: 100%;}
.rooms-slider .swiper-slide{max-width: 100%; opacity: 75%; transition: var(--transition);}
.rooms-slider .swiper-slide.swiper-slide-active{opacity: 1;}

.rooms-slider-header{display: flex; justify-content: center;}
.rooms-slider-header div{flex: 1 0 0%; max-width: 100rem; display: flex; align-items: center; justify-content: space-between; gap: 0 var(--gutter-half);}
.rooms-slider-header div button{cursor: pointer;}

article p .link{text-decoration: underline; color: var(--primary-color);}

.article-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);}
@media(width < 768px){
    .article-grid{grid-template-columns: 1fr;}
}