:root{
    --ink:#0E2A28;
    --pine:#152F27;
    --sea:#17534C;
    --sea-light:#3C8079;
    --sand:#F3ECDD;
    --foam:#FBF8F1;
    --brass:#AD8A46;
    --brass-light:#D9BE85;
    --ink-soft:#5B6E69;
    --line: rgba(173,138,70,0.35);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    background:var(--foam);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
}

h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
}

.italic{font-style:italic;font-weight:400;}

a{color:inherit;text-decoration:none;}

img{max-width:100%;display:block;}

.wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
}

.eyebrow{
    font-family:'Work Sans',sans-serif;
    font-size:12.5px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--brass);
    font-weight:600;
}

/* focus visibility */
a:focus-visible, button:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:3px;
}

/* ============ NAV ============ */
.nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:26px 0;
    transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
}
.nav.scrolled{
    background:rgba(251,248,241,0.92);
    backdrop-filter:blur(10px);
    padding:16px 0;
    box-shadow:0 1px 0 var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.nav-logo{
    font-family:'Fraunces',serif;
    font-size:20px;
    letter-spacing:0.04em;
    color:var(--foam);
    transition:color .5s ease;
    display:flex;
    align-items:center;
    gap:10px;
}
.brand-mark{
    height:40px;
    width:auto;
    object-fit:contain;
    flex-shrink:0;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}
.nav.scrolled .nav-logo{color:var(--ink);}
.nav-logo span{
    font-size:10px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--brass-light);
    font-family:'Work Sans',sans-serif;
}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{
    font-size:13.5px;
    letter-spacing:0.04em;
    color:var(--foam);
    opacity:0.88;
    transition:color .5s ease, opacity .3s ease;
    padding-bottom:3px;
    border-bottom:1px solid transparent;
}
.nav.scrolled .nav-links a{color:var(--ink);}
.nav-links a:hover{opacity:1;border-color:var(--brass);}
.nav-cta{
    font-size:13px;
    letter-spacing:0.05em;
    color:var(--foam);
    border:1px solid rgba(251,248,241,0.5);
    padding:9px 20px;
    border-radius:2px;
    transition:all .4s ease;
}
.nav.scrolled .nav-cta{color:var(--ink);border-color:var(--brass);}
.nav-cta:hover{background:var(--brass);border-color:var(--brass);color:var(--foam)!important;}
.nav-burger{display:none;}

.lang-switch{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:20px;
}
.lang-sep{
    color:rgba(251,248,241,0.3);
    font-size:11px;
    transition:color .5s ease;
}
.nav.scrolled .lang-sep{color:rgba(14,42,40,0.25);}
.lang-btn{
    background:none;
    border:none;
    font-family:'Work Sans',sans-serif;
    font-size:12px;
    letter-spacing:0.06em;
    color:rgba(251,248,241,0.55);
    cursor:pointer;
    padding:2px 0;
    transition:color .3s ease;
}
.nav.scrolled .lang-btn{color:rgba(14,42,40,0.55);}
.lang-btn:hover{color:var(--brass-light);}
.nav.scrolled .lang-btn:hover{color:var(--brass);}
.lang-btn.active{color:var(--foam);font-weight:600;}
.nav.scrolled .lang-btn.active{color:var(--ink);}

