/* =========================================================
   DendroPark — landing page
   Design width 1399px · content column 1303px (48px gutters)

   Palette per the brand deck (slide 13):
     Pine Dark  #1E2A1A  bază / text / contururi
     Warm Sand  #C0AE91  fundaluri / accente soft
     Cream      #FBFBF0  spațiu / lumină / premium
     Wood Clay  #BB8755  lemn / căldură / activitate
     Olive      #6B7A4F  natură / zone secundare
   ========================================================= */

:root{
  --pine:       #1E2A1A;
  --sand:       #C0AE91;
  --cream:      #FBFBF0;
  --clay:       #BB8755;
  --olive:      #6B7A4F;

  --green:      var(--olive);
  --green-dark: #5B6942;
  --ink:        var(--pine);
  --body:       #4C5546;
  --muted:      #8E9487;
  --paper:      var(--cream);
  --line:       rgba(30,42,26,.55);

  --serif: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  --content: 1303px;
  --gutter: 48px;

  --h1:   65px;
  --h2:   63px;
  --h2-s: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.42;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{
  width:100%;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
     stroke-linecap:round; stroke-linejoin:round; }

/* ---------- shared type ---------- */
.h2{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--h2);
  line-height:1.18;
  letter-spacing:.005em;
  color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
}
.h2--about{ font-size:var(--h2-s); line-height:1.14; }
.h2--center{ text-align:center; }
.h2 .accent{ color:var(--green); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 32px;
  border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--glass{
  padding:0 28px;
  background:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{ background:rgba(255,255,255,.3); }

.btn--ghost{
  height:46px; padding:0 18px;
  border:1px solid rgba(255,255,255,.5);
  color:#fff; gap:14px;
  font-family:var(--sans); font-size:15px; text-transform:none;
}
.btn--ghost:hover{ background:rgba(255,255,255,.14); }
.btn--ghost .ic{ width:16px; height:16px; }

.btn--light{ padding:0 30px; background:#fff; color:var(--ink); font-weight:700; }
.btn--light:hover{ background:#eef0ec; }

.btn--green{ background:var(--green); color:#fff; font-weight:500; }
.btn--green:hover{ background:var(--green-dark); }

.btn-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:0 0 46px;
  border-radius:50%;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-circle--light{ background:#fff; color:var(--ink); }
.btn-circle--light:hover{ transform:translateX(3px); }
.btn-circle--green{ background:var(--green); color:#fff; }
.btn-circle--green:hover{ background:var(--green-dark); transform:translateX(3px); }
.btn-circle--line{
  width:64px; height:64px; flex-basis:64px;
  border:1px solid var(--sand); color:var(--ink);
}
.btn-circle--line:hover{ border-color:var(--ink); }

.btn-pair{ display:flex; align-items:center; gap:4px; }
.btn-pair--end{ justify-content:flex-end; }

/* corner tick marks */
.mark{ display:block; width:17px; height:15px; }
.mark--tr{ border-top:1px solid var(--line); border-right:1px solid var(--line); }
.mark--bl{ border-bottom:1px solid var(--line); border-left:1px solid var(--line); }

/* pagination dots */
.dots{ display:flex; align-items:center; gap:8px; }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.dot.is-active{ background:#fff; transform:scale(1.12); }

/* ---------- logo ---------- */
/* mark + wordmark are separate files so each can be sized on its own optics;
   the wordmark's cap height is set against the mark rather than matched to it */
.logo{
  display:inline-flex; align-items:center; gap:13px;
  transition:opacity .3s var(--ease);
}
.logo:hover{ opacity:.82; }
.logo__mark{ height:42px; width:auto; }
.logo__word{ height:15px; width:auto; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto; z-index:60;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             box-shadow .4s var(--ease), transform .4s var(--ease);
}
.header__inner{
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding:24px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav{ display:flex; gap:30px; }
.nav a{
  color:#fff; font-size:14px; position:relative; padding-bottom:3px;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .35s var(--ease);
}
.nav a:hover::after{ width:100%; }
.nav__booking{ display:none; }
.nav__contact{ display:none; }

.header.is-stuck{
  background:rgba(30,35,33,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.header.is-hidden{ transform:translateY(-100%); }

.burger{ display:none; width:34px; height:34px; flex-direction:column;
         justify-content:center; align-items:flex-end; gap:6px; }
.burger span{ display:block; height:1.5px; background:#fff; border-radius:2px;
              transition:transform .3s var(--ease), width .3s var(--ease); }
.burger span:nth-child(1){ width:24px; }
.burger span:nth-child(2){ width:16px; }
.burger[aria-expanded="true"] span:nth-child(1){ width:24px; transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width:24px; transform:translateY(-3.75px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:820px;
  height:100vh;
  max-height:1080px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  z-index:-2;
  animation:heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:.4; } to{ transform:none; opacity:1; } }

.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,24,22,.42) 0%, rgba(20,24,22,0) 22%),
    linear-gradient(0deg,  rgba(18,22,20,.55) 0%, rgba(18,22,20,0) 34%);
}

/* video card */
.videocard{
  position:absolute; left:23.95%; top:20.4%;
  width:290px; margin:0; z-index:3;
  padding:6px 6px 0;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(41,53,38,.34);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:cardIn 1.2s .5s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.videocard__media{ position:relative; aspect-ratio:278 / 169; overflow:hidden; }
.videocard__media img{ width:100%; height:100%; object-fit:cover; }
.videocard figcaption{
  color:#fff; font-size:15px; text-align:center;
  padding:9px 0 11px; letter-spacing:.005em;
}
.play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:30px; height:30px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  transform:scale(1);
  transition:transform .3s var(--ease);
}
.play svg{
  width:16px; height:16px; fill:var(--ink);
  transition:transform .3s var(--ease);
}
.play:hover,
.play:focus-visible{ transform:scale(1.18); }
.play:hover svg,
.play:focus-visible svg{ transform:scale(1.08); }
.play:active{ transform:scale(1.08); }

/* bottom content */
.hero__content{
  position:absolute; left:0; right:0; bottom:43px;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:flex-end; justify-content:space-between; gap:60px;
  z-index:2;
}
.hero__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:var(--h1); line-height:1.154;
  letter-spacing:.004em;
  color:#fff; text-transform:uppercase;
  animation:up 1s .35s var(--ease) both;
}
.hero__inline{
  display:inline-block; vertical-align:middle;
  width:1.615em; height:.8em; margin:0 .05em;
  border-radius:999px; overflow:hidden;
  transform:translateY(-.07em);
}
.hero__inline img{ width:100%; height:100%; object-fit:cover; }
.hero__lastline{ display:inline-flex; align-items:center; gap:26px; white-space:nowrap; }

.hero__aside{
  flex:0 0 361px; width:361px;
  margin-right:70px; margin-bottom:17px;
  display:flex; flex-direction:column; gap:34px;
  animation:up 1s .5s var(--ease) both;
}
.hero__aside p{
  margin:0; color:#fff; font-size:16px; line-height:1.44;
  letter-spacing:.002em;
}
@keyframes up{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ padding:123px 0 0; }
.about__grid{
  display:grid;
  grid-template-columns:41.21% 34.31% 24.48%;
}
.about__c1{ display:flex; flex-direction:column; }
.about__img-a{ margin:136px 0 0; aspect-ratio:537 / 307; }
.about__img-a img{ width:100%; height:100%; object-fit:cover; }

.about__c2{ padding-top:180px; }
.about__lead{ margin:0; max-width:348px; font-size:13px; line-height:1.42; }
.about__marks{ margin:38px 0 0; padding-left:67px; }
.about__list{ margin:44px 0 0 14px; }
.about__list li{ font-size:13px; color:var(--body); margin-bottom:10px; }
.about__marks .mark--bl{ margin:79px 0 0 14px; }
.about__tail{ margin:60px 0 0; padding-left:81px; max-width:349px; font-size:13px; line-height:1.42;
  box-sizing:content-box; width:268px; }

.about__c3{ display:flex; flex-direction:column; }
.about__img-b{ margin:0; aspect-ratio:319 / 489; }
.about__img-b img{ width:100%; height:100%; object-fit:cover; }
.about__c3 .btn-pair{ margin-top:126px; }

/* =========================================================
   FEATURED SUITES
   ========================================================= */
.suites{ padding:120px 0 0; }
.suites .h2--center{ margin-bottom:50px; }

.stage{ position:relative; }
.stage__frame{ position:relative; aspect-ratio:1303 / 652; }
.stage__bg{ position:absolute; inset:0; overflow:hidden; }
.stage__bg img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease), transform .75s var(--ease);
}
.stage__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,32,28,.30) 0%, rgba(24,32,28,.12) 45%, rgba(24,32,28,.22) 100%);
}
.stage__head{
  position:absolute; left:0; right:0; top:0;
  padding-top:3.91%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; z-index:3;
}
.stage__head .dots{ margin-bottom:2.46%; }
.stage__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:82px; line-height:1; letter-spacing:.01em;
  color:#fff; text-transform:uppercase;
  text-shadow:0 2px 26px rgba(0,0,0,.22);
}
.stage__sub{
  margin:40px 0 0; color:#fff; font-size:19px; letter-spacing:.002em;
  text-shadow:0 1px 14px rgba(0,0,0,.28);
}
.stage__cta{
  margin-top:24px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.72);
  color:#fff;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:opacity .38s var(--ease), transform .5s var(--ease), border-color .3s var(--ease);
}
.stage__cta:hover{ border-color:transparent; }
.stage__title,
.stage__sub{ transition:opacity .38s var(--ease), transform .5s var(--ease); }
.stage__next{
  position:absolute; left:50%; top:57%; translate:-50% -50%;
  width:7.45%; aspect-ratio:1; border-radius:50%;
  background:#fff; color:var(--green);
  display:grid; place-items:center; z-index:5;
  transform:scale(1);
  transition:transform .35s var(--ease);
}
.stage__next .ic{
  width:22px; height:22px; stroke-width:1.5;
  transition:transform .35s var(--ease);
}
.stage__next:hover,
.stage__next:focus-visible{ transform:scale(1.12); }
.stage__next:hover .ic,
.stage__next:focus-visible .ic{ transform:scale(1.08); }
.stage__next:active{ transform:scale(1.05); }

