@charset "utf-8";
/* CSS Document */

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

.experience-hero{

    position:relative;

    min-height:72vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#000;

}

.experience-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        url("../images/experience-hero.webp")
        center center/cover no-repeat;

    transform:scale(1.03);

}

.experience-hero__overlay{

    position:absolute;

    inset:0;

    background:
linear-gradient(
90deg,
rgba(22,18,12,.62) 0%,
rgba(22,18,12,.35) 38%,
rgba(22,18,12,.12) 65%,
rgba(22,18,12,0) 100%);

}

.experience-hero__container{

    position:relative;

    z-index:2;

    width:min(92%,1200px);

    text-align:center;

    color:#fff;

    padding:140px 0 90px;

}

.experience-hero__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.65rem;

    padding:.45rem 1rem;

    border-radius:999px;

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

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

    backdrop-filter:blur(10px);

    font-size:.82rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:1.6rem;

}

.experience-hero h1{

    font-size:clamp(58px, 6vw, 72px);
	font-family: var(--font-heading);

    line-height:1.08;

    font-weight:300;

    margin-bottom:1.25rem;

    color:#fff;

}

.experience-hero h1 em{

    display: block;
    margin-top: 10px;
    color: #ead6ae;
    font-style: italic;
    font-weight: 400;

}

.experience-hero p{

    max-width:760px;

    margin:0 auto 2.8rem;

    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.85;

}

.experience-hero__actions{

    display:flex;

    justify-content:center;

}

.experience-hero__button{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    padding:17px 34px;

    border-radius:999px;

    background:var(--accent);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.experience-hero__button:hover{

    transform:translateY(-3px);

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

}

.experience-hero__button svg{

    width:18px;

    height:18px;

    stroke:currentColor;

    stroke-width:2;

    fill:none;

}

/* Soft fade into next section */

.experience-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:140px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            #ffffff
        );

}

@media (max-width:768px){

.experience-hero{

    min-height:68vh;

}

.experience-hero__container{

    padding:120px 20px 80px;

}

.experience-hero h1{

    font-size:2.4rem;
	line-height:1.15;

}

.experience-hero p{

    font-size:1rem;

    line-height:1.8;

}

.experience-hero__button{

    max-width:280px;
	margin:auto;

    justify-content:center;

}

.experience-hero::after{

    height:80px;

}

}
/* ==========================================
   VILLAGE INTRO
========================================== */

.village-intro{

    padding:120px 0;

    background:#fff;

}

.village-intro__container{

    width:min(92%,1200px);
    margin:auto;

    display:grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
    gap:30px;
    align-items:center;

}

.village-intro__content{
    min-width:0;
}

.village-intro__visual{
    min-width:0;
}

.village-intro__content h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.village-intro__content h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400;

}

.village-intro__text p{

    margin-bottom:24px;

    color:#666;

    line-height:1.95;

    font-size:1.08rem;

}

.village-intro__image-wrap{
    overflow:hidden;
    border-radius:28px;
}

.village-intro__image-wrap img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
}

.village-intro__image-wrap:hover img{

    transform:scale(1.04);

}

@media (max-width:991px){

.village-intro{

    padding:80px 0;

}

.village-intro__container{

    grid-template-columns:1fr;
    gap:40px;

}

.village-intro__visual{

    order:-1;
    width:100%;
    max-width:520px;
    margin:0 auto;

}

.village-intro__image-wrap{

    width:100%;
    border-radius:24px;

}

.village-intro__image-wrap img{

    width:100%;
    height:420px;
    object-fit:cover;
    display:block;

}

.village-intro__content{

    text-align:center;

}

}

@media (max-width:768px){

    .village-intro__container,
    .experience-block__container{

        display:flex;
        flex-direction:column;
        gap:36px;

    }

    .village-intro__visual,
    .experience-block__visual{

        width:100%;
        max-width:none;
        order:-1;

    }

    .village-intro__image-wrap,
    .experience-block__image{

        width:100%;
        margin:0;

    }

    .village-intro__image-wrap img,
    .experience-block__image img{

        width:100%;
        height:320px;
        display:block;
        object-fit:cover;
        border-radius:24px;

    }

    .village-intro__content,
    .experience-block__content{

        width:100%;
        text-align:center;

    }

    .experience-highlight{

        text-align:left;

    }

}


/* ==========================================
   GUEST
========================================== */

.guest-quote{

padding:100px 20px;
background:#fff;
text-align:center;

}

.guest-quote .container{

max-width:760px;
margin:auto;

}

.guest-quote p{

font-family:"Cormorant Garamond",serif;
font-size:2rem;
font-style:italic;
line-height:1.5;
color:var(--accent);

}

