/*=========================================================
  WRITER'S INN
  STYLE.CSS
  PART 1
=========================================================*/
/*=========================================================
ROOT
=========================================================*/

:root{

    --forest:#26473D;
    --forest-light:#3B5C50;

    --cream:#F8F5F0;
    --white:#FFFFFF;

    --text:#222222;
    --muted:#6F6F6F;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

    --container:1200px;

    --heading:"Cormorant Garamond",serif;
    --body:"Manrope",sans-serif;

    --transition:.35s ease;

}

/*=========================================================
RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body);

    background:var(--cream);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

/*=========================================================
LAYOUT
=========================================================*/

.container{

    width:min(92%,1200px);

    margin:auto;

}

section{

    padding:120px 0;

}

.section-header{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.section-header span{

    display:inline-block;

    color:var(--forest);

    letter-spacing:.25em;

    font-size:.8rem;

    margin-bottom:16px;

    text-transform:uppercase;

}

.section-header h2{

    font-family:var(--heading);

    font-size:clamp(2.5rem,5vw,4rem);

    color:var(--forest);

    margin-bottom:20px;

}

.section-header p{

    color:var(--muted);

    font-size:1.05rem;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:transform .35s ease,
        background-color .45s ease,
        top .35s ease;

}

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

}

.header.scrolled{

    top:0;

}

.header.scrolled .navbar{

    background:rgba(248,245,240,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    border-radius:999px;

    padding:10px 28px;

    box-shadow:

        0 12px 35px rgba(0,0,0,.08),

        0 1px 0 rgba(255,255,255,.6) inset;

    transition:all .45s ease;

}

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    height:46px;

    margin-right:32px;

    transition:transform .35s ease;

}

.brand img{

    width:46px;

    height:46px;

    border-radius:50%;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.brand:hover img{

    transform:scale(1.08);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.brand:hover .brand-title{

    letter-spacing:.02em;

}

.brand:hover{

    transform:translateY(-2px);

}

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

.brand-title{

    font-family:var(--heading);

    font-size:1.6rem;

    color:white;

    transition:all .35s ease;

    line-height:1;

    margin:0;

    font-weight:600;

}


.header.scrolled .brand-title{

    color:#3E3E3E;

    opacity:1;

    transform:none;

    pointer-events:auto;

}

.brand-subtitle{

    color:rgba(255,255,255,.8);

    text-transform:uppercase;

    font-size:.65rem;

    letter-spacing:.18em;

    transition:all .35s ease;

    line-height:1.2;

    margin-top:4px;


}

.header.scrolled .brand-subtitle{

    opacity:0;

    transform:translateY(-5px);

    pointer-events:none;

}

.header.scrolled .brand-subtitle{

    color:#777;

}

.header.scrolled .brand img{

    width:40px;

    height:40px;

}

/*=========================================================
NAVIGATION
=========================================================*/

.nav-menu{

    display:flex;

    gap:1.7rem;

}

.nav-menu a{

    color:white;

   font-weight:500;
letter-spacing:.03em;

    position:relative;

    transition:.3s;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:white;

    transform:translateX(-50%);

    transition:width .35s ease;

}

.nav-menu a:hover::after{

    width:100%;

}

.header.scrolled .nav-menu a{

    color:var(--forest);

}

.header.scrolled .nav-menu a::after{

    background:var(--forest);

}

/*=========================================================
MENU BUTTON
=========================================================*/

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    width:28px;

    height:2px;

    background:white;

}

.header.scrolled .menu-toggle span{

    background:var(--forest);

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(20,30,25,.25),
        rgba(20,30,25,.55)
    );

    z-index:-1;

}

.hero-content{

    width:100%;

    max-width:900px;

    margin:auto;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.hero-location{

    letter-spacing:.35em;

    text-transform:uppercase;

    font-size:.8rem;

    color:rgba(255,255,255,.85);

    margin-bottom:26px;

}

.hero h1{

    font-family:var(--heading);

    font-size:clamp(4rem,9vw,7rem);

    line-height:.9;

    color:#ffffff;

}

.hero h2{

    font-family:var(--body);

    text-transform:uppercase;

    letter-spacing:.4em;

    font-size:.9rem;

    color:rgba(255,255,255,.9);

    margin:20px 0 42px;

}

.hero-tagline{

    font-family:var(--heading);

    font-size:clamp(2rem,3vw,2.8rem);

    color:white;

    margin-bottom:18px;

}

.hero-description{

    max-width:560px;

    margin:auto;

    color:#ffffff;

    font-size:1.1rem;

    opacity:.95;

}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-top:50px;

    flex-wrap:wrap;

}

