/* Trips by ’Chelle — site styles
   Warm coastal editorial. Tokens first, then base, components, pages, motion. */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --sea: #6bbfcc;          /* accents, selected states, fills behind navy text */
  --navy: #19364c;         /* text and strong actions (12.4:1 on warm white) */
  --white: #fffdfb;        /* main canvas */
  --sand: #c9baa6;         /* warmth, decorative fills behind navy text */

  /* Derived, contrast-checked against warm white and the washes below */
  --sea-ink: #1d6b77;      /* small accent text: 6.0:1 on white */
  --sand-ink: #6f604c;     /* small warm text: 6.0:1 on white */
  --navy-soft: #4a5f70;    /* secondary text: 6.5:1 on white */
  --sand-wash: #f4efe8;
  --sand-wash-2: #ebe3d8;
  --sea-wash: #e4f3f5;
  --navy-deep: #12293a;
  --line: rgba(25, 54, 76, 0.14);
  --line-strong: rgba(25, 54, 76, 0.28);

  /* Type */
  --font-display: "Playfair Display", "Didot", Georgia, serif;
  --font-body: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.9vw, 2.9rem);
  --step-4: clamp(2rem, 1.45rem + 2.3vw, 3.3rem);
  --step-5: clamp(2.6rem, 1.7rem + 4.2vw, 5.6rem);

  /* Space & shape */
  --gutter: clamp(1rem, 4vw, 2.75rem);
  --section: clamp(3rem, 1.8rem + 4.2vw, 5.75rem);
  --radius: 22px;
  --radius-lg: 34px;
  --header-h: 76px;

  /* Motion: unhurried */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --slow: 1100ms;
  --med: 650ms;
  --fast: 260ms;
}

@media (max-width: 999px) {
  :root { --header-h: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; }
p, ul, ol, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }
::selection { background: var(--sea); color: var(--navy); }

:focus-visible {
  outline: 2.5px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--sea); }

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

.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--navy); color: var(--white); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-ink);
  margin-bottom: 0.8rem;
}
.display-1 { font-size: var(--step-5); line-height: 1; }
.display-2 { font-size: var(--step-4); }
.display-1 em, .display-2 em { color: var(--sea-ink); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--navy); }

.section-intro { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }

/* ---------- Buttons & links ---------- */
.button {
  --btn-bg: var(--navy); --btn-fg: var(--white); --btn-fill: var(--sea); --btn-fill-fg: var(--navy);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.85rem 1.6rem;
  border: 0; border-radius: 999px;
  /* Outline drawn as an inset shadow, so the hover fill slides over it instead of the edge changing color first */
  box-shadow: inset 0 0 0 1.5px var(--btn-ring, transparent);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; line-height: 1.2;
  cursor: pointer;
  transition: color var(--med) var(--ease), transform var(--med) var(--ease);
}
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill); border-radius: inherit;
  transform: translateY(102%); transition: transform var(--med) var(--ease);
}
.button:hover::before, .button:focus-visible::before { transform: translateY(0); }
.button:hover, .button:focus-visible { color: var(--btn-fill-fg); }
.button:active { transform: scale(0.98); }
.button-arrow { display: inline-block; transition: transform var(--med) var(--ease); }
.button:hover .button-arrow, .button:focus-visible .button-arrow { transform: translateX(4px); }

.button--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-fill: var(--navy); --btn-fill-fg: var(--white); --btn-ring: var(--line-strong); }
.button--light { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-fill: var(--sea); --btn-fill-fg: var(--navy); }
.button--small { min-height: 2.6rem; padding: 0.55rem 1.15rem; font-size: 0.94rem; }
.button--large { min-height: 3.75rem; padding: 1rem 2.1rem; font-size: 1.08rem; }

.text-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; color: var(--navy); text-decoration: none;
  background: linear-gradient(var(--sea), var(--sea)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 0.15rem;
  transition: background-size var(--med) var(--ease), color var(--fast);
}
.text-link:hover, .text-link:focus-visible { background-size: 100% 0.5em; }
.text-link span[aria-hidden] { transition: transform var(--med) var(--ease); }
.text-link:hover span[aria-hidden] { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
/* The frosted glass lives on a pseudo-element: a backdrop-filter on the header itself
   would trap the fixed full-screen mobile menu inside the header's box. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 253, 251, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
body.menu-open .site-header::before { background: var(--white); }
.site-header[data-scrolled] { border-bottom-color: var(--line); box-shadow: 0 10px 30px -18px rgba(25, 54, 76, 0.25); }
.header-inner {
  height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.25rem;
}
body { padding-top: var(--header-h); }

.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--navy); margin-right: auto; }
.wordmark-text { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.wordmark-text em { font-style: italic; color: var(--sea-ink); font-weight: 400; margin-inline: 0.02em; }
.wordmark--light { color: var(--white); }
.wordmark--light .wordmark-text em { color: var(--sea); }

.primary-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.35rem; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.9rem; border: 0; background: none; cursor: pointer;
  font-weight: 500; font-size: 0.98rem; color: var(--navy); text-decoration: none; border-radius: 999px;
}
.nav-link::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 2px;
  background: var(--sea); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current]::after, .nav-link[data-active]::after, .nav-disclosure[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-caret { width: 0.8rem; height: 0.8rem; transition: transform var(--med) var(--ease); }
.nav-disclosure[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-item--cta { margin-left: 0.6rem; }
.nav-item--explore { position: relative; }

.explore-panel {
  position: absolute; top: calc(100% + 0.9rem); left: -1rem; width: 25rem;
  padding: 0.6rem; border-radius: var(--radius);
  background: var(--white); box-shadow: 0 30px 60px -24px rgba(25, 54, 76, 0.35), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--fast) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.explore-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.explore-link {
  position: relative; display: grid; gap: 0.1rem; padding: 0.9rem 1rem 0.9rem 3.4rem;
  border-radius: 16px; text-decoration: none; color: var(--navy);
  transition: background var(--fast) var(--ease);
}
.explore-link::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -0.8rem;
  border-radius: 50%; background: var(--swatch);
  transition: transform var(--med) var(--ease);
}
.explore-link--beach { --swatch: linear-gradient(160deg, #f6e7c8 0%, var(--sand) 55%, #7fcfd8 56%, var(--sea) 100%); }
.explore-link--sea { --swatch: linear-gradient(160deg, var(--sea) 0%, #2c7f97 50%, var(--navy) 100%); }
.explore-link--ice { --swatch: linear-gradient(160deg, #ffffff 0%, #cfe6ee 45%, #6c8aa0 100%); }
.explore-link--world { --swatch: linear-gradient(160deg, #f3e3c3 0%, #d9b48a 40%, #3f7fa6 100%); }
.explore-link--magic { --swatch: linear-gradient(160deg, #f6dcb8 0%, #e8a7a0 45%, #4a5f8a 100%); }
.explore-link:hover, .explore-link:focus-visible { background: var(--sand-wash); }
.explore-link:hover::before { transform: scale(1.15) rotate(-12deg); }
.explore-link[aria-current] { background: var(--sea-wash); }
.explore-link-title { font-family: var(--font-display); font-size: 1.2rem; }
.explore-link-note { font-size: 0.9rem; color: var(--navy-soft); }

.menu-toggle { display: none; }
.menu-contact { display: none; }


@media (min-width: 1000px) {
  .header-inner { gap: 1.75rem; }
  .primary-nav { order: 2; }
}

@media (max-width: 999px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 2.6rem; padding: 0.4rem 0.9rem; border: 1.5px solid var(--navy); border-radius: 999px;
    background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.92rem; cursor: pointer;
  }
  .menu-toggle-lines { position: relative; width: 1rem; height: 0.7rem; }
  .menu-toggle-lines span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--med) var(--ease), top var(--med) var(--ease); }
  .menu-toggle-lines span:first-child { top: 0; }
  .menu-toggle-lines span:last-child { top: calc(100% - 2px); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }
  .primary-nav { order: 3; }

  .site-menu {
    position: fixed; inset: var(--header-h) 0 0; z-index: 90;
    display: flex; flex-direction: column; gap: 2rem;
    padding: 1.5rem var(--gutter) 2.5rem; overflow-y: auto;
    background: var(--white);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
  }
  .site-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; justify-content: space-between; padding: 1.1rem 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; border-radius: 0; }
  .nav-link::after { left: 0; right: auto; width: 2.5rem; bottom: 0.7rem; }
  .nav-caret { width: 1.1rem; height: 1.1rem; }
  .explore-panel { position: static; width: auto; padding: 0 0 1rem; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .explore-panel.is-open { display: block; }
  .nav-item--cta { margin: 1.5rem 0 0; border: 0; }
  .nav-item--cta .button { width: 100%; min-height: 3.4rem; font-size: 1.05rem; }
  .menu-contact { display: grid; gap: 0.4rem; font-size: 1rem; }
  .menu-contact-label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea-ink); }
  .menu-contact a { color: var(--navy); font-weight: 500; }
  body.menu-open { overflow: hidden; }

  /* Without JavaScript the menu simply sits open below the header */
  .no-js .menu-toggle { display: none; }
  .no-js .site-header { position: static; height: auto; }
  .no-js body { padding-top: 0; }
  .no-js .header-inner { flex-wrap: wrap; padding-block: 0.8rem; }
  .no-js .site-menu { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; width: 100%; }
  .no-js .explore-panel { display: block; }
}

