/* The Best Day with Mikayla J
   Static site styles. No build step, no external requests. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --shell: #FFF8F4;
  --sand: #F4E8DC;
  --blush: #FBE3E3;
  --aqua: #E7F2F0;
  --coral: #EC9CA3;
  --coral-lt: #F6B3B8;
  --hibiscus: #B23A4C;
  --hibiscus-dk: #8F2738;
  --palm: #2C6448;
  --frond: #A9BE7E;
  --lagoon: #135E6B;
  --ink: #1E2C3D;
  --muted: #4A5866;
  --night: #102641;
  --night-2: #0C1D33;
  --mist: #B8C7D9;
  --line: #E8D7CA;
  --field: #8A7767;
  --paper: #FFFFFF;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h: 72px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-soft: 0 24px 48px -28px rgba(16, 38, 65, .45);

  color-scheme: light;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) { scroll-behavior: smooth; }
}
html[data-motion="on"] { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 960px) {
  body { font-size: 1.125rem; }
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--hibiscus); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--hibiscus-dk); }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: 4px;
}
.night-band :focus-visible,
.site-footer :focus-visible,
.dest-feature :focus-visible { outline-color: var(--coral-lt); }

[hidden] { display: none !important; }

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

.icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-text { overflow-wrap: break-word; }
.nowrap { white-space: nowrap; }
.tel { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 50px;
  padding: .7em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 44px; padding: .55em 1.15em; font-size: .95rem; }

.btn-primary { background: var(--hibiscus); color: #fff; box-shadow: 0 12px 22px -14px rgba(178, 58, 76, .85); }
.btn-primary:hover { background: var(--hibiscus-dk); color: #fff; }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--shell); }

.btn-light { background: var(--shell); color: var(--night); }
.btn-light:hover { background: var(--coral-lt); color: var(--night); }

.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 0;
  border: 0;
  background: none;
  color: var(--hibiscus);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  cursor: pointer;
}
.btn-link:hover { color: var(--hibiscus-dk); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 244, .98);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 248, 244, .95); backdrop-filter: saturate(1.3) blur(12px); }
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(16, 38, 65, .5); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: .75rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 12px;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral);
}
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.02;
}
.brand-line2 { font-size: .82em; font-weight: 500; color: var(--hibiscus); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.menu-icon { position: relative; width: 18px; height: 12px; }
.menu-icon::before,
.menu-icon::after,
.menu-icon span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-icon::before { top: 0; }
.menu-icon span { top: 5px; }
.menu-icon::after { bottom: 0; }
.nav-open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.nav-open .menu-icon span { opacity: 0; }
.nav-open .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.nav-list { display: flex; align-items: center; gap: 1.5rem; list-style: none; }
.nav-list a {
  position: relative;
  display: inline-block;
  padding: .4rem 0;
  color: var(--ink);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--hibiscus);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-list a:hover::after,
.nav-list a[aria-current="true"]::after { transform: scaleX(1); }
.nav-list a[aria-current="true"] { color: var(--hibiscus); }

@media (max-width: 1099.98px) {
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--shell);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(16, 38, 65, .45);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .js .nav-open .site-nav { display: flex; }
  .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav-list a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.15rem;
  }
  .js .nav-list a::after { display: none; }
  .js .nav-cta { width: 100%; min-height: 52px; }

  .no-js .header-inner { flex-wrap: wrap; padding-block: .75rem; }
  .no-js .site-nav { flex-wrap: wrap; gap: .75rem 1.25rem; }
  .no-js .nav-list { flex-wrap: wrap; gap: .25rem 1.25rem; }
}

@media (max-width: 420px) {
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 1.05rem; }
  .menu-toggle { padding-inline: .75rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 {
  font-size: clamp(2.15rem, 1.45rem + 2.6vw, 3.5rem);
  line-height: 1.04;
  margin-bottom: .45em;
}
.section-head p { font-size: 1.12em; color: var(--muted); max-width: 38em; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 4.2vw, 3.6rem) clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(60rem 30rem at 95% -10%, rgba(246, 179, 184, .38), rgba(246, 179, 184, 0) 70%),
    radial-gradient(40rem 22rem at -10% 110%, rgba(169, 190, 126, .22), rgba(169, 190, 126, 0) 70%),
    var(--shell);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.hero h1 {
  font-size: clamp(2.7rem, 1.4rem + 4.4vw, 4.55rem);
  line-height: .97;
  letter-spacing: -0.025em;
  font-weight: 620;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  max-width: 11ch;
  margin-bottom: .45em;
}

.hero-promise {
  margin-bottom: .85rem;
  max-width: 27em;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 560;
  font-size: clamp(1.3rem, 1.08rem + .75vw, 1.66rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-promise .hl-time,
.hero-promise .hl-money {
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-promise .hl-time { background: linear-gradient(transparent 62%, rgba(19, 94, 107, .17) 62%); }
.hero-promise .hl-money { background: linear-gradient(transparent 62%, rgba(236, 156, 163, .45) 62%); }
.hero-lede { font-size: 1.1em; line-height: 1.55; max-width: 34em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.hero-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin-top: 1.4rem;
  list-style: none;
}
.hero-contact a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.hero-contact a:hover { color: var(--hibiscus); text-decoration: underline; }
.hero-contact .icon { color: var(--hibiscus); }

.hero-visual {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin-inline: auto;
  padding-top: 4.25rem;
}

/* Decorative postmark above the stamp */
.postmark {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 150px;
  height: auto;
  color: var(--hibiscus);
  opacity: .88;
  transform: rotate(-8deg);
  pointer-events: none;
}
.postmark-text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  fill: currentColor;
}

/* The castle illustration sits in a stamp frame; the logo card sits below it */
.hero-figure {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  column-gap: 1.5rem;
  align-items: start;
  margin: 0;
}

/* Perforated postage-stamp frame */
.stamp {
  --r: 8px;
  display: block;
  padding: calc(var(--r) * 2);
  background:
    radial-gradient(var(--r), #0000 98%, #fff) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 14px 22px rgba(16, 38, 65, .22));
}
.stamp img,
.stamp svg { width: 100%; height: auto; }

.stamp-hero { grid-column: 1 / -1; margin-left: 12%; transform: rotate(2deg); }
.art-window { display: block; overflow: hidden; }
.art-window img { display: block; width: 100%; height: auto; }

.art-caption {
  grid-column: 2;
  grid-row: 2;
  margin: 1.6rem 0 0;
  padding-left: .25rem;
  max-width: 24em;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--muted);
}