@media (min-width:1025px){
  .stage__next{ top:64.5%; }
}

.stage__ph{ position:absolute; margin:0; z-index:4; overflow:hidden; }
.stage__ph img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.stage.is-changing .stage__title,
.stage.is-changing .stage__sub,
.stage.is-changing .stage__cta{ opacity:0; transform:translateY(12px); }
.stage.is-changing .stage__bg img{ opacity:0; transform:scale(1.025); }
.stage.is-changing .stage__ph img{ opacity:0; transform:scale(.96); }
.stage__ph--l{ left:8.98%;  top:50.0%;  width:14.97%; aspect-ratio:195 / 246; }
.stage__ph--c{ left:34.92%; top:50.77%; width:30.01%; aspect-ratio:391 / 483; z-index:3; }
.stage__ph--r{ left:76.13%; top:50.77%; width:14.97%; aspect-ratio:195 / 240; }

/* =========================================================
   SERVICES & PRODUCTS
   ========================================================= */
/* top padding clears the suite stage's centre photo, which overflows its frame */
.services{ padding:277px 0 0; }
.services .h2--center{ margin-bottom:64px; }

.services__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:40px;
}
.service{ display:flex; flex-direction:column; align-items:flex-start; }
.service__media{
  margin:0 0 26px; width:100%;
  aspect-ratio:4 / 3; overflow:hidden;
}
.service__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.service:hover .service__media img{ transform:scale(1.05); }