@media (max-width: 999px) {
  .header-inner { gap: 0.6rem; }
}
@media (max-width: 420px) {
  .wordmark-text { font-size: 1.35rem; }
  .menu-toggle { padding: 0.4rem 0.75rem; }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Hero ---------- */
/* Exactly one screen tall: type and imagery scale with the viewport height so the
   whole composition fits without scrolling on laptops, large monitors and phones. */
.hero {
  position: relative;
  display: grid; align-items: center; align-content: center; gap: clamp(2rem, 4vw, 4.5rem);
  max-width: 1440px; margin-inline: auto;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(1rem, 3svh, 2.5rem) var(--gutter) clamp(2.5rem, 6svh, 4rem);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -10vw; top: 6%; width: 62vw; height: 82%;
  border-radius: 50% 0 0 50%;
  background: radial-gradient(closest-side, rgba(201, 186, 166, 0.34), rgba(201, 186, 166, 0) 72%);
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-title {
  font-size: min(var(--step-5), 8.6svh, 5.1vw); line-height: 1.04; letter-spacing: -0.01em; font-weight: 400;
  margin-bottom: clamp(1rem, 2.6svh, 1.75rem);
}
.hero-title .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span { display: inline-block; }
.hero-title em { color: var(--sea-ink); font-weight: 400; }
.hero-lede { max-width: 34rem; font-size: var(--step-1); color: var(--navy); margin-bottom: clamp(1.2rem, 3.4svh, 2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-specialties { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: clamp(1.2rem, 3.4svh, 2rem); padding-top: 1.2rem; border-top: 1px solid var(--line); max-width: 34rem; }
.hero-specialties a { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--navy-soft); text-decoration: none; transition: color var(--fast); }
.hero-specialties a::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sea); transition: transform var(--med) var(--ease); }
.hero-specialties a:hover { color: var(--navy); }
.hero-specialties a:hover::before { transform: scale(1.5); }

.hero-media { --badge: clamp(10rem, 27svh, 17.5rem); position: relative; justify-self: center; padding: 0 0 3rem 4.5rem; }
.hero-arch {
  height: min(66svh, 40rem); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: var(--sea-wash);
}
.hero-arch { position: relative; z-index: 1; }  /* above the outside stamp, so only the white copy shows over the photo */
.hero-arch img { width: 100%; height: 100%; object-fit: cover; }
/* Same position and size as the stamp outside the arch (the arch shares the media box's
   top and right edges), so the two copies line up exactly and only the colour changes. */
.hero-stamp.hero-stamp--on-photo { color: var(--white); pointer-events: none; }
.hero-porthole { position: absolute; z-index: 2; left: 0; bottom: 0; width: var(--badge); }
.hero-porthole picture, .hero-porthole img {
  width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 42%;
}
.hero-porthole picture { border: 8px solid var(--white); border-radius: 50%; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(25, 54, 76, 0.45); }
.hero-stamp {
  position: absolute; top: calc(var(--badge) * -0.16); right: calc(var(--badge) * -0.16); width: var(--badge); color: var(--sea-ink);
}
.hero-stamp text { font-family: var(--font-body); font-size: 13.2px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; fill: currentColor; }
.hero-stamp > :not(defs) { transform-origin: 100px 100px; }
.hero-stamp text { animation: stamp-turn 60s linear infinite; }
@keyframes stamp-turn { to { transform: rotate(360deg); } }

/* A quiet cue that there's more, and a one-click way to get to it */
.hero-next {
  position: absolute; left: 50%; bottom: clamp(0.6rem, 2svh, 1.4rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-soft); text-decoration: none;
}
.hero-next::after { content: ""; width: 1px; height: 2.2rem; background: linear-gradient(var(--navy-soft), transparent); transform-origin: top; animation: cue 2.4s var(--ease-soft) infinite; }
.hero-next:hover { color: var(--navy); }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 959px) {
  .hero { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1rem, 2.4svh, 1.5rem); padding-top: 0.6rem; padding-bottom: 1.25rem; }
  .hero-copy { flex: none; }
  .hero-media { --badge: clamp(6.5rem, 16svh, 9rem); order: -1; width: 100%; max-width: 30rem; padding: 0 0 2.2rem 2.2rem; }
  .hero-media { flex: 1 1 0; display: flex; flex-direction: column; min-height: clamp(8.5rem, 28svh, 13rem); }
  .hero-arch { width: 100%; flex: 1 1 0; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 999px 999px var(--radius) var(--radius); }
  .hero-arch > img { position: absolute; inset: 0; }
  .hero-porthole picture { border-width: 5px; }
  .hero-stamp { top: calc(var(--badge) * -0.12); right: calc(var(--badge) * -0.08); }
  .hero-title { font-size: min(var(--step-5), 6svh, 10.6vw); }
  .hero-lede { font-size: 1.05rem; line-height: 1.5; }
  .hero-specialties, .hero-next { display: none; }
}
@media (max-width: 420px) {
  .hero-actions .button { width: 100%; min-height: 3rem; padding-block: 0.7rem; }
}
@media (max-width: 959px) and (max-height: 720px) {
  .hero-eyebrow { display: none; }
  .hero-title { font-size: min(var(--step-5), 5.6svh, 10.6vw); }
  .hero-lede { font-size: 1rem; }
}
@media (max-width: 959px) and (max-height: 700px) {
  .hero-media { min-height: 7.5rem; }
}
/* Mid-size laptops: the trip links repeat the Explore menu, so let them go when space is tight */
@media (min-width: 960px) and (max-width: 1199px) and (max-height: 820px) {
  .hero-specialties { display: none; }
}
@media (max-height: 640px) and (min-width: 960px) {
  .hero-specialties, .hero-next { display: none; }
}

/* ---------- Meet (home) ---------- */
.meet-grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
@media (min-width: 960px) { .meet-grid { grid-template-columns: 0.95fr 1.05fr; } }
.meet-media { position: relative; padding: 0 clamp(2rem, 7vw, 5rem) clamp(4.5rem, 7vw, 5.5rem) 0; max-width: 27rem; }
/* The inset photo is placed against the portrait itself, starting two-thirds of the way down,
   so it always sits below 'Chelle's face whatever the screen size. */