.hero-logo {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 1.1rem;
  border: 7px solid #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  transform: rotate(-5deg);
}

@media (max-width: 520px) {
  .hero-visual { padding-top: 3.5rem; }
  .postmark { width: 118px; }
  .hero-figure { grid-template-columns: minmax(0, 1fr); }
  .stamp-hero { --r: 6px; margin-left: 5%; }
  .hero-logo { width: 66%; margin-top: 1rem; border-width: 5px; }
  .art-caption { grid-column: 1; grid-row: 3; margin-top: 1.4rem; }
}

/* ---------- Destinations ---------- */
.destinations { background: var(--shell); padding-top: clamp(3rem, 6vw, 5rem); }

.dest-feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--night);
  color: var(--shell);
}
.panorama { position: relative; margin: 0; overflow: hidden; }
.panorama img {
  width: 100%;
  height: clamp(240px, 36vw, 470px);
  object-fit: cover;
  object-position: 50% 50%;
}
.panorama::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(16, 38, 65, 0) 0%, rgba(16, 38, 65, .72) 62%, var(--night) 100%);
  pointer-events: none;
}
.dest-feature-body {
  display: grid;
  gap: 1.75rem 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 860px) {
  .dest-feature-body { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.dest-feature h3 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); line-height: 1.05; margin-bottom: .35rem; }
.dest-where { color: var(--coral-lt); font-weight: 700; margin-bottom: 1rem; }
.dest-feature p { max-width: 34em; }
.list-intro { font-weight: 700; margin-bottom: .6rem; }

.ticks { list-style: none; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5.2-5.4' fill='none' stroke='%23102641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.dest-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
@media (min-width: 820px) {
  .dest-grid { grid-template-columns: 1.25fr 1fr; }
  .dest-card-main { grid-row: span 2; }
}

.dest-card {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-m);
  background: var(--paper);
  border: 1px solid var(--line);
}
.dest-card h3 { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.95rem); line-height: 1.1; margin-bottom: .5rem; }
.dest-card p { color: var(--muted); }
.dest-card .ticks { margin-top: 1rem; }

.dest-card-main { background: var(--blush); border-color: #F3CFD0; }
.dest-card-main .stamp { width: min(260px, 72%); transform: rotate(-2.5deg); margin: .25rem 0 .5rem; }
.dest-card-main p { color: var(--ink); }

.stamp-illus { --r: 6px; }
.stamp-small { width: 116px; transform: rotate(2.5deg); }

@media (min-width: 560px) {
  .dest-card:not(.dest-card-main) { grid-template-columns: 116px 1fr; gap: 1.5rem; }
}
@media (min-width: 820px) and (max-width: 1023.98px) {
  .dest-card:not(.dest-card-main) { grid-template-columns: 1fr; }
}

/* ---------- How it works ---------- */
.how { background: var(--shell); }
.journey { position: relative; }
.journey-steps { list-style: none; position: relative; z-index: 1; display: grid; gap: 2rem; }
.journey-steps li { position: relative; padding-left: 4.25rem; }
.stop {
  position: absolute;
  left: 0; top: -.2rem;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--shell);
  border: 2.5px solid var(--hibiscus);
  color: var(--hibiscus);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.journey-steps h3 { font-size: 1.35rem; line-height: 1.15; margin-bottom: .35rem; }
.journey-steps p { color: var(--muted); }

.journey-end {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.25rem 0 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
}
.journey-pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--shell);
}
.journey-pin svg { width: 30px; height: 30px; }

.flight { position: absolute; pointer-events: none; }
.flight-line { position: absolute; z-index: 0; display: block; }
.plane { position: absolute; z-index: 2; width: 30px; height: 30px; max-width: none; fill: var(--hibiscus); stroke: var(--shell); stroke-width: 3px; paint-order: stroke; }

/* Vertical (small screens) */
.flight { left: 22px; top: 1.5rem; bottom: 1.6rem; width: 0; }
.flight-line { left: -1.25px; top: 0; bottom: 0; border-left: 2.5px dashed var(--coral); }
.plane { left: -15px; top: calc(var(--jp, 1) * (100% - 62px)); transform: rotate(90deg); }

@media (min-width: 960px) {
  .journey-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
  .journey-steps li { padding: 4.25rem 0 0; }
  .stop { top: 0; }
  .flight { left: 23px; right: 0; top: 23px; bottom: auto; width: auto; height: 0; }
  .flight-line { left: 0; right: 0; top: -1.25px; bottom: auto; border-left: 0; border-top: 2.5px dashed var(--coral); }
  .plane { top: -15px; left: calc(var(--jp, 1) * (100% - 30px)); transform: none; }
  .journey-end { justify-content: flex-end; margin-top: 2.75rem; }
}