/* ============ HERO ============ */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    background:var(--ink);
    padding-bottom:120px;
    overflow:hidden;
}
.hero-slides{
    position:absolute; inset:0;
    z-index:0;
}
.hero-slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 2.2s ease;
}
.hero-slide.active{opacity:1;}
.hero-overlay{
    position:absolute; inset:0;
    z-index:1;
    background:
        radial-gradient(ellipse 80% 60% at 70% 8%, rgba(217,190,133,0.22), transparent 60%),
        linear-gradient(200deg, rgba(10,31,29,0.82) 0%, rgba(18,62,56,0.62) 32%, rgba(26,85,76,0.48) 58%, rgba(44,114,104,0.44) 82%, rgba(74,145,136,0.4) 100%);
}
.hero::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 68px),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 22px);
    mix-blend-mode:overlay;
    opacity:0.7;
}
.hero-glow{
    position:absolute;
    top:-10%; right:-8%;
    width:60%; height:70%;
    z-index:1;
    background:radial-gradient(circle, rgba(217,190,133,0.18), transparent 65%);
    filter:blur(10px);
}
.hero-content{position:relative;z-index:2;color:var(--foam);}
.hero-dots{
    position:absolute;
    bottom:44px; right:32px;
    z-index:2;
    display:flex;
    gap:10px;
}
.hero-dots .dot{
    width:26px; height:2px;
    background:rgba(251,248,241,0.35);
    cursor:pointer;
    transition:background .3s ease;
    border:none;
    padding:0;
}
.hero-dots .dot.active{background:var(--brass-light);}
.hero-eyebrow{
    display:flex;align-items:center;gap:14px;
    color:var(--brass-light);
    margin-bottom:26px;
    animation:fadeUp 1s ease both;
}
.hero-eyebrow .rule{width:44px;height:1px;background:var(--brass-light);}
h1.hero-title{
    font-size:clamp(48px, 8vw, 108px);
    line-height:0.98;
    max-width:900px;
    color:var(--foam);
    animation:fadeUp 1.1s .1s ease both;
}
h1.hero-title em{
    display:block;
    font-style:italic;
    font-weight:400;
    color:var(--brass-light);
}
.hero-sub{
    max-width:440px;
    margin-top:28px;
    font-size:17px;
    color:rgba(251,248,241,0.82);
    font-weight:300;
    animation:fadeUp 1.2s .2s ease both;
}
.hero-actions{
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:28px;
    animation:fadeUp 1.3s .3s ease both;
}
.btn-primary{
    background:var(--brass);
    color:var(--ink);
    padding:16px 34px;
    font-size:13.5px;
    letter-spacing:0.05em;
    border-radius:2px;
    transition:background .3s ease, transform .3s ease;
    display:inline-block;
}
.btn-primary:hover{background:var(--brass-light);transform:translateY(-2px);}
.btn-ghost-link{
    font-size:13.5px;
    letter-spacing:0.03em;
    color:var(--foam);
    border-bottom:1px solid rgba(251,248,241,0.4);
    padding-bottom:3px;
    transition:border-color .3s ease;
}
.btn-ghost-link:hover{border-color:var(--brass-light);}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
}

.hero-wave{
    position:absolute;
    bottom:-2px; left:0; right:0;
    line-height:0;
    z-index:2;
}
.hero-wave svg{width:100%;height:auto;display:block;}

/* ============ INTRO ============ */
.intro{
    padding:150px 0 120px;
    background:var(--foam);
}
.intro-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:80px;
    align-items:start;
}
.intro-quote{
    font-size:clamp(28px,3vw,38px);
    line-height:1.28;
    font-style:italic;
    font-weight:400;
    color:var(--sea);
    position:sticky;
    top:140px;
}
.intro-quote .mark{color:var(--brass);font-style:normal;}
.intro-body p{
    color:var(--ink-soft);
    font-size:16.5px;
    margin-bottom:22px;
    max-width:520px;
}
.intro-facts{
    margin-top:36px;
    border-top:1px solid var(--line);
}
.fact-row{
    display:flex;
    gap:24px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
}
.fact-row .tick{color:var(--brass);font-size:15px;flex-shrink:0;margin-top:2px;}
.fact-row .fact-title{font-family:'Fraunces',serif;font-size:17px;color:var(--ink);min-width:190px;}
.fact-row .fact-desc{color:var(--ink-soft);font-size:15px;}

/* ============ SECTION HEADS ============ */
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:56px;
    gap:40px;
    flex-wrap:wrap;
}
.section-head h2{
    font-size:clamp(32px,4vw,52px);
    color:var(--ink);
}
.section-head .sh-sub{
    max-width:340px;
    color:var(--ink-soft);
    font-size:15px;
    padding-bottom:6px;
}