.meet-frame { position: relative; }
.meet-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 72svh; }
@media (max-width: 959px) {
  .meet-media { padding: 0 1.25rem 5.5rem 0; }
  .meet-photo { aspect-ratio: 1; max-height: 46svh; }
}
.meet-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(25,54,76,.06); border-radius: inherit; }
/* Her face sits about 62% across and 48% down the portrait; frame it in the upper part */
.meet-photo picture { height: 100%; }
.meet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
/* Inset photos: the same white border and soft shadow as the hero headshot, but a rounded
   square that sits straight, with the caption underneath */
.meet-inset, .been-inset { margin: 0; }
.meet-inset picture, .been-inset picture { border: 7px solid var(--white); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(25, 54, 76, 0.45); }
.meet-inset img, .been-inset img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.meet-inset figcaption { margin-top: 0.6rem; padding-left: 0.2rem; font-family: var(--font-display); font-style: italic; font-size: 0.88rem; line-height: 1.3; color: var(--navy-soft); }
.meet-inset { position: absolute; top: 72%; right: clamp(-5rem, -4vw, -2rem); width: clamp(10.5rem, 21vw, 15rem); }
.meet-inset img { aspect-ratio: 1.15; }
@media (max-width: 959px) {
  .meet-photo img { object-position: 55% 50%; }
  /* Phones: the inset tucks under the photo's bottom-right corner, low enough to stay clear of
     her face, and the caption sits beside it instead of trailing below */
  .meet-inset { top: auto; bottom: -4.75rem; right: -1.25rem; width: 12rem; }
  .meet-inset picture { border-width: 5px; border-radius: 18px; }
  .meet-inset figcaption { position: absolute; right: calc(100% + 0.9rem); bottom: 0.2rem; width: min(10.5rem, calc(100vw - 14rem)); margin: 0; padding: 0; text-align: right; font-size: 0.82rem; }
}
.meet-copy .lede { margin: 1rem 0 0.8rem; }
.meet-copy > p { max-width: 38rem; }
.meet-copy > p + p { margin-top: 1rem; }
.plate-heading { margin-top: 1.5rem !important; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-ink); }
.plate-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 1.4rem; max-width: 38rem; }
.plate-list li {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
  border-radius: 999px; background: var(--sand-wash); font-size: 0.94rem; line-height: 1.3;
}
.plate-list li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sea); }

/* ---------- Explore: where I can take you ---------- */
.trips-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.trips-intro { max-width: 24rem; color: var(--navy-soft); }
.trips-grid { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); }
@media (min-width: 700px) { .trips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trips-grid { grid-template-columns: repeat(4, 1fr); } }
.trip-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--navy); }
.trip-photo { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; max-height: 58svh; background: var(--sea-wash); transform: translateZ(0); }
.trip-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.trip-link:hover .trip-photo img, .trip-link:focus-visible .trip-photo img { transform: scale(1.05); }
.trip-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.1rem; }
.trip-text .trip-cta { margin-top: auto; } /* links line up along the bottom of the row */
.trip-kicker { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.25rem; font-family: var(--font-display); font-style: italic; color: var(--sea-ink); }
.trip-kicker span { color: var(--sand-ink); font-size: 0.9em; }
.trip-text h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.trip-text > p:not(.trip-kicker) { color: var(--navy-soft); margin-bottom: 0.8rem; }
.trip-cta { display: inline-flex; gap: 0.4rem; font-weight: 600; background: linear-gradient(var(--sea), var(--sea)) 0 100% / 100% 2px no-repeat; padding-bottom: 0.15rem; transition: background-size var(--med) var(--ease); }
.trip-cta span { transition: transform var(--med) var(--ease); }
.trip-link:hover .trip-cta { background-size: 100% 0.5em; }
.trip-link:hover .trip-cta span { transform: translateX(4px); }
@media (max-width: 699px) {
  /* Phones: compact rows, photo beside the words */
  .trips-grid { gap: 0; border-top: 1px solid var(--line); }
  .trip { border-bottom: 1px solid var(--line); }
  .trip-link { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; padding: 1rem 0; }
  .trip-photo { aspect-ratio: 1; border-radius: 18px; max-height: none; }
  .trip-text { padding-top: 0; }
  .trip-kicker { font-size: 0.9rem; margin-bottom: 0.1rem; }
  .trip-text h3 { font-size: 1.3rem; margin-bottom: 0.25rem; }
  .trip-text > p:not(.trip-kicker) { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .trip-cta { font-size: 0.92rem; }
}

/* ---------- Explore: "I've been there" ---------- */
/* ’Chelle's own photos from that kind of trip, with a few lines on why she loves it */
.been { background: var(--sand-wash); }
.been-grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 960px) { .been-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.been-media { position: relative; width: 100%; max-width: 34rem; padding: 0 clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem) 0; }
.been-photo { margin: 0; }
.been-frame { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; max-height: 72svh; background: var(--sand-wash-2); }
.been-photo--wide .been-frame { aspect-ratio: 4 / 3; }
.been-frame picture, .been-frame img { width: 100%; height: 100%; object-fit: cover; }
.page-cc .been-frame img { object-position: 50% 30%; } /* keep the ship in view */
.been-photo figcaption { max-width: 60%; margin-top: 0.75rem; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--navy-soft); }
.been-inset { position: absolute; right: 0; bottom: 0; width: clamp(10.5rem, 21vw, 15rem); }
.been-inset--wide img { aspect-ratio: 4 / 3; }
.been-inset--wide { width: clamp(13rem, 27vw, 20rem); }
.been-copy { max-width: 34rem; }
.been-copy .lede { margin: 1rem 0 0.9rem; }
.been-copy p:not(.eyebrow):not(.lede):not(.been-sign) { color: var(--navy-soft); }
.been-sign { margin-top: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--sea-ink); }
@media (max-width: 959px) {
  /* Phones: same as the homepage's Meet section. The inset hangs off the photo's bottom-right
     corner and the caption sits beside it. */
  .been-media { padding: 0 1.25rem 2.5rem 0; }
  .been-frame { max-height: 60svh; }
  .been-photo figcaption { max-width: min(60%, calc(100vw - 14rem)); font-size: 0.86rem; }
  .been-inset { width: 11rem; right: -1rem; }
  .been-inset--wide { width: 14.5rem; }
  .been-inset picture { border-width: 5px; border-radius: 18px; }
}

/* ---------- Something else in mind ---------- */
.beyond { background: var(--sand-wash); }
.beyond-inner { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .beyond-inner { grid-template-columns: 1fr 1fr; } }
.beyond-copy .display-2 { margin-bottom: 1rem; }
.beyond-copy .lede { max-width: 32rem; margin-bottom: 1.75rem; color: var(--navy-soft); }
.beyond-ideas { border-top: 1px solid var(--line-strong); }
.beyond-ideas li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2;
}
.beyond-ideas li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sea); transform: translateY(-0.2em); }
.beyond-ideas li:last-child { color: var(--sea-ink); }
.beyond-ideas li:last-child::before { background: transparent; border: 1.5px solid var(--sea); }
@media (max-width: 899px) { .beyond-ideas li { font-size: 1.3rem; padding: 0.7rem 0; } }

/* ---------- Privacy policy ---------- */
.legal { padding-top: calc(var(--section) + 1rem); }
.legal-inner { max-width: 46rem; }
.legal-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.legal-updated { margin-top: 0.75rem; color: var(--sand-ink); font-size: 0.95rem; }
.legal-body .lede { margin-bottom: 1.5rem; }
.legal-body h2 { font-size: var(--step-2); margin: 2.4rem 0 0.75rem; }
.legal-body h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 1.4rem 0 0.4rem; }
.legal-body p, .legal-body li { color: var(--navy-soft); }
.legal-body p + p { margin-top: 0.85rem; }
.legal-body ul { margin: 0.75rem 0 0.85rem; display: grid; gap: 0.6rem; }
.legal-body li { position: relative; padding-left: 1.25rem; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sea); }
.legal-body strong { color: var(--navy); }
.form-privacy { margin-top: 1.5rem; font-size: 0.92rem; color: var(--navy-soft); }