/* ---------- About ---------- */
.about { background: var(--blush); }
.about-grid { display: grid; gap: 2.5rem 4.5rem; align-items: center; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.about-copy h2 {
  font-size: clamp(2.15rem, 1.45rem + 2.6vw, 3.5rem);
  line-height: 1.04;
  margin-bottom: .55em;
}
.about-lede { font-size: 1.15em; line-height: 1.55; }
.about-cdk {
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--palm);
  background: rgba(255, 255, 255, .7);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-weight: 700;
  color: var(--palm);
}
.contact-inline { list-style: none; display: grid; gap: .25rem; margin-top: 1.5rem; }
.contact-inline a {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.contact-inline a:hover { color: var(--hibiscus); text-decoration: underline; }
.contact-inline .icon { color: var(--hibiscus); }

/* ---------- Planner ---------- */
.plan {
  background:
    linear-gradient(180deg, var(--shell) 0%, var(--shell) 30%, #FDEDE9 100%);
}
.noscript-note {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  background: var(--paper);
  border: 1px solid var(--line);
}
.no-js .planner { display: none; }

.planner { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1000px) {
  .planner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 2.5rem; }
  .postcard-col { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .planner[data-step="5"] .postcard-col { position: static; }
  .planner[data-step="5"] .planner-form { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 999.98px) {
  .planner:not([data-step="5"]) .postcard-col { display: none; }
}

.planner-form {
  scroll-margin-top: calc(var(--header-h) + 1rem);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.planner-progress { margin-bottom: 1.5rem; }
.planner-count { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; color: var(--muted); }
.progress-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.progress-steps li {
  padding-top: .55rem;
  border-top: 4px solid #EADDD2;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
}
.progress-steps li.is-done { border-top-color: var(--coral); color: var(--muted); }
.progress-steps li.is-current { border-top-color: var(--hibiscus); color: var(--ink); }
@media (max-width: 420px) {
  .progress-steps li { font-size: 0; padding-top: 0; }
}

.step { margin: 0; padding: 0; border: 0; min-width: 0; }
.step-title {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  border-radius: 6px;
}
.step-title:focus { outline: none; }
.step-title:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 4px; }

.subgroup { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.subgroup legend { padding: 0; margin-bottom: .6rem; font-weight: 700; }
.legend-note { font-weight: 500; color: var(--muted); }
.hint { margin: -.35rem 0 .65rem; font-size: .92rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: .55rem 1.05rem;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: var(--paper);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip span::before {
  content: "";
  flex: none;
  width: 1rem; height: 1rem;
  border: 1.5px solid var(--field);
  border-radius: 4px;
  background: #fff;
}
.chip-radio span::before { border-radius: 50%; }
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:checked + span::before {
  border-color: #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.3l2.6 2.5 5.8-6' fill='none' stroke='%231E2C3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.chip-radio input:checked + span::before {
  background: radial-gradient(circle, var(--ink) 0 34%, #fff 38%);
}
.chip input:focus-visible + span { outline: 3px solid var(--lagoon); outline-offset: 2px; }

.field { display: grid; gap: .4rem; margin-bottom: 1.25rem; min-width: 0; }
.field label { font-weight: 700; }
.field .hint { margin: -.2rem 0 .15rem; }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: .6rem .85rem;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231E2C3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .85rem center / 1rem no-repeat;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--ink); }
input[aria-invalid="true"] { border-color: var(--hibiscus); box-shadow: 0 0 0 1px var(--hibiscus); }
.field-error {
  margin: -.35rem 0 1.1rem;
  padding-left: 1.6rem;
  position: relative;
  color: var(--hibiscus);
  font-weight: 700;
  font-size: .95rem;
}
.field-error::before {
  content: "!";
  position: absolute;
  left: 0; top: .12rem;
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--hibiscus);
  color: #fff;
  font-size: .75rem;
}

.counter { display: flex; align-items: stretch; max-width: 13rem; }
.counter input {
  text-align: center;
  border-radius: 0;
  border-inline: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter-btn {
  flex: none;
  width: 48px;
  min-height: 48px;
  border: 1.5px solid var(--field);
  background: var(--shell);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.counter-btn:first-child { border-radius: 12px 0 0 12px; }
.counter-btn:last-child { border-radius: 0 12px 12px 0; }
.counter-btn:hover { background: var(--blush); }

.planner-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.planner-nav [data-action="next"] { margin-left: auto; }
.planner[data-step="5"] .planner-nav { display: none; }

.step-ready p { color: var(--muted); }
.ready-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }

/* Postcard */
.postcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(178, 58, 76, .07), rgba(178, 58, 76, 0) 18%),
    #FFFDF9;
  box-shadow: 0 1px 0 rgba(16, 38, 65, .06), 0 30px 50px -28px rgba(16, 38, 65, .5);
}
@media (min-width: 1000px) {
  .planner:not([data-step="5"]) .postcard { transform: rotate(-1.2deg); }
}
.postcard-message { padding: 1.5rem 1.5rem 1.75rem; min-width: 0; }
.postcard-title {
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.postcard-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--ink);
  background-image: linear-gradient(transparent calc(1.75em - 1px), rgba(19, 94, 107, .16) calc(1.75em - 1px), rgba(19, 94, 107, .16) 1.75em);
  background-size: 100% 1.75em;
  min-height: 15em;
}
.postcard-text {
  min-height: 18em;
  font-size: .98rem;
  line-height: 1.6;
  background: #fff;
}
.edited-note { margin: .75rem 0 0; font-size: .92rem; color: var(--muted); }

.postcard-address {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1.5px dashed rgba(30, 44, 61, .25);
}
.stamp-mini { --r: 3px; width: 64px; flex: none; transform: rotate(3deg); }
.stamp-mini svg { display: block; }
.address-lines { display: grid; gap: .1rem; font-size: .9rem; color: var(--muted); }
.address-lines span:first-child { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-weight: 600; }

@media (min-width: 640px) {
  .postcard { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .postcard-address {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.5rem;
    border-top: 0;
    border-left: 1.5px dashed rgba(30, 44, 61, .25);
  }
  .stamp-mini { width: 76px; align-self: flex-end; margin-bottom: 1.5rem; }
  .address-lines { gap: .35rem; }
  .address-lines span { padding-bottom: .35rem; border-bottom: 1px solid rgba(30, 44, 61, .18); }
}
@media (min-width: 1000px) {
  .postcard { grid-template-columns: minmax(0, 1fr); }
  .postcard-address {
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.5rem;
    border-left: 0;
    border-top: 1.5px dashed rgba(30, 44, 61, .25);
  }
  .stamp-mini { width: 64px; align-self: auto; margin: 0; }
  .address-lines span { padding: 0; border: 0; }
}

.send-panel { margin-top: 1.5rem; }
.send-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.send-actions .btn { flex: 1 1 auto; }
.copy-status { min-height: 1.6em; margin: .85rem 0 .4rem; font-weight: 700; color: var(--palm); }
.send-notes { list-style: none; display: grid; gap: .45rem; font-size: .95rem; color: var(--muted); }
.send-notes strong { color: var(--ink); }
.long-note { margin-top: .85rem; font-size: .92rem; color: var(--muted); }
.nothing-sent {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-s);
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-size: .95rem;
}

/* ---------- FAQ ---------- */
.faq { background: var(--sand); }
.faq-grid { display: grid; gap: 1rem 4rem; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .faq .section-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid #D9C5B5; }
.faq-list summary {
  position: relative;
  display: block;
  padding: 1.15rem 3rem 1.15rem 0;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: .35rem; top: 50%;
  width: 1.6rem; height: 1.6rem;
  margin-top: -.8rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) center / .7rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px .7rem no-repeat;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / .7rem 1.5px no-repeat;
  transform: rotate(180deg);
}
.faq-list summary:hover { color: var(--hibiscus); }
.faq-answer { padding: 0 3rem 1.35rem 0; color: var(--muted); }
.faq-answer p { max-width: 40em; }

/* ---------- Night band: assistant, roadmap, contact ---------- */
.night-band {
  position: relative;
  color: var(--shell);
  background:
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 28% 22%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 6%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1px 1px at 66% 16%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 9%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(48rem 26rem at 88% 0%, rgba(236, 156, 163, .16), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.night-band a:not(.btn) { color: var(--coral-lt); }
.night-band a:not(.btn):hover { color: #fff; }
.night-band .section-head p { color: var(--mist); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.1rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.3;
}
.status-pill::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: currentColor;
}
.status-planned { color: var(--coral-lt); }
.status-planned::before { background: transparent; border: 1.5px solid currentColor; }
.status-live { color: #CFE0A8; }
.status-later { color: var(--mist); }
.status-later::before { background: transparent; border: 1.5px dashed currentColor; }

.assistant-status {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(184, 199, 217, .28);
}
.assistant-status strong { color: #fff; }

.demo {
  border-radius: var(--radius-l);
  background: var(--shell);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
  overflow: hidden;
}
@media (min-width: 1000px) { .demo { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.demo-head { padding: 1.5rem 1.5rem 1rem; }
.demo-head h3 { font-size: 1.55rem; line-height: 1.1; margin-bottom: .6rem; }
.demo-note { font-size: .92rem; color: var(--muted); }
.demo-badge {
  display: inline-block;
  margin-right: .35rem;
  padding: .1rem .55rem;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  vertical-align: .08em;
}
.demo-tabs {
  display: flex;
  gap: .35rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.demo-tabs [role="tab"] {
  flex: none;
  min-height: 46px;
  padding: .5rem .9rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.demo-tabs [role="tab"]:hover { color: var(--ink); }
.demo-tabs [role="tab"][aria-selected="true"] { color: var(--hibiscus); border-bottom-color: var(--hibiscus); }
.demo-panel { padding: 1.5rem; }
.demo-panel:focus-visible { outline-offset: -4px; }
.demo-q {
  position: relative;
  margin: 0 0 1.4rem auto;
  max-width: 90%;
  padding: 1rem 1.15rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--blush);
  font-weight: 600;
  line-height: 1.5;
}
.demo-q-label {
  display: block;
  margin-bottom: .25rem;
  font-size: .8rem;
  font-weight: 800;
  color: var(--hibiscus);
}
.demo-label { margin-bottom: .75rem; font-weight: 800; font-size: .95rem; }
.demo-steps { list-style: none; counter-reset: demo; display: grid; gap: .7rem; }
.demo-steps li {
  counter-increment: demo;
  position: relative;
  padding-left: 2.35rem;
  color: var(--muted);
  font-size: .98rem;
}
.demo-steps li::before {
  content: counter(demo);
  position: absolute;
  left: 0; top: .05rem;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}
.demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: 1.15rem 1.5rem;
  background: var(--night);
  color: var(--shell);
}
.demo-foot p { margin: 0; font-weight: 600; }
.no-js .demo-tabs { display: none; }
@media (max-width: 520px) {
  .demo-head, .demo-panel { padding-inline: 1.1rem; }
  .demo-foot { padding-inline: 1.1rem; }
  .demo-tabs { flex-wrap: wrap; gap: 0 .15rem; padding: 0 .6rem; overflow-x: visible; }
  .demo-tabs [role="tab"] { padding: .5rem .6rem; font-size: .92rem; }
}
.no-js .demo-panel + .demo-panel { border-top: 1px solid var(--line); }

/* Roadmap */
.not-yet {
  margin-top: 1.75rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .05);
  color: var(--mist);
  max-width: 52rem;
}
.not-yet strong { color: #fff; }

/* Contact */
.contact { padding-top: clamp(1rem, 3vw, 2rem); }
.contact-grid {
  display: grid;
  gap: 2rem 4rem;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(184, 199, 217, .25);
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
}
.contact-copy h2 {
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  margin-bottom: .45em;
}
.contact-copy p { color: var(--mist); font-size: 1.12em; max-width: 30em; margin-bottom: 1.6rem; }
.contact-cards { list-style: none; display: grid; gap: .85rem; }
.contact-cards a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value";
  align-items: center;
  gap: .1rem 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(184, 199, 217, .28);
  color: var(--shell);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
.night-band .contact-cards a { color: var(--shell); }
.contact-cards a:hover { background: rgba(255, 255, 255, .11); border-color: var(--coral-lt); color: #fff; }
.contact-cards .icon {
  grid-area: icon;
  width: 2.75rem; height: 2.75rem;
  padding: .6rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--night);
  stroke-width: 1.7;
}
.cc-label { grid-area: label; font-size: .88rem; font-weight: 700; color: var(--coral-lt); }
.cc-value { grid-area: value; font-size: 1.12rem; font-weight: 700; min-width: 0; overflow-wrap: break-word; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night-2);
  color: var(--mist);
  font-size: .95rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  border-top: 1px solid rgba(184, 199, 217, .18);
}
.site-footer a { color: var(--shell); }
.site-footer a:hover { color: var(--coral-lt); }
.footer-top {
  display: grid;
  gap: 2rem 3rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(184, 199, 217, .18);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.3fr 1fr 1.2fr; align-items: start; } }
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand img { width: 76px; height: 76px; border-radius: 12px; flex: none; }
.footer-brand p { margin: 0; }
.footer-name { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.3rem; font-weight: 600; color: var(--shell); line-height: 1.15; margin-bottom: .2rem !important; }
.footer-nav ul,
.footer-contact { list-style: none; display: grid; gap: .1rem; }
.footer-nav a,
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-nav a:hover,
.footer-contact a:hover { text-decoration: underline; }
@media (min-width: 560px) and (max-width: 859.98px) { .footer-nav ul { grid-template-columns: 1fr 1fr; } }

.footer-notes { padding-top: 2rem; font-size: .88rem; line-height: 1.6; }
.legal { max-width: 52rem; }
.legal a { color: var(--coral-lt); }
.legal p { margin-bottom: .75rem; }

/* ---------- Hero value tickets ---------- */
.hero-tickets {
  list-style: none;
  display: grid;
  gap: .9rem;
  margin: 1.6rem 0 0;
}
@media (min-width: 600px) {
  .hero-tickets { grid-template-columns: 1fr 1fr; }
}
.ticket {
  position: relative;
  padding: 1rem 1.25rem 1.05rem 1.35rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -26px rgba(16, 38, 65, .55);
}
/* Ticket-stub notches */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--shell);
  border: 1px solid var(--line);
}
.ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket-time { border-top: 4px solid var(--lagoon); }
.ticket-money { border-top: 4px solid var(--hibiscus); }
.ticket-figure {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 650;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ticket-time .ticket-figure { color: var(--lagoon); }
.ticket-money .ticket-figure { color: var(--hibiscus); }
.ticket-kicker {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--muted);
}
.ticket-line { margin: .35rem 0 0; font-weight: 700; line-height: 1.35; }
.ticket-basis {
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1.5px dashed var(--line);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}
.ticket-basis a { font-weight: 700; white-space: nowrap; }

/* ---------- Value section ---------- */
.value { background: #FFFDFB; border-top: 1px solid var(--line); }
.value-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1040px) {
  .value-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.value-card {
  scroll-margin-top: calc(var(--header-h) + 1rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
}
.value-time { background: var(--aqua); }
.value-money { background: var(--blush); }
.value-card > h3 { margin-bottom: 1rem; }
.value-kicker {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--muted);
}
.value-figure {
  display: block;
  font-size: clamp(3rem, 2rem + 3.6vw, 4.6rem);
  line-height: .95;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.value-time .value-figure { color: var(--lagoon); }
.value-money .value-figure { color: var(--hibiscus); }
.value-sub {
  display: block;
  margin-top: .45rem;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.2;
}
.value-card > p { max-width: 38em; }

/* Time and savings benefit lists */
.value-points {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin: 1.4rem 0 0;
}
.value-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: .95rem 1.1rem;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(19, 94, 107, .16);
}
.value-money .value-points li { border-color: rgba(178, 58, 76, .16); }
.point-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px -10px rgba(16, 38, 65, .6);
}
.point-icon .icon { width: 1.35rem; height: 1.35rem; }
.value-time .point-icon { color: var(--lagoon); }
.value-money .point-icon { color: var(--hibiscus); }
.value-points p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--muted); }
.value-points strong {
  display: block;
  margin-bottom: .1rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}
.value-close { margin: 1.1rem 0 0; font-weight: 700; color: var(--ink); }

/* What Mikayla handles */
.handles {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius-l);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.handles-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.handles-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.1; margin-bottom: .4rem; }
.handles-head p { margin: 0; color: var(--muted); }
.segmented {
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--sand);
}
.segmented label { position: relative; display: inline-flex; }
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color .18s ease, color .18s ease;
}
.segmented input:checked + span { background: var(--ink); color: #fff; }
.segmented input:focus-visible + span { outline: 3px solid var(--lagoon); outline-offset: 2px; }
.handles-summary { margin: 1.1rem 0 0; font-weight: 800; color: var(--palm); }
.handles[data-view="diy"] .handles-summary { color: var(--hibiscus); }
.handles-list {
  list-style: none;
  display: grid;
  gap: 1px;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--line);
}
@media (min-width: 640px) { .handles-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .handles-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.handles-list li { padding: 1.1rem 1.15rem 1.25rem; background: #fff; }
.handles-list h4 {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
.handles-list h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5.2-5.4' fill='none' stroke='%23102641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.handles[data-view="diy"] .handles-list h4::before { background: #fff; border: 1.5px solid var(--field); }
.handles-list p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.handles-list p + p { margin-top: .5rem; }
.view-label { font-weight: 800; color: var(--ink); }
.js .view-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.js .handles[data-view="mikayla"] .diy,
.js .handles[data-view="diy"] .with { display: none; }
.no-js .segmented,
.no-js .handles-summary { display: none; }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: #fff;
}
.cta-band p {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  font-weight: 600;
}
.cta-band-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cta-band .btn-primary { background: var(--shell); color: var(--night); box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--coral-lt); color: var(--night); }
.cta-band .btn-secondary { color: #fff; border-color: #fff; }
.cta-band .btn-secondary:hover { background: #fff; color: var(--ink); }
.cta-band :focus-visible { outline-color: var(--coral-lt); }

/* ---------- Trip finder ---------- */
.finder {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 1000px) {
  .finder { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2.5rem; align-items: start; }
}
.finder-picks { min-width: 0; margin: 0; padding: 0; border: 0; }
.finder-picks legend { padding: 0; margin-bottom: .85rem; font-size: 1.1rem; font-weight: 800; }
.finder-results-title { font-size: 1.4rem; margin-bottom: .75rem; }
.finder-empty {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-m);
  border: 1.5px dashed var(--line);
  color: var(--muted);
}
.finder-list { list-style: none; display: grid; gap: .75rem; }
.finder-item {
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--radius-m);
  background: var(--shell);
  border: 1px solid var(--line);
}
.finder-item:first-child { background: var(--blush); border-color: #F0CACC; }
.finder-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .75rem; }
.finder-item h4 { font-size: 1.25rem; line-height: 1.15; }
.fit {
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}
.fit-good { background: var(--palm); }
.fit-possible { background: var(--muted); }
.finder-item ul { margin: .55rem 0 0; padding-left: 1.15rem; display: grid; gap: .25rem; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.finder-consider { margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.finder-item a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; font-weight: 700; }
.finder-actions { margin-top: 1rem; }
.finder-note { margin: .85rem 0 0; font-size: .88rem; color: var(--muted); }

.dest-card .list-intro { margin-top: 1rem; }
.dest-feature .list-intro { margin-top: 1.1rem; }

/* ---------- Credential badge ---------- */
.credential { display: grid; justify-items: center; gap: 1.1rem; }
.credential-button {
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: .75rem;
  border: 0;
  border-radius: 28px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.credential-badge {
  width: min(360px, 78vw);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(16, 38, 65, .24));
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .credential-button:hover .credential-badge { transform: rotate(-4deg) scale(1.02); }
}
.credential-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--ink);
  font-weight: 700;
}
.credential-cta::after {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.credential-button[aria-expanded="true"] .credential-cta::after { transform: rotate(-135deg); margin-top: .2rem; }
.credential-button:hover .credential-cta { background: var(--ink); color: #fff; }
.credential-detail {
  width: 100%;
  max-width: 30rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-m);
  background: #fff;
  border: 1px solid #F0CACC;
  box-shadow: var(--shadow-soft);
}
.credential-detail h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.credential-detail p { font-size: .97rem; }
.credential-fine { font-size: .9rem !important; color: var(--muted); }

/* ---------- FAQ groups ---------- */
.faq-group-title {
  margin: 0 0 .6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--hibiscus);
}
.faq-list + .faq-group-title { margin-top: 2.25rem; }

/* ---------- What's next (compact) ---------- */
.next-grid { display: grid; gap: 2.5rem 4.5rem; }
@media (min-width: 1000px) {
  .next-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
}
.next-copy h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.05;
  margin-bottom: .5em;
}
.next-copy > p { max-width: 36em; color: #E5ECF4; }
.roadmap-title {
  margin: 1.75rem 0 .75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
}
.roadmap-list { list-style: none; display: grid; gap: .5rem; counter-reset: phase; }
.roadmap-list li {
  counter-increment: phase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .85rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(184, 199, 217, .38);
}
.roadmap-list li::before {
  content: counter(phase);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mist);
}
.roadmap-list li.is-live { border-style: solid; border-color: rgba(207, 224, 168, .55); background: rgba(207, 224, 168, .08); }
.roadmap-list li.is-live::before { color: #CFE0A8; }
.roadmap-name { flex: 1 1 14rem; font-weight: 700; color: #fff; }
.roadmap-list .status-pill { margin: 0; }

/* ---------- Mobile menu quick contacts ---------- */
.nav-quick { display: none; }
@media (max-width: 1099.98px) {
  .js .nav-quick {
    display: grid;
    gap: .1rem;
    list-style: none;
    padding-top: .25rem;
  }
  .js .nav-quick a {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
  }
  .js .nav-quick .icon { color: var(--hibiscus); }
}

/* ---------- Planner note from the trip finder ---------- */
.planner-from-finder {
  margin: -.5rem 0 1.25rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: var(--blush);
  font-size: .95rem;
  font-weight: 600;
}

/* =====================================================================
   Motion and art finish
   Everything that moves on its own is scoped to html[data-motion="on"].
   The visitor can switch animations off in the header (or menu); the OS
   "reduce motion" setting turns them off until the visitor chooses.
   Transforms stay on leaf elements: never on ancestors of the sticky
   header, planner, FAQ heading, or assistant demo.
   ===================================================================== */

/* ---------- Animations toggle ---------- */
.motion-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.motion-toggle .icon { width: 1.3rem; height: 1.3rem; color: var(--hibiscus); }
.motion-toggle .motion-slash { display: none; }
.motion-toggle[aria-pressed="false"] .icon { color: var(--muted); }
.motion-toggle[aria-pressed="false"] .motion-slash { display: inline; }
.motion-toggle:hover { border-color: var(--ink); }
.motion-state {
  min-width: 2.6rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--palm);
  color: #fff;
  font-size: .85rem;
  text-align: center;
}
.motion-toggle[aria-pressed="false"] .motion-state { background: var(--muted); }

@media (min-width: 1100px) {
  /* Compact icon button in the header bar; the name stays available to assistive tech */
  .motion-toggle .motion-label,
  .motion-toggle .motion-state {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .motion-toggle { width: 44px; margin-left: -.85rem; }
}
@media (max-width: 1099.98px) {
  /* A labeled row in the phone menu */
  .motion-toggle {
    justify-content: flex-start;
    width: 100%;
    min-height: 52px;
    padding: 0 1rem;
    border-radius: 14px;
  }
  .motion-toggle .motion-state { margin-left: auto; }
}

/* ---------- Scroll journey: progress line, stops, and a little plane ---------- */
.scroll-journey {
  position: absolute;
  left: 0; right: 0; bottom: -1.5px;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-scrolled .scroll-journey { opacity: 1; }
.scroll-journey::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(232, 215, 202, .75);
}
.scroll-journey-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--coral) 0%, var(--hibiscus) 70%, var(--lagoon) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}
.scroll-journey-stop {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--shell);
  border: 2px solid var(--coral);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.scroll-journey-stop.is-passed { background: var(--hibiscus); border-color: var(--hibiscus); }