/* ============ ROOMS ============ */
.rooms{
    padding:110px 0;
    background:var(--sand);
}
.room-showcase{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:32px;
    align-items:stretch;
}
.room-main-photo{
    position:relative;
    min-height:560px;
    border-radius:3px;
    overflow:hidden;
}
.room-main-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(14,42,40,0.6) 100%);
}
.scene-sea{background:
    linear-gradient(165deg, rgba(220,238,233,0.35) 0%, rgba(62,138,128,0.45) 55%, rgba(20,69,62,0.65) 100%),
    url('https://images.unsplash.com/photo-1501117716987-c8c394bb29df?auto=format&fit=crop&w=1200&q=80') center / cover no-repeat;
    background-blend-mode: multiply, normal;}
.scene-pine{background:
    linear-gradient(160deg, rgba(231,226,206,0.3) 0%, rgba(76,122,84,0.45) 55%, rgba(28,59,42,0.68) 100%),
    url('https://images.unsplash.com/photo-1780840883415-6babdeaf9d70?auto=format&fit=crop&w=1200&q=80') center / cover no-repeat;
    background-blend-mode: multiply, normal;}
.room-main-photo .lines, .thumb .lines{
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(180deg, transparent, transparent 26px, rgba(255,255,255,0.12) 27px);
    opacity:0.5;
}
.room-label{
    position:absolute;bottom:22px;left:26px;z-index:2;
    color:var(--foam);
}
.room-label .eyebrow{color:var(--brass-light);}
.room-label h3{font-size:26px;margin-top:6px;color:var(--foam);}

.room-details{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--foam);
    padding:38px 34px;
    border-radius:3px;
}
.room-details > p{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px;}
.room-tags{display:flex;flex-wrap:wrap;gap:8px;}
.room-tags span{
    font-size:11.5px;
    letter-spacing:0.03em;
    color:var(--sea);
    border:1px solid var(--line);
    padding:5px 11px;
    border-radius:20px;
}
.room-thumbs{
    display:flex;
    gap:14px;
    margin-top:30px;
}
.thumb{
    position:relative;
    flex:1;
    height:150px;
    border-radius:3px;
    overflow:hidden;
}
.thumb::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(14,42,40,0.62) 100%);
}
.thumb span{
    position:absolute; bottom:12px; left:14px; right:14px;
    z-index:2;
    color:var(--foam);
    font-size:12.5px;
    letter-spacing:0.02em;
    line-height:1.3;
}

/* ============ LOCATION ============ */
.location-section{
    padding:130px 0 120px;
    background:var(--ink);
    color:var(--foam);
    position:relative;
}
.location-section .eyebrow{color:var(--brass-light);}
.location-section .section-head h2{color:var(--foam);}
.location-section .sh-sub{color:rgba(251,248,241,0.6);}

.location-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:start;
}
.location-text p{
    color:rgba(251,248,241,0.72);
    font-size:16px;
    max-width:420px;
    margin-bottom:20px;
}
.location-text .mini-tags{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;
}
.location-text .mini-tags span{
    font-size:11.5px;letter-spacing:0.03em;
    color:var(--brass-light);
    border:1px solid rgba(251,248,241,0.22);
    padding:5px 11px;border-radius:20px;
}

.distance-list{list-style:none;}
.distance-list li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    padding:19px 0;
    border-bottom:1px solid rgba(251,248,241,0.15);
}
.distance-list li:first-child{padding-top:0;}
.distance-list .place{
    font-family:'Fraunces',serif;
    font-size:19px;
    color:var(--foam);
}
.distance-list .place small{
    display:block;
    font-family:'Work Sans',sans-serif;
    font-size:12.5px;
    color:rgba(251,248,241,0.5);
    margin-top:3px;
    letter-spacing:0.01em;
}
.distance-list .dist{
    font-size:14.5px;
    color:var(--brass-light);
    white-space:nowrap;
    letter-spacing:0.02em;
}