/* ---------- Steps ---------- */
/* The route between stops fills as the visitor scrolls (js/site.js sets --seg from 0 to 1 on
   each step), and each stop fills tan once the line reaches it. The first stop is lit from the
   start. Without JavaScript the route shows complete. */
.steps-route { --steps-gap: clamp(2rem, 4vw, 4rem); position: relative; display: grid; gap: 1.75rem; }
.step { position: relative; --seg: 1; }
.js .step { --seg: 0; }
.step-stop {
  position: absolute; z-index: 1; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--white); border: 2px solid var(--sand);
  transition: background-color 450ms var(--ease), border-color 450ms var(--ease), transform 450ms var(--ease);
}
.step.is-reached .step-stop, .no-js .step-stop { background: var(--sand); border-color: var(--sand); }
.step.is-reached:not(:first-child) .step-stop { transform: scale(1.1); }
.steps-route .step:first-child .step-stop { background: var(--sea); border-color: var(--sea); box-shadow: 0 0 0 6px rgba(107, 191, 204, 0.3); }
/* Track (faint) and fill: each step draws the segment to the next stop */
.step:not(:last-child)::before, .step:not(:last-child)::after { content: ""; position: absolute; }
.step:not(:last-child)::before { background: var(--line); }
.step:not(:last-child)::after { background: var(--sand); will-change: transform; }
@media (min-width: 900px) {
  .steps-route { grid-template-columns: repeat(3, 1fr); gap: var(--steps-gap); padding-top: 3rem; }
  .step-stop { top: -3rem; left: 0; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { top: calc(-3rem + 0.7rem - 1px); left: 1.4rem; width: calc(100% + var(--steps-gap) - 1.4rem); height: 2px; }
  .step:not(:last-child)::after { transform-origin: left; transform: scaleX(var(--seg)); }
}
@media (max-width: 899px) {
  .steps-route { padding-left: 2.6rem; }
  .step-stop { left: -2.6rem; top: 0.2rem; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { left: calc(-2.6rem + 0.7rem - 1px); top: 1.6rem; bottom: calc(-1.75rem - 0.2rem); width: 2px; }
  .step:not(:last-child)::after { transform-origin: top; transform: scaleY(var(--seg)); }
}
.step-num { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-ink); margin-bottom: 0.7rem; }
.step h3 { font-size: var(--step-2); margin-bottom: 0.8rem; }
.step p:last-child { color: var(--navy-soft); }

/* ---------- Voices (testimonial) ---------- */
.voices { position: relative; isolation: isolate; background: var(--sand-wash); overflow: hidden; }
.voices-bg { position: absolute; inset: 0; z-index: -1; opacity: 0.22; mix-blend-mode: multiply; }
.voices-bg img { width: 100%; height: 100%; object-fit: cover; }
.voices-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.voices-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; }
.voices-cite {
  position: relative; max-width: 22rem; padding-left: 1.75rem; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--navy-soft);
}
.voices-cite::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 1rem; height: 2px; background: var(--sea); }
.voices-cite strong { font-weight: 500; color: var(--navy); }
.voices-notes { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .voices-notes { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1000px) { .voices-notes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2.5rem; } }
.voices-note { padding-top: 1.2rem; border-top: 2px solid var(--navy); }
.voices-note-label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea-ink); margin-bottom: 0.6rem; }
.voices-note { display: flex; flex-direction: column; }
.voices-note blockquote { margin: 0; flex: 1; }
.voices-note blockquote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; }
.voices-note-name { margin-top: 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--navy-soft); }


/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: 0.75fr 1.25fr; align-items: start; }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.faq-intro p:last-child { margin-top: 1.3rem; color: var(--navy-soft); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  position: relative; display: block; padding: 1.05rem 3.2rem 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25;
  transition: color var(--fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before, .faq-item summary::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%; width: 1.1rem; height: 2px; margin-top: -1px;
  background: var(--sea-ink); border-radius: 2px; transition: transform var(--med) var(--ease);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-item summary:hover { color: var(--sea-ink); }
.faq-answer { padding: 0 3rem 1.2rem 0; max-width: 44rem; color: var(--navy-soft); }
.faq-item[open] .faq-answer { animation: rise var(--med) var(--ease) both; }
.faq-answer a { font-weight: 600; color: var(--navy); }
.faq-spotlight {
  position: relative; margin-top: 1.75rem; padding: 1.4rem 1.5rem 1.5rem 1.7rem;
  border-radius: var(--radius); background: var(--sea-wash); overflow: hidden;
}
.faq-spotlight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sea); }
.faq-spotlight-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea-ink); margin-bottom: 0.4rem; }
.faq-spotlight h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.faq-spotlight p:last-child { color: var(--navy); font-size: 0.98rem; }

/* ---------- Invitation ---------- */
.invite { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 7vw, 6.5rem); overflow: hidden; text-align: center; }
.invite-media { position: absolute; inset: 0; z-index: -2; }
.invite-media img { width: 100%; height: 100%; object-fit: cover; }
.invite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,253,251,0.94), rgba(255,253,251,0.82) 50%, rgba(255,253,251,0.94)); }
.invite-inner { display: grid; justify-items: center; }
.invite-inner .display-1 { max-width: none; font-size: min(var(--step-5), 8.4vw); line-height: 1.05; }
.invite-inner .lede { max-width: 36rem; margin: 1rem 0 1.8rem; }
.invite .contact-options { margin-top: 2rem; justify-content: center; }

.contact-options { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact-option {
  display: grid; gap: 0.05rem; padding: 0.8rem 1.25rem; border-radius: 18px; text-decoration: none; text-align: left;
  background: rgba(255, 253, 251, 0.9); box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--med) var(--ease), transform var(--med) var(--ease);
}
.contact-option:hover { box-shadow: 0 0 0 1.5px var(--navy); transform: translateY(-2px); }
.contact-option-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea-ink); }
.contact-option-value { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--navy); color: var(--white); padding-top: clamp(4rem, 8vw, 6rem); }
.footer-horizon {
  position: absolute; left: 0; right: 0; top: -1px; height: 28px; background: var(--footer-wave, var(--white));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v14c-15 0-15 10-30 10S75 14 60 14 45 24 30 24 15 14 0 14z'/%3E%3C/svg%3E") 0 0 / 240px 28px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v14c-15 0-15 10-30 10S75 14 60 14 45 24 30 24 15 14 0 14z'/%3E%3C/svg%3E") 0 0 / 240px 28px repeat-x;
}
/* The wave is filled with the colour of the section above it, so it reads as one shoreline */
body:has(main > .page-cta:last-child) { --footer-wave: var(--sand-wash); }
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.footer-brand p { margin-top: 1.1rem; max-width: 24rem; color: rgba(255, 253, 251, 0.82); }
.footer-heading { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea); margin: 0 0 0.7rem; }
.footer-nav ul + .footer-heading { margin-top: 1.6rem; }
.footer-nav li + li { margin-top: 0.35rem; }
.footer-nav a { color: var(--white); text-decoration: none; background: linear-gradient(var(--sea), var(--sea)) 0 100% / 0 1.5px no-repeat; transition: background-size var(--med) var(--ease); }
.footer-nav a:hover, .footer-nav a:focus-visible { background-size: 100% 1.5px; }
.footer-contact .contact-options { flex-direction: column; align-items: flex-start; }
.site-footer .contact-option { background: rgba(255, 253, 251, 0.06); box-shadow: 0 0 0 1px rgba(255, 253, 251, 0.16); }
.site-footer .contact-option:hover { box-shadow: 0 0 0 1.5px var(--sea); }
.site-footer .contact-option-label { color: var(--sea); }
.site-footer .contact-option-value { color: var(--white); }
.footer-base a { color: inherit; text-decoration: none; }
.footer-base a:hover, .footer-base a:focus-visible, .footer-base a[aria-current] { color: var(--white); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgba(255, 253, 251, 0.14); font-size: 0.88rem; color: rgba(255, 253, 251, 0.72); }

