@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2"); }

:root {
  --navy: #0D2F4F;
  --sand: #D7C3A6;
  --sun: #C8A985;
  --ivory: #F8F6F1;
  --olive: #6B7058;
  --ink-soft: rgba(13, 47, 79, .72);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  background-image: radial-gradient(120% 80% at 50% 115%, rgba(215, 195, 166, .38) 0%, rgba(248, 246, 241, 0) 60%);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hairline frame, like a hotel card */
.frame {
  position: fixed;
  inset: clamp(10px, 2.2vw, 26px);
  border: 1px solid rgba(200, 169, 133, .55);
  pointer-events: none;
  z-index: 3;
}

/* Horizon motif: sun and sea lines rising behind the content */
.horizon {
  position: fixed;
  left: 50%;
  bottom: -9vmin;
  width: min(84vmin, 760px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: fade 2.4s ease 1.2s forwards;
}
.horizon .sky {
  position: absolute;
  inset: 0 0 30% 0;
  overflow: hidden;
}
.horizon .sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(200, 169, 133, .30), rgba(215, 195, 166, .10));
  transform: translate(-50%, 100%);
  opacity: 0;
  animation: sunrise 14s cubic-bezier(.45, .05, .35, 1) 1.4s infinite;
}
.horizon .wave {
  position: absolute;
  left: 50%;
  height: 2px;
  border-radius: 2px;
  background: rgba(13, 47, 79, .07);
  transform: translateX(-50%);
  animation: drift 14s ease-in-out infinite alternate;
}
.horizon .w1 { bottom: 26%; width: 62%; }
.horizon .w2 { bottom: 19%; width: 50%; animation-delay: -4s; }
.horizon .w3 { bottom: 12%; width: 36%; animation-delay: -8s; }

/* Content */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 9vh, 96px) 28px clamp(28px, 5vh, 48px);
}

.eyebrow {
  margin: 0 0 clamp(26px, 4.5vh, 44px);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--olive);
}

.brand .logo {
  display: block;
  width: min(440px, 78vw);
  height: auto;
}

.rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: clamp(26px, 4.4vh, 40px) auto clamp(18px, 3vh, 28px);
  background: var(--sun);
}

.strap {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: .005em;
}

.lead {
  max-width: 34em;
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.75;
  color: var(--ink-soft);
}

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  list-style: none;
  padding: 0;
  margin: clamp(26px, 4.4vh, 40px) 0 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.places li { padding: 0 1.1em; }
.places li + li { border-left: 1px solid rgba(200, 169, 133, .8); }

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(30px, 5vh, 46px);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(13, 47, 79, .28);
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--navy); background: rgba(13, 47, 79, .04); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn--solid {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 12px;
}
.contact { flex-direction: column; align-items: center; gap: 14px; }
.mail { font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(200, 169, 133, .7); padding-bottom: 2px; }
.mail:hover { color: var(--navy); }
.btn--solid:hover, .btn--solid:focus-visible { background: #12406b; border-color: #12406b; color: var(--ivory); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  padding: 0 28px calc(clamp(22px, 4vh, 40px) + env(safe-area-inset-bottom));
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(13, 47, 79, .55);
}
.foot a { color: rgba(13, 47, 79, .75); text-decoration: none; border-bottom: 1px dotted rgba(13, 47, 79, .3); }
.foot a:hover { color: var(--navy); border-color: var(--sun); }

/* Motion */
.reveal { opacity: 0; transform: translateY(10px); animation: in 1.3s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
@keyframes in { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes sunrise {
  0%   { transform: translate(-50%, 100%); opacity: 0; }
  12%  { opacity: 1; }
  48%  { transform: translate(-50%, 0); opacity: 1; }
  68%  { transform: translate(-50%, -3%); opacity: 1; }
  92%  { transform: translate(-50%, -5%); opacity: 0; }
  100% { transform: translate(-50%, 100%); opacity: 0; }
}
@keyframes drift { from { margin-left: -1.2%; } to { margin-left: 1.2%; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .horizon, .horizon .sun, .horizon .wave { animation: none; opacity: 1; transform: none; }
  .horizon .sun { transform: translate(-50%, 0); opacity: 1; }
  .horizon .wave { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .horizon { width: 118vw; bottom: -16vw; opacity: .8; }
  .br { display: none; }
  .places { font-size: 10.5px; letter-spacing: .26em; }
  .places li { padding: 0 .8em; }
  .contact { width: min(320px, 100%); }
  .contact .btn { align-self: stretch; }
  .btn { justify-content: center; }
  .foot .dot { display: none; }
  .foot { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-height: 640px) and (min-width: 561px) {
  .stage { padding-top: 48px; }
  .eyebrow { margin-bottom: 18px; }
  .brand .logo { width: min(340px, 60vw); }
}