/* ============ SPLIT SECTIONS (dining / wellness) ============ */
.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:640px;
}
.split-scene{position:relative;overflow:hidden;}
.split-scene .lines{
    position:absolute;inset:0;
    background-image:repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255,255,255,0.06) 31px);
}
.scene-dining{background:
    linear-gradient(200deg, rgba(244,236,217,0.25) 0%, rgba(140,106,69,0.42) 55%, rgba(46,36,26,0.7) 100%),
    url('https://images.unsplash.com/photo-1756680967373-c3205a8a8b31?auto=format&fit=crop&w=1400&q=80') center / cover no-repeat;
    background-blend-mode: multiply, normal;}
.scene-wellness{background:
    linear-gradient(200deg, rgba(228,243,240,0.25) 0%, rgba(63,143,134,0.4) 55%, rgba(20,60,56,0.68) 100%),
    url('https://images.unsplash.com/photo-1635122212082-c4b6f108f36a?auto=format&fit=crop&w=1400&q=80') center / cover no-repeat;
    background-blend-mode: multiply, normal;}
.split-text{
    background:var(--foam);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 90px;
}
.split-text h2{font-size:clamp(30px,3.6vw,44px);margin:14px 0 22px;color:var(--ink);}
.split-text p{color:var(--ink-soft);font-size:16px;max-width:440px;margin-bottom:18px;}
.menu-list{margin-top:22px;list-style:none;}
.menu-list li{
    display:flex;justify-content:space-between;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
    color:var(--ink);
}
.menu-list li span:last-child{color:var(--ink-soft);font-style:italic;}

/* ============ GALLERY ============ */
.gallery{
    padding:110px 0;
    background:var(--ink);
}
.gallery .eyebrow{color:var(--brass-light);}
.gallery .section-head h2{color:var(--foam);}
.gallery .sh-sub{color:rgba(251,248,241,0.6);}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:160px;
    grid-auto-flow:dense;
    gap:14px;
}
.g-item{
    position:relative;
    border-radius:3px;
    overflow:hidden;
    cursor:pointer;
    background-size:cover;
    background-position:center;
    transition:transform .5s ease;
}
.g-item:hover{transform:scale(1.015);}
.g-item::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(14,42,40,0.68) 100%);
    opacity:0;
    transition:opacity .35s ease;
}
.g-item:hover::after{opacity:1;}
.g-item span{
    position:absolute; bottom:14px; left:16px; right:16px;
    z-index:2;
    color:var(--foam);
    font-size:13px;
    letter-spacing:0.02em;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .35s ease, transform .35s ease;
}
.g-item:hover span{opacity:1;transform:translateY(0);}
.g-big{grid-column:span 2;grid-row:span 2;}
.g-wide{grid-column:span 2;}
.g-tall{grid-row:span 2;}

.lightbox{
    position:fixed; inset:0;
    background:rgba(14,42,40,0.95);
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    z-index:1000;
    padding:40px;
}
.lightbox.active{display:flex;}
.lightbox img{
    max-width:90vw;
    max-height:78vh;
    object-fit:contain;
    border-radius:2px;
}
.lightbox-caption{
    color:var(--foam);
    margin-top:20px;
    font-size:14px;
    letter-spacing:0.03em;
    text-align:center;
}
.lightbox-close{
    position:absolute; top:28px; right:34px;
    background:none;
    border:none;
    color:var(--foam);
    font-size:36px;
    line-height:1;
    cursor:pointer;
    font-family:'Work Sans',sans-serif;
    transition:color .3s ease;
}
.lightbox-close:hover{color:var(--brass-light);}

