/*==========================================================
    HOME PAGE
==========================================================*/


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

.hero{

    position:relative;

    height:100vh;

    min-height:850px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    color:#fff;

    background:#241f0c;

}


.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        saturate(.82)

        brightness(.72);

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            rgba(46,38,13,.32),
            rgba(28,23,8,.74)
        );

}


/*==========================================================
    GOLDEN MIST
    Ambient drifting light — same treatment as the tea-house
    forest-mist, tinted with the home page's marigold accent
==========================================================*/

.golden-mist{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

    mix-blend-mode:screen;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(242,210,75,.16),
        transparent 40%),

        radial-gradient(circle at 80% 35%,
        rgba(255,255,255,.10),
        transparent 38%),

        radial-gradient(circle at 50% 100%,
        rgba(242,210,75,.12),
        transparent 55%);

    animation:goldMistFloat 18s ease-in-out infinite;

}


@keyframes goldMistFloat{

    0%{

        transform:translateY(0);

        opacity:.6;

    }

    50%{

        transform:translateY(-20px);

        opacity:.85;

    }

    100%{

        transform:translateY(0);

        opacity:.6;

    }

}


.hero .container{

    position:relative;

    z-index:10;

}


.hero .vertical-jp{

    color:rgba(242,210,75,.65);

}


.hero-content{

    max-width:760px;

}


.hero-content h1{

    color:#fff;

    margin:1.5rem 0;

    font-size:clamp(4.5rem,8vw,7.5rem);

    line-height:.95;

}


.hero-content p{

    max-width:620px;

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

    margin-bottom:2.5rem;

    font-size:1.1rem;

}


.hero-buttons{

    display:flex;

    gap:1.25rem;

    margin-top:2rem;

    flex-wrap:wrap;

}


.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:3rem;

    transform:translateX(-50%);

    letter-spacing:.35em;

    text-transform:uppercase;

    font-size:.75rem;

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

}


.scroll-indicator::after{

    content:"";

    display:block;

    width:1px;

    height:60px;

    margin:.8rem auto 0;

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

}



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

.intro{

    position:relative;

    padding:9rem 0;

}


.intro-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:6rem;

}


.intro-image{

    position:relative;

}


.intro-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    border-radius:var(--radius-xl);

}


.intro-content{

    position:relative;

    max-width:560px;

}


.intro-content h2{

    margin:1.5rem 0 2rem;

}


.intro-content p{

    margin-bottom:1.75rem;

}


.intro .vertical-jp{

    left:-5rem;

}



/*==========================================================
    SECTION HEADING
==========================================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 5rem;

}


.section-heading h2{

    margin:1rem 0 1.75rem;

}


.section-heading p{

    max-width:620px;

    margin:0 auto;

}



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

@media(max-width:1100px){

    .intro-grid{

        gap:4rem;

    }

}


@media(max-width:992px){

    .hero{

        min-height:760px;

    }

    .intro-grid{

        grid-template-columns:1fr;

    }

    .intro-image{

        order:-1;

    }

    .intro-image img{

        height:560px;

    }

    .intro-content{

        max-width:100%;

    }

}


@media(max-width:768px){

    .hero{

        min-height:680px;

    }

    .hero-content h1{

        font-size:clamp(3.2rem,12vw,5rem);

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .intro{

        padding:6rem 0;

    }

    .intro-image img{

        height:420px;

    }

}
/*==========================================================
    PHILOSOPHY
==========================================================*/

.philosophy{

    position:relative;

    padding:9rem 0;

    background:var(--color-background-alt);

}


.philosophy-grid{

    display:grid;

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

    gap:2rem;

}


.philosophy-card{

    position:relative;

    padding:3rem;

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    overflow:hidden;

    transition:var(--transition);

}


.philosophy-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.02)
        );

    opacity:0;

    transition:var(--transition);

}


.philosophy-card:hover{

    transform:translateY(-10px);

}


.philosophy-card:hover::before{

    opacity:1;

}


.philosophy-card h3{

    margin-bottom:1rem;

}


.philosophy-card p{

    margin:0;

}



/*==========================================================
    FEATURED STAYS
==========================================================*/

.featured-stays{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

}


.featured-grid{

    display:grid;

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

    gap:3rem;

}


.stay-card{

    background:var(--color-surface);

    border-radius:var(--radius-xl);

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}


.stay-card:hover{

    transform:translateY(-10px);

}


.stay-card img{

    width:100%;

    height:460px;

    object-fit:cover;

}


.stay-content{

    padding:2.5rem;

}


.stay-content h3{

    margin:1rem 0 1.25rem;

}


.stay-content p{

    margin-bottom:2rem;

}



/*==========================================================
    STAY CARD LINK
==========================================================*/

.stay-content .text-link{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    font-weight:600;

}


.stay-content .text-link:hover{

    transform:translateX(6px);

}



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

@media(max-width:1100px){

    .philosophy-grid{

        gap:1.5rem;

    }

    .featured-grid{

        gap:2rem;

    }

}


