*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0d2240;
  --blue:   #1a4a8a;
  --sky:    #3a8fd4;
  --ice:    #e8f4fc;
  --white:  #ffffff;
  --snow:   #f4f8fb;
  --text:   #1a2a3a;
  --muted:  #6b7e8f;
  --accent: #F2A97F;
  --radius: 14px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--snow);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; }

/* ── Top nav ── */
.topnav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.topnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
}
.topnav-logo img { height: 30px; width: auto; }
.topnav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.topnav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.topnav-links a:hover { color: var(--white); }
.topnav-cta {
  background: var(--white);
  color: var(--navy) !important;
  padding: 9px 20px;
  border-radius: 50px;
  font-weight: 700 !important;
}
.topnav-dropdown {
  position: relative;
  /* Extends this element's own box a little past the trigger text, so
     there's no dead zone between it and the menu below (position:absolute
     children don't add to their parent's box, so without this the mouse
     leaves .topnav-dropdown's hoverable area while crossing the gap and
     the menu closes before the cursor ever reaches it). */
  padding: 6px 0;
}
.topnav-dropdown > span {
  cursor: pointer;
  /* .topnav-links a covers the actual <a> siblings (Home, How It Works,
     etc.) — this is a <span>, so it needs the same font styling spelled
     out explicitly or it renders at the browser default size/weight. */
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.topnav-dropdown:hover > span,
.topnav-dropdown:focus-within > span { color: var(--white); }
.topnav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(13,34,64,0.18);
  padding: 8px;
  min-width: 180px;
}
/* Desktop-only — on mobile, visibility is driven purely by the .open class
   (see site.js), never by :hover/:focus-within. Touch browsers apply
   :hover after a tap and don't reliably clear it, so leaving this
   unscoped meant a tapped-then-closed dropdown could stay stuck open
   (or a still-hovering trigger could override a JS-driven close) — this
   rule has equal-or-higher specificity than the mobile open/closed rules
   below, so it has to be kept out of their way entirely. */
@media (min-width: 761px) {
  .topnav-dropdown:hover .topnav-dropdown-menu,
  .topnav-dropdown:focus-within .topnav-dropdown-menu { display: block; }
}
.topnav-dropdown-menu a {
  display: block;
  color: var(--navy) !important;
  font-size: 0.86rem;
  padding: 8px 10px;
  border-radius: 8px;
}
.topnav-dropdown-menu a:hover { background: var(--ice); }
.topnav-toggle { display: none; }
.topnav-close { display: none; }
.topnav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,12,26,0.55);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.topnav-backdrop.open { display: block; opacity: 1; }

@media (max-width: 760px) {
  .topnav-toggle {
    display: inline-flex;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 700;
  }

  /* Slide-in panel — hidden off-screen to the right by default, and kept
     out of the tab order while closed (visibility flips only once the
     transform transition finishes closing, via the delay on the way in). */
  .topnav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 84vw);
    background: var(--navy);
    padding: 84px 22px 28px;
    box-shadow: -12px 0 40px rgba(0,0,0,0.35);
    z-index: 41;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
  }
  .topnav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s ease, visibility 0s linear 0s;
  }

  .topnav-links a {
    width: 100%;
    padding: 13px 4px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .topnav-cta { text-align: center; margin-top: 10px; }

  .topnav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }

  .topnav-dropdown { width: 100%; }
  .topnav-dropdown > span {
    display: block;
    width: 100%;
    padding: 13px 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* Closed by default on mobile — :hover isn't a reliable "open" signal on
     touch (there's no cursor to leave, so it can stick "open" indefinitely
     the moment it's tapped), so this is toggled by a real click instead,
     via .open on the parent .topnav-dropdown (see site.js). */
  .topnav-dropdown-menu {
    position: static;
    box-shadow: none;
    padding: 2px 0 4px 14px;
    display: none;
    background: transparent;
  }
  .topnav-dropdown.open .topnav-dropdown-menu { display: block; }
  .topnav-dropdown-menu a { color: rgba(255,255,255,0.75) !important; border-bottom: none; padding: 10px 4px; }
  /* The desktop hover rule (.topnav-dropdown-menu a:hover { background:
     var(--ice) }, a light/white background) combined with the white text
     forced above made a tapped suburb briefly unreadable — force dark text
     on that same light background instead. */
  .topnav-dropdown-menu a:hover { color: var(--navy) !important; background: var(--ice); }
}

/* ── Snowfall ── */
.snowfall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.flake {
  position: absolute;
  top: -20px;
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  animation: fall linear infinite;
  user-select: none;
}
@keyframes fall {
  to { transform: translateY(800px) rotate(360deg); }
}

/* ── Hero ── */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 55%, var(--sky) 100%);
  color: var(--white);
  text-align: center;
  padding: 8px 20px 96px;
  /* No overflow:hidden here — .snowfall already clips its own flakes
     (position:absolute; inset:0; overflow:hidden below), and hiding
     overflow on .hero would also clip the mobile nav's slide-in panel
     (position:fixed) to the hero section's own height instead of the
     full screen. */
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 60px;
  background: var(--snow);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 680px; margin: 44px auto 0; }