.hero-button{

    padding:18px 40px;

    border:2px solid rgba(255,255,255,.85);

    border-radius:999px;

    color:white;

    font-weight:600;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    color .35s ease;

}

.hero-button:hover{

    background:white;

    color:var(--forest);

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.hero-button:active{

    transform:translateY(-1px);

}

.hero-explore{

    color:white;

    font-weight:600;

    align-self:center;

}

.hero-explore:hover{

    opacity:.75;

}

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

@media(max-width:900px){

    .nav-menu{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .brand-title{

        font-size:1.4rem;

    }

    .hero h1{

        font-size:3.8rem;

    }

    .hero h2{

        letter-spacing:.25em;

    }

    .hero-tagline{

        font-size:1.9rem;

    }

    .hero-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin-top:52px;

}

    .hero-button{

        width:100%;

        max-width:280px;

    }

}

/*=========================================================
STORY
=========================================================*/

.story{

    background:#ffffff;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.story-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.story-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    transition:
    transform .7s ease,
    filter .7s ease;

}

.story-image:hover img{

    transform:scale(1.05);

    filter:brightness(1.05);

}

.story-content span{

    display:inline-block;

    color:var(--forest);

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.8rem;

    margin-bottom:18px;

}

.story-content h2{

    font-family:var(--heading);

    font-size:clamp(2.5rem,5vw,4rem);

    color:var(--forest);

    margin-bottom:24px;

    line-height:1.05;

}

.story-content p{

    color:var(--muted);

    margin-bottom:22px;

    font-size:1.05rem;

}

.story-button{

    display:inline-flex;

    margin-top:12px;

    padding:16px 34px;

    background:var(--forest);

    color:white;

    border-radius:999px;

    transition:.3s;

}

.story-button:hover{

    background:var(--forest-light);

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.story-button:active{

    transform:translateY(-1px);

}

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

@media(max-width:900px){

.story-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.story-image{

    order:-1;

}

.story-image img{

    height:420px;

}

.story-content{

    text-align:center;

}

}

/*=========================================================
ROOMS
=========================================================*/

.rooms{

background:#FDFBF8;

}

.room-card{

display:grid;

grid-template-columns:1.1fr 1fr;

align-items:center;

gap:70px;

margin-top:80px;

}

.room-card.reverse{

grid-template-columns:1fr 1.1fr;

}

.room-card.reverse .room-image{

order:2;

}

.room-card.reverse .room-content{

order:1;

}

.room-image{

overflow:hidden;

border-radius:22px;

box-shadow:var(--shadow);

}

.room-image img{

width:100%;

height:520px;

object-fit:cover;

transition:
    transform .7s ease,
    filter .7s ease;

}

.room-card:hover img{

    transform:scale(1.05);

    filter:brightness(1.05);

}

.room-content h3{

font-family:var(--heading);

font-size:2.6rem;

color:var(--forest);

margin-bottom:22px;

}

.room-content p{

margin-bottom:26px;

font-size:1.05rem;

}

.room-features{

display:grid;

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

gap:14px;

margin-bottom:38px;

}

.room-features li{

color:#444;

font-weight:500;

}

.room-button{

display:inline-block;

padding:17px 34px;

background:var(--forest);

color:white;

border-radius:999px;

transition:.3s;

}

.room-button:hover{

    background:var(--forest-light);

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.room-button:active{

    transform:translateY(-1px);

}

@media(max-width:900px){

.room-card,

.room-card.reverse{

grid-template-columns:1fr;

gap:40px;

}

.room-card.reverse .room-image,

.room-card.reverse .room-content{

order:unset;

}

.room-image img{

height:320px;

}

.room-content{

text-align:center;

}

.room-features{

grid-template-columns:1fr;

text-align:left;

}

.room-button{

width:100%;

max-width:280px;

text-align:center;

}

}

/*==================================================
GALLERY
==================================================*/

.gallery{

    padding:120px 0;

}

.gallery-grid{

    display:grid;

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

    grid-auto-rows:220px;

    gap:18px;

    margin-top:60px;

}

.gallery-image{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    opacity:0;

    transform:translateY(40px);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        opacity .8s ease,
        box-shadow .45s ease,
        filter .45s ease;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.gallery-image.show{

    opacity:1;

    transform:translateY(0);

}

.gallery-image:hover{

    transform:translateY(-8px) scale(1.025);

    box-shadow:0 28px 60px rgba(0,0,0,.18);

    filter:brightness(.96);

}

.large{

    grid-row:span 2;

}

.large-wide{

    grid-column:span 2;

}

.gallery-footer{

    display:flex;

    justify-content:center;

    margin-top:45px;

}

.gallery-more{

    padding:16px 36px;

    border-radius:999px;

    border:1px solid var(--forest);

    background:white;

    color:var(--forest);

    font-weight:700;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    color .35s ease;

}

.gallery-more:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.gallery-more:active{

    transform:translateY(-1px);

}

@media(max-width:600px){

.gallery-grid{

    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:150px;
    gap:10px;

}

.large,
.large-wide{

    grid-column:span 2;
    grid-row:span 1;

}

.gallery-image{

    border-radius:12px;

}

}



/*=====================================
GALLERY REVEAL
=====================================*/

.gallery-image{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;

}

.gallery-image.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
EXPERIENCES
=========================================================*/

.experiences{

background:var(--cream);

}

.experience-grid{

display:grid;

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

gap:28px;

margin-top:70px;

}

.experience-card{

background:white;

padding:42px 34px;

border-radius:22px;

box-shadow:var(--shadow);

transition:
    transform .4s ease,
    box-shadow .4s ease;

text-align:center;

}

.experience-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.experience-icon{

font-size:2.5rem;

margin-bottom:20px;

transition:transform .4s ease;

}

.experience-card:hover .experience-icon{

    transform:scale(1.12);

}

.experience-card h3{

font-family:var(--heading);

font-size:2rem;

color:var(--forest);

margin-bottom:16px;

}

.experience-card p{

color:var(--muted);

}

@media(max-width:900px){

.experience-grid{

grid-template-columns:1fr;

}

}

/*=========================================================
PREMIUM REVIEW CAROUSEL
=========================================================*/

.reviews{

    background:linear-gradient(to bottom,#ffffff,#f8f5f0);

}

.review-summary{

    text-align:center;

    margin:60px auto;

}

.rating-number{

    font-size:2rem;

    color:#C8A96A;

    letter-spacing:8px;

    margin-bottom:10px;

}

.review-summary h3{

    font-family:var(--heading);

    color:var(--forest);

    font-size:2.3rem;

    margin-bottom:10px;

}

.review-summary p{

    color:var(--muted);

}

/*=========================================================
SLIDER
=========================================================*/

.review-slider{

    position:relative;

    max-width:900px;

    margin:70px auto 30px;

    overflow:hidden;

}

.review-track{

    display:flex;

    transition:transform .55s ease;

}

.review-card{

    min-width:100%;

    background:#ffffff;

    border-radius:24px;

    padding:55px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    text-align:center;

}

.review-card p{

    font-size:1.08rem;

    line-height:1.9;

    color:#555;

    margin:28px 0;

    font-style:italic;

}

.review-card .stars{

    color:#C8A96A;

    font-size:1.3rem;

    letter-spacing:6px;

}

/*=========================================================
AUTHOR
=========================================================*/

.review-author{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:35px;

}

.avatar{

    width:62px;

    height:62px;

    border-radius:50%;

    background:var(--forest);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1.25rem;

}

.review-author h4{

    font-size:1.15rem;

    color:var(--forest);

    margin-bottom:3px;

}

.review-author span{

    color:var(--muted);

    font-size:.92rem;

}

/*=========================================================
ARROWS
=========================================================*/

.review-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    background:white;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

    font-size:1.3rem;

    transition:.3s;

    z-index:5;

}

.review-arrow:hover{

    background:var(--forest);

    color:white;

}

.prev{

    left:-85px;

}

.next{

    right:-85px;

}

@media(max-width:1000px){

    .prev{

        left:-65px;

    }

    .next{

        right:-65px;

    }

}

@media(max-width:900px){

    .review-arrow{

        display:none;

    }

}

.next{

    right:-26px;

}

/*=========================================================
DOTS
=========================================================*/

.review-dots{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:40px;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d3d3d3;

    cursor:pointer;

    transition:.3s;

}

.dot.active{

    background:var(--forest);

    transform:scale(1.35);

}

/*=========================================================
HOVER EFFECT
=========================================================*/

.review-card{

    transition:.4s;

}

.review-card:hover{

    transform:translateY(-6px);

}

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

@media(max-width:900px){

.review-card{

    padding:36px 28px;

}

.review-card p{

    font-size:1rem;

}

.review-arrow{

    display:none;

}

.rating-number{

    font-size:1.5rem;

    letter-spacing:4px;

}

.review-summary h3{

    font-size:2rem;

}

}

.sidebar{

position:fixed;

top:0;

right:0px;

width:300px;

height:100vh;

background:white;

padding:90px 35px;

box-shadow:-10px 0 35px rgba(0,0,0,.1);

transition:.4s;

z-index:9999;

transform:translateX(100%);

    opacity:.98;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

}

.sidebar.active{

    transform:translateX(0);

}

.sidebar nav{

display:flex;

flex-direction:column;

gap:24px;

}

.sidebar a{

font-size:1.05rem;

font-weight:600;

color:var(--forest);

}

.close-menu{

position:absolute;

top:24px;

right:24px;

font-size:2rem;

color:var(--forest);

}

.overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

z-index:999;

 backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    transition:opacity .35s ease;

}

.overlay.active{

opacity:1;

visibility:visible;

}

/*==================================================
LOCATION
==================================================*/

.location{

    background:#ffffff;

}

.location-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:center;

    margin-top:70px;

}

.location-info{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.location-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.location-card span{
    font-size:1.8rem;
    margin-top:6px;
}

.location-card h4{
    font-size:1.9rem;
    line-height:1.2;
    margin-bottom:8px;
}

.distance-list{

    display:flex;

    flex-direction:column;

    gap:0;

}

.distance-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid var(--border);

}

.distance-item strong{

    color:var(--forest);

}

.map-button{

    display:inline-flex;

    width:fit-content;

    padding:16px 28px;

    border-radius:999px;

    background:var(--forest);

    color:white;

    font-weight:600;

    transition:.3s;

}

.map-button:hover{

    background:var(--forest-light);

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.map-button:active{

    transform:translateY(-1px);

}

.map-box{

    overflow:hidden;

    border-radius:28px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.map-box iframe{

    width:100%;

    height:320px;

    border:0;

}

@media(max-width:768px){

.location-grid{

grid-template-columns:1fr;

}

.map-box iframe{

height:400px;

}

}

@media (max-width:768px){

.distance-item{

    flex-direction:column;
    align-items:flex-start;
    gap:6px;

}

.distance-item strong{

    font-size:.95rem;

}

}

@media (max-width:768px){

.map-button{

    width:100%;
    justify-content:center;

}

}

/*=====================================
LIGHTBOX
=====================================*/

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(15,15,15,.95);

    backdrop-filter:blur(12px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

    padding:40px;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    width:auto;

    height:auto;

    max-width:90vw;

    max-height:90vh;

    object-fit:contain;

    border-radius:18px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.lightbox button{

    position:absolute;

    width:56px;

    height:56px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.15);

    color:white;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

.lightbox button:hover{

    background:white;

    color:#222;

}

.lightbox-close{

    top:30px;

    right:30px;

}

.lightbox-prev{

    left:40px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-next{

    right:40px;

    top:50%;

    transform:translateY(-50%);

}

@media(max-width:768px){

.lightbox button{

    width:46px;
    height:46px;
    font-size:1.5rem;

}

.lightbox-prev{

    left:18px;

}

.lightbox-next{

    right:18px;

}

}

/*==================================================
FOOTER
==================================================*/

.footer{

    background:#18342C;

    padding:90px 20px 45px;

    text-align:center;

    color:white;

}

.footer-logo{

    font-family:"DM Serif Display",serif;

    font-size:3.5rem;

    font-weight:400;

    color:white;

    margin-bottom:12px;

}

.footer-subtitle{

    font-size:.8rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    color:rgba(255,255,255,.7);

    margin-bottom:24px;

}

.footer-tagline{

    font-family:"Cormorant Garamond",serif;

    font-size:1.45rem;

    font-style:italic;

    color:rgba(255,255,255,.82);

    margin-bottom:42px;

}

.footer-contact{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:28px;

}

.footer-contact p{

    color:rgba(255,255,255,.86);

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:42px;

}

.booking-link{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border:1px solid rgba(255,255,255,.22);

    border-radius:999px;

    color:white;

    transition:all .35s ease;

}

.booking-link img{

    width:26px;

    height:26px;

    object-fit:contain;

    transition:transform .35s ease;

}

.booking-link:hover{

    background:white;

    color:var(--forest);

    transform:translateY(-4px);

    box-shadow:0 14px 35px rgba(0,0,0,.18);

}

.booking-link:hover img{

    transform:scale(1.1);

}

.footer-links a{

    padding:12px 22px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:999px;

    color:white;

    transition:.35s;

}

.footer-links a:hover{

    background:white;

    color:#18342C;

}

.footer-bottom{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.12);

    color:rgba(255,255,255,.6);

    font-size:.9rem;

}

@media(max-width:768px){

.footer-contact{

    flex-direction:column;

    gap:14px;

}

.footer-links{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

}

}

@media (max-width:768px){

.footer-contact p{

    font-size:.95rem;
    word-break:break-word;

}

}

.footer-email{
    font-size:.9rem;
    overflow-wrap:anywhere;
}

@media (max-width:768px){

.booking-link{

    padding:10px 14px;
    gap:8px;
    font-size:.9rem;

}

.booking-link img{

    width:20px;
    height:20px;

}

}

/*==================================================
FAQ
==================================================*/

.faq-list{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    border-bottom:1px solid rgba(0,0,0,.08);

}

.faq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    font-size:1.12rem;

    font-weight:600;

    color:var(--forest);

}

.faq-question span:first-child{

    max-width:85%;

}

.faq-icon{

    font-size:1.8rem;

    transition:.35s ease;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 0 28px;

    color:#666;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}

.faq-question:hover{

    color:#23473b;

}

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

@media (max-width:768px){

.hero{

    min-height:100svh;

    padding:110px 20px 70px;

}

.hero-content{

    max-width:100%;

    text-align:center;

}

.hero-location{

    font-size:.72rem;

    letter-spacing:.35em;

}

.hero h1{

    font-size:3.1rem;

    line-height:1;

    margin:16px 0 10px;

}

.hero h2{

    font-size:.95rem;

    letter-spacing:.45em;

}

.hero-tagline{

    font-size:1.35rem;

    margin:28px auto 18px;

}

.hero-description{

    max-width:310px;

    margin:0 auto 40px;

    line-height:1.8;

}

.hero-actions{

    flex-direction:column;

    gap:16px;

}

.hero-button,
.hero-explore{

    width:100%;

    max-width:280px;

    justify-content:center;

    margin:auto;

}

}

@media (max-width:768px){

    section{
        padding:60px 0;
    }

}

/*==================================================
SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

    will-change:opacity,transform;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
HERO INTRO
==================================================*/

.hero-location,
.hero h1,
.hero h2,
.hero-tagline,
.hero-description,
.hero-actions{

    opacity:0;
    transform:translateY(35px);

    animation:heroFade .9s cubic-bezier(.22,1,.36,1) forwards;

}

.hero-location{

    animation-delay:.2s;

}

.hero h1{

    animation-delay:.5s;

}

.hero h2{

    animation-delay:.8s;

}

.hero-tagline{

    animation-delay:1.1s;

}

.hero-description{

    animation-delay:1.35s;

}

.hero-actions{

    animation-delay:1.65s;

}

@keyframes heroFade{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero-bg{

    animation:heroZoom 2.5s ease forwards;

}

@keyframes heroZoom{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}

/*==================================================
SCROLL PROGRESS BAR
==================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:3px;

    background:linear-gradient(
        90deg,
        #C8A96A,
        var(--forest)
    );

    z-index:10000;

    transition:width .08s linear;

}

::selection{

    background:#26473D;

    color:white;

}

button:focus-visible,
a:focus-visible{

    outline:3px solid #C8A96A;

    outline-offset:4px;

    border-radius:8px;

}

/*==================================================
SCROLL TO TOP
==================================================*/

.scroll-top{

    position:fixed;

    bottom:28px;

    right:28px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--forest);

    color:white;

    font-size:1.3rem;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top:hover{

    background:var(--forest-light);

    transform:translateY(-4px);

}

@media(max-width:768px){

.scroll-top{

    width:48px;

    height:48px;

    right:18px;

    bottom:18px;

}

}