.guest-quote span{

display:block;
margin-top:25px;
letter-spacing:2px;
font-size:.85rem;
text-transform:uppercase;
color:#999;

}

/* ==========================================
   EXPERIENCE BLOCK
========================================== */

.experience-block{

    padding:120px 0;

    background:#fff;

}

.experience-block:nth-child(even){

    background:#faf8f4;

}

.experience-block__container{

    width:min(92%,1200px);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.experience-block__visual{

    overflow:hidden;

    border-radius:30px;

}

.experience-block__image{

    margin:0;

}

.experience-block__image img{

    width:100%;

    display:block;

    border-radius:30px;

    transition:.8s;

}

.experience-block__image:hover img{

    transform:scale(1.05);

}

.experience-block__content h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.experience-block__content h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400;

}

.experience-block__content p{

    color:#666;

    line-height:1.95;

    margin-bottom:22px;

}

.experience-highlight{

    margin-top:40px;

    padding:28px;

    background:#f7f4ef;

    border-left:4px solid var(--accent);

    border-radius:18px;

}

.experience-highlight strong{

    display:block;

    margin-bottom:10px;

    color:#333;

}

/* Alternate Layout */

.experience-block--reverse .experience-block__visual{

    order:2;

}

.experience-block--reverse .experience-block__content{

    order:1;

}

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

@media (max-width:991px){

.experience-block{

    padding:80px 0;

}

.experience-block__container{

    display:grid;
    grid-template-columns:1fr;
    gap:36px;

}

.experience-block__visual{

    width:100%;
    order:-1;

}

.experience-block__image{

    margin:0;

}

.experience-block__image img{

    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    border-radius:24px;

}

.experience-block__content{

    width:100%;
    text-align:center;

}

.experience-highlight{

    margin-top:28px;
    text-align:left;

}

.experience-block--reverse .experience-block__visual{

    order:-1;

}

}

@media (max-width:768px){

.experience-block{

    padding:60px 0;

}

.experience-block__container{

    gap:28px;

}

.experience-block__image img{

    height:320px;

}

.experience-block__content h2{

    font-size:2.4rem;
    margin:16px 0 20px;

}

.experience-block__content p{

    font-size:1rem;
    line-height:1.8;

}

}

/* ==========================================================
   WHY GUESTS KEEP RETURNING
========================================================== */

.experience-benefits{

    padding:120px 0;
    background:#faf8f4;

}

.experience-benefits .container{

    width:min(92%,1100px);
    margin:auto;
    text-align:center;

}

.benefits-intro{

    max-width:760px;
    margin:30px auto 70px;
    color:#666;
    line-height:1.9;

}

.experience-benefits h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.experience-benefits h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400;

}

.benefits-columns{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:60px;
    text-align:left;

}

.benefits-list{

    list-style:none;
    margin:0;
    padding:0;

}

.benefits-list li{

    position:relative;

    padding:0 0 22px 42px;

    font-size:1.05rem;

    line-height:1.8;

    color:#555;

    border-bottom:1px solid #ece8df;

    margin-bottom:22px;

}

.benefits-list li:last-child{

    margin-bottom:0;
    border-bottom:none;

}

.benefits-list li::before{

    content:"✓";

    position:absolute;

    left:0;
    top:2px;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#e8efe5;

    color:#4d6a4d;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.9rem;
    font-weight:700;

}

@media(max-width:768px){

.experience-benefits{

    padding:80px 0;

}

.benefits-columns{

    grid-template-columns:1fr;
    gap:10px;

}

.benefits-intro{

    margin-bottom:45px;

}

.benefits-list li{

    font-size:1rem;
    padding-left:38px;

}

}
/* ==========================================
   EXPERIENCE GALLERY
========================================== */

.experience-gallery{

    padding:120px 0;

    background:#fff;

}

.experience-gallery__container{

    width:min(92%,1280px);

    margin:auto;

}

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

.experience-gallery__header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.experience-gallery__header h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.experience-gallery__header h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400;

}

.experience-gallery__header p{

    color:#666;

    line-height:1.9;

    font-size:1.05rem;

}


/* ===========================
   GRID
=========================== */

.experience-gallery__grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-auto-rows:270px;

    gap:22px;

}


/* ===========================
   ITEMS
=========================== */

.experience-gallery__item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    display:block;

    background:#eee;

}

.experience-gallery__item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.experience-gallery__item:hover img{

    transform:scale(1.08);

}


/* Dark Overlay */

.experience-gallery__item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,0),
        rgba(0,0,0,.18)
    );

    opacity:0;

    transition:.35s;

    z-index:1;

}

