:root {
  --bay: #142033;
  --ink: #243044;
  --gold: #9a7433;
  --sand: #f3eee6;
  --paper: #fbf8f3;
  --line: #e4d8c6;
  --muted: #66758a;
  --header: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Outfit", "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--bay);
  line-height: 1.08;
}
h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 6vw, 4.6rem); }
h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
p { margin: 0 0 14px; }
a { color: inherit; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header);
  padding: 8px max(18px, 4vw);
  padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(255, 253, 249, 0.96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark-round, footer img { width: 64px; height: 64px; object-fit: contain; }
.brand .mark-holiday { width: 108px; height: 58px; object-fit: contain; }
.menu-check { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; }
.top nav, footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.top nav a, footer nav a, .text-link { color: var(--bay); font-weight: 560; text-decoration: none; }
.top nav a { padding: 10px 0; }
.top nav a:hover, .text-link:hover, .phones a:hover { color: var(--gold); }

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: grid;
  align-items: end;
  background: var(--bay);
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy {
  position: relative;
  width: min(740px, calc(100% - 48px));
  margin: 0 0 8vh max(20px, 6vw);
  padding: clamp(22px, 4vw, 40px);
  background: rgba(251, 248, 243, 0.95);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  background: var(--bay);
  color: white;
  text-decoration: none;
  font-weight: 560;
}
.button-line { background: transparent; color: var(--bay); border: 1px solid var(--bay); }

.routes, .stay, .split, .digital {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) max(20px, 6vw);
  scroll-margin-top: calc(var(--header) + 8px);
}
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.choices button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: white;
  color: var(--bay);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
.choices button.is-on { background: var(--bay); color: white; border-color: var(--bay); }
.plain { margin: 0 0 16px; padding-left: 18px; }
.map-wrap { background: #fffdf9; border: 1px solid var(--line); }
.map { width: 100%; height: auto; }
.lane { fill: none; stroke: #d9c7a4; stroke-width: 2; }
.lane.is-on {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-dasharray: 8 8;
  animation: draw 2.8s linear infinite;
}
.city circle { fill: #c8b48a; }
.city.is-on circle { fill: var(--bay); }
.city text, .home text {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: middle;
  font-family: Outfit, sans-serif;
}
.city.is-on text { fill: var(--bay); font-weight: 560; }
.home circle { fill: var(--bay); }
.home text { fill: var(--bay); }
.flight {
  fill: var(--bay);
  offset-distance: 0%;
  animation: fly 3.4s ease-in-out infinite alternate;
}
@keyframes draw { to { stroke-dashoffset: -64; } }
@keyframes fly { to { offset-distance: 100%; } }

.stay { background: #fffdf9; }
.stay img, .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 16px; }
.times article { padding: 16px; background: var(--sand); }
.times strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.8rem; color: var(--bay); }
figcaption, .times span { color: var(--muted); }
.phones a { font-weight: 560; text-decoration: none; }

.years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.years article { padding: 28px max(18px, 3vw); border-right: 1px solid var(--line); }
.years article:last-child { border-right: 0; }
.years p { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--bay); line-height: 1; }
.years h2 { margin: 8px 0; font-size: 1.3rem; }
.years span { color: var(--muted); }

.split { background: var(--sand); }
.mark img { width: min(320px, 100%); margin-inline: auto; background: white; }
.gallery {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
  padding: 8px max(20px, 6vw) 36px;
}
.gallery figure { margin: 0; }
.gallery strong { display: block; color: var(--bay); }

.digital { background: var(--bay); color: #f6f1e7; }
.digital h2, .digital .eyebrow { color: #f4ead8; }
.desks { display: grid; gap: 10px; }
.desks a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  text-decoration: none;
  background: rgba(255, 253, 249, 0.08);
  border: 1px solid rgba(244, 234, 216, 0.25);
}
.desks span { color: #e4c98a; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.desks strong { font-size: 1.05rem; }

.terms { padding: clamp(48px, 7vw, 88px) max(20px, 6vw); scroll-margin-top: calc(var(--header) + 8px); }
.terms-head { max-width: 760px; margin-bottom: 22px; }
.terms ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 12px; }
.terms li { padding-left: 6px; }
.ack { margin-top: 22px; max-width: 78ch; color: var(--muted); }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding: 26px max(20px, 6vw) max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
footer div, footer a { display: flex; flex-direction: column; text-decoration: none; }
footer strong { color: var(--bay); }
footer span, footer a { color: var(--muted); }

@media (max-width: 900px) {
  .routes, .stay, .split, .digital, .years, .gallery { grid-template-columns: 1fr; }
  .years article { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  :root { --header: 72px; }
  .brand .mark-round, footer img { width: 52px; height: 52px; }
  .brand .mark-holiday { width: 84px; height: 48px; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 560;
  }
  .top nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    padding: 6px 18px 14px;
    background: #fffdf9;
    border-bottom: 1px solid var(--line);
  }
  .menu-check:checked ~ nav { display: flex; }
  .top nav a { padding: 13px 0; border-top: 1px solid var(--line); }
  .hero { min-height: 0; display: block; }
  .hero > img { position: relative; height: 42vh; min-height: 220px; }
  .hero-copy { width: auto; margin: -28px 14px 24px; }
  .actions .button { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .lane.is-on, .flight { animation: none; }
  .flight { offset-distance: 55%; }
}