.service__no{
  font-size:12px; color:var(--clay); letter-spacing:.01em;
  margin-bottom:12px;
}
.service__title{
  margin:0 0 16px;
  font-family:var(--serif); font-weight:400;
  font-size:21px; line-height:1.24; letter-spacing:.008em;
  text-transform:uppercase; color:var(--ink);
}
.service__copy{
  margin:0 0 24px; font-size:13px; line-height:1.42; color:var(--body);
}
.service__link{
  margin-top:auto;
  min-height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:0 24px;
  border:1px solid var(--green);
  border-radius:999px;
  background:transparent;
  font-size:13px; font-weight:500; color:var(--green);
  text-align:center;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service__link .ic{
  width:16px; height:16px;
  transition:transform .35s var(--ease);
}
.service__link:hover,
.service__link:focus-visible{
  background:var(--green);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(75,91,51,.18);
}
.service__link:hover .ic,
.service__link:focus-visible .ic{ transform:translateX(4px); }
.service__link:active{ transform:translateY(0); box-shadow:none; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ padding:150px 0 0; }
.reviews__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.reviews__body{ display:grid; grid-template-columns:28.9% 1fr; margin-top:36px; }
.reviews__label{ font-size:12px; color:var(--clay); letter-spacing:.01em; }
.reviews__quote{ display:flex; gap:46px; }
.reviews__quote blockquote{
  margin:0; max-width:690px;
  font-size:32px; line-height:1.406; color:var(--ink); letter-spacing:-.002em;
}
.reviews__quote .mark{ flex:0 0 13px; width:13px; height:15px; margin-top:2px; }

.reviews__foot{
  display:grid; align-items:center;
  grid-template-columns:28.9% 8.9% 1fr auto;
  margin-top:60px;
}
.stack{ display:flex; }
.stack img{
  width:62px; height:62px; border-radius:50%; object-fit:cover;
  border:2px solid var(--cream); margin-right:-4px;
}
.rating{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink); }
.star{ width:15px; height:15px; fill:var(--clay); }
.author{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink); }
.author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.reviews__quote blockquote,
.rating,
.author{
  opacity:1;
  transform:translateY(0);
  transition:opacity .38s var(--ease), transform .48s var(--ease);
}
.author img{
  transform:scale(1);
  transition:opacity .38s var(--ease), transform .48s var(--ease);
}
.reviews.is-changing .reviews__quote blockquote,
.reviews.is-changing .rating,
.reviews.is-changing .author{
  opacity:0;
  transform:translateY(10px);
}
.reviews.is-changing .author img{
  opacity:0;
  transform:scale(.9);
}
.reviews__nav{ display:flex; align-items:center; gap:33px; }
.reviews__nav .dot{ background:var(--sand); }
.reviews__nav .dot.is-active{ background:var(--ink); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ padding:129px 0 30px; overflow:hidden; }
.gallery .h2--center{ margin-bottom:28px; }
.gallery__wrap{ position:relative; max-width:1440px; }
.gallery__strip{
  position:relative;
  height:700px;
  margin-top:0;
  perspective:1400px;
  touch-action:pan-y;
  user-select:none;
}
.gallery__strip.is-dragging{ cursor:grabbing; }
.gallery__it{
  --gallery-x:0;
  --gallery-r:0deg;
  --gallery-s:1;
  --gallery-y:0px;
  position:absolute;
  left:50%; top:34px;
  width:min(31vw, 390px);
  aspect-ratio:4 / 5;
  margin:0;
  overflow:hidden;
  opacity:1;
  border-radius:16px;
  box-shadow:0 22px 55px rgba(24,32,28,.16);
  transform:translateX(calc(-50% + var(--gallery-x))) translateY(var(--gallery-y)) rotate(var(--gallery-r)) scale(var(--gallery-s));
  transform-origin:50% 110%;
  transition:box-shadow .35s ease;
  will-change:transform;
  cursor:pointer;
}
.gallery__it img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.gallery__it:hover{ box-shadow:0 30px 70px rgba(24,32,28,.24); }
.gallery__it:hover img{ transform:scale(1.045); }