/* ============ BOOKING ============ */
.booking{
    padding:130px 0;
    background:var(--sand);
}
.booking-card{
    background:var(--ink);
    color:var(--foam);
    border-radius:4px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    overflow:hidden;
}
.booking-left{padding:70px 64px;}
.booking-left .eyebrow{color:var(--brass-light);}
.booking-left h2{color:var(--foam);font-size:clamp(30px,3.4vw,42px);margin:14px 0 20px;}
.booking-left p{color:rgba(251,248,241,0.68);max-width:420px;margin-bottom:34px;}
.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.booking-form .full{grid-column:1/-1;}
.booking-form label{
    display:block;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--brass-light);margin-bottom:8px;
}
.booking-form input{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(251,248,241,0.3);
    color:var(--foam);
    font-family:'Work Sans',sans-serif;
    font-size:15px;
    padding:8px 0;
}
.booking-form input::placeholder{color:rgba(251,248,241,0.35);}
.booking-form input:focus{outline:none;border-color:var(--brass);}
.booking-form input::-webkit-calendar-picker-indicator{
    filter:invert(1) brightness(1.6);
    opacity:0.9;
    cursor:pointer;
}
.booking-form input::-webkit-inner-spin-button,
.booking-form input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.booking-form input[type="number"]{
    -moz-appearance:textfield;
}
.booking-submit{
    margin-top:34px;
    background:var(--brass);
    color:var(--ink);
    border:none;
    padding:15px 32px;
    font-size:13.5px;
    letter-spacing:0.05em;
    border-radius:2px;
    cursor:pointer;
    transition:background .3s ease;
    font-family:'Work Sans',sans-serif;
}
.booking-submit:hover{background:var(--brass-light);}

.booking-right{
    position:relative;
    background:linear-gradient(200deg,#123E38,#2C7268);
    padding:70px 56px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.coast-map{width:100%;height:auto;opacity:0.9;}
.contact-block{margin-top:30px;}
.contact-block .eyebrow{color:var(--brass-light);margin-bottom:10px;display:block;}
.contact-block p{color:rgba(251,248,241,0.8);font-size:14.5px;line-height:1.8;}

/* ============ FOOTER ============ */
footer{
    padding:56px 0 40px;
    background:var(--foam);
    border-top:1px solid var(--line);
}
.footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}
.footer-logo{
    font-family:'Fraunces',serif;
    font-size:18px;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:10px;
}
.footer-mark{
    height:50px;
    width:auto;
    box-shadow:none;
    filter:none;
}
.footer-links{display:flex;gap:26px;list-style:none;}
.footer-links a{font-size:13px;color:var(--ink-soft);}
.footer-links a:hover{color:var(--brass);}
.footer-copy{font-size:12.5px;color:var(--ink-soft);margin-top:22px;text-align:center;}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media(prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal, .hero-eyebrow, h1.hero-title, .hero-sub, .hero-actions{
        opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
    }
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
    .nav-links{display:none;}
    .lang-switch{margin-left:12px;}
    .intro-grid{grid-template-columns:1fr;gap:40px;}
    .intro-quote{position:static;}
    .room-showcase{grid-template-columns:1fr;}
    .room-main-photo{min-height:340px;}
    .location-grid{grid-template-columns:1fr;gap:36px;}
    .split{grid-template-columns:1fr;}
    .split-text{padding:60px 36px;}
    .booking-card{grid-template-columns:1fr;}
    .booking-left{padding:50px 36px;}
    .booking-right{padding:50px 36px;}
    h1.hero-title{font-size:clamp(38px,11vw,64px);}
    .hero-dots{right:20px;bottom:28px;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}
    .g-big{grid-column:span 2;grid-row:span 2;}
    .g-wide{grid-column:span 2;}
}
@media(max-width:600px){
    .wrap{padding:0 20px;}
    .booking-form{grid-template-columns:1fr;}
    .footer-grid{flex-direction:column;text-align:center;}
    .gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px;}
    .g-big,.g-wide,.g-tall{grid-column:span 1;grid-row:span 1;}
}

.booking-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    padding: 0;
}

.booking-right .booking-map {
    display: block;
    flex: none;
    width: 100%;
    max-width: none;
    height: 400px;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.booking-right .booking-contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    padding: 28px 24px;
    text-align: left;
}

.booking-right .contact-block {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
}

.booking-right .contact-block .eyebrow {
    display: block;
    margin-bottom: 10px;
}

.booking-right .contact-block p {
    display: block;
    margin: 0 0 8px;
    line-height: 1.6;
}

.booking-right .contact-block p:last-child {
    margin-bottom: 0;
}

.booking-right .contact-block a {
    overflow-wrap: anywhere;
}