@font-face { font-family: DM Sans; src: url('/assets/dm-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: DM Sans; src: url('/assets/dm-semibold.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }
:root { color: #19233d; background: #f6f8fd; font: 14px/1.55 DM Sans, system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, select, input, textarea { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid #526abe; outline-offset: 3px; }
.site-header { width: min(1120px, calc(100% - 40px)); margin: auto; display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 72px; border-bottom: 1px solid #e0e6f2; }
.brand { display: block; position: relative; overflow: hidden; width: 128px; height: 27px; mix-blend-mode: multiply; }
.brand img { position: absolute; width: 144%; height: auto; left: -22%; top: -70%; }
.back { color: #3d519d; font-weight: 700; text-decoration: none; }
.back:hover { text-decoration: underline; }
main { width: min(980px, calc(100% - 40px)); margin: auto; padding: 36px 0 70px; }
.hero { border-radius: 16px 16px 0 0; padding: clamp(25px, 5vw, 54px); min-height: 245px; background: linear-gradient(95deg, #eef2fe 4%, #f4f7ffe8 42%, #f3f7ff25 85%), url('/assets/hero-mountains.png') center 72% / cover; }
h1, h2, p { margin: 0; }
h1 { font: 400 clamp(54px, 7vw, 92px)/.94 Georgia, serif; letter-spacing: -.064em; }
.hero p { max-width: 360px; margin: 16px 0 12px; color: #334463; font-size: 16px; }
.duration { display: inline-block; border: 1px solid #d5def4; padding: 4px 10px; border-radius: 20px; color: #30468c; background: #f6f8ff; font-size: 12px; font-weight: 700; }
#booking-form { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); border: 1px solid #e0e6f2; border-top: 0; border-radius: 0 0 16px 16px; background: white; }
#booking-form > section { padding: clamp(20px, 4vw, 36px); min-width: 0; }
#booking-form > section + section { border-left: 1px solid #e0e6f2; }
h2 { font-size: 20px; letter-spacing: -.025em; margin-bottom: 16px; }
label, legend { display: block; color: #34415e; font-size: 13px; font-weight: 700; }
label > span, legend > span { font-size: 11px; font-weight: 400; margin-left: 4px; color: #586584; }
label + label { margin-top: 11px; }
input, select, textarea { width: 100%; border: 1px solid #d6def1; border-radius: 8px; padding: 9px 11px; background: #fcfdff; color: #19233d; }
label > input, label > textarea, select { margin-top: 5px; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 17px 0 0; }
legend { margin-bottom: 8px; padding: 0; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.slot { position: relative; margin: 0 !important; }
.slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.slot span { display: block; text-align: center; padding: 7px 4px; margin: 0; font-size: 12px; font-weight: 700; border: 1px solid #dce3f4; border-radius: 7px; cursor: pointer; color: #354a91; }
.slot input:checked + span { color: white; border-color: #475ba8; background: #475ba8; }
.slot input:focus-visible + span { outline: 2px solid #526abe; outline-offset: 2px; }
.slot:hover span { border-color: #7487c5; }
.primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 41px; padding: 8px 13px; border: 0; border-radius: 8px; background: #4659a6; color: white; font-weight: 700; cursor: pointer; }
.primary:hover { background: #374987; }
.primary:disabled { opacity: .55; cursor: default; }
#reserve { width: 100%; margin-top: 13px; }
.field-status, .error { margin-top: 10px; font-size: 13px; color: #586584; }
.error { color: #903740; }
.field-status:empty, .error:empty { display: none; }
.text-button { color: #384d9a; background: transparent; border: 0; padding: 0; margin-top: 8px; cursor: pointer; font-weight: 700; }
.confirmation { padding: 28px; border: 1px solid #e0e6f2; border-radius: 0 0 16px 16px; background: white; }
.confirmation p + p { margin-top: 6px; color: #546280; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
@media (max-width: 680px) {
  main { padding-top: 20px; }
  #booking-form { grid-template-columns: 1fr; }
  #booking-form > section + section { border-left: 0; border-top: 1px solid #e0e6f2; }
  .hero { background-position: 65% 70%; }
}