/*
Direction contract: one question, two answers, then the calendar. The choice the
widget buries as a toggle becomes the page's first and only decision.
*/

body { background: #f6f7f9; }

.g-top { padding: 52px 0 40px; }
.g-top__inner { width: min(calc(100% - 40px), 940px); margin: 0 auto; }

.g-top h1 {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.g-top h1 em { color: var(--red); font-style: normal; }

.g-place {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.g-place svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--red); }

.g-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.g-booking { padding: 8px 0 12px; }
.g-booking__inner { width: min(calc(100% - 40px), 940px); margin: 0 auto; }
.g-booking .booking-stage, .g-booking #hdp-booking { min-height: 548px; }
.g-booking + .fact-rail { margin-top: 30px; }

@media (max-width: 720px) {
  .g-top { padding: 26px 0 20px; }
  .g-top__inner { width: min(calc(100% - 28px), 940px); }
  .g-top h1 { font-size: 33px; }
  .g-place { margin: 14px 0 18px; font-size: 14px; }
  .g-note { font-size: 13px; }

  .g-booking__inner { width: min(calc(100% - 20px), 940px); }
  .g-booking .booking-stage, .g-booking #hdp-booking { min-height: 510px; }
}