/* ============================================================
   LE JARDIN D'EDEN — shared stylesheet
   Theme: Garden of Eden luxury · emerald + brass gold + ivory
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:#0a1b13;          /* deepest background */
  --green:#0f2a1e;        /* primary surface   */
  --green-2:#16382a;      /* raised surface    */
  --green-3:#1d4633;      /* hover surface     */
  --gold:#c9a24b;         /* brass accent      */
  --gold-soft:#e0c482;
  --ivory:#f1ece0;        /* main text         */
  --sage:#9db8a6;         /* muted text        */
  --line:rgba(201,162,75,.22);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--ivory);
  line-height:1.7;
  font-weight:300;
  letter-spacing:.2px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--sans);font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;font-size:.72rem;color:var(--gold);
  display:inline-block;margin-bottom:18px;
}
.eyebrow::before{content:"";display:inline-block;width:30px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:14px}
.lead{color:var(--sage);font-size:1.05rem;max-width:62ch}

/* ---- Buttons ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.74rem;
  padding:15px 30px;border:1px solid var(--gold);
  color:var(--gold);background:transparent;cursor:pointer;
  transition:.45s var(--ease);position:relative;overflow:hidden;
}
.btn::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:.45s var(--ease);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::after{transform:scaleX(1)}
.btn--solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--solid::after{background:var(--ivory)}
.btn--solid:hover{color:var(--ink)}

/* ---- Header / Nav ------------------------------------------ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,52px);
  transition:.4s var(--ease);
}
.site-header.scrolled{
  background:rgba(8,20,14,.92);backdrop-filter:blur(12px);
  padding:14px clamp(20px,4vw,52px);box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;flex-direction:column;line-height:1;z-index:101}
.brand b{font-family:var(--serif);font-size:1.32rem;letter-spacing:.04em;font-weight:500}
.brand small{font-family:var(--sans);font-size:.6rem;letter-spacing:.46em;
  text-transform:uppercase;color:var(--gold);margin-top:6px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ivory);position:relative;padding:6px 0;transition:.3s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:0;background:var(--gold);transition:.35s var(--ease)}
.nav a:not(.btn):hover{color:var(--gold-soft)}
.nav a:not(.btn):hover::after,.nav a.active::after{width:100%}
.nav a.active{color:var(--gold)}

/* dropdown */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;background:none;
  border:none;color:var(--ivory);font-family:var(--sans)}
.drop-toggle svg{transition:.3s}
.has-drop:hover .drop-toggle svg{transform:rotate(180deg)}
.drop{position:absolute;top:130%;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--green-2);border:1px solid var(--line);min-width:230px;padding:10px;
  opacity:0;visibility:hidden;transition:.32s var(--ease);box-shadow:var(--shadow)}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:11px 16px;text-transform:none;letter-spacing:.04em;
  font-size:.9rem;border-radius:2px}
.drop a::after{display:none}
.drop a:hover{background:var(--green-3);color:var(--gold-soft)}

/* language toggle */
.lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:40px;
  overflow:hidden;font-size:.7rem;letter-spacing:.12em}
.lang button{background:none;border:none;color:var(--sage);padding:7px 13px;cursor:pointer;
  font-family:var(--sans);font-weight:500;transition:.3s;text-transform:uppercase}
.lang button.on{background:var(--gold);color:var(--ink)}

/* burger */
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;
  cursor:pointer;z-index:101;padding:6px}
.burger span{width:28px;height:2px;background:var(--ivory);transition:.35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- Hero --------------------------------------------------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 18s var(--ease) infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,20,14,.55),rgba(8,20,14,.4) 40%,rgba(8,20,14,.96))}
.hero__inner{max-width:880px;padding:120px 24px 60px;animation:rise 1.1s var(--ease) both}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:400;letter-spacing:.01em}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lead{margin:26px auto 38px;color:#d9d2c4;font-size:1.12rem}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scrolldown{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:var(--sage);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase}
.scrolldown::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;
  background:linear-gradient(var(--gold),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* page banner (interior pages) */
.banner{position:relative;height:62vh;min-height:430px;display:flex;align-items:flex-end;overflow:hidden}
.banner__bg{position:absolute;inset:0;z-index:-2}
.banner__bg img{width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,20,14,.5),rgba(8,20,14,.9))}
.banner .wrap{padding-bottom:54px}
.banner h1{font-size:clamp(2.4rem,6vw,4.3rem)}
.banner h1 em{font-style:italic;color:var(--gold-soft)}
.banner .lead{margin-top:14px}

