/* General styles */
:root {
  --olive: #606d38;
  --cream: #fffcea;
  --page-background: #F8F2E9;
  --ink: #283517;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--olive);
  font-family: 'DM Sans','Inter',Arial,sans-serif;
}

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

button,a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,button:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 6px;
}


/* Shared style for text action buttons; widths belong to their layouts. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 78px; padding: 0; border: 0; border-radius: 15px; background: var(--olive); color: #FFFFFF; font-family: 'Alumni Sans SC',sans-serif; font-size: 32px; font-weight: 400; line-height: normal; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.5s ease, color 0.5s ease; --button-hover: #455126; --button-active: #303C28; }
@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-hover); }
}
.button:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-active); }
.button:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.button-light { background: #E8D58F; color: #303C28; --button-hover: #DFC66F; --button-active: #D5BB60; }
.button-light:focus-visible { outline-color: #F8F2E9; }
.button:disabled,.button[aria-disabled="true"] { opacity: 1; cursor: default; }

/* Hero */
.hero {
  padding: 45px 3.125% 56px;
  max-width: 2400px;
  margin: auto;
}

.header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 15px;
  position: relative;
}

.logo,.phone {
  font-family: 'Alumni Sans SC',sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.contact {
  display: flex;
  align-items: center;
  gap: 60px;
}

.phone {
  white-space: nowrap;
}

.booking {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 283px;
}

.intro {
  margin-top: 92px;
  display: grid;
  grid-template-columns: minmax(0,1.9fr) minmax(0,.9fr);
  gap: 6.3%;
  align-items: end;
}

.hero h1 {
  font-family: 'Alumni Sans SC',sans-serif;
  font-weight: 400;
  font-size: clamp(64px,5.41667vw,104px);
  line-height: .798076923;
  margin: 0;
  letter-spacing: -.01em;
}

.intro p {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.photo {
  position: relative;
  height: clamp(400px,30.3646vw,729px);
  margin-top: 60px;
  border-radius: 20px;
  overflow: hidden;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.menu-toggle,.mobile-menu {
  display: none;
}

/* Landing sections */
.landing-draft {
  max-width: 2400px;
  margin: auto;
  padding: 0 3.125% 32px;
  color: var(--ink);
}

.draft-section {
  padding: 64px 0;
}

.draft-label {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--olive);
}

.draft-section h2,.draft-section h3 {
  font-family: 'Alumni Sans SC',sans-serif;
  color: var(--olive);
  font-weight: 400;
  margin: 0;
}

.draft-section h2 {
  font-size: 64px;
  line-height: 1;
}

.draft-section h3 {
  font-size: 36px;
  line-height: 1.1;
}

.draft-section p {
  line-height: 1.5;
}

.draft-lead {
  max-width: 720px;
  font-size: 18px;
  font-weight: 300;
  margin: 20px 0 32px;
}

.draft-grid,.draft-gallery {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.draft-card {
  border: 1px solid #606d3838;
  border-radius: 20px;
  padding: 24px;
}

.draft-card p {
  font-size: 16px;
  font-weight: 300;
  margin: 16px 0;
}

.draft-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-radius: 16px;
  background: #606d3810;
  border: 1px dashed #606d3859;
  color: var(--olive);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

.draft-card .draft-placeholder {
  margin-bottom: 24px;
}

.draft-note {
  font-size: 13px;
  color: var(--olive);
}

.draft-gallery {
  margin-top: 32px;
}

.draft-disabled {
  display: inline-block;
  margin-top: 24px;
  padding: 20px 28px;
  border-radius: 15px;
  background: var(--olive);
  color: var(--cream);
  font-family: 'Alumni Sans SC',sans-serif;
  font-size: 28px;
}

.draft-faq {
  margin-top: 32px;
  max-width: 900px;
}

.draft-faq article {
  padding: 24px 0;
  border-bottom: 1px solid #606d3838;
}

.draft-faq p {
  font-weight: 300;
  margin: 12px 0 0;
}

.draft-location {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  margin-top: 32px;
}

.draft-location .draft-placeholder {
  min-height: 280px;
}

/* Cabin selection: photography and aligned comparison rows. */
.cabins { padding: 88px 0 72px; }
.cabins-heading { margin-bottom: 56px; }
.cabins h2 { font-size: clamp(72px,5vw,96px); line-height: .88; letter-spacing: -.01em; }
.cabin-lineup,.booking-layout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.cabin-option { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border-radius: 20px; overflow: hidden; }
.cabin-photo { margin: 0; height: 360px; overflow: hidden; flex-shrink: 0; }
.cabin-info { display: flex; flex-direction: column; flex: 1; padding: 48px 32px 40px; background: #FFFFFF; }
.cabin-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cabin-name { display: flex; gap: 16px; align-items: baseline; }
.cabins h3 { font-size: 64px; line-height: .95; letter-spacing: -.01em; }
.cabin-description { flex: 1; min-height: 54px; margin: 12px 0 36px; font-size: 16px; font-weight: 300; }
.cabin-facts { margin: 0; font-size: 16px; }
.cabin-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid #606d3838; }
.cabin-facts dt { color: var(--olive); font-weight: 300; }
.cabin-facts dd { margin: 0; text-align: right; }
.cabins .cabin-price { font-family: 'Alumni Sans SC',sans-serif; font-size: 48px; line-height: 1; color: var(--olive); margin: 36px 0 0; }
.cabin-price span { font-family: 'DM Sans','Inter',sans-serif; font-size: 14px; font-weight: 300; }

/* Responsive styles */
/* On-page booking concept: native fields, no submission or availability logic. */
.booking-layout { align-items: start; }
.booking-layout > .booking-form { grid-column: 2 / 4; }
.booking-intro { min-width: 0; }
.booking-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: center; margin: 0; }
.booking-documents { grid-column: 1; }
.booking-check { grid-column: 2; }
.booking-documents { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.booking-consent { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; }
.booking-consent input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: var(--olive); }
.booking-document { color: var(--olive); text-decoration: underline; text-underline-offset: 4px; cursor: default; }
.booking-policy { display: block; margin: 4px 0 0 40px; padding: 0; }
.booking-consent input:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.booking-field { position: relative; display: flex; flex-direction: column; min-width: 0; font-size: 16px; color: var(--olive); }
.booking-field input,.booking-field select { appearance: none; display: block; width: 100%; min-width: 0; height: 64px; padding: 16px 64px 16px 24px; border: 0; border-radius: 15px; background: #FFFFFF; color: var(--ink); font-family: 'DM Sans','Inter',Arial,sans-serif; font-size: 16px; font-weight: 300; }
.booking-icon { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; stroke: var(--olive); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.booking-field input::-webkit-calendar-picker-indicator { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
.booking-field input:focus,.booking-field select:focus { outline: none; }
.booking-field input:focus { color: #727763; }
.booking-field select,.booking-field select:focus,.booking-field select option { color: #000000; -webkit-text-fill-color: currentColor; }
.booking-cabin select:has(option:checked[value=""]),.booking-cabin select option[value=""] { color: #727763; }
.booking-check { width: 100%; }
/* Optical alignment with the lowercase letters of the 104px heading. */
@media (min-width: 1601px) {
  .booking-layout > .booking-form { margin-top: 21px; }
}
@media (max-width: 1600px) {
  .booking-layout { grid-template-columns: 1fr; gap: 40px; }
  .booking-layout > .booking-form { grid-column: 1; }
  .booking-form { gap: 24px; margin: 0; }
  .booking-check { grid-column: 2; justify-self: stretch; }
}
@media (max-width: 700px) {
  .booking-layout { gap: 32px; }
  .booking-form { gap: 20px; }
  .booking-field,.booking-documents { grid-column: 1 / -1; }
  .booking-field input,.booking-field select { height: 64px; padding-top: 12px; padding-bottom: 12px; }
  .booking-check { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}


/* Atmosphere: full-width photographic carousel. */
.draft-section.atmosphere { padding: 0 0 100px; }
.atmosphere-slider { position: relative; height: clamp(480px,36vw,720px); overflow: hidden; color: var(--cream); }
.atmosphere-slide { position: absolute; inset: 0; margin: 0; }
.atmosphere-slide[hidden] { display: none; }
.atmosphere-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.atmosphere-slider::after { content: ''; position: absolute; right: 0; bottom: 0; width: 360px; max-width: 100%; height: 160px; pointer-events: none; background: radial-gradient(ellipse at bottom right,rgba(24,32,18,.5),transparent 72%); }
.atmosphere-controls { position: absolute; z-index: 1; right: 48px; bottom: 40px; display: flex; align-items: center; gap: 24px; }
.atmosphere-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 6px; border: 0; background: transparent; color: inherit; }
.atmosphere-arrow:disabled { opacity: 1; cursor: default; }
.atmosphere-arrow svg { display: block; width: 30px; height: 24px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atmosphere-counter { font-size: 16px; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atmosphere-counter span { margin: 0 8px; }
@media (max-width: 1200px) {
  .draft-section.atmosphere { padding: 0 0 80px; }
  .atmosphere-slider { height: 420px; }
  .atmosphere-controls { right: 32px; bottom: 28px; gap: 16px; }
}
@media (max-width: 700px) {
  .draft-section.atmosphere { padding: 0 0 64px; }
  .atmosphere-slider { height: clamp(360px,100vw,440px); }
  .atmosphere-controls { right: 18px; bottom: 20px; gap: 16px; }
}
@media(min-width:1201px) {
  .intro {
    grid-template-columns: minmax(0,1fr) 32.111%;
    gap: 6.3%;
  }

  .contact {
    width: calc((100% + 15px)*.32111 - 15px);
    justify-content: space-between;
    gap: 16px;
  }

  .phone {
    font-size: 32px;
  }

  .booking {
    flex-shrink: 0;
    width: min(283px,calc(100% - 202px));
  }
}

@media(max-width:1200px) and (min-width:701px) {
  .hero {
    padding-top: 30px;
  }

  .contact {
    gap: 30px;
  }

  .phone {
    font-size: 32px;
  }

  .booking {
    width: 210px;
  }

  .intro {
    margin-top: 70px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .intro p {
    max-width: 600px;
    font-size: 20px;
  }

  .photo {
    margin-top: 40px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-bottom: 24px;
  }

  .header,.intro {
    flex-shrink: 0;
  }

  .hero h1 {
    font-size: 64px;
    line-height: 51px;
  }

  .subtitle-second {
    display: block;
  }

  .photo {
    flex: 1;
    min-height: 480px;
    height: auto;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    object-position: 25% top;
  }
}

@media(max-width:900px) {
  .draft-grid {
    gap: 16px;
  }

  .draft-card {
    padding: 18px;
  }

  .draft-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .draft-gallery .draft-placeholder:first-child {
    grid-column: 1/-1;
  }
}

@media(max-width:700px) {
  .hero {
    padding: 15px 12px;
    max-width: none;
  }

  .header {
    height: 48px;
    margin: 0 12px;
    padding: 0;
    align-items: flex-start;
  }

  .logo {
    font-size: 32px;
  }

  .contact {
    display: none;
  }

  .menu-toggle {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 30px;
    margin: -1px -7px 0 0;
    padding: 11px 7px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    width: 30px;
    height: 2px;
    background: var(--olive);
  }

  .intro {
    display: block;
    margin: 60px 12px 0;
  }

  .hero h1 {
    font-size: 64px;
    line-height: 51px;
    max-width: 440px;
  }

  .first-line,.second-line {
    white-space: nowrap;
  }

  .desktop-break {
    display: none;
  }

  .intro p {
    font-size: 18px;
    line-height: 23px;
    margin-top: 20px;
    font-weight: 300;
  }

  .photo {
    margin-top: 35px;
    height: auto;
    aspect-ratio: 378/372;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    object-position: 25% center;
  }



  .landing-draft {
    padding: 0 24px 24px;
  }

  .draft-section {
    padding: 40px 0;
  }

  .draft-section h2 {
    font-size: 48px;
  }

  .draft-section h3 {
    font-size: 32px;
  }

  .draft-lead {
    font-size: 16px;
  }

  .draft-grid,.draft-gallery,.draft-location {
    grid-template-columns: 1fr;
  }

  .draft-gallery .draft-placeholder:first-child {
    grid-column: auto;
  }

  .draft-disabled {
    font-size: 24px;
    padding: 18px 20px;
  }
}

@media(max-width:370px) {
  .hero h1 {
    font-size: clamp(50px,15.92vw,64px);
    line-height: .796875;
  }
}

/* Cabin selection: responsive composition. */
@media (min-width: 1001px) and (max-width: 1400px) {
  .cabin-lineup { gap: 24px; }
  .cabin-photo { height: 300px; }
  .cabin-description { min-height: 78px; }
}
@media (max-width: 1000px) {

  .cabin-photo { height: 340px; margin: 0; }
  .cabin-description { margin: 12px 0 28px; min-height: 72px; }
  .cabins h3 { font-size: 56px; }
}
@media (max-width: 700px) {
  .cabins { padding: 48px 0; }
  .cabins-heading { margin-bottom: 36px; }
  .cabins h2 { font-size: 64px; }
  .cabin-option { grid-template-columns: 1fr; margin: 0 -12px; }
  .cabin-photo { height: auto; aspect-ratio: 3 / 2; margin: 0; }
  .cabin-info { padding: 48px 24px 36px; }
  .cabins h3 { font-size: 56px; }
  .cabin-description { font-size: 15px; min-height: 90px; }
  .cabin-facts { font-size: 15px; }
}

/* Desktop type scale; tablet and mobile keep their existing sizes. */
@media (min-width: 1201px) {
  .logo { font-size: 48px; }
  .phone { font-size: 32px; }
  .draft-section h2,.cabins h2 {
    font-size: 104px;
    line-height: .798076923;
    letter-spacing: -.01em;
  }
  .draft-section h3 { font-size: 32px; }
  .cabins h3 { font-size: 48px; }
  .cabins .cabin-price { font-size: 48px; }
  .intro p,.draft-lead { font-size: 22px; }
  .draft-label,.draft-note,.draft-placeholder,.cabin-price span { font-size: 16px; }
  .draft-disabled { font-size: 32px; }
}

/* Equal section intervals, owned by one section at each transition. */
:root { --section-gap: 128px; }
.hero { padding-bottom: 0; }
.landing-cabins { padding-bottom: 0; }
.cabins { padding: var(--section-gap) 0; }
.draft-section.atmosphere { padding: 0 0 var(--section-gap); }
.booking-section { padding: 0; }
.faq { padding: var(--section-gap) 0 0; }
.location { padding: var(--section-gap) 0 64px; }

@media (max-width: 700px) {
  :root { --section-gap: 80px; }
  .location { padding-bottom: 40px; }
}

/* FAQ: heading above an open two-column question grid. */
.faq-layout { display: grid; gap: 56px; }
.faq-heading h2 { margin-bottom: 0; }
.faq .draft-faq { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; width: 100%; max-width: none; margin: 0; }
.faq .draft-faq article { min-width: 0; padding: 0; border: 0; }
.faq .draft-faq article + article { border-top: 1px solid #606d3838; }
.faq .draft-faq h3 { margin: 0; }
.faq .draft-faq p { max-width: 680px; margin: 0; padding: 0 48px 28px 0; }
@media (max-width: 700px) {
  .faq-layout { gap: 32px; }
  .faq .draft-faq { grid-template-columns: 1fr; gap: 32px; }
  .faq .draft-faq { gap: 0; }
  .faq-column + .faq-column { border-top: 1px solid #606d3838; }
}

.faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 28px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.faq-symbol { position: relative; flex: 0 0 24px; width: 24px; height: 24px; font-size: 0; color: var(--olive); }
.faq-symbol::before,.faq-symbol::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor; transform: translate(-50%,-50%); }
.faq-symbol::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-toggle[aria-expanded="true"] .faq-symbol::after { display: none; }
.faq-answer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms ease, visibility 240ms; }
.faq-answer[aria-hidden="false"] { grid-template-rows: 1fr; visibility: visible; }
.faq-answer-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .faq-answer { transition: none; } }

/* Booking: full-width colour, with equal internal section spacing. */
.booking-section { padding: var(--section-gap) 0; background: #303C28; color: #F8F2E9; box-shadow: 0 0 0 100vmax #303C28; clip-path: inset(0 -100vmax); }
.draft-section.atmosphere { padding-bottom: 0; }
.booking-section h2,.booking-section .booking-documents,.booking-section .booking-document { color: #F8F2E9; }
.booking-section .booking-consent input { accent-color: #F8F2E9; }
.booking-section .booking-consent input:focus-visible { outline-color: #F8F2E9; }

/* Booking button placement. */
.booking-section .booking-check { grid-column: 2; justify-self: start; width: 283px; max-width: 100%; }
@media (max-width: 700px) {
  .booking-section .booking-check { grid-column: 1 / -1; width: 100%; }
}

/* Regional map is independent of the compact contact section. */
.region-map { width: 100%; height: 630px; margin-top: var(--section-gap); }
#regional-map { width: 100%; height: 100%; background: #F8F2E9; }
.region-map .maplibregl-ctrl-attrib { max-width: 100%; color: #303C28; background: #F8F2E9; }
.region-map .maplibregl-ctrl-attrib a { color: #303C28; }
.location .draft-location { grid-template-columns: 1fr; }
@media (max-width: 700px) { .region-map { height: 380px; } }

/* Compact concept footer, using the page's three-column guides. */
.site-footer { padding: 72px 0 32px; color: var(--olive); }
.footer-wordmark { container-type: inline-size; margin-top: 48px; padding-top: 32px; }
.footer-brand { display: block; width: fit-content; max-width: none; margin-left: -1.1%; font-family: 'Alumni Sans SC',sans-serif; font-size: 24.15cqw; font-weight: 500; line-height: .85; white-space: nowrap; }
.footer-columns { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; margin-top: 0; align-items: start; }
.footer-address { max-width: 440px; }
.footer-columns p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; }
.footer-columns .footer-phone { justify-self: end; text-align: right; font-family: 'Alumni Sans SC',sans-serif; font-size: 32px; font-weight: 400; line-height: 1.1; }
.footer-note { margin: 48px 0 0; font-size: 14px; line-height: 1.5; font-weight: 300; }

@media (max-width: 700px) {
  .site-footer { padding: 48px 0 24px; }
  .footer-wordmark { margin-top: 32px; padding-top: 24px; }
  .footer-columns { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
  .footer-columns .footer-phone { justify-self: start; text-align: left; }
  .footer-note { margin-top: 32px; }
}

/* Cabin selection continues directly in the existing booking form. */
.cabin-action-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; min-height: 112px; margin-top: 36px; }
.cabins .cabin-action-row .cabin-price { flex: 0 0 auto; margin: 0; }
.cabin-select { flex: 0 1 283px; min-width: 0; }
.booking-form { scroll-margin-top: 24px; }

@media (max-width: 700px) {
  .cabin-action-row .cabin-price span { display: block; margin-top: 6px; line-height: 1; }
}



@media (min-width: 701px) and (max-width: 1200px) { .button { height: 65px; } }

/* Persistent date labels stay inside the unchanged 64px fields. */
.booking-date-label { position: absolute; z-index: 1; top: 8px; left: 24px; color: var(--olive); font-family: 'DM Sans','Inter',sans-serif; font-size: 14px; font-weight: 300; line-height: 18px; pointer-events: none; }
.booking-field.booking-arrival input,.booking-field.booking-departure input { padding-top: 28px; padding-bottom: 8px; }

/* Slider enhancement: fixed frames, opacity-only transitions and native vertical scrolling. */
.atmosphere-slider.is-enhanced { touch-action: pan-y pinch-zoom; }
.atmosphere-slider.is-enhanced .atmosphere-slide { opacity: 0; pointer-events: none; }
.atmosphere-slider.is-enhanced .atmosphere-slide.is-active { opacity: 1; }
.atmosphere-slider.is-enhanced .atmosphere-arrow { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .atmosphere-slider.is-enhanced .atmosphere-slide { transition: none; }
}

/* The outgoing photograph remains opaque below the incoming fade. */
.atmosphere-slider.is-enhanced::after { z-index: 2; }
.atmosphere-slider.is-enhanced .atmosphere-controls { z-index: 3; }

/* Full-screen mobile navigation; native dialog keeps the page behind it inert. */
.mobile-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 24px; border: 0; border-radius: 0; background: transparent; color: #F8F2E9; overflow-y: auto; overscroll-behavior: contain; isolation: isolate; }
.mobile-menu[open] { display: block; }
.mobile-menu::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #303C28; transform: translateY(-100%); transition: transform 420ms cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.mobile-menu.is-open::before { transform: translateY(0); }
.mobile-menu::backdrop { background: transparent; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: flex-start; min-height: 44px; position: relative; top: -9px; }
.menu-close { display: flex; position: relative; flex-direction: column; justify-content: space-between; width: 44px; height: 30px; margin: -1px -7px 0 0; padding: 11px 7px 10px; border: 0; background: transparent; cursor: pointer; }
.mobile-menu-logo { font-family: 'Alumni Sans SC',sans-serif; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 26px; margin: 64px 0 32px; }
.mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; font-family: 'Alumni Sans SC',sans-serif; font-size: 64px; font-weight: 300; line-height: 1.1; opacity: 0; transform: translateY(8px); transition: opacity 160ms ease, transform 200ms ease; }
.mobile-menu.is-open .mobile-menu-links a { opacity: 1; transform: translateY(0); transition-duration: 320ms; transition-timing-function: cubic-bezier(.22,.61,.36,1); transition-delay: calc(200ms + 50ms * var(--item)); }
body.menu-open { position: fixed; width: 100%; overflow: hidden; }
@media (min-width: 701px) and (max-width: 900px) {
  .header .contact { display: none; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 15px 7px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 30px; height: 2px; background: var(--olive); }
  .mobile-menu { padding: 32px; }
  .mobile-menu-links { max-width: 640px; margin: 64px auto 32px; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) { .mobile-menu::before,.mobile-menu-links a { transition: none; transition-delay: 0ms; } .mobile-menu-links a { transform: none; } }

/* The same two-line control stays aligned with the hero header. */
.menu-close span,.menu-toggle span { width: 30px; height: 2px; flex-shrink: 0; background: var(--olive); transform-origin: center; transition: transform 240ms ease; }
.mobile-menu.is-open .menu-close span:first-child { transform: translateY(3.5px) rotate(45deg); }
.mobile-menu.is-open .menu-close span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-close:focus { outline: none; }
.menu-close:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }
@media (min-width: 701px) and (max-width: 900px) {
  .mobile-menu-header { top: 0; }
  .menu-close { height: 44px; margin: 0; padding: 15px 7px; }
  .mobile-menu.is-open .menu-close span:first-child { transform: translateY(6px) rotate(45deg); }
  .mobile-menu.is-open .menu-close span:last-child { transform: translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .menu-close span,.menu-toggle span { transition: none; } }

.mobile-menu-header { margin-right: var(--menu-scrollbar-gap, 0px); }

/* Match the booking section palette inside the menu only. */
.mobile-menu .menu-close span { background: currentColor; }
.mobile-menu .menu-close { color: inherit; }
.mobile-menu a:focus-visible,.mobile-menu .menu-close:focus-visible { outline-color: #F8F2E9; }

@media (max-width: 370px) {
  .mobile-menu-links { gap: 22px; }
  .mobile-menu-links a { font-size: clamp(50px,15.92vw,64px); }
}

/* Menu panel follows its content, with equal 100px visual breathing room. */
.mobile-menu { bottom: auto; height: auto; max-height: 100dvh; padding-bottom: 150px; border-radius: 0 0 20px 20px; }
.mobile-menu::before { position: absolute; border-radius: 0 0 20px 20px; }
.mobile-menu-links { margin-top: 79px; margin-bottom: 0; }
@media (min-width: 701px) and (max-width: 900px) { .mobile-menu-links { margin-top: 88px; margin-bottom: 0; } }

/* Short viewports: keep the header outside the independently scrolling links. */
@media (max-width: 900px) and (max-height: 680px) {
  .mobile-menu[open] { display: flex; flex-direction: column; }
  .mobile-menu { max-height: calc(100dvh - 24px); overflow: hidden; padding-bottom: clamp(24px,calc(25dvh - 96px),64px); }
  .mobile-menu-header { flex: 0 0 44px; }
  .mobile-menu-links { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin-top: clamp(16px,calc(20dvh - 80px),48px); gap: clamp(8px,calc(10dvh - 40px),18px); padding: 6px; margin-left: -6px; margin-right: -6px; }
  .mobile-menu-links a { flex-shrink: 0; }
}

/* Keep touch/keyboard scrolling without a bright native scrollbar during reveals. */
.mobile-menu-links::-webkit-scrollbar { display: none; }

/* Mobile hide-on-scroll header; the slot prevents content from jumping. */
@media (max-width: 900px) {
  .mobile-header-slot { height: 48px; flex-shrink: 0; }
  .mobile-header-slot .header { position: fixed; z-index: 20; inset: 0 0 auto; margin: 0; height: 62px; padding: 15px 24px; background: #F8F2E9; transform: translateY(0); transition: transform 280ms cubic-bezier(.22,.61,.36,1); }
  .mobile-header-slot .header.is-scroll-hidden { transform: translateY(-100%); }
  #cabins,#atmosphere,#booking,#faq,#location { scroll-margin-top: 90px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .mobile-header-slot { height: 78px; }
  .mobile-header-slot .header { height: 168px; padding: 60px 3.125%; }
  #cabins,#atmosphere,#booking,#faq,#location { scroll-margin-top: 180px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-header-slot .header { transition: none; } }

@media (max-width: 900px) { .mobile-header-slot .header.is-past-hero { background: #FFFFFF; } }

/* Shared mobile/tablet cabin carousel; desktop retains the three-column grid. */
.cabin-carousel-controls { display: none; }
@media (max-width: 1024px) {
  .cabin-lineup { display: flex; align-items: stretch; gap: 16px; margin: 0 -12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cabin-lineup::-webkit-scrollbar { display: none; }
  .cabin-lineup::after { content: ''; flex: 0 0 8px; }
  .cabin-lineup .cabin-option { display: flex; flex-direction: column; flex: 0 0 calc(100% - 24px); margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .cabin-lineup .cabin-info { flex: 1; }
  .cabin-carousel-controls:not([hidden]) { display: none; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; color: var(--olive); }
  .cabin-carousel-counter { margin-right: auto; font-size: 16px; font-weight: 300; font-variant-numeric: tabular-nums; }
  .cabin-carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 6px; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .cabin-carousel-arrow svg { width: 30px; height: 24px; stroke: currentColor; stroke-width: 1.3; }
  .cabin-carousel-arrow:disabled { opacity: .35; cursor: default; }
}

@media (max-width: 370px) { .cabin-lineup .cabin-info { padding-left: 18px; padding-right: 18px; } }

@media (max-width: 1024px) { .cabin-lineup:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; } }

/* Mobile card actions stack; shared .button keeps the hero typography and shape. */
@media (max-width: 700px) {
  .cabin-action-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; }
  .cabin-action-row .cabin-price { white-space: nowrap; }
  .cabin-action-row .cabin-price span { display: inline; margin-top: 0; line-height: inherit; }
  .cabin-action-row .cabin-select { flex: 0 0 auto; width: fit-content; max-width: none; height: auto; padding: 12px 24px; white-space: nowrap; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .cabin-lineup { gap: 24px; margin: 0; }
  .cabin-lineup .cabin-option { flex-basis: calc(100% - 64px); }
  .cabin-lineup::after { flex-basis: 40px; }
  .cabin-carousel-controls:not([hidden]) { display: none; }
}

/* Inline field feedback grows the existing grid without moving field icons. */
.booking-field { align-self: start; }
.booking-error { color: #F8F2E9; font-size: 14px; font-weight: 300; line-height: 1.4; }
.booking-error:not(:empty) { margin-top: 8px; }
.booking-field .booking-icon { top: 32px; }
.booking-field input::-webkit-calendar-picker-indicator { top: 32px; }

.booking-duration { grid-column: 1 / -1; margin: -12px 0 -8px; color: #F8F2E9; font-size: 14px; font-weight: 300; line-height: 1.4; }

.booking-documents .booking-error { display: block; margin-left: 40px; }

@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

/* Use the booking button's exact yellow for individual invalid controls. */
.booking-field input[type="date"][aria-invalid="true"],.booking-field select[aria-invalid="true"],.booking-section .booking-consent input[aria-invalid="true"] { box-shadow: none; outline: 2px solid #E8D58F; outline-offset: 2px; }

.booking-field input,.booking-field select { text-decoration: none; }
/* The date picker is a native internal focus stop: track the whole field. */
.booking-field:focus-within::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 64px;
  border-radius: 15px;
  outline: 3px solid #F8F2E9;
  outline-offset: 3px;
  pointer-events: none;
}
.booking-field:focus-within:has([aria-invalid="true"])::after {
  outline-color: #E8D58F;
  outline-style: dashed;
}
.booking-field:focus-within input[type="date"],
.booking-field:focus-within select { outline: none; box-shadow: none; }

/* Adjacent light/dark strokes remain visible over every photograph. */
.atmosphere-arrow:focus-visible {
  outline: 2px solid #F8F2E9;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #303C28;
}

/* Filled native dates remain black, including Chrome's date segments. */
.booking-field input[type="date"][data-has-value] { color: #000000; -webkit-text-fill-color: #000000; }
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit,
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit-fields-wrapper,
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit-day-field,
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit-month-field,
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit-year-field,
.booking-field input[type="date"][data-has-value]::-webkit-datetime-edit-text { color: #000000; -webkit-text-fill-color: #000000; }

/* Intermediate desktop cards keep the complete action below the price. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .cabin-action-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; }
  .cabin-action-row .cabin-price { white-space: nowrap; }
  .cabin-action-row .cabin-select { flex: 0 0 auto; width: fit-content; padding-inline: 24px; white-space: nowrap; }
}

/* Short landscape tablets/phones retain the existing header controls. */
@media (min-width: 701px) and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .mobile-header-slot .header { height: 78px; padding: 15px 3.125%; }
  #cabins,#atmosphere,#booking,#faq,#location { scroll-margin-top: 90px; }
}

/* Extend the small controls' hit areas without moving their two lines. */
@media (max-width: 700px) {
  .menu-toggle::before,.menu-close::before { content: ''; position: absolute; inset: -7px 0; }
}
.region-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }

/* Continuous desktop heading: fluid type, shared columns, balanced wrapping. */
@media (min-width: 1025px) {
  .hero .intro { grid-template-columns: minmax(0,1fr) 32.111%; margin-top: clamp(70px,6.4vw,92px); }
  .hero .desktop-break { display: none; }
  .hero h1 {
    font-size: clamp(80px,7.5vw,104px);
    line-height: .798076923;
    max-width: clamp(7.2em,calc(100vw - 690px),10.6em);
    text-wrap: balance;
  }
  .hero h1 .second-line { white-space: nowrap; }
}

/* Header actions size to their content instead of a narrow percentage column. */
@media (min-width: 901px) {
  .header .contact { width: auto; gap: clamp(24px,3.125vw,60px); }
  .header .booking { width: clamp(222px,14.74vw,283px); min-width: max-content; flex-shrink: 0; padding-inline: 32px; white-space: nowrap; }
}