/* ---------- Explore pages ---------- */
.page-hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; padding: var(--gutter); overflow: hidden; isolation: isolate; }
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-card {
  position: relative; width: min(44rem, 100%); padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px; background: var(--white);
  box-shadow: 0 40px 80px -40px rgba(18, 41, 58, 0.6);
}
.page-hero-card h1 { font-size: min(var(--step-5), 8.5svh); line-height: 0.98; font-weight: 400; margin-bottom: 1.2rem; }
.page-hero-card h1 em { color: var(--sea-ink); font-weight: 400; }
.page-hero-card .lede { margin-bottom: 1.8rem; color: var(--navy-soft); }
.page-hero-card .hero-actions { gap: 0.6rem; }
/* Frames that hold a <picture> (her own photos and partner images) fill like a plain <img> */
.page-hero-media picture, .ways-photo picture, .ways-inset picture, .tailor-photo picture, .trip-photo picture { height: 100%; }
/* Explore pages: the photo sits beside the card at a 3:2 shape (rather than filling the
   background), on a soft sand panel. On the Disney page the official artwork is shown whole. */
@media (min-width: 700px) {
  .page-explore .page-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); min-height: 0; padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem); background: var(--sand-wash); }
  .page-explore .page-hero-media { position: relative; inset: auto; z-index: 0; order: 2; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; }
  .page-explore .page-hero-card { width: auto; box-shadow: none; padding: 0; background: none; }
}
@media (max-width: 699px) {
  .page-explore .page-hero-media { height: auto; aspect-ratio: 3 / 2; }
  .page-explore .page-hero-card { margin-top: 1rem; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .page-explore .page-hero { grid-template-columns: 1fr; }
  .page-explore .page-hero-media { order: 0; }
}
.page-disney .page-hero-media img { object-fit: contain; animation: none !important; }
/* Disney Cruise Line ship in the Ways section: same arch as the other pages, framed on the ship */
.page-disney .ways-media .ways-photo img { object-position: 80% 50%; }
/* Disneyland statue in "How I help": cropped to a taller frame, centered on Walt, Mickey and the castle */
.page-disney .tailor-photo img { object-position: 56% 50%; }
@media (min-width: 1000px) { .page-hero { padding: 0 0 clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem); } }
@media (max-width: 699px) {
  .page-hero { display: block; min-height: 0; padding: 0 0 1rem; overflow: visible; }
  .page-hero-media { position: relative; height: 38svh; overflow: hidden; }
  .page-hero-card { width: auto; margin: -3.5rem var(--gutter) 0; padding: 1.4rem 1.3rem 1.5rem; }
  .page-hero-card h1 { font-size: min(var(--step-5), 6svh); }
  .page-hero-card .lede { font-size: 1.02rem; margin-bottom: 1.2rem; }
  .page-hero-card .hero-actions .button { width: 100%; }
}

/* Ways to enjoy: an editorial index, not a card grid */
.ways-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .ways-grid { grid-template-columns: 0.75fr 1.25fr; } }
.ways-media { position: relative; }
.ways-media .ways-photo { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-width: 26rem; max-height: 68svh; }
@media (max-width: 999px) { .ways-media { display: none; } }
.ways-media .ways-photo img { width: 100%; height: 100%; object-fit: cover; }
.ways-media .ways-inset { position: absolute; right: 0; bottom: -2rem; width: 42%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 7px solid var(--white); }
.ways-media .ways-inset img { width: 100%; height: 100%; object-fit: cover; }
.ways-list { counter-reset: way; border-top: 1px solid var(--line-strong); }
.way { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 1200px) {
  .ways-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; border-top: 0; }
  .way { border-top: 1px solid var(--line-strong); border-bottom: 0; }
}
.way::before { counter-increment: way; content: counter(way, decimal-leading-zero); font-family: var(--font-display); color: var(--sea-ink); font-size: 1.05rem; padding-top: 0.45rem; }
.way h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); margin-bottom: 0.35rem; }
.way p { grid-column: 2; color: var(--navy-soft); font-size: 0.98rem; }

/* Trip sketches: postcards */
.sketches { background: var(--sea-wash); }
.sketch-note { margin-top: 1rem; color: var(--navy-soft); max-width: 40rem; }
.sketch-row { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .sketch-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) {
  /* Phones: postcards sit in one swipeable row instead of a tall stack */
  .sketch-row {
    grid-auto-flow: column; grid-auto-columns: 86%; gap: 0.9rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 0.5rem var(--gutter) 1.5rem;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .sketch-row::-webkit-scrollbar { display: none; }
  .sketch { scroll-snap-align: start; }
  .sketch:nth-child(n) { transform: none; }
}
.sketch {
  position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.6rem 1.8rem;
  background: var(--white); border-radius: 10px;
  box-shadow: 0 30px 50px -36px rgba(18, 41, 58, 0.5);
  transition: transform var(--slow) var(--ease);
}
.sketch:nth-child(1) { transform: rotate(-1.2deg); }
.sketch:nth-child(3) { transform: rotate(1deg); }
.sketch:hover { transform: rotate(0) translateY(-6px); }
.sketch::after { content: ""; position: absolute; inset: 0.55rem; border: 1px dashed var(--sand); border-radius: 6px; pointer-events: none; }
.sketch-stamp { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.4rem; height: 4rem; border-radius: 4px; overflow: hidden; outline: 3px dotted var(--white); outline-offset: -3px; }
.sketch-stamp img { width: 100%; height: 100%; object-fit: cover; }
.sketch-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-ink); margin-bottom: 0.7rem; padding-right: 4rem; }
.sketch h3 { font-size: var(--step-2); margin-bottom: 1rem; padding-right: 3.5rem; font-style: italic; }
.sketch ul { display: grid; gap: 0.45rem; font-size: 0.97rem; }
.sketch li { padding-left: 1.1rem; position: relative; }
.sketch li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sea); }
.sketch-best { margin-top: auto; padding-top: 1.2rem; font-size: 0.92rem; color: var(--navy-soft); }
.sketch-best strong { color: var(--navy); }

/* Decision guidance: this-or-that rows */
.decide-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.decide-intro { max-width: 24rem; color: var(--navy-soft); }
.decide-list { border-top: 1px solid var(--line-strong); }
.decide-row { display: grid; gap: 0.75rem 2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .decide-row { grid-template-columns: minmax(13rem, 0.75fr) 2.25fr; } }
.decide-row h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); }
.decide-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2rem; }
.decide-option { position: relative; display: grid; gap: 0.15rem; align-content: start; padding: 0.85rem 1.1rem; border-radius: 16px; background: var(--sand-wash); }
/* A small "or" sits in the gap between choices */
.decide-option + .decide-option::before {
  content: "or"; position: absolute; left: -2rem; top: 50%; width: 2rem; transform: translateY(-50%);
  text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--sand-ink);
}
.decide-pick { font-weight: 600; color: var(--navy); }
.decide-note { font-size: 0.93rem; line-height: 1.45; color: var(--navy-soft); }
@media (max-width: 759px) {
  .decide-row { padding: 1rem 0 1.15rem; }
  .decide-options { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .decide-options--3 .decide-option:last-child { grid-column: 1 / -1; }
  .decide-option { padding: 0.75rem 0.9rem; }
  .decide-option + .decide-option::before { display: none; }
}

/* How I tailor it */
.tailor { background: var(--navy); color: var(--white); }
.tailor .eyebrow { color: var(--sea); }
.tailor-grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 960px) { .tailor-grid { grid-template-columns: 1.1fr 0.9fr; } }
.tailor h2 em { color: var(--sea); }
.tailor-list { margin-top: 1.4rem; border-top: 1px solid rgba(255, 253, 251, 0.2); }
.tailor-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 253, 251, 0.2); }
.tailor-list li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; border-radius: 50%; border: 2px solid var(--sea); background: radial-gradient(circle, var(--sea) 0 3px, transparent 3.5px); }
.tailor-list strong { display: block; font-weight: 600; }
.tailor-list span { color: rgba(255, 253, 251, 0.8); }
.tailor-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 34rem; }
@media (max-width: 959px) { .tailor-photo { display: none; } }
.tailor-photo img { width: 100%; height: 100%; object-fit: cover; }
.brands-line { margin-top: 2rem; font-size: 0.95rem; color: rgba(255, 253, 251, 0.82); }
.brands-line strong { color: var(--white); font-weight: 600; }