/* ---- Sections ----------------------------------------------- */
section{position:relative}
.section{padding:clamp(70px,9vw,130px) 0}
.section--tint{background:
  radial-gradient(120% 80% at 80% 0%,rgba(201,162,75,.06),transparent 60%),var(--green)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split--rev .split__media{order:2}
.split h2{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:22px}
.split p+p{margin-top:16px}
.split__media{position:relative}
.split__media img{width:100%;height:100%;max-height:560px;object-fit:cover;border:1px solid var(--line)}
.split__media::before{content:"";position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--gold);z-index:-1;opacity:.5}

.section-head{text-align:center;max-width:680px;margin:0 auto clamp(40px,5vw,64px)}
.section-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.section-head .lead{margin:18px auto 0}

/* feature cards */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--green-2);border:1px solid var(--line);padding:38px 32px;
  transition:.45s var(--ease)}
.card:hover{transform:translateY(-8px);border-color:var(--gold);background:var(--green-3)}
.card .ic{width:46px;height:46px;color:var(--gold);margin-bottom:20px}
.card h3{font-size:1.5rem;margin-bottom:12px}
.card p{color:var(--sage);font-size:.96rem}

/* locations */
.loc{position:relative;overflow:hidden;border:1px solid var(--line)}
.loc img{width:100%;height:340px;object-fit:cover;transition:.7s var(--ease)}
.loc:hover img{transform:scale(1.07)}
.loc__body{position:absolute;inset:auto 0 0 0;padding:28px;
  background:linear-gradient(transparent,rgba(8,20,14,.95))}
.loc__body h3{font-size:1.6rem}
.loc__body p{color:var(--gold-soft);font-size:.85rem;letter-spacing:.05em}

/* room cards */
.room{background:var(--green-2);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;transition:.45s var(--ease)}
.room:hover{transform:translateY(-8px);border-color:var(--gold)}
.room__img{position:relative;overflow:hidden;aspect-ratio:3/4}
.room__img img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.room:hover .room__img img{transform:scale(1.06)}
.room__tag{position:absolute;top:16px;left:16px;background:var(--gold);color:var(--ink);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;font-weight:600}
.room__body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.room__body h3{font-size:1.7rem}
.room__feat{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--sage);
  font-size:.85rem;margin-top:2px}
.room__feat li::before{content:"•";color:var(--gold);margin-right:7px}
.room__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid var(--line)}
.room__price b{font-family:var(--serif);font-size:1.7rem;color:var(--gold-soft)}
.room__price span{color:var(--sage);font-size:.78rem;display:block}

/* ---- Gallery + Lightbox ------------------------------------ */
.gallery{columns:3;column-gap:18px}
.gallery .shot{break-inside:avoid;margin-bottom:18px;position:relative;cursor:pointer;
  overflow:hidden;border:1px solid var(--line)}
.gallery .shot img{width:100%;transition:.7s var(--ease)}
.gallery .shot:hover img{transform:scale(1.06)}
.gallery .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 55%,rgba(8,20,14,.85));opacity:0;transition:.4s}
.gallery .shot:hover::after{opacity:1}
.shot__cap{position:absolute;left:18px;bottom:16px;right:18px;z-index:2;opacity:0;
  transform:translateY(10px);transition:.4s var(--ease)}
.gallery .shot:hover .shot__cap{opacity:1;transform:translateY(0)}
.shot__cap b{font-family:var(--serif);font-size:1.15rem;display:block}
.shot__cap span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,12,9,.96);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:.4s var(--ease);padding:24px}
.lightbox.open{opacity:1;visibility:visible}
.lb__panel{display:grid;grid-template-columns:1.4fr 1fr;max-width:1080px;width:100%;
  max-height:86vh;background:var(--green);border:1px solid var(--gold);box-shadow:var(--shadow);
  transform:scale(.94);transition:.5s var(--ease);overflow:hidden}
