/* Inset photography and integrated booking controls follow the supplied reference. */
:root { --lime: #d5e2df; --green: #3f5b55; --ink: #293e3a; --paper: #f5f7f4; }
.cinematic { padding: 34px 4% 58px; background: linear-gradient(#8aaba35c, #2e474945), url('assets/hotel.jpg') center / cover; }
header { top: 54px; left: 8%; right: 8%; height: 60px; padding: 0; border: 0; display: grid; grid-template-columns: 1fr auto 1fr; }
header .brand { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 27px; font-weight: 400; justify-self: center; }
header .menu { display: flex; align-items: center; justify-content: start; gap: 13px; width: fit-content; height: 44px; padding: 0; border: 0; border-radius: 0; font-size: 9px; letter-spacing: 1px; }
header .menu svg { width: 17px; height: 17px; }
header .menu:hover { background: transparent; color: white; opacity: .7; }
.header-links { display: flex; justify-content: end; align-items: center; gap: 38px; font-size: 9px; letter-spacing: 1px; }
.header-links .header-book { display: flex; align-items: center; gap: 22px; padding: 0; min-height: 44px; background: none; color: white; }
.header-book svg { width: 14px; height: 14px; }
header nav { display: none; position: absolute; top: 68px; left: 0; right: auto; width: 280px; padding: 25px 30px; background: #334b47f5; border: 1px solid #ffffff40; box-shadow: 0 20px 40px #162b3220; }
header nav.open { display: flex; flex-direction: column; gap: 9px; animation: rise-in .25s ease-out; }
header nav a { font-family: 'Instrument Serif', Georgia, serif; font-size: 27px; padding: 9px 0; }
.hero { height: calc(100svh - 250px); min-height: 460px; max-height: 950px; border: 1px solid #ffffff80; border-bottom: 0; }
.hero-image { object-position: center 56%; filter: saturate(.72); }
.hero-shade { background: linear-gradient(180deg, #365e6930, #557f7820 55%, #172e325e); }
.hero-content { top: 22%; bottom: auto; left: 8%; right: 8%; display: block; text-align: center; }
.hero-title-wrap > .eyebrow { margin-bottom: 20px; font-size: 8px; letter-spacing: 2px; }
.hero h1 { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 105px; line-height: .94; text-shadow: 0 2px 25px #173c3c20; }
.hero h1 > span { white-space: normal; max-width: none; }
.hero h1 > em { color: white; margin-top: 0; }
.hero-title-wrap > p { font-size: 11px; margin: 25px 0 0; font-weight: 400; }
.hero-bottom { left: 4%; right: 4%; bottom: 20px; border: 0; padding: 0; }
.hero-bottom > a { font-size: 7px; letter-spacing: 1.3px; }
.slide-controls .icon-button { border-color: #ffffff60; width: 30px; height: 30px; padding: 6px; }
.booking { position: relative; grid-template-columns: 1fr 1fr .8fr 1.1fr; padding: 25px 4%; gap: 30px; min-height: 108px; color: white; background: #203834dc; backdrop-filter: blur(7px); border: 1px solid #ffffff80; border-top: 1px solid #ffffff35; }
.booking label { border: 0; padding-left: 0; gap: 10px; }
.booking label > span { color: #d1dcd7; font-size: 8px; }
.booking input, .booking select { color: white; color-scheme: dark; font-size: 12px; }
.booking select option { background: #293e3a; }
.booking .button { border: 0; border-left: 1px solid #ffffff30; background: transparent; color: white; padding: 12px 0 12px 30px; min-height: 45px; font-size: 11px; }
.booking .button:hover { color: #d5e2df; }
.form-error { color: #ffe1d8; }
.intro { padding-top: 100px; }
.asterisk { color: #8baba1; }
h2 em { color: #78918a; }
.marquee { display: none; }
.experiences, footer { background: #2e4641; }
.contact { background: #dde7e2; }
.scroll-progress { background: #cadcd4; }
.whatsapp { width: 49px; height: 49px; right: 18px; bottom: 18px; background: #477b63; border-width: 2px; }
.whatsapp > svg { width: 25px; height: 25px; }
@media (min-width: 1600px) {
  .hero h1 { font-size: 128px; }
  .hero-content { top: 24%; bottom: auto; }
}
@media (max-width: 1100px) {
  .header-links { gap: 23px; }
  .hero h1 { font-size: 94px; }
  .booking { gap: 20px; }
}
@media (max-width: 760px) {
  .cinematic { padding: 18px 15px 32px; }
  header { top: 32px; left: 34px; right: 34px; height: 45px; gap: 8px; }
  header .brand { font-size: 24px; }
  header .menu { gap: 8px; font-size: 7px; }
  header .menu svg { width: 14px; }
  .header-links { font-size: 7px; letter-spacing: .5px; }
  .header-links > a:first-child { display: none; }
  .header-links .header-book { font-size: 7px; gap: 7px; margin: 0; }
  .header-book svg { width: 11px; }
  header nav { top: 52px; width: 100%; max-width: 300px; }
  .hero { height: calc(100svh - 258px); min-height: 380px; max-height: 780px; }
  .hero-image { object-position: 52% center; }
  .hero-content { top: 25%; left: 5%; right: 5%; bottom: auto; }
  .hero h1 { font-size: 66px; line-height: 1; }
  .hero-title-wrap > .eyebrow { font-size: 7px; margin-bottom: 15px; }
  .hero-title-wrap > p { font-size: 10px; margin-top: 20px; }
  .hero-bottom { left: 6%; right: 6%; bottom: 17px; }
  .hero-bottom > a { font-size: 5px; letter-spacing: .6px; gap: 7px; }
  .slide-controls > span { font-size: 8px; }
  .slide-controls .icon-button { width: 27px; height: 27px; }
  .booking { grid-template-columns: 1fr 1fr; padding: 20px 24px 22px; gap: 18px 22px; min-height: 170px; }
  .booking label:nth-of-type(2) { border: 0; padding: 0; }
  .booking input { font-size: 11px; }
  .booking label > span { font-size: 7px; }
  .booking .button { border: 0; padding: 8px 0; gap: 10px; font-size: 10px; justify-content: space-between; }
  .intro { padding-top: 55px; }
}
@media (max-width: 370px) {
  header { left: 29px; right: 29px; }
  header .brand { font-size: 21px; }
  header .menu span { display: none; }
  .hero h1 { font-size: 58px; }
  .booking { padding: 20px; column-gap: 16px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .cinematic { padding-top: 20px; padding-bottom: 25px; }
  header { top: 35px; }
  .hero { min-height: 360px; height: calc(100svh - 175px); }
  .hero h1 { font-size: 78px; }
  .hero-content { top: 25%; }
  .hero-title-wrap > .eyebrow { margin-bottom: 12px; }
  .hero-title-wrap > p { margin-top: 13px; }
}