/* Wide image band */
.band { position: relative; height: clamp(16rem, 42vw, 34rem); overflow: hidden; }
.band img { width: 100%; height: 115%; object-fit: cover; }
.band-caption { position: absolute; left: var(--gutter); bottom: 1.2rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(255,253,251,.92); font-size: 0.85rem; font-weight: 600; }

/* Prose block */
.prose { max-width: 42rem; }
.prose p + p { margin-top: 1.1rem; }

/* Page CTA */
.page-cta { background: var(--sand-wash); text-align: center; }
.page-cta .display-2 { max-width: 18ch; margin-inline: auto; }
.page-cta .lede { max-width: 38rem; margin: 1rem auto 1.6rem; color: var(--navy-soft); }
.cta-more { max-width: 34rem; margin: 1.75rem auto 0; color: var(--navy-soft); }
.page-cta .contact-options { justify-content: center; margin-top: 1.75rem; }

/* ---------- Meet ’Chelle page ---------- */
.about-hero { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; align-content: center; min-height: calc(100svh - var(--header-h)); padding-block: clamp(1rem, 3svh, 2.5rem); }
@media (min-width: 960px) { .about-hero { grid-template-columns: 1fr 1fr; } }
.about-hero h1 { font-size: min(var(--step-5), 8.5svh); line-height: 0.98; font-weight: 400; margin-bottom: 1.5rem; }
.about-hero h1 em { color: var(--sea-ink); font-weight: 400; }
.about-hero .lede { max-width: 34rem; }
.about-hero .prose { margin-top: 1.4rem; color: var(--navy-soft); }
.about-stat { margin-top: 2rem; display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.7rem 1.2rem; border-radius: 999px; background: var(--sand-wash); font-weight: 600; color: var(--navy-soft); }
.about-stat strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--navy); }
.about-photos { position: relative; padding: 0 0 3rem 3rem; justify-self: center; }
.about-photos .about-main { height: min(68svh, 40rem); }
@media (max-width: 959px) {
  .about-photos { width: 100%; max-width: 30rem; padding: 0 0 2.5rem 2rem; }
  .about-photos .about-main { height: 36svh; width: 100%; aspect-ratio: auto; }
  .about-photos .about-second { width: 34%; }
}
.about-photos .about-main { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.about-photos .about-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-photos .about-second { position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--white); box-shadow: 0 20px 40px -20px rgba(25, 54, 76, 0.45); }
.about-photos .about-second img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.feel-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .feel-grid { grid-template-columns: repeat(2, 1fr); gap: 0 4rem; } }
.feel-item { padding: 1.1rem 0; border-top: 1px solid var(--line-strong); }
.feel-item h3 { font-size: var(--step-2); font-style: italic; margin-bottom: 0.6rem; }
.feel-item p { color: var(--navy-soft); }

.stamps-section { background: var(--sea-wash); overflow: hidden; }
.stamps { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1.1rem); }
.stamp {
  display: grid; place-items: center; text-align: center;
  width: clamp(6.25rem, 11vw, 8.5rem); aspect-ratio: 1; padding: 0.8rem; border-radius: 50%;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: -8px;
  font-family: var(--font-display); font-size: clamp(0.95rem, 1.6vw, 1.15rem); line-height: 1.15;
  color: var(--sea-ink); transform: rotate(var(--r, -4deg));
  transition: transform var(--slow) var(--ease);
}
.stamp:nth-child(3n+2) { --r: 5deg; color: var(--navy); border-radius: 18px; }
.stamp:nth-child(3n) { --r: -2deg; color: var(--sand-ink); }
.stamp:hover { transform: rotate(0deg) scale(1.04); }
.stamps-note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--navy-soft); }

.creds-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .creds-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.creds-group h3 { font-size: var(--step--1); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-ink); margin-bottom: 0.9rem; }
.creds-group li { padding: 0.55rem 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--step-1); }

.story { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 960px) { .story { grid-template-columns: 0.8fr 1.2fr; } }
.story-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1.3; max-height: 60svh; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--navy-soft); font-style: italic; }
.story blockquote p { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; }
.story blockquote footer { margin-top: 1.2rem; font-weight: 600; color: var(--sand-ink); }

/* ---------- Plan page ---------- */
/* Planning page: hero, "what happens next", the form section, FAQ, and contact */
.page-plan .page-hero-media { aspect-ratio: 4 / 3; }
.plan-hero-photo img { object-position: 50% 38%; }
.page-plan .page-hero-card h1 { font-size: min(var(--step-5), 8.5svh); }
.plan-promise { display: grid; gap: 0.55rem; margin: 0 0 1.75rem; }
.plan-promise li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--navy); }
.plan-promise li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sea); transform: translateY(-0.1rem); }

.plan-next-list { display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 800px) { .plan-next-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.plan-next-list li { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--radius); background: var(--sand-wash); }
.plan-next-num { display: block; margin-bottom: 0.75rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--sea-ink); }
.plan-next-list h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.plan-next-list p { color: var(--navy-soft); }

.plan-form { background: var(--sea-wash); }
.plan-form-head { max-width: 40rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.plan-form .planner { max-width: 58rem; margin-inline: auto; }
@media (min-width: 900px) {
  .plan-form .choice-cards--trip > :last-child:nth-child(odd) { grid-column: auto; }
  .plan-form .field-row--contact { grid-template-columns: repeat(3, 1fr); }
  .plan-form .field-row--contact > :first-child { grid-column: auto; }
}

/* A compact form: tighter card, smaller step titles, and short choice cards */
.plan-form .planner { padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem); }
.plan-form .planner-progress { margin-bottom: 1.25rem; }
.plan-form .planner-progress button { padding-top: 0.55rem; font-size: 0.84rem; }
.plan-form .planner-progress button span { font-size: 0.68rem; }
.plan-form .form-step > legend { font-size: var(--step-2); margin-bottom: 0.2rem; }
.plan-form .form-step-intro { font-size: 0.95rem; margin-bottom: 1rem; }
.plan-form .field, .plan-form .choice-group { margin-bottom: 1.1rem; }
.plan-form .field-row > .field, .plan-form .field-row > .choice-group { margin-bottom: 1.1rem; }
.plan-form .form-privacy { margin-top: 0; font-size: 0.88rem; }
.plan-form .choice-cards { gap: 0.5rem; margin-top: 0.5rem; }
.plan-form .choice-card label { grid-template-columns: 1.1rem 1fr; gap: 0.05rem 0.6rem; padding: 0.6rem 0.85rem; border-radius: 12px; }
.plan-form .choice-card label::before { width: 1.1rem; height: 1.1rem; }
.plan-form .choice-card-title { font-size: 0.95rem; }
.plan-form .choice-card-note { font-size: 0.82rem; line-height: 1.35; }
.plan-form .choice-pills .choice-card label { padding: 0.5rem 0.95rem; font-size: 0.93rem; }
.plan-form .field-hint { font-size: 0.88rem; margin-bottom: 0.45rem; }
.plan-form .input, .plan-form .select { padding-block: 0.65rem; }
.plan-form .textarea { min-height: 3.4rem; }
.plan-form .travelers { gap: 0.75rem 2rem; }
.plan-form .travelers .field { margin-bottom: 0; }
.plan-form .counter button { width: 2.5rem; height: 2.5rem; }
.plan-form .form-nav { margin-top: 1.25rem; padding-top: 1.1rem; }
@media (min-width: 900px) {
  .plan-form .choice-cards--trip { grid-template-columns: repeat(4, 1fr); }
}
.plan-form .textarea { min-height: 0; height: 3.75rem; }
.plan-form .reveal-field { padding: 0.75rem 0.9rem 0.15rem; margin: -0.25rem 0 1.1rem; }
.plan-form .planner { scroll-margin-top: calc(var(--header-h) + 0.75rem); }