.lightbox.open .lb__panel{transform:scale(1)}
.lb__img{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb__img img{width:100%;height:100%;max-height:86vh;object-fit:cover}
.lb__info{padding:46px 42px;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.lb__info .eyebrow{margin-bottom:14px}
.lb__info h3{font-size:2.1rem;margin-bottom:16px}
.lb__info p{color:var(--sage);font-size:1rem}
.lb__meta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:30px;flex-wrap:wrap}
.lb__meta div b{display:block;font-family:var(--serif);color:var(--gold-soft);font-size:1.2rem}
.lb__meta div span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.lb__close{position:absolute;top:24px;right:28px;background:none;border:1px solid var(--line);
  color:var(--ivory);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.2rem;
  transition:.35s}
.lb__close:hover{background:var(--gold);color:var(--ink);transform:rotate(90deg)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(8,20,14,.6);
  border:1px solid var(--line);color:var(--ivory);width:54px;height:54px;border-radius:50%;
  cursor:pointer;font-size:1.4rem;transition:.35s;display:flex;align-items:center;justify-content:center}
.lb__nav:hover{background:var(--gold);color:var(--ink)}
.lb__prev{left:26px}.lb__next{right:26px}

/* ---- Video -------------------------------------------------- */
.video{position:relative;border:1px solid var(--line);overflow:hidden;cursor:pointer;background:#000}
.video video,.video img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,14,.35);transition:.4s}
.video__play:hover{background:rgba(8,20,14,.15)}
.video__play span{width:84px;height:84px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(201,162,75,.15);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1.4rem;backdrop-filter:blur(4px);transition:.4s}
.video__play:hover span{transform:scale(1.1);background:var(--gold);color:var(--ink)}

/* ---- Booking form ------------------------------------------ */
.bookwrap{background:var(--green-2);border:1px solid var(--line);padding:clamp(30px,5vw,56px);
  box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.field input,.field select,.field textarea{
  background:var(--ink);border:1px solid var(--line);color:var(--ivory);
  padding:14px 16px;font-family:var(--sans);font-size:.95rem;font-weight:300;
  transition:.3s;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:#0c1f15}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c9a24b' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.form-actions{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-note{grid-column:1/-1;color:var(--sage);font-size:.84rem}
.book-ok{grid-column:1/-1;display:none;border:1px solid var(--gold);background:rgba(201,162,75,.1);
  padding:22px 26px;color:var(--gold-soft)}
.book-ok.show{display:block;animation:rise .5s var(--ease) both}
.book-ok b{font-family:var(--serif);font-size:1.3rem;color:var(--ivory);display:block;margin-bottom:6px}

/* small "amenities" inline list */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tags li{border:1px solid var(--line);padding:9px 18px;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage)}
.tags li::before{content:"✦";color:var(--gold);margin-right:9px}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stats b{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--gold-soft);display:block}
.stats span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}

/* CTA band */
.cta-band{position:relative;text-align:center;padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,20,14,.82)}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem);max-width:760px;margin:0 auto 26px}
.cta-band h2 em{font-style:italic;color:var(--gold-soft)}

/* ---- Footer ------------------------------------------------- */
.site-footer{background:var(--ink);border-top:1px solid var(--line);
  padding:72px 0 36px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid h4{font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  font-size:.74rem;color:var(--gold);margin-bottom:22px}
.foot-grid a,.foot-grid p{color:var(--sage);font-size:.92rem;display:block;margin-bottom:11px;transition:.3s}
.foot-grid a:hover{color:var(--gold-soft);padding-left:5px}
.foot-brand b{font-family:var(--serif);font-size:1.6rem;letter-spacing:.04em}
.foot-brand small{color:var(--gold);letter-spacing:.4em;font-size:.6rem;text-transform:uppercase;display:block;margin-top:8px}
.foot-brand p{margin-top:18px;max-width:34ch}
.foot-bottom{border-top:1px solid var(--line);margin-top:54px;padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:var(--sage);font-size:.8rem;letter-spacing:.05em}
.foot-bottom a{color:var(--sage)}
.foot-bottom a:hover{color:var(--gold)}

/* ---- Scroll reveal ----------------------------------------- */
.reveal{opacity:0;transform:translateY(34px);transition:.9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ---- Responsive -------------------------------------------- */
@media (max-width:1000px){
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;
    background:rgba(8,20,14,.98);backdrop-filter:blur(10px);
    transform:translateX(100%);transition:.5s var(--ease)}
  .nav.open{transform:none}
  .nav a,.drop-toggle{font-size:1.05rem}
  .has-drop{text-align:center}
  .drop{position:static;transform:none;opacity:1;visibility:visible;background:none;
    border:none;box-shadow:none;padding:0;min-width:auto;display:none}
  .has-drop.open .drop{display:block}
  .has-drop:hover .drop{transform:none}
  .burger{display:flex}
  .lang{margin-top:10px}
  .split,.grid-3,.grid-4,.grid-2,.form-grid,.foot-grid,.stats{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .gallery{columns:2}
  .lb__panel{grid-template-columns:1fr;max-height:90vh;overflow:auto}
  .lb__img img{max-height:46vh}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px}
}
@media (max-width:560px){
  .gallery{columns:1}
  .hero__cta{flex-direction:column;align-items:center}
  .lb__nav{width:44px;height:44px}
  .lb__prev{left:10px}.lb__next{right:10px}
}