.gallery__arrow{ position:absolute; top:50%; z-index:20; background:#fff; }
.gallery__arrow--prev{ left:var(--gutter); }
.gallery__arrow--next{ right:var(--gutter); }
.gallery__dots{
  position:absolute;
  left:50%; bottom:8px;
  z-index:20;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
}
.gallery__dot{
  width:7px; height:7px;
  padding:0;
  border-radius:50%;
  background:rgba(30,42,26,.2);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.gallery__dot.is-active{ background:var(--ink); transform:scale(1.35); }

/* =========================================================
   FAQ
   native <details> so it works, and stays keyboard accessible,
   without JS; the script only adds exclusive opening
   ========================================================= */
.faq{ padding:150px 0 0; }
.faq__grid{
  display:grid;
  /* the heading is nowrap and vw-scaled, so it needs roughly 29% of the
     content width at every size - the column is set wider than that, with
     an explicit gap, so the two never touch */
  grid-template-columns:32.5% 1fr;
  column-gap:56px;
  align-items:start;
}
.faq__note{
  margin:34px 0 30px; max-width:300px;
  font-size:13px; line-height:1.42; color:var(--body);
}

.faq__item{
  border-top:1px solid var(--sand);
}
.faq__item:last-child{ border-bottom:1px solid var(--sand); }

.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:26px 0;
  font-family:var(--serif); font-weight:400;
  font-size:22px; line-height:1.3; letter-spacing:.008em;
  color:var(--ink); cursor:pointer;
  list-style:none;
  transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--green); }
.faq__item[open] .faq__q{ color:var(--green); }
.faq__q:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }

/* plus that becomes a minus when the row is open */
.faq__ico{ position:relative; flex:0 0 14px; width:14px; height:14px; }
.faq__ico::before,
.faq__ico::after{
  content:""; position:absolute; left:0; top:50%; width:100%; height:1.5px;
  background:currentColor; transform-origin:center;
  transition:transform .35s var(--ease);
}
.faq__ico::after{ transform:rotate(90deg); }
.faq__item[open] .faq__ico::after{ transform:rotate(0deg); }