/* Every step fits one screen: on shorter screens the step intros and hints step aside */
@media (min-width: 700px) and (max-height: 820px) {
  .plan-form .form-step-intro, .plan-form .field-hint:not(.trip-origin) { display: none; }
  .plan-form .form-step > legend { margin-bottom: 0.75rem; }
  .plan-form .planner { padding-block: 1.25rem 0.5rem; }
  .plan-form .planner-progress button span { display: none; }
}
/* The progress bar already names each step, so on short screens the step title is read
   by screen readers only */
@media (min-width: 700px) and (max-height: 680px) {
  .plan-form .form-step > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 699px) {
  .plan-form .planner { padding: 0.9rem 1rem 0.25rem; border-radius: 20px; }
  .plan-form .planner-progress { margin-bottom: 0.75rem; gap: 0.35rem; }
  .plan-form .planner-progress button { padding-top: 0.45rem; font-size: 0.76rem; line-height: 1.25; }
  .plan-form .planner-progress button span { display: none; }
  .plan-form .form-step > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plan-form .textarea { height: 3rem; }
  .plan-form .reveal-field { padding: 0.6rem 0.75rem 0.1rem; margin: -0.2rem 0 0.8rem; }
  .plan-form .form-step-intro, .plan-form .field-hint:not(.trip-origin) { display: none; }
  .plan-form .field, .plan-form .choice-group, .plan-form .field-row > .field, .plan-form .field-row > .choice-group { margin-bottom: 0.8rem; }
  .plan-form .field > label, .plan-form .field-label, .plan-form .choice-group > legend { font-size: 0.95rem; }
  .plan-form .choice-cards--trip { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .plan-form .choice-card label { padding: 0.55rem 0.65rem; gap: 0 0.5rem; }
  .plan-form .choice-card-title { font-size: 0.88rem; }
  .plan-form .choice-pills { gap: 0.35rem; }
  .plan-form .choice-pills .choice-card label { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
  .plan-form .input, .plan-form .select { padding-block: 0.55rem; }
  .plan-form .travelers { gap: 0.5rem 1.25rem; }
  .plan-form .counter button { width: 2.3rem; height: 2.3rem; }
  .plan-form .field-row--contact { grid-template-columns: 1fr 1fr; gap: 0 0.6rem; }
  .plan-form .field-row--contact > :first-child { grid-column: 1 / -1; }
  .plan-form .form-privacy { font-size: 0.8rem; }
  .plan-form .form-nav { margin-top: 0.25rem; padding-block: 0.6rem 0.65rem; gap: 0.5rem; }
  .plan-form .form-nav-note { display: none; }
  .plan-form .form-nav .button { min-height: 2.75rem; padding: 0.55rem 1.2rem; min-width: 0; }
  .plan-form .form-nav [data-step-next], .plan-form .form-nav [data-submit] { margin-left: auto; }
}
@media (max-width: 699px) and (max-height: 620px) {
  .plan-form .planner-progress { margin-bottom: 0.5rem; }
  .plan-form .field, .plan-form .choice-group, .plan-form .field-row > .field, .plan-form .field-row > .choice-group { margin-bottom: 0.55rem; }
  .plan-form .field > label, .plan-form .field-label, .plan-form .choice-group > legend { font-size: 0.88rem; margin-bottom: 0.15rem; }
  .plan-form .input, .plan-form .select { padding-block: 0.45rem; }
  .plan-form .choice-pills .choice-card label { padding: 0.35rem 0.7rem; }
  .plan-form .choice-card label { padding: 0.45rem 0.6rem; }
  .plan-form .counter button { width: 2.1rem; height: 2.1rem; }
  .plan-form .form-nav .button { min-height: 2.5rem; }
  .plan-form .textarea { height: 2.6rem; }
  .plan-form .optional { display: none; }
  .plan-form .form-step[data-step="1"] .field-row--2 { grid-template-columns: 1fr 1fr; gap: 0 0.6rem; }
  .plan-form .form-privacy { font-size: 0.76rem; }
  .plan-form .form-nav { padding-block: 0.5rem 0.55rem; }
  .plan-form .planner { padding-top: 0.75rem; }
}
@media (max-width: 359px) {
  .plan-form .planner { padding-inline: 0.75rem; }
  .plan-form .choice-card label { padding: 0.45rem 0.5rem; gap: 0 0.4rem; grid-template-columns: 0.95rem 1fr; }
  .plan-form .choice-card label::before { width: 0.95rem; height: 0.95rem; }
  .plan-form .choice-card-title { font-size: 0.8rem; }
  .plan-form .field > label, .plan-form .field-label, .plan-form .choice-group > legend { font-size: 0.85rem; }
  .plan-form .choice-pills .choice-card label { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
  .plan-form .textarea { height: 2.6rem; }
  .plan-form .optional { display: none; }
}

/* Thank-you page */
.thanks { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); background: var(--sand-wash); text-align: center; }
.thanks-inner { display: grid; justify-items: center; max-width: 52rem; }
.thanks-photo { width: 9rem; height: 9rem; margin-bottom: 1.5rem; border-radius: 50%; overflow: hidden; border: 6px solid var(--white); box-shadow: 0 20px 40px -20px rgba(25, 54, 76, 0.45); }
.thanks-photo picture, .thanks-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.thanks .display-1 { font-size: min(var(--step-5), 11vw); margin-bottom: 1rem; }
.thanks .display-1 em { color: var(--sea-ink); }
.thanks .lede { max-width: 36rem; color: var(--navy-soft); margin-bottom: 1.75rem; }
.thanks .hero-actions { justify-content: center; }
.thanks-links { display: grid; gap: 0.75rem; }
@media (min-width: 700px) { .thanks-links { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.thanks-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--sea-wash); color: var(--navy); font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; transition: background var(--med) var(--ease); }
.thanks-links a:hover, .thanks-links a:focus-visible { background: var(--sand-wash-2); }
.thanks-note { margin-top: 1.75rem; color: var(--navy-soft); }

.plan-cta-photo { width: 6rem; height: 6rem; margin: 0 auto 1.25rem; border-radius: 50%; overflow: hidden; border: 5px solid var(--white); box-shadow: 0 20px 40px -20px rgba(25, 54, 76, 0.45); }
.plan-cta-photo picture, .plan-cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.planner { padding: clamp(1.4rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(18, 41, 58, 0.45); }
.planner-progress { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.planner-progress li { flex: 1; }
.planner-progress button {
  width: 100%; padding: 0.8rem 0 0; border: 0; border-top: 3px solid var(--sand-wash-2); background: none; text-align: left; cursor: pointer;
  font-size: 0.86rem; font-weight: 600; color: var(--navy-soft);
  transition: border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.planner-progress button span { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-ink); }
.planner-progress [aria-current="step"] { border-top-color: var(--navy); color: var(--navy); }
.planner-progress .is-done { border-top-color: var(--sea); }
.planner-progress button:disabled { cursor: default; }
.no-js .planner-progress { display: none; }
.planner-progress[hidden] { display: none; }
.no-js .form-nav { display: none; }
.copy-status { margin-top: 1rem; font-size: 0.92rem; color: var(--navy-soft); }
.copy-status:empty { display: none; }

.form-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-step + .form-step { margin-top: 3rem; }
.js .form-step + .form-step { margin-top: 0; }
.js .form-step[hidden] { display: none; }
.js .form-step.is-entering { animation: fade-in 320ms ease-out both; }
.planner, .planner * { overflow-anchor: none; } /* no browser scroll-anchoring jumps while steps change */
.form-step > legend { padding: 0; margin-bottom: 0.4rem; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
.form-step-intro { color: var(--navy-soft); margin-bottom: 2rem; }

.field { margin-bottom: 1.8rem; }
.field > label, .field-label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field-hint { display: block; font-size: 0.92rem; color: var(--navy-soft); margin-bottom: 0.65rem; }
.optional { font-weight: 500; color: var(--sand-ink); font-size: 0.9rem; }
.required-mark { color: var(--sea-ink); }
.input, .select, .textarea {
  width: 100%; min-height: 3.2rem; padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--white); color: var(--navy);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 2.6rem; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2319364c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 1rem center / 0.85rem no-repeat; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-soft); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(107, 191, 204, 0.45); }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row--2, .field-row--contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .field-row--contact > :first-child { grid-column: 1 / -1; } }

.choice-group { border: 0; margin: 0 0 1.8rem; padding: 0; min-width: 0; }
.choice-group > legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.choice-cards { display: grid; gap: 0.6rem; margin-top: 0.65rem; }
@media (min-width: 640px) {
  .choice-cards--trip { grid-template-columns: repeat(2, 1fr); }
  .choice-cards--trip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-card label {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.15rem 0.8rem; align-items: start;
  padding: 1rem 1.1rem; border: 1.5px solid var(--line-strong); border-radius: 16px; cursor: pointer;
  transition: border-color var(--fast), background var(--med) var(--ease), box-shadow var(--fast);
}
.choice-card label::before {
  content: ""; grid-row: span 2; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; border-radius: 50%;
  border: 1.5px solid var(--navy-soft); background: var(--white);
  transition: border-color var(--fast), box-shadow var(--med) var(--ease), background var(--fast);
}
.choice-card input[type="checkbox"] + label::before { border-radius: 6px; }
.choice-card-title { font-weight: 600; }
.choice-card-note { font-size: 0.9rem; color: var(--navy-soft); grid-column: 2; }
.choice-card input:hover + label { border-color: var(--navy-soft); }
.choice-card input:checked + label { border-color: var(--navy); background: var(--sea-wash); }
.choice-card input:checked + label::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 4px var(--white); }
.choice-card input[type="checkbox"]:checked + label::before { box-shadow: none; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.choice-card input:focus-visible + label { box-shadow: 0 0 0 4px rgba(107, 191, 204, 0.55); border-color: var(--navy); }
.choice-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.choice-pills .choice-card label { grid-template-columns: 1fr; padding: 0.65rem 1.05rem; border-radius: 999px; }
.choice-pills .choice-card label::before { display: none; }

.counter { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 999px; }
.counter button { width: 2.9rem; height: 2.9rem; border: 0; background: none; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--navy); }
.counter button:hover { background: var(--sand-wash); }
.counter input { width: 3rem; text-align: center; border: 0; background: none; font-weight: 600; font-size: 1.1rem; -moz-appearance: textfield; }
.counter input::-webkit-inner-spin-button, .counter input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.counter input:focus { outline: none; }
.counter:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(107, 191, 204, 0.45); }
.travelers { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; }
.reveal-field { padding: 1.2rem 1.2rem 0.2rem; margin: -0.6rem 0 1.8rem; border-radius: 16px; background: var(--sand-wash); }
.reveal-field[hidden] { display: none; }
.inline-check { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem; font-size: 0.95rem; cursor: pointer; }
.inline-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--navy); }