@media(max-width:992px){

    .philosophy-grid{

        grid-template-columns:1fr;

    }

    .featured-grid{

        grid-template-columns:1fr;

    }

    .stay-card img{

        height:420px;

    }

}


@media(max-width:768px){

    .philosophy{

        padding:6rem 0;

    }

    .featured-stays{

        padding:6rem 0;

    }

    .philosophy-card{

        min-height:auto;

        padding:2.5rem;

    }

    .stay-card img{

        height:320px;

    }

    .stay-content{

        padding:2rem;

    }

}
/*==========================================================
    HOME DINING
==========================================================*/

.home-dining{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

}


.dining-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:6rem;

}


.dining-content{

    position:relative;

    max-width:560px;

}


.dining-content h2{

    margin:1.5rem 0 2rem;

}


.dining-content p{

    margin-bottom:1.75rem;

}


.dining-image{

    position:relative;

}


.dining-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    border-radius:var(--radius-xl);

}


.home-dining .vertical-jp{

    left:-5rem;

}



/*==========================================================
    TEA HOUSE
==========================================================*/

.tea-preview{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

}


.tea-preview-image{

    margin:4rem auto;

    max-width:1100px;

}


.tea-preview-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:var(--radius-xl);

}


.center-button{

    display:flex;

    justify-content:center;

    margin-top:3rem;

}



/*==========================================================
    IMAGE HOVER
==========================================================*/

.dining-image,

.tea-preview-image{

    overflow:hidden;

}


.dining-image img,

.tea-preview-image img{

    transition:

        transform .9s ease,

        filter .9s ease;

}


.dining-image:hover img,

.tea-preview-image:hover img{

    transform:scale(1.05);

    filter:brightness(.96);

}



/*==========================================================
    BUTTON SPACING
==========================================================*/

.home-dining .btn,

.tea-preview .btn{

    margin-top:1rem;

}



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

@media(max-width:1100px){

    .dining-grid{

        gap:4rem;

    }

}


@media(max-width:992px){

    .dining-grid{

        grid-template-columns:1fr;

    }

    .dining-image{

        order:-1;

    }

    .dining-content{

        max-width:100%;

    }

    .dining-image img{

        height:500px;

    }

    .tea-preview-image img{

        height:500px;

    }

}


@media(max-width:768px){

    .home-dining,

    .tea-preview{

        padding:6rem 0;

    }

    .dining-image img{

        height:380px;

    }

    .tea-preview-image img{

        height:360px;

    }

    .center-button{

        margin-top:2rem;

    }

}
/*==========================================================
    WELLNESS
==========================================================*/

.wellness-preview{

    position:relative;

    padding:9rem 0;

    overflow:hidden;

    background:var(--color-background-alt);

}


.wellness-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}


.wellness-image{

    position:relative;

}


.wellness-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    border-radius:var(--radius-xl);

}


.wellness-content{

    position:relative;

    max-width:560px;

}


.wellness-content h2{

    margin:1.5rem 0 2rem;

}


.wellness-content p{

    margin-bottom:1.75rem;

}


.wellness-preview .vertical-jp{

    right:-5rem;

}




/*==========================================================
    EDITORIAL QUOTE
==========================================================*/

.pull-quote{

    padding:10rem 2rem;

    text-align:center;

}


.pull-quote blockquote{

    max-width:900px;

    margin:0 auto;

}




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

.gallery-preview{

    position:relative;

    padding:9rem 0;

}


.gallery-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

    margin-bottom:4rem;

}


.gallery-item{

    overflow:hidden;

    border-radius:var(--radius-xl);

}


.gallery-item img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.gallery-item:hover img{

    transform:scale(1.06);

    filter:brightness(.96);

}




/*==========================================================
    RESERVATION CTA
==========================================================*/

.reservation-cta{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    color:#fff;

    text-align:center;

    background:

        linear-gradient(

            rgba(15,15,15,.55),

            rgba(15,15,15,.55)

        ),

        url("../images/image12.jpg");

    background-size:cover;

    background-position:center;

}


.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto;

}


.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}


.cta-content p{

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

    max-width:620px;

    margin:0 auto 2.5rem;

}




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

.site-footer{

    padding-top:6rem;

}


.footer-brand p{

    max-width:320px;

}




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

@media(max-width:1100px){

    .wellness-grid{

        gap:4rem;

    }

}


@media(max-width:992px){

    .wellness-grid{

        grid-template-columns:1fr;

    }

    .wellness-image{

        order:-1;

    }

    .wellness-content{

        max-width:100%;

    }

    .wellness-image img{

        height:520px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .wellness-preview,

    .gallery-preview,

    .reservation-cta{

        padding:6rem 0;

    }

    .wellness-image img{

        height:380px;

    }

    .gallery-item img{

        height:300px;

    }

    .pull-quote{

        padding:6rem 1.5rem;

    }

    .cta-content h2{

        font-size:clamp(2.4rem,8vw,3.8rem);

    }

}