.faq__a{
  padding:0 60px 28px 0;
  opacity:1;
  transform:translateY(0);
  transition:opacity .32s var(--ease), transform .4s var(--ease);
}
.faq__a p{ margin:0; font-size:13px; line-height:1.55; color:var(--body); max-width:640px; }
.faq__a a{ color:var(--green); border-bottom:1px solid currentColor; }
.faq__item.is-closing .faq__a{
  opacity:0;
  transform:translateY(-8px);
}

/* =========================================================
   ESCAPE
   ========================================================= */
.escape{ padding:131px 0 0; }
.escape__grid{
  display:grid;
  grid-template-columns:41.21% 9.14% 49.65%;
  align-items:start;
}
.escape__c1{ grid-column:1; }
.escape__copy{
  margin:67px 0 0; margin-left:159px; max-width:322px;
  font-size:13px; line-height:1.42;
}
.escape__c1 .btn-pair{ margin-top:73px; }
.escape__img-a{ margin:93px 0 0; aspect-ratio:537 / 323; overflow:hidden; }
.escape__img-a img{ width:100%; height:100%; object-fit:cover; }
.escape__img-b{
  grid-column:3; margin:15px 0 0; aspect-ratio:647 / 811; overflow:hidden;
}
.escape__img-b img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  margin-top:145px;
  background:var(--ink);
  color:#fff;
  padding-top:54px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.footer::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background-image:url("assets/footer-spruces.svg");
  background-repeat:repeat-x;
  background-size:920px auto;
  background-position:center bottom;
  opacity:.1;
  pointer-events:none;
}
.footer > *{
  position:relative;
  z-index:1;
}
.footer__grid{
  display:grid;
  /* last column widened vs. the comp: the Romanian legal labels are longer
     than the English ones and were wrapping awkwardly */
  grid-template-columns:58% 24% 18%;
  padding-bottom:20px;
}
.logo--light{ margin-bottom:18px; }
.footer__tagline{
  margin:0 0 26px; font-size:13px; color:rgba(251,251,240,.6);
  letter-spacing:.01em;
}
.footer__social li{ margin-bottom:14px; }
.footer__social a{ font-size:13px; color:rgba(251,251,240,.78); transition:color .3s var(--ease); }
.footer__social a:hover{ color:var(--cream); }

.footer__col h4{
  margin:8px 0 25px;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--cream);
}
.footer__col li{ margin-bottom:14px; }
.footer__col a{ font-size:13px; color:rgba(251,251,240,.72); transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--cream); }
.footer__addr{ font-size:13px; line-height:1.32; color:rgba(251,251,240,.72); margin-top:18px; }
.footer__addr a{ line-height:1.32; }

/* oversized wordmark, cropped by the page edge as in the comp */
.footer__mark{
  overflow:hidden;
  padding-inline:var(--gutter);
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin-inline:auto;
  height:188px;
}
.footer__mark img{ width:100%; height:auto; display:block; }

/* =========================================================
   BOOKING MODAL
   ========================================================= */
.modal{
  border:0; padding:0; background:transparent;
  width:min(760px, calc(100vw - 40px));
  max-width:none; max-height:calc(100vh - 40px);
  overflow:visible;
  color:var(--ink);
}
.modal::backdrop{
  background:rgba(20,28,17,.62);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal[open]{ animation:modalIn .34s var(--ease) both; }
.modal[open]::backdrop{ animation:fadeIn .34s var(--ease) both; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.modal__panel{
  position:relative;
  background:var(--cream);
  padding:52px 56px 46px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
.modal__close{
  position:absolute; top:22px; right:22px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  transition:background .3s var(--ease);
}
.modal__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.modal__close:hover{ background:rgba(30,42,26,.07); }

.modal__eyebrow{ display:block; font-size:12px; color:var(--clay); margin-bottom:14px; }
.modal__title{
  margin:0 0 12px;
  font-family:var(--serif); font-weight:400;
  font-size:40px; line-height:1.1; letter-spacing:.005em;
  text-transform:uppercase; color:var(--ink);
}
.modal__lead{ margin:0 0 34px; font-size:13px; line-height:1.5; color:var(--body); max-width:420px; }

.field-grid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:28px; row-gap:22px;
}
.field{ margin:0; display:flex; flex-direction:column; gap:7px; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:12px; color:var(--body); letter-spacing:.01em; }
.field__opt{ color:var(--muted); }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:14px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--sand);
  border-radius:0;
  padding:8px 0;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:64px; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 10px) 17px, calc(100% - 5px) 17px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:26px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--green); }
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-bottom-color:#B4472F; }

