
:root{
  --v2-navy:#082745;
  --v2-navy-deep:#061a31;
  --v2-blue:#137e9a;
  --v2-aqua:#23aeba;
  --v2-gold:#d1a14e;
  --v2-gold-dark:#aa7724;
  --v2-cream:#f7f5f0;
  --v2-ink:#17243a;
  --v2-muted:#68748a;
  --v2-line:rgba(27,48,80,.14);
}

/* ---------- global refinement ---------- */
body{
  color:var(--v2-ink);
  background:#fff;
  letter-spacing:.002em;
}
h1,h2,h3{color:var(--v2-ink)}
.container{width:min(1320px,calc(100% - 64px))}
.section{padding:110px 0}
.eyebrow{
  color:var(--v2-gold-dark);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.soft{background:#f7f8fa}
.btn{
  min-height:52px;
  padding-inline:24px;
  border-radius:8px;
  letter-spacing:.01em;
}
.btn.primary{
  background:linear-gradient(135deg,var(--v2-gold),#b77f27);
  box-shadow:0 14px 34px rgba(151,102,30,.23);
}
.btn.outline.dark{
  border-color:rgba(18,43,72,.2);
  color:var(--v2-navy);
}
.text-link{
  color:var(--v2-navy);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.text-link span{color:var(--v2-gold-dark)}

/* ---------- header ---------- */
.site-header{
  height:96px;
  background:rgba(255,255,255,.84);
  border-bottom:1px solid rgba(21,45,75,.12);
  box-shadow:0 10px 35px rgba(16,31,60,.09);
  transition:background .3s ease,box-shadow .3s ease,height .3s ease;
}
.site-header.scrolled{
  height:84px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 34px rgba(10,29,55,.12);
}
.header-inner{
  width:min(1480px,calc(100% - 56px));
  gap:28px;
}
.brand{
  width:285px;
  max-width:23vw;
}
.brand img{
  width:100%;
  max-height:66px;
}
.main-nav{gap:24px}
.main-nav a{
  color:var(--v2-navy);
  font-size:.75rem;
  font-weight:700;
}
.main-nav a::after{
  bottom:-14px;
  background:var(--v2-gold);
}
.lang-switch{
  color:var(--v2-navy);
  border-color:rgba(16,42,72,.2);
  background:rgba(255,255,255,.65);
}
.header-book{
  min-width:112px;
  color:#fff;
  background:linear-gradient(135deg,var(--v2-gold),#b77f27);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(160,108,30,.2);
}

/* ---------- hero ---------- */
.hero-slider{
  min-height:760px;
  height:100svh;
  background:#dce8eb;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(2,18,35,.72) 0%,rgba(4,28,48,.46) 34%,rgba(4,28,48,.13) 62%,transparent 82%),
    linear-gradient(0deg,rgba(3,18,34,.38),transparent 42%);
  pointer-events:none;
}
.hero-slide picture img{
  filter:saturate(1.04) contrast(1.02);
}
.hero-slide.active picture img{
  animation:heroV2Move 6.8s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes heroV2Move{
  from{transform:scale(1.045)}
  to{transform:scale(1.012)}
}
.hero-caption{
  top:51%;
  left:max(5vw,54px);
  width:min(760px,calc(100% - 100px));
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#fff;
  transform:translateY(-42%);
}
.hero-location{
  margin-bottom:17px;
  color:rgba(255,255,255,.9);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.22em;
}
.hero-caption .eyebrow{
  color:#cfeff3;
  margin-bottom:12px;
}
.hero-caption h1,
.hero-caption h2{
  margin-bottom:16px;
  max-width:760px;
  color:#fff;
  font-size:clamp(3.4rem,5.5vw,6.2rem);
  line-height:1.02;
  letter-spacing:-.025em;
  text-shadow:0 12px 42px rgba(0,0,0,.34);
}
.hero-caption p{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:1.06rem;
  line-height:1.82;
  text-shadow:0 4px 16px rgba(0,0,0,.34);
}
.hero-caption .hero-actions{margin-top:28px}
.hero-caption .btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--v2-gold),#b77f27);
}
.hero-caption .btn.outline{
  color:#fff;
  border-color:rgba(255,255,255,.66);
  background:rgba(4,20,38,.18);
}
.hero-caption>*{
  opacity:0;
  transform:translateY(24px);
}
.hero-slide.active .hero-caption>*{
  animation:heroV2Caption .72s cubic-bezier(.18,.75,.22,1) forwards;
}
.hero-slide.active .hero-caption>*:nth-child(1){animation-delay:.14s}
.hero-slide.active .hero-caption>*:nth-child(2){animation-delay:.22s}
.hero-slide.active .hero-caption>*:nth-child(3){animation-delay:.30s}
.hero-slide.active .hero-caption>*:nth-child(4){animation-delay:.40s}
.hero-slide.active .hero-caption>*:nth-child(5){animation-delay:.50s}
@keyframes heroV2Caption{to{opacity:1;transform:none}}

.hero-progress{
  top:96px;
  height:4px;
  background:rgba(255,255,255,.28);
}
.site-header.scrolled + .hero-progress{top:84px}
.hero-progress span{
  background:linear-gradient(90deg,var(--v2-aqua),var(--v2-gold),#8b3a67);
}

/* ---------- booking dock ---------- */
.booking-dock{
  bottom:max(20px,env(safe-area-inset-bottom));
  width:min(1080px,calc(100% - 34px));
}
.booking-shell{
  position:relative;
  grid-template-columns:minmax(0,46fr) minmax(0,27fr) minmax(170px,27fr);
  gap:0;
  padding:28px 8px 8px;
  border:1px solid rgba(12,42,70,.1);
  border-radius:16px;
  background:#fff;
  box-shadow:0 26px 60px rgba(10,29,55,.24);
}
.booking-label{
  position:absolute;
  top:7px;
  left:18px;
  right:82px;
  min-height:auto;
  padding:0;
  gap:11px;
  font-size:.67rem;
}
.booking-label b{
  color:#fff;
  padding:3px 9px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--v2-aqua),var(--v2-navy));
  font-size:.58rem;
  letter-spacing:.1em;
}
.booking-label span{color:#657187}
.booking-field{
  min-height:58px;
  border-radius:0;
  padding:7px 18px;
  background:#fff;
  border-right:1px solid rgba(16,43,72,.11);
}
.field-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  color:var(--v2-gold-dark);
  background:#fbf4e8;
}
.booking-field small{font-size:.65rem}
.booking-field strong{
  color:var(--v2-ink);
  font-size:.82rem;
}
.booking-search{
  min-height:58px;
  margin-left:8px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--v2-gold),#b77f27);
  box-shadow:0 10px 22px rgba(168,112,31,.22);
  font-size:.86rem;
}
.booking-collapse{
  right:13px;
  top:-29px;
  color:#fff;
  background:var(--v2-navy);
  border-radius:8px 8px 0 0;
}
.booking-expand{
  background:linear-gradient(135deg,var(--v2-navy),var(--v2-blue));
}
.date-popover,.guest-popover{
  border-color:rgba(20,49,79,.13);
  box-shadow:0 28px 70px rgba(11,29,56,.25);
}
.day:hover,.day.selected{background:var(--v2-navy)}
.day.in-range{background:#e8f4f6}
.guest-done{background:var(--v2-navy)}

/* ---------- signature strip ---------- */
.signature-section{
  padding:105px 0 95px;
  background:#fff;
}
.signature-layout{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:72px;
  align-items:center;
}
.signature-intro h2{
  margin-bottom:20px;
  font-size:clamp(2.4rem,4.2vw,4.4rem);
  line-height:1.13;
}
.signature-intro p{
  max-width:540px;
  color:var(--v2-muted);
  font-size:1rem;
  line-height:1.85;
}
.signature-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.signature-features article{
  min-height:220px;
  padding:22px 22px 18px;
  border-left:1px solid var(--v2-line);
  text-align:center;
}
.signature-features article:first-child{border-left:0}
.feature-icon{
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  margin:0 auto 22px;
  color:var(--v2-navy);
}
.feature-icon svg{
  width:62px;
  height:62px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signature-features h3{
  margin-bottom:7px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:800;
}
.signature-features p{
  margin:0;
  color:var(--v2-muted);
  font-size:.78rem;
  line-height:1.65;
}

/* ---------- rooms ---------- */
.room-showcase-section{
  background:#f3f5f7!important;
}
.room-showcase-section .section-head{
  align-items:end;
}
.room-card-grid{
  gap:18px;
}
.room-card{
  position:relative;
  min-height:520px;
  border:0;
  border-radius:18px;
  background:#0b223b;
  box-shadow:0 18px 46px rgba(11,31,56,.15);
}
.room-card:hover{transform:translateY(-8px)}
.room-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(3,17,32,.88),rgba(3,17,32,.12) 62%);
  pointer-events:none;
}
.room-card img{
  width:100%;
  height:100%;
  min-height:520px;
  aspect-ratio:auto;
  object-fit:cover;
  transition:transform .6s ease;
}
.room-card:hover img{transform:scale(1.035)}
.room-card>div{
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  padding:30px;
  color:#fff;
}
.room-card small{color:#a8e4e7}
.room-card h3{
  margin:.35rem 0 .55rem;
  color:#fff;
  font-size:1.8rem;
}
.room-card p{
  display:-webkit-box;
  overflow:hidden;
  color:rgba(255,255,255,.76);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.room-card span{color:#f0c675}

/* ---------- editorial feature ---------- */
.feature-split{min-height:660px}
.feature-copy{
  background:linear-gradient(145deg,var(--v2-navy),var(--v2-navy-deep));
}
.feature-copy .eyebrow{color:#8de3e7}
.feature-copy h2{color:#fff}
.feature-copy .btn.outline.dark{
  width:max-content;
  color:#fff;
  border-color:rgba(255,255,255,.38);
  background:transparent;
}
.editorial-dining{padding:120px 0}
.editorial-dining .dining-grid{
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
}
.mosaic{gap:14px}
.mosaic img{border-radius:12px}

/* ---------- guide and FAQ ---------- */
.destination-journal{
  background:#f7f8fa!important;
}
.guide-grid{gap:16px}
.guide-grid a{
  min-height:250px;
  padding:31px;
  border-radius:12px;
  border-color:rgba(24,51,81,.12);
  box-shadow:0 12px 30px rgba(17,38,66,.05);
  transition:.3s ease;
}
.guide-grid a:hover{
  transform:translateY(-5px);
  border-color:rgba(196,145,65,.4);
  box-shadow:0 20px 45px rgba(17,38,66,.1);
}
.guide-grid span{color:var(--v2-gold-dark)}
.faq{background:#fff}
.faq details{
  border-color:rgba(20,47,76,.12);
  border-radius:10px;
}
.faq summary{color:var(--v2-navy)}

/* ---------- subpages ---------- */
.page-hero{
  min-height:660px;
}
.page-hero-shade{
  background:
    linear-gradient(90deg,rgba(4,22,40,.78),rgba(4,22,40,.32) 56%,transparent),
    linear-gradient(0deg,rgba(4,20,38,.35),transparent 42%);
}
.page-hero .container{padding-bottom:90px}
.page-hero h1{color:#fff}
.room-detail{min-height:760px}
.room-visual{background:#f1f3f5}
.room-main{border-radius:12px}
.room-copy{background:#fff}
.editorial-grid>img{border-radius:14px}

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(145deg,var(--v2-navy-deep),#0a3152);
}
.footer-logo{
  width:320px;
  filter:none;
}
.footer-grid h3{color:#fff}
.footer-grid a:hover{color:#f1c879}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .main-nav{gap:14px}
  .main-nav a{font-size:.68rem}
  .brand{width:245px}
  .signature-layout{grid-template-columns:1fr;gap:45px}
  .signature-features article:first-child{border-left:1px solid var(--v2-line)}
}
@media(max-width:900px){
  :root{--header-h:86px}
  .site-header{height:86px}
  .hero-progress{top:86px}
  .brand{width:230px}
  .main-nav{
    background:#fff;
    border:1px solid rgba(21,45,75,.1);
  }
  .hero-caption{
    left:28px;
    width:min(700px,calc(100% - 56px));
  }
  .hero-caption h1,.hero-caption h2{
    font-size:clamp(3rem,8vw,5.2rem);
  }
  .signature-features{
    grid-template-columns:repeat(2,1fr);
  }
  .signature-features article:nth-child(3){border-top:1px solid var(--v2-line)}
  .signature-features article:nth-child(4){border-top:1px solid var(--v2-line)}
  .room-card-grid{grid-template-columns:repeat(2,1fr)}
  .room-card:last-child{grid-column:1/-1}
  .editorial-dining .dining-grid{grid-template-columns:1fr}
  .booking-dock{width:calc(100% - 22px)}
}
@media(max-width:640px){
  .site-header{height:78px}
  .hero-progress{top:78px}
  .container{width:calc(100% - 28px)}
  .brand{width:205px}
  .hero-slider{min-height:760px}
  .hero-caption{
    left:16px;
    right:16px;
    bottom:178px;
    top:auto;
    width:auto;
    transform:none;
  }
  .hero-location{font-size:.54rem;letter-spacing:.14em}
  .hero-caption h1,.hero-caption h2{
    font-size:2.8rem;
    line-height:1.08;
  }
  .hero-caption p{
    display:-webkit-box;
    overflow:hidden;
    font-size:.9rem;
    line-height:1.65;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .hero-caption .hero-actions{margin-top:18px}
  .hero-caption .btn{min-height:44px}
  .signature-section{padding:72px 0}
  .signature-layout{gap:35px}
  .signature-features{grid-template-columns:1fr 1fr}
  .signature-features article{
    min-height:190px;
    padding:19px 13px;
  }
  .signature-features article:nth-child(odd){border-left:0}
  .signature-features article:nth-child(even){border-left:1px solid var(--v2-line)}
  .signature-features article:nth-child(n+3){border-top:1px solid var(--v2-line)}
  .feature-icon{width:58px;height:58px}
  .feature-icon svg{width:50px;height:50px}
  .room-card-grid{grid-template-columns:1fr}
  .room-card:last-child{grid-column:auto}
  .room-card,.room-card img{min-height:450px}
  .booking-shell{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    padding:27px 5px 5px;
  }
  .booking-label{
    left:11px;
    right:65px;
    font-size:.57rem;
  }
  .booking-label span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .booking-field{
    min-height:46px;
    padding-inline:9px;
  }
  .booking-search{
    grid-column:1/-1;
    min-height:43px;
    margin:5px 0 0;
  }
  .field-icon{display:none}
  .booking-field strong{font-size:.69rem}
  .feature-split{min-height:auto}
  .feature-image{height:430px}
  .feature-copy{padding:60px 24px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide.active picture img,
  .hero-slide.active .hero-caption>*,
  .room-card img{animation:none!important;transition:none!important}
  .hero-slide.active .hero-caption>*{opacity:1;transform:none}
}
