/* The site chrome every page shares (09/2026 design): self-hosted fonts, the header with the official
   i/V mark (assets/mark.svg, brand/mark.svg, never redrawn), the phone menu, the footer and the base
   buttons. Classes are prefixed ivc- so they never collide with the older page styles in site.css. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ivc-navy: #061c38;
  --ivc-navy2: #0a2d56;
  --ivc-navy3: #122f52;
  --ivc-mint: #3eddbf;
  --ivc-teal: #0e7c74;
  --ivc-blue: #1b55b3;
  --ivc-ground: #f4f7f6;
  --ivc-ink: #0b1b2b;
  --ivc-muted: #4a5d70;
  --ivc-soft: #c9d8e6;
  --ivc-soft2: #9fb4c8;
  --ivc-display: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --ivc-hand: 'Caveat', 'Bradley Hand', cursive;
  --ivc-gutter: clamp(16px, 5vw, 80px);
  /* the older pages (site.css) read --sans for their type: same family everywhere */
  --sans: var(--ivc-display);
}
html {
  overflow-x: hidden;
}
/* hidden means hidden, whatever a component's own display rule says (the guide application's
   later steps used to show all at once because .form sets display: grid) */
[hidden] {
  display: none !important;
}
.ivc-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--ivc-gutter);
}
.ivc-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ivc-mint);
  color: var(--ivc-navy);
  font: 700 15px/1 var(--ivc-display);
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
}
.ivc-skip:focus {
  top: 12px;
}
.ivc-nav a:focus-visible,
.ivc-nav button:focus-visible,
.ivc-foot a:focus-visible,
.ivc-btn:focus-visible {
  outline: 3px solid var(--ivc-mint);
  outline-offset: 3px;
}

/* the official lockup: the mark keeps its own proportions (never stretched) + the wordmark */
.ivc-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font: 800 23px/1 var(--ivc-display);
  letter-spacing: -0.035em;
  flex-shrink: 0;
}
.ivc-logo img {
  display: block;
  height: 30px;
  width: auto;
  aspect-ratio: 126 / 110;
}
.ivc-logo.on-light {
  color: var(--ivc-navy2);
}

.ivc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  padding: 15px 24px;
  font: 700 16px/1.2 var(--ivc-display);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ivc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -18px rgba(6, 28, 56, 0.55);
}
.ivc-btn-mint {
  background: var(--ivc-mint);
  color: var(--ivc-navy);
}
.ivc-btn-navy {
  background: var(--ivc-navy2);
  color: #fff;
}
.ivc-btn-white {
  background: #fff;
  color: var(--ivc-navy);
}

/* header */
.ivc-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(6, 28, 56, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--ivc-display);
}
.ivc-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
}
.ivc-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.ivc-links a {
  color: #d6e4f0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.ivc-links a:hover {
  color: #fff;
}
.ivc-links .ivc-btn {
  color: var(--ivc-navy);
  padding: 12px 20px;
  font-size: 15px;
}
.ivc-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ivc-drawer {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--ivc-gutter) 18px;
}
.ivc-drawer a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 960px) {
  .ivc-links {
    display: none;
  }
  .ivc-burger {
    display: flex;
  }
  .ivc-drawer.open {
    display: flex;
  }
}

/* footer */
.ivc-foot {
  background: var(--ivc-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ivc-soft);
  font-family: var(--ivc-display);
  font-size: 16px;
  line-height: 1.5;
}
.ivc-foot .ivc-wrap {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-block: 52px;
}
.ivc-foot-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}
.ivc-foot-brand .ivc-logo {
  font-size: 21px;
}
.ivc-foot small {
  color: var(--ivc-soft2);
  font-size: 13px;
}
.ivc-fcols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}
.ivc-fcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ivc-fcol h2 {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ivc-fcol a {
  text-decoration: none;
  color: var(--ivc-soft);
}
.ivc-fcol a:hover {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ivc-btn {
    transition: none;
  }
  .ivc-btn:hover {
    transform: none;
  }
}

/* "coming soon" panels (for example /packages before local guide trips are live) */
.soon {
  background: var(--ivc-mintbg, #e3f7f3);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
  max-width: 760px;
  font-family: var(--ivc-display);
}
.soon h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ivc-ink);
}
.soon p {
  margin: 0 0 20px;
  color: #2c4257;
  font-size: 17px;
}
.soon-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* The header is sticky now (the old one was fixed and floated over the page), so the top offsets
   the older pages kept for it come off. The homepage (body.home) has its own layout. */
body:not(.home) .ivc-nav ~ main .page-head {
  padding-top: 56px;
}
body:not(.home) .ivc-nav ~ main .hero {
  padding-top: 72px;
}
body:not(.home) .ivc-nav ~ main .dest-hero .wrap {
  padding-top: 72px;
}
body:not(.home) .ivc-nav ~ main > .section:first-child {
  padding-top: 56px !important;
}
body:not(.home) .ivc-nav ~ .trip-main,
body:not(.home) .ivc-nav ~ main.trip-main {
  padding-top: 40px;
}
body:not(.home) .ivc-nav ~ .invite-main,
body:not(.home) .ivc-nav ~ main.invite-main {
  padding-top: 40px;
}

/* The Beta pill (partials/beta.html): a small friendly flag while providers run in test mode; it
   opens a one-line explanation. Hidden entirely once iVaCay is live (mode.beta is false). */
.beta-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--ivc-display);
}
.beta-pill {
  border: 1px solid rgba(14, 124, 116, 0.45);
  background: #e3f7f3;
  color: #0b5f59;
  border-radius: 999px;
  padding: 3px 10px;
  font: 800 11px/1.4 var(--ivc-display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
}
.beta-pill:focus-visible {
  outline: 3px solid var(--ivc-mint);
  outline-offset: 2px;
}
.beta-note {
  font-size: 13px;
  color: var(--ivc-muted);
}