.field--check{ flex-direction:row; align-items:flex-start; gap:12px; margin-top:4px; }
.field--check input{ width:17px; height:17px; flex:0 0 17px; margin-top:1px;
  accent-color:var(--green); border-bottom:0; cursor:pointer; }
.field--check label{ font-size:12px; line-height:1.45; cursor:pointer; }
.field--check.is-invalid label{ color:#B4472F; }

.modal__error{
  margin:20px 0 0; font-size:13px; color:#B4472F;
}
.modal__actions{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:32px;
}
.modal__call{ font-size:13px; color:var(--body); border-bottom:1px solid var(--sand); }
.modal__call:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* confirmation state, swapped in after a successful hand-off */
.modal__done{ text-align:left; }
.modal__done .modal__title{ margin-bottom:14px; }
body.modal-open{ overflow:hidden; }

@media (max-width:640px){
  .modal__panel{ padding:44px 22px 34px; }
  .modal__title{ font-size:30px; }
  .field-grid{ grid-template-columns:1fr; row-gap:20px; }
  .modal__close{ top:12px; right:12px; }
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1360px){
  :root{ --h1:4.72vw; --h2:4.5vw; --h2-s:4.58vw; }
  .stage__title{ font-size:5.86vw; }
  .footer__mark{ font-size:25.9vw; }
  .hero__inline{ width:7.6vw; height:3.75vw; }
  .reviews__quote blockquote{ font-size:2.2vw; }
}

@media (max-width:1024px){
  :root{ --gutter:32px; --h1:7vw; --h2:6.4vw; --h2-s:6vw; }
  .nav{
    position:fixed;
    inset:0;
    z-index:-1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
    padding:120px max(var(--gutter), calc((100vw - 760px) / 2)) 48px;
    background:
      linear-gradient(180deg, rgba(16,25,14,.88), rgba(20,31,17,.97)),
      url("assets/hero.jpg") center / cover;
    visibility:hidden;
    opacity:0;
    transform:translateY(-20px);
    pointer-events:none;
    transition:opacity .48s var(--ease), transform .58s var(--ease), visibility 0s linear .58s;
  }
  .nav::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(30,42,26,.25), transparent 65%);
    pointer-events:none;
  }
  .nav a{
    position:relative;
    z-index:1;
    font-family:var(--serif);
    font-size:clamp(38px, 7vw, 68px);
    line-height:1.04;
    font-weight:400;
    opacity:0;
    transform:translateY(24px);
    transition:opacity .38s var(--ease), transform .48s var(--ease), color .3s var(--ease);
  }
  .nav a::before{
    content:"";
    position:absolute;
    left:-26px;
    top:50%;
    width:14px;
    height:1px;
    background:var(--cream);
    opacity:0;
    transform:translate(-10px,-50%);
    transition:opacity .3s var(--ease), transform .38s var(--ease), width .38s var(--ease);
  }
  .nav a::after{
    display:block;
    width:100%;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .4s var(--ease);
  }
  .nav.is-open a:hover,
  .nav.is-open a:focus-visible{
    color:var(--cream);
    transform:translateX(14px);
  }
  .nav a:hover::before,
  .nav a:focus-visible::before{
    width:20px;
    opacity:1;
    transform:translate(0,-50%);
  }
  .nav a:hover::after,
  .nav a:focus-visible::after{
    transform:scaleX(1);
    transform-origin:left;
  }
  .nav a:focus-visible{ outline:none; }
  .nav.is-open a:active{ transform:translateX(8px) scale(.98); }
  .nav.is-open{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:0s;
  }
  .nav.is-open a{ opacity:1; transform:translateY(0); }
  .nav.is-open a:nth-child(1){ transition-delay:.10s; }
  .nav.is-open a:nth-child(2){ transition-delay:.14s; }
  .nav.is-open a:nth-child(3){ transition-delay:.18s; }
  .nav.is-open a:nth-child(4){ transition-delay:.22s; }
  .nav.is-open a:nth-child(5){ transition-delay:.26s; }
  .nav.is-open a:nth-child(6){ transition-delay:.30s; }
  .nav.is-open .nav__booking{
    transition-delay:0s;
    transition-duration:.16s;
  }
  .nav__contact{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:22px;
    padding-top:18px;
    width:min(420px, 100%);
    border-top:1px solid rgba(251,251,240,.2);
    opacity:0;
    transform:translateY(16px);
    transition:opacity .3s var(--ease), transform .38s var(--ease);
  }
  .nav.is-open .nav__contact{
    opacity:1;
    transform:translateY(0);
    transition-delay:.18s;
  }
  .nav .nav__contact a{
    padding:0;
    font-family:var(--sans);
    font-size:13px;
    line-height:1.4;
    letter-spacing:.02em;
    color:rgba(251,251,240,.72);
    transform:none;
    transition:color .16s var(--ease);
  }
  .nav .nav__contact a::before,
  .nav .nav__contact a::after{ display:none; }
  .nav .nav__contact-link{ color:var(--cream); }
  .nav__social{ display:flex; align-items:center; gap:22px; }
  .nav.is-open .nav__contact a:hover,
  .nav.is-open .nav__contact a:focus-visible{
    color:var(--cream);
    transform:none;
  }
  .nav .nav__booking{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:54px;
    margin-top:28px;
    padding:0 30px;
    border:1px solid rgba(251,251,240,.72);
    border-radius:999px;
    font-family:var(--sans);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .nav .nav__booking::before,
  .nav .nav__booking::after{ display:none; }
  .nav.is-open .nav__booking:hover,
  .nav.is-open .nav__booking:focus-visible{
    background:var(--cream);
    color:var(--ink);
    border-color:var(--cream);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  .nav.is-open .nav__booking:active{ transform:translateY(0) scale(.98); }

  @media (hover:none){
    .nav.is-open a:hover{ transform:translateY(0); }
    .nav a:hover::before{ opacity:0; }
    .nav a:hover::after{ transform:scaleX(0); }
    .nav.is-open a:active{ color:var(--cream); transform:translateX(8px) scale(.98); }
    .nav.is-open .nav__booking:hover{ background:transparent; color:#fff; box-shadow:none; }
    .nav.is-open .nav__booking:active{ background:var(--cream); color:var(--ink); }
  }
  .burger{ display:flex; position:relative; z-index:2; }
  body.menu-open{ overflow:hidden; }
  body.menu-open .header{
    inset:0;
    height:100dvh;
    transform:none;
    transition:none;
  }
  .header .btn--glass{ display:none; }

  .hero{ min-height:700px; }
  /* the column flips align-items to the horizontal axis - keep copy flush left */
  .hero__content{ flex-direction:column; align-items:flex-start; gap:34px; bottom:40px; }
  .hero__aside{ flex:0 0 auto; width:100%; max-width:480px; gap:26px;
                margin-right:0; margin-bottom:0; }
  .hero__lastline{ flex-wrap:wrap; white-space:normal; gap:18px; }
  .videocard{ width:240px; left:auto; right:var(--gutter); top:14%; }

  .about{ padding-top:80px; }
  .about__grid{ grid-template-columns:1fr 1fr; gap:0 40px; }
  .about__c1{ grid-column:1 / -1; }
  .about__img-a{ margin-top:56px; }
  .about__c2{ padding-top:56px; }
  .about__marks{ padding-left:0; }
  .about__tail{ padding-left:0; width:auto; max-width:100%; }
  .about__list{ margin-left:0; }
  .about__marks .mark--bl{ margin-left:0; }
  .about__c3{ padding-top:56px; }
  .about__c3 .btn-pair{ margin-top:40px; justify-content:flex-start; }

  .suites{ padding-top:90px; }
  .suites .h2--center{ margin-bottom:60px; }
  /* the stage keeps its design geometry at every width so the composition
     of overlapping plates stays intact; the copy moves out of the image */
  .stage{ display:flex; flex-direction:column; }
  .stage__head{ position:static; padding:0 0 26px; order:-1; }
  .stage__title{ color:var(--ink); text-shadow:none; font-size:7vw; }
  .stage__sub{ color:var(--body); text-shadow:none; font-size:14px; margin-top:14px; }
  .stage__cta{ color:var(--green); border-color:currentColor; }
  .stage__head .dot{ background:#DCDEDB; }
  .stage__head .dot.is-active{ background:var(--ink); }
  .stage__next .ic{ width:14px; height:14px; }

  .services{ padding-top:180px; }
  .services .h2--center{ margin-bottom:44px; }
  .services__grid{ column-gap:26px; }
  .service__title{ font-size:18px; }
  .service__media{ margin-bottom:20px; }

  .reviews{ padding-top:120px; }
  .reviews__top{ flex-direction:column; gap:28px; }
  .reviews__body{ grid-template-columns:1fr; gap:20px; margin-top:36px; }
  .reviews__quote{ gap:20px; }
  .reviews__quote blockquote{ font-size:22px; }
  .reviews__foot{ grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; }
  .reviews__nav{ justify-content:flex-end; }

  .faq{ padding-top:100px; }
  .faq__grid{ grid-template-columns:1fr; }
  .faq__note{ margin-top:24px; max-width:460px; }
  .faq__list{ margin-top:44px; }
  .faq__q{ font-size:19px; padding:22px 0; }
  .faq__a{ padding-right:0; }

  .gallery{ padding-top:100px; }
  .gallery__strip{ height:590px; }
  .gallery__it{ width:min(42vw, 330px); }
  .gallery__arrow{ display:grid; }

  .escape{ padding-top:100px; }
  .escape__grid{ grid-template-columns:1fr; gap:40px; }
  .escape__img-b{ grid-column:1; order:2; }
  .escape__copy{ margin:36px 0 0; }
  .escape__c1 .btn-pair{ margin-top:36px; }
  .escape__img-a{ margin-top:40px; }

  .footer{ margin-top:90px; }
  .footer::before{
    background-size:780px auto;
    background-position:center bottom;
  }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:44px 24px; }
}

/* ---------- phone: follows mobile-version.png (430px reference) ---------- */
@media (max-width:768px){
  :root{ --gutter:20px; --h1:7.45vw; --h2:7.7vw; --h2-s:7.7vw; }

  .wide-only{ display:none; }

  .btn{ height:50px; padding:0 34px; font-size:16px; }
  .btn--light{ padding:0 30px; }
  .btn-circle{ width:47px; height:47px; flex-basis:47px; }
  .btn-circle--line{ width:52px; height:52px; flex-basis:52px; }
  .ic{ width:20px; height:20px; }

  /* header */
  .header__inner{ padding:30px var(--gutter); }
  .logo{ gap:11px; }
  .logo__mark{ height:38px; }
  .logo__word{ height:13.5px; }
  .burger{
    width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    align-items:center; gap:7px;
  }
  .burger span:nth-child(1),
  .burger span:nth-child(2){ width:24px; }
  .nav{
    justify-content:flex-start;
    gap:6px;
    padding-top:112px;
    padding-bottom:32px;
    overflow-y:auto;
  }
  .nav a{ font-size:clamp(34px, 10vw, 46px); }
  .nav .nav__booking{ flex:0 0 52px; margin-top:20px; font-size:13px; }

  /* hero — no video card, no ghost button */
  .hero{ min-height:640px; }
  .hero__bg{ object-position:61% 50%; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(20,24,22,.34) 0%, rgba(20,24,22,0) 26%),
      linear-gradient(0deg,  rgba(18,22,20,.60) 0%, rgba(18,22,20,0) 46%);
  }
  .videocard{ display:none; }
  .hero__content{ bottom:32px; gap:22px; }
  .hero__title{ line-height:1.15; }
  .hero__lastline .btn--ghost{ display:none; }
  .hero__aside{ gap:24px; max-width:none; }
  .hero__aside p{ font-size:15px; line-height:1.45; }

  .about__grid{ grid-template-columns:1fr; }

  .faq{ padding-top:90px; }
  .faq__q{ font-size:17px; gap:20px; }

  .services{ padding-top:130px; }
  .services__grid{ grid-template-columns:1fr; row-gap:56px; }
  .service__title{ font-size:20px; }
  .service__media{ aspect-ratio:3 / 2; }

  .stage__title{ font-size:8.4vw; }
  .stage__sub{ font-size:13px; }
  .stage__next .ic{ width:10px; height:10px; }

  .reviews{ padding-top:190px; }
  .reviews__quote blockquote{ font-size:18px; line-height:1.45; }
  .reviews__foot{ grid-template-columns:1fr; }
  .stack img{ width:48px; height:48px; }
  .author img{ width:48px; height:48px; }

  /* gallery — compact fan carousel with peeking neighbours */
  .gallery .h2--center{ margin-bottom:41px; }
  .gallery__strip{
    height:480px;
    margin:-20px calc(var(--gutter) * -1) 0;
  }
  .gallery__it{
    width:58vw;
    max-width:270px;
    top:28px;
  }
  .gallery__arrow{ top:auto; bottom:0; }
  .gallery__dots{ bottom:18px; }

  /* escape — copy and button indented from the heading */
  .escape{ padding-top:76px; }
  .escape__copy{ margin:36px 0 0 33px; font-size:13.5px; line-height:1.5; max-width:none; }
  .escape__c1 .btn-pair{ margin-top:44px; margin-left:33px; }

  .footer__grid{ grid-template-columns:1fr; gap:34px; }
  .footer::before{
    background-size:620px auto;
    background-position:center bottom;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}