.scroll-journey-plane {
  position: absolute;
  left: 0; top: -8.5px;
  width: 20px; height: 20px;
  max-width: none;
  fill: var(--hibiscus);
  filter: drop-shadow(0 2px 3px rgba(16, 38, 65, .3));
}

/* ---------- Active navigation: one indicator glides between links ---------- */
.nav-indicator { display: none; }
@media (min-width: 1100px) {
  .site-nav { position: relative; }
  .js .nav-indicator {
    display: block;
    position: absolute;
    left: 0; top: 0;
    height: 3px;
    width: 0;
    border-radius: 3px;
    background: var(--hibiscus);
    opacity: 0;
    pointer-events: none;
  }
  .js .nav-indicator.is-on { opacity: 1; }
  html[data-motion="on"] .nav-indicator { transition: transform .5s cubic-bezier(.3, .9, .25, 1), width .5s cubic-bezier(.3, .9, .25, 1), opacity .25s ease; }
  .has-indicator .nav-list a[aria-current="true"]::after { transform: scaleX(0); }
}

/* ---------- Section entrances (added by script; content is never hidden without it) ---------- */
html[data-motion="on"] .rise {
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html[data-motion="on"] .rise:not(.rise-in) { opacity: 0; transform: translateY(34px); }
html[data-motion="on"] .rise-stamp:not(.rise-in) { transform: translateY(26px) rotate(-4deg) scale(.94); }
html[data-motion="on"] .rise-side:not(.rise-in) { transform: translateX(-28px); }

/* ---------- Hero: opening sequence ---------- */
@keyframes word-rise { from { opacity: 0; transform: translateY(.55em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes stamp-drop {
  0% { opacity: 0; transform: translateY(-34px) rotate(-7deg) scale(1.05); }
  60% { opacity: 1; transform: translateY(4px) rotate(3deg) scale(.995); }
  100% { opacity: 1; transform: rotate(2deg); }
}
@keyframes postmark-thump {
  0% { opacity: 0; transform: rotate(-30deg) scale(1.7); }
  55% { opacity: 1; transform: rotate(-6deg) scale(.94); }
  100% { opacity: .88; transform: rotate(-8deg) scale(1); }
}
@keyframes card-slide {
  from { opacity: 0; transform: translateY(46px) rotate(-12deg); }
  to { opacity: 1; transform: rotate(-5deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

html.js[data-motion="on"] .hero h1 .w {
  display: inline-block;
  animation: word-rise .85s cubic-bezier(.2, .75, .2, 1) backwards;
}
html.js[data-motion="on"] .hero h1 .w:nth-child(1) { animation-delay: .08s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(2) { animation-delay: .16s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(3) { animation-delay: .28s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(4) { animation-delay: .34s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(5) { animation-delay: .40s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(6) { animation-delay: .48s; }
html.js[data-motion="on"] .hero h1 .w:nth-child(7) { animation-delay: .56s; }
html.js[data-motion="on"] .hero-promise { animation: fade-up .8s .62s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js[data-motion="on"] .hero-lede { animation: fade-up .8s .74s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js[data-motion="on"] .hero-tickets .ticket { animation: fade-up .8s .86s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js[data-motion="on"] .hero-tickets .ticket-money { animation-delay: .98s; }
html.js[data-motion="on"] .hero-actions { animation: fade-up .8s 1.08s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js[data-motion="on"] .hero-contact { animation: fade-up .8s 1.18s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js[data-motion="on"] .stamp-hero { animation: stamp-drop 1.1s .2s cubic-bezier(.25, .8, .3, 1) backwards; }
html.js[data-motion="on"] .postmark { animation: postmark-thump .7s 1.05s cubic-bezier(.3, 1.3, .5, 1) backwards; }
html.js[data-motion="on"] .hero-logo { animation: card-slide .95s .62s cubic-bezier(.2, .8, .25, 1) backwards; }
html.js[data-motion="on"] .art-caption { animation: fade-up .8s 1.25s ease backwards; }

/* Scroll-linked layers: each moves at its own pace as the hero scrolls away (--hy, 0 to 1).
   The stamp, logo card, and caption move together so the art never slides over the caption. */
html[data-motion="on"] .hero-figure { translate: 0 calc(var(--hy, 0) * 52px); }
html[data-motion="on"] .art-window img { scale: 1.08; translate: 0 calc(var(--hy, 0) * -30px); }
html[data-motion="on"] .hero-logo { translate: 0 calc(var(--hy, 0) * -24px); }
html[data-motion="on"] .postmark { translate: 0 calc(var(--hy, 0) * 120px); rotate: calc(var(--hy, 0) * -16deg); }
html[data-motion="on"] .hero-sparkles { translate: 0 calc(var(--hy, 0) * 110px); }

/* Sparkles around the artwork */
.hero-sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-sparkles span {
  position: absolute;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #F7C96B 0%, #EC9CA3 100%);
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  opacity: .9;
}
.hero-sparkles span:nth-child(1) { top: 1.6rem; right: 9%; width: 30px; height: 30px; }
.hero-sparkles span:nth-child(2) { top: 4.4rem; right: 0; width: 16px; height: 16px; background: linear-gradient(135deg, #F7C96B, #F6B3B8); }
.hero-sparkles span:nth-child(3) { top: 44%; left: 2%; width: 20px; height: 20px; background: linear-gradient(135deg, #8FC9C0, #135E6B); }
.hero-sparkles span:nth-child(4) { bottom: 4%; right: 6%; width: 26px; height: 26px; }
.hero-sparkles span:nth-child(5) { top: .6rem; left: 46%; width: 15px; height: 15px; background: linear-gradient(135deg, #8FC9C0, #135E6B); }
.hero-sparkles span:nth-child(6) { bottom: 9%; left: 50%; width: 18px; height: 18px; }
html[data-motion="on"] .hero-sparkles span { animation: twinkle 3.2s ease-in-out infinite; }
html[data-motion="on"] .hero-sparkles span:nth-child(2) { animation-duration: 2.6s; animation-delay: .7s; }
html[data-motion="on"] .hero-sparkles span:nth-child(3) { animation-duration: 3.8s; animation-delay: 1.3s; }
html[data-motion="on"] .hero-sparkles span:nth-child(4) { animation-duration: 2.9s; animation-delay: .4s; }
html[data-motion="on"] .hero-sparkles span:nth-child(5) { animation-duration: 3.5s; animation-delay: 1.9s; }
html[data-motion="on"] .hero-sparkles span:nth-child(6) { animation-duration: 4.1s; animation-delay: 1.1s; }
@media (max-width: 520px) {
  .hero-sparkles span:nth-child(2),
  .hero-sparkles span:nth-child(5) { display: none; }
}

/* ---------- Hover and touch details ---------- */
@media (hover: hover) {
  html[data-motion="on"] .ticket { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease; }
  html[data-motion="on"] .ticket:hover { transform: translateY(-6px) rotate(-.7deg); box-shadow: 0 28px 40px -26px rgba(16, 38, 65, .6); }
  html[data-motion="on"] .ticket-money:hover { transform: translateY(-6px) rotate(.7deg); }

  html[data-motion="on"] .btn-primary {
    background-image: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .28) 50%, transparent 62% 100%);
    background-size: 260% 100%;
    background-position: 130% 0;
    background-repeat: no-repeat;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, background-position .85s ease;
  }
  html[data-motion="on"] .btn-primary:hover { background-position: -30% 0; }

  html[data-motion="on"] .dest-card,
  html[data-motion="on"] .contact-cards a { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background-color .2s ease, border-color .2s ease; }
  html[data-motion="on"] .dest-card:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -30px rgba(16, 38, 65, .55); }
  html[data-motion="on"] .contact-cards a:hover { transform: translateY(-3px); }

  html[data-motion="on"] .value-card {
    background-image: radial-gradient(30rem circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, .62), transparent 58%);
  }
}

/* Pointer tilt on stamps and the badge (fine pointers only; set by script) */
html[data-motion="on"] [data-tilt] {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--base-rot, 0deg));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
html[data-motion="on"] [data-tilt].is-tilting { transition-duration: .12s; }
html[data-motion="on"] .dest-card-main .stamp[data-tilt] { --base-rot: -2.5deg; }
html[data-motion="on"] .stamp-small[data-tilt] { --base-rot: 2.5deg; }
html[data-motion="on"] .credential-button .credential-badge[data-tilt],
html[data-motion="on"] .credential-button:hover .credential-badge[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1));
}
html[data-motion="on"] .credential-badge.is-tilting { --tilt-scale: 1.03; }

/* Touch: a gentle press */
@media (hover: none) {
  html[data-motion="on"] .dest-card:active,
  html[data-motion="on"] .ticket:active,
  html[data-motion="on"] .contact-cards a:active { transform: scale(.985); transition: transform .15s ease; }
}

/* Chips pop when chosen */
@keyframes chip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
html[data-motion="on"] .chip input:checked + span { animation: chip-pop .34s cubic-bezier(.3, 1.4, .5, 1); }

/* Value card benefit icons settle in after their card */
@keyframes icon-pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
html[data-motion="on"] .value-points .rise.rise-in .point-icon { animation: icon-pop .6s calc(var(--d, 0) * 90ms + .25s) cubic-bezier(.3, 1.3, .5, 1) backwards; }

/* Planning jobs flip when the view switches */
@keyframes flip-in { from { opacity: .2; transform: perspective(700px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
html[data-motion="on"] .handles-list.is-switching > li { animation: flip-in .5s calc(var(--i, 0) * 45ms) cubic-bezier(.2, .8, .25, 1) backwards; transform-origin: 50% 0; }

/* FAQ answers ease open */
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html[data-motion="on"] .faq-list details[open] > .faq-answer { animation: faq-open .34s ease-out; }

/* ---------- Trip finder: results land like postcards; the top pick gets a postmark ---------- */
@keyframes deal-in {
  from { opacity: .35; transform: translateY(12px) rotate(-1.4deg) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes postmark-land {
  0% { opacity: 0; transform: rotate(-40deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-8deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
html[data-motion="on"] .finder-list.is-fresh > .finder-item { animation: deal-in .45s calc(var(--i, 0) * 70ms) cubic-bezier(.2, .8, .25, 1) backwards; }
.finder-item { position: relative; }
.finder-item.is-top a { margin-right: 66px; }
.finder-postmark {
  position: absolute;
  right: .7rem; bottom: .55rem;
  width: 58px; height: 58px;
  color: var(--hibiscus);
  transform: rotate(-12deg);
  pointer-events: none;
}
.finder-postmark svg { width: 100%; height: 100%; }
.finder-postmark text { font-family: var(--font-body); font-size: 8.2px; font-weight: 800; letter-spacing: 1.4px; fill: currentColor; }
html[data-motion="on"] .finder-list.is-fresh .finder-postmark { animation: postmark-land .6s .32s cubic-bezier(.3, 1.3, .5, 1) backwards; }

/* A link from the finder or a hero ticket lands on its card with a soft glow */
@keyframes landed { 0% { box-shadow: 0 0 0 0 rgba(236, 156, 163, .85); } 100% { box-shadow: 0 0 0 22px rgba(236, 156, 163, 0); } }
html[data-motion="on"] .is-landed { animation: landed 1.1s ease-out 2; }

/* ---------- Lagoon artwork: slow parallax inside its frame (--py, 0 to 1) ---------- */
html[data-motion="on"] .panorama img { scale: 1.1; translate: 0 calc((var(--py, .5) - .5) * -52px); }

/* ---------- How it works: the route fills in behind the plane ---------- */
.flight-line::after {
  content: "";
  position: absolute;
  background: var(--hibiscus);
  border-radius: 2px;
}
.flight-line::after { left: -1.25px; top: 0; width: 2.5px; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--jp, 1)); }
@media (min-width: 960px) {
  .flight-line::after { left: 0; top: -2.5px; width: 100%; height: 2.5px; transform-origin: 0 50%; transform: scaleX(var(--jp, 1)); }
}
.no-js .flight-line::after,
html[data-motion="off"] .flight-line::after { display: none; }
html[data-motion="on"] .journey-steps .stop { transition: background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
html[data-motion="on"] .journey-steps li.is-reached .stop { background: var(--hibiscus); color: #fff; transform: scale(1.08); }

/* ---------- Planner: a plane flies along the progress line to the current step ---------- */
.progress-track { position: relative; }
.progress-plane {
  --pp: .2;
  position: absolute;
  top: -8px;
  left: calc(var(--pp) * 100% - 24px);
  width: 20px; height: 20px;
  color: var(--hibiscus);
  pointer-events: none;
}
.progress-plane svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 2px 2px rgba(16, 38, 65, .25)); }
.planner[data-step="2"] .progress-plane { --pp: .4; }
.planner[data-step="3"] .progress-plane { --pp: .6; }
.planner[data-step="4"] .progress-plane { --pp: .8; }
.planner[data-step="5"] .progress-plane { --pp: 1; }
@keyframes plane-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
html[data-motion="on"] .progress-plane { transition: left .75s cubic-bezier(.45, .05, .2, 1); }
html[data-motion="on"] .progress-plane svg { animation: plane-bob 2.6s ease-in-out infinite; }
.no-js .progress-plane { display: none; }

/* ---------- Night band: a slow, twinkling sky ---------- */
.night-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.night-band > .section { position: relative; z-index: 1; }
.night-stars {
  position: absolute;
  left: 0; right: 0; top: -90px; bottom: -90px;
  background-repeat: repeat;
}
.night-stars-a {
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1.1px 1.1px at 118px 96px, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 196px 18px, rgba(255, 236, 190, .8), transparent 60%),
    radial-gradient(1px 1px at 64px 172px, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.3px 1.3px at 232px 150px, rgba(255, 255, 255, .7), transparent 60%);
  background-size: 260px 210px;
  opacity: .5;
}
.night-stars-b {
  background-image:
    radial-gradient(1.2px 1.2px at 40px 60px, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1.8px 1.8px at 210px 130px, rgba(246, 179, 184, .8), transparent 60%),
    radial-gradient(1px 1px at 300px 30px, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.4px 1.4px at 150px 250px, rgba(255, 255, 255, .7), transparent 60%);
  background-size: 340px 300px;
  opacity: .35;
}
@keyframes twinkle-a { from { opacity: .25; } to { opacity: .7; } }
@keyframes twinkle-b { from { opacity: .55; } to { opacity: .15; } }
html[data-motion="on"] .night-stars-a { animation: twinkle-a 4.5s ease-in-out infinite alternate; translate: 0 calc(var(--ny, 0) * -70px); }
html[data-motion="on"] .night-stars-b { animation: twinkle-b 6.5s ease-in-out infinite alternate; translate: 0 calc(var(--ny, 0) * -130px); }
.shooting-star { display: none; }
@keyframes shoot {
  0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-18deg) scaleX(.2); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(-340px, 110px) rotate(-18deg) scaleX(1); }
}
html[data-motion="on"] .shooting-star {
  display: block;
  position: absolute;
  top: 9%; right: 8%;
  width: 120px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%, #FFE6A6);
  transform-origin: right center;
  animation: shoot 11s 3s linear infinite;
}

/* ---------- Forced colors and print for the decorative layers ---------- */
@media (forced-colors: active) {
  .hero-sparkles, .night-sky, .scroll-journey, .progress-plane, .finder-postmark { display: none; }
  .js .nav-indicator { background: Highlight; }
}

/* ---------- No-JavaScript fallbacks ---------- */
.no-js .credential-cta,
.no-js .finder,
.no-js .handles-summary { display: none; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]),
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="off"],
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .stamp { filter: none; border: 2px solid CanvasText; }
  .chip input:checked + span { border-width: 3px; }
  .status-pill, .demo-badge { border: 1px solid CanvasText; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .skip-link, .planner-nav, .send-actions, .demo-tabs, .flight, .night-sky, .hero-sparkles, .progress-plane { display: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .night-band, .site-footer, .dest-feature { background: #fff !important; color: #000 !important; }
  .section { padding-block: 1.5rem; }
}