.experience-gallery__item:hover::before{

    opacity:1;

}


/* Large Image */

.experience-gallery__item--large{

    grid-row:span 2;

}


/* ===========================
   ZOOM ICON
=========================== */

.experience-gallery__item::after{

    content:"";

    position:absolute;

    inset:0;

    margin:auto;

    width:56px;

    height:56px;

    border-radius:50%;

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

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:center;

    background-size:24px;

    opacity:0;

    transform:scale(.8);

    transition:.35s;

    z-index:2;

}

.experience-gallery__item:hover::after{

    opacity:1;

    transform:scale(1);

}


/* ===========================
   MORE BUTTON
=========================== */

.experience-gallery__more{

    position:absolute;

    left:30px;

    bottom:30px;

    z-index:3;

    color:#fff;

}

.experience-gallery__more strong{

    display:block;

    font-size:1.2rem;

    margin-bottom:4px;

}

.experience-gallery__more small{

    font-size:.92rem;

    opacity:.85;

}


/* ===========================
   IMAGE SHADOW
=========================== */

.experience-gallery__item{

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

}


@media (max-width:991px){

.experience-gallery{

    padding:80px 0;

}

.experience-gallery__grid{

    grid-template-columns:1fr;

    grid-auto-rows:260px;

}

.experience-gallery__item--large{

    grid-row:auto;

}

}

@media (max-width:768px){

.experience-gallery__header{

    margin-bottom:45px;

}

.experience-gallery__header h2{

    font-size:2.5rem;

}

.experience-gallery__grid{

    gap:18px;
    grid-auto-rows:220px;

}

}

/* =====================================================
   EXPERIENCE ENDING
===================================================== */

.experience-ending{

padding:120px 20px;
background:#faf8f4;
text-align:center;

}

.experience-ending .container{

max-width:820px;
margin:auto;

}

.experience-ending p{

margin-top:35px;
line-height:2;
color:#666;

}

.experience-ending h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.experience-ending h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400

}

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

.faq-section{

    padding:120px 0;

    background:#fff;

}


.faq-container{

    width:min(92%,900px);

    margin:auto;

}


/* HEADER */

.faq-header{

    text-align:center;

    margin-bottom:70px;

}

.faq-header h2{

  margin: 0;
  color: var(--bav-blue-deep);
  font-family: var(--font-heading);
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;

}

.faq-header h2 em{

     display: block;

    margin-top: 8px;

    color: var(--bav-blue);

    font-weight: 400;

}

.faq-header p{

    max-width:700px;

    margin:30px auto;

    color:#666;

    line-height:1.9;

}


/* FAQ LIST */

.faq-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ITEM */

.faq-item{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #ece7df;

    transition:.3s ease;

}


.faq-item:hover{

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

}


.faq-item[open]{

    border-color:rgba(var(--accent-rgb),.20);

}


/* QUESTION */

.faq-item summary{

    list-style:none;

    cursor:pointer;

    position:relative;

    padding:24px 70px 24px 30px;

    font-size:1.08rem;

    font-weight:600;

    color:#222;

    transition:.3s;

}


.faq-item summary::-webkit-details-marker{

    display:none;

}


.faq-item summary:hover{

    color:var(--accent);

}


/* PLUS ICON */

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    width:36px;

    height:36px;

    border-radius:50%;

    background:#f4f1eb;

    color:#555;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.35rem;

    font-weight:300;

    transition:.35s;

}


.faq-item[open] summary::after{

    content:"–";

    background:var(--accent);

    color:#fff;

}


/* ANSWER */

.faq-content{

    padding:0 30px 28px;

    animation:faqFade .25s ease;

}


.faq-content p{

    margin:0;

    color:#666;

    line-height:1.9;

    font-size:1rem;

}


/* ANIMATION */

@keyframes faqFade{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);


    }

}


/* =====================================================
   FAQ SECTION — MOBILE
===================================================== */

@media (max-width:991px){

.faq-section{

    padding:80px 0;

}

.faq-header{

    margin-bottom:50px;

}

}

@media (max-width:768px){

.faq-section{

    padding:60px 0;

}

.faq-header{

    margin-bottom:40px;

}

.faq-header h2{

    font-size:2rem;

}

.faq-header p{

    font-size:.95rem;

}

.faq-list{

    gap:14px;

}

.faq-item summary{

    padding:18px 54px 18px 20px;
    font-size:.98rem;
    line-height:1.5;

}

.faq-item summary::after{

    right:14px;
    width:30px;
    height:30px;
    font-size:1.2rem;

}

.faq-content{

    padding:0 20px 22px;

}

.faq-content p{

    font-size:.95rem;

}

}