.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  opacity: 0.88;
  line-height: 1.65;
  margin-bottom: 32px;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-cta {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 34px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.28); }
.hero-cta.secondary {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}

.pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* ── Smaller inner-page hero (about + resort pages) ── */
.hero.hero-compact { padding-bottom: 70px; }
.hero.hero-compact .hero-inner { margin-top: 20px; }
.breadcrumb {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-bottom: 14px;
}
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── Main ── */
main {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
main.wide { max-width: 900px; }

.section-label {
  text-align: center;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 8px;
}
.section-title {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 8px;
}
.section-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
  margin-bottom: 36px;
}

/* ── Content blocks (about + resort pages) ── */
.content-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 24px rgba(13,34,64,0.09);
  padding: 32px;
  margin-bottom: 24px;
}
@media (max-width: 480px) { .content-card { padding: 22px 18px; } }
.content-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}
.content-card p { color: var(--text); line-height: 1.7; margin-bottom: 12px; }
.content-card p:last-child { margin-bottom: 0; }
.content-card ul { padding-left: 20px; color: var(--text); line-height: 1.9; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

/* ── Form card ── */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 24px rgba(13,34,64,0.09);
  padding: 36px 32px;
}
@media (max-width: 480px) { .form-card { padding: 24px 18px; } }

.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ice);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}
.role-toggle input[type="radio"] { display: none; }
.role-toggle label {
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.3;
}
.role-toggle input[type="radio"]:checked + label {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1px 6px rgba(13,34,64,0.12);
}

.field-group { display: grid; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.field label .req { color: var(--sky); margin-left: 2px; }
.field input, .field select, .field textarea {
  border: 1.5px solid #d6e4f0;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  width: 100%;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(58,143,212,0.15);
}
.field input::placeholder, .field textarea::placeholder { color: #aabdcb; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7e8f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.18s, transform 0.18s;
}
.submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.form-note { text-align: center; font-size: 0.76rem; color: var(--muted); margin-top: 12px; }
.form-note a { color: var(--sky); }

.success-msg { display: none; text-align: center; padding: 28px 16px; }
.success-msg .check { margin-bottom: 16px; color: var(--sky); line-height: 0; }
.success-msg h3 { font-size: 1.25rem; color: var(--navy); margin-bottom: 8px; }
.success-msg p { color: var(--muted); font-size: 0.93rem; }
.error-msg {
  display: none;
  text-align: center;
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f6c6c1;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-top: 14px;
}

/* ── How it works / steps ── */
.how-section { margin-top: 68px; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(13,34,64,0.07);
}
.step-icon { margin-bottom: 12px; color: var(--sky); line-height: 0; }
.step h4 { font-size: 0.93rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.step p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ── Resort grid (index + about) ── */
.resort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.resort-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(13,34,64,0.07);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.resort-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(13,34,64,0.12); }
.resort-card .flag { font-size: 1.6rem; margin-bottom: 8px; }
.resort-card h4 { color: var(--navy); font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
.resort-card span { color: var(--muted); font-size: 0.78rem; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid #e6eef5; padding: 16px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--sky); font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 10px; color: var(--muted); font-size: 0.88rem; line-height: 1.7; }

/* ── Bottom CTA banner ── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: var(--radius);
  color: var(--white);
  text-align: center;
  padding: 44px 28px;
  margin-top: 24px;
}
.cta-banner h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; }
.cta-banner p { opacity: 0.85; margin-bottom: 22px; font-size: 0.94rem; }

/* ── Footer ── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 40px 20px 28px;
  font-size: 0.78rem;
  line-height: 1.9;
}
footer strong { color: rgba(255,255,255,0.85); }
footer a { color: rgba(255,255,255,0.6); text-decoration: none; }
footer a:hover { color: var(--white); }
.footer-logo { display: block; margin: 0 auto 14px; height: 36px; width: auto; opacity: 0.75; filter: brightness(0) invert(1); }
.footer-mark { display: flex; justify-content: center; margin-bottom: 14px; opacity: 0.6; }
.footer-mark strong { color: rgba(255,255,255,0.75); font-weight: 800; margin-left: 8px; font-size: 0.95rem; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; }
.footer-links a { color: rgba(255,255,255,0.7); }