.field-error { display: flex; gap: 0.45rem; align-items: baseline; margin-top: 0.5rem; font-size: 0.92rem; font-weight: 600; color: #a1332b; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #a1332b; color: var(--white); font-size: 0.75rem; }
.field-error:empty { display: none; }
[aria-invalid="true"] { border-color: #a1332b !important; }
.choice-group[data-invalid] .choice-card label { border-color: rgba(161, 51, 43, 0.6); }

.form-summary-error { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border-radius: 14px; background: #fbeceb; color: #7d241e; }
.form-summary-error:empty { display: none; }
.form-summary-error ul { margin-top: 0.4rem; padding-left: 1.1rem; list-style: disc; }
.form-summary-error a { color: inherit; font-weight: 600; }

.form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.form-nav .button { min-width: 9rem; }
.form-nav-note { font-size: 0.9rem; color: var(--navy-soft); }
.no-js .form-nav [data-step-back], .no-js .form-nav [data-step-next] { display: none; }
.button[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.button[data-busy]::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-result { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg); }
.form-result[hidden] { display: none; }
.form-result h2 { font-size: var(--step-3); margin-bottom: 1rem; }
.form-result p + p { margin-top: 0.9rem; }
.form-result .button { margin-top: 1.5rem; }
.form-result--success { background: var(--sea-wash); }
.form-result--offline { background: var(--sand-wash); }
.form-result--error { background: #fbeceb; }
.dev-note { display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.result-actions .button { margin-top: 0; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Opening reveal: CSS only, so content is visible even if scripts never run.
   Nothing blocks interaction; everything settles within ~1.6s. */
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arch-open { from { clip-path: inset(100% 0 0 0 round 999px 999px 34px 34px); } to { clip-path: inset(0 0 0 0 round 999px 999px 34px 34px); } }
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes arch-lift { from { opacity: 0; transform: translate3d(0, 28%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes pop { from { opacity: 0; transform: scale(0.85) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-40deg) scale(0.8); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: fade-in 900ms var(--ease) both 150ms; }
  .hero-eyebrow { animation: fade-up 900ms var(--ease) both 250ms; }
  .hero-title .line > span { animation: line-up 1100ms var(--ease) both; }
  .hero-title .line:nth-child(1) > span { animation-delay: 300ms; }
  .hero-title .line:nth-child(2) > span { animation-delay: 420ms; }
  .hero-title .line:nth-child(3) > span { animation-delay: 540ms; }
  .hero-lede { animation: fade-up 1000ms var(--ease) both 750ms; }
  .hero-actions { animation: fade-up 1000ms var(--ease) both 880ms; }
  .hero-arch { animation: arch-open 1500ms var(--ease) both 150ms; }
  .hero-arch img { animation: settle 2400ms var(--ease) both 150ms; }
  /* Phones: the arch is short and wide, so clipping it open would squash its rounded top into
     changing shapes. Instead the whole arch, already its final shape, slides up into place
     while the photo settles inside it. */
  @media (max-width: 959px) {
    .hero-arch { animation: arch-lift 1300ms var(--ease) both 150ms; will-change: transform, opacity; -webkit-mask-image: -webkit-radial-gradient(white, black); }
  }
  .hero-porthole { animation: pop 1000ms var(--ease) both 1000ms; }
  .hero-stamp { animation: stamp-in 1400ms var(--ease) both 1150ms; }
  .page-hero-media img { animation: settle 2600ms var(--ease) both; }
  .page-hero-card { animation: fade-up 1100ms var(--ease) both 250ms; }
  .about-photos .about-main { animation: arch-open 1500ms var(--ease) both 150ms; }
  .about-photos .about-second { animation: pop 1000ms var(--ease) both 800ms; }
  .about-hero-copy { animation: fade-up 1000ms var(--ease) both 250ms; }

  /* Section reveals: only hidden once JavaScript is confirmed running */
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1000ms var(--ease), transform 1100ms var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .trip.reveal:nth-child(2), .js .ways-list .way.reveal:nth-child(2), .js .step.reveal:nth-child(2), .js .voices-note.reveal:nth-child(2) { transition-delay: 120ms; }
  .js .trip.reveal:nth-child(3), .js .ways-list .way.reveal:nth-child(3), .js .step.reveal:nth-child(3), .js .voices-note.reveal:nth-child(3) { transition-delay: 240ms; }
  .js .trip.reveal:nth-child(4), .js .ways-list .way.reveal:nth-child(4) { transition-delay: 360ms; }
  .js .faq-list.reveal { transition-delay: 120ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .hero-stamp text { animation: none !important; }
  .sketch:nth-child(n) { transform: none; }
}