/* Jocelyn & Co. Travel, design v2 ("elevated adventure"), 21 October 2026.
   Bold Satoshi sans, rounded cards, pill buttons with an arrow circle, a
   glass nav floating over the hero. Light grounds; Night is the ink and
   Bright Teal the accent. Every page loads this one stylesheet (since
   22 October 2026). */

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #F3F2EF;
  --white: #FFFFFF;
  --ink: #0A2D2A;
  --ink-2: #4A5F5B;
  --line: #DCDAD4;
  --teal: #29D3C4;
  --teal-deep: #096E68;
  --mist: #E3F6F3;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--ground); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }

/* Pills with an arrow circle */
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; min-height: 52px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap; }
.pill .arr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .25s; }
.pill .arr svg { width: 16px; height: 16px; }
.pill:hover .arr { transform: rotate(45deg); }
.pill--teal { background: var(--teal); color: var(--ink); }
.pill--teal .arr { background: var(--ink); color: var(--white); }
.pill--glass { background: rgba(10,45,42,.35); color: var(--white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.4); }
.pill--glass .arr { background: var(--white); color: var(--ink); }
.pill--dark { background: var(--ink); color: var(--white); }
.pill--dark .arr { background: var(--teal); color: var(--ink); }

.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.h2 { font-weight: 900; font-size: clamp(36px, 5vw, 68px); line-height: 1; letter-spacing: -.035em; margin-top: 14px; }
.lead { margin-top: 20px; font-size: 19px; color: var(--ink-2); max-width: 44ch; }

/* ---------------------------------------------------------------- HERO */
.hero { margin: var(--gutter); border-radius: var(--r-xl); overflow: hidden; position: relative; isolation: isolate; min-height: min(92vh, 860px); display: flex; flex-direction: column; color: var(--white); }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; animation: drift 24s ease-out both; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,45,42,.55) 0%, rgba(10,45,42,.2) 22%, rgba(10,45,42,.55) 48%, rgba(10,45,42,.9) 100%); }
@media (max-width: 700px) { .hero::after { background: linear-gradient(180deg, rgba(10,45,42,.6) 0%, rgba(10,45,42,.45) 30%, rgba(10,45,42,.72) 55%, rgba(10,45,42,.92) 100%); } }

.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px; padding: 8px 8px 8px 22px; border-radius: 999px; background: rgba(10,45,42,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.3); z-index: 5; }
.nav__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__logo img { width: 150px; }
.nav__links { display: flex; gap: 6px; font-weight: 500; font-size: 15px; }
.nav__links a { padding: 12px 10px; border-radius: 999px; }
.nav__links a:hover { background: rgba(255,255,255,.14); }
.nav__end { display: flex; align-items: center; gap: 8px; }
.nav .pill { min-height: 44px; padding: 6px 6px 6px 18px; font-size: 14px; background: var(--white); color: var(--ink); }
.nav .pill .arr { width: 32px; height: 32px; background: var(--teal); color: var(--ink); }
.nav__menu { display: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--white); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.nav__panel { display: none; }
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-block; }
  .nav__panel.is-open { display: grid; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 10px; box-shadow: 0 24px 48px rgba(10,45,42,.25); }
  .nav__panel a { padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 18px; }
  .nav__panel a:hover { background: var(--ground); }
}
@media (max-width: 560px) {
  .nav { gap: 8px; padding-left: 16px; }
  .nav__logo img { width: 116px; }
  .nav .pill { display: none; }
  .hero__img img { object-position: 42% 55%; }
}

.hero__body { margin-top: auto; padding: 0 clamp(20px, 4vw, 56px) clamp(24px, 4vw, 56px); display: grid; gap: 24px; }
.hero h1 { display: grid; gap: 22px; }
.hero__tag { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 18px 8px 12px; border-radius: 999px; background: rgba(10,45,42,.6); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.hero__tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; }
.hero__display { font-weight: 900; font-size: clamp(46px, 8.4vw, 124px); line-height: .92; letter-spacing: -.045em; max-width: 11ch; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero__lede { max-width: 46ch; font-size: 18px; line-height: 1.55; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------- SOUND FAMILIAR */
.problem__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .problem__grid { grid-template-columns: 1.15fr .85fr; gap: 72px; } }
.problem__big { margin-top: 18px; font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -.025em; }
.problem__big strong { color: var(--teal-deep); font-weight: 900; }
.problem__answer { background: var(--white); border-radius: var(--r-lg); padding: 32px; display: grid; gap: 16px; }
.problem__answer p { color: var(--ink-2); }
.problem__answer strong { color: var(--ink); }
.sig { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.sig img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid var(--teal); }
.sig span { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.sig b { display: block; color: var(--ink); font-size: 16px; }

/* ------------------------------------------------------------ TRIP MENU */
.trips { background: var(--white); border-radius: var(--r-xl); margin: 0 var(--gutter); padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .trips { grid-template-columns: 1.2fr .8fr; } }
.trips__list { margin-top: 22px; border-top: 1px solid var(--line); }
.trips__list li { border-bottom: 1px solid var(--line); }
.trips__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; }
.trips__name { display: block; font-weight: 800; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.03em; color: #6E7B78; transition: color .2s; }
.trips__what { display: block; font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.trips__go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.trips__go svg { width: 16px; height: 16px; }
.trips__list a.is-on .trips__name, .trips__list a:hover .trips__name, .trips__list a:focus-visible .trips__name { color: var(--ink); }
.trips__list a.is-on .trips__go, .trips__list a:hover .trips__go { background: var(--teal); border-color: var(--teal); }
@media (hover: none), (max-width: 899px) { .trips__name { color: var(--ink); } }
.trips__pic { position: relative; aspect-ratio: 4/5; max-height: 560px; }
.trips__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); opacity: 0; transition: opacity .35s; }
.trips__pic img.is-on { opacity: 1; }
@media (max-width: 899px) { .trips__pic { display: none; } }

/* ------------------------------------------------------------ ACTIVITIES */
.excite__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .excite__grid { grid-template-columns: .9fr 1.1fr; } }
.acts { display: grid; gap: 14px; }
.act { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; padding: 14px 26px 14px 14px; background: var(--white); border-radius: 999px; }
.act__icon { width: 76px; height: 76px; border-radius: 50%; background: var(--mist); color: var(--teal-deep); display: grid; place-items: center; }
.act__icon svg { width: 34px; height: 34px; }
.act__icon { overflow: hidden; }
.act__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.act h3 { font-weight: 800; font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
.act p { font-size: 15px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
@media (max-width: 560px) { .act { grid-template-columns: 60px 1fr; border-radius: var(--r-lg); padding-right: 18px; } .act__icon { width: 60px; height: 60px; } .act__icon svg { width: 28px; height: 28px; } }

/* ----------------------------------------------------------------- HOW */
.how { padding-top: 0; }
.steps { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 14px; align-content: start; }
.step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: var(--ink); display: grid; place-items: center; font-weight: 800; }
.step h3 { font-weight: 800; font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.step p { color: var(--ink-2); }
.step--photo { padding: 0; overflow: hidden; position: relative; isolation: isolate; min-height: 340px; color: var(--white); display: flex; }
.step--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.step--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,45,42,.1) 15%, rgba(10,45,42,.92) 100%); }
.step--photo > div { margin-top: auto; padding: 28px; display: grid; gap: 10px; }
.step--photo p { color: var(--white); }
.ask { margin-top: 24px; background: var(--mist); border-radius: var(--r-lg); padding: 24px 24px 24px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ask p { max-width: 62ch; color: var(--ink-2); }
.ask strong { color: var(--ink); }

/* --------------------------------------------------------------- ABOUT */
.about { padding-top: 0; }
.about__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .8fr 1.2fr; } }
.about__pic { position: relative; max-width: 460px; }
.about__pic img { border-radius: var(--r-lg); aspect-ratio: 4/5; object-fit: cover; transform: rotate(-3deg); border: 10px solid var(--white); box-shadow: 0 24px 48px rgba(10,45,42,.16); }
.about__badge { position: absolute; right: -6px; bottom: 24px; background: var(--teal); color: var(--ink); border-radius: 999px; padding: 12px 20px; font-weight: 800; font-size: 15px; }
.about__text > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); font-size: 18px; max-width: 54ch; }
.local { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.local li { padding: 6px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.about__cta { margin-top: 28px; }

/* ------------------------------------------------------------- REVIEWS */
.reviews { margin: 0 var(--gutter); border-radius: var(--r-xl); background: var(--white); padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); }
.quotes { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { border-radius: var(--r-lg); background: var(--ground); padding: 28px; display: flex; flex-direction: column; gap: 20px; border-top: 6px solid var(--teal); }
.quote blockquote p { font-weight: 700; font-size: 21px; line-height: 1.35; letter-spacing: -.01em; }
.quote figcaption { margin-top: auto; color: var(--ink-2); font-size: 15px; }

/* ---------------------------------------------------------- TRIP IDEAS */
.ideas__grid { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.idea { border-radius: var(--r-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.idea img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.idea > div { padding: 20px 22px 24px; display: grid; gap: 8px; }
.idea__kind { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.idea h3 { font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.idea p { font-size: 15px; color: var(--ink-2); }
.idea__soon { justify-self: start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--mist); color: var(--teal-deep); font-size: 13px; font-weight: 700; }

/* ----------------------------------------------------------------- FAQ */
.faq { padding-top: 0; }
.faq__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: .8fr 1.2fr; } }
.faq__list { display: grid; gap: 10px; }
.faq__item { background: var(--white); border-radius: var(--r-md); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 24px; min-height: 44px; font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; flex: none; font-weight: 800; }
.faq__item[open] summary::after { content: "\2212"; background: var(--teal); }
.faq__item p { padding: 0 24px 22px; color: var(--ink-2); }
.faq__item p a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ----------------------------------------------------------------- CTA */
.cta { margin: 0 var(--gutter) var(--gutter); border-radius: var(--r-xl); overflow: hidden; position: relative; isolation: isolate; min-height: 520px; display: grid; place-items: center; text-align: center; color: var(--white); padding: 48px 24px; }
.cta picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,45,42,.7); }
.cta h2 { font-weight: 900; font-size: clamp(42px, 7vw, 104px); line-height: .95; letter-spacing: -.045em; max-width: 13ch; margin: 0 auto 20px; }
.cta p { max-width: 44ch; margin: 0 auto 28px; font-size: 18px; }

/* -------------------------------------------------------------- FOOTER */
.foot { padding: 40px var(--gutter) 56px; display: grid; gap: 28px; font-size: 15px; color: var(--ink-2); max-width: 1400px; margin: 0 auto; }
@media (min-width: 900px) { .foot { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot__logo { width: 170px; margin-bottom: 16px; }
.foot h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.foot ul a { display: inline-block; padding: 10px 0; min-width: 44px; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot__affil { margin-top: 12px; }
.foot__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px; }

/* -------------------------------------------------------------- MOTION */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--rise-delay, 0ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rise] { opacity: 1; transform: none; }
}

/* Section heads: a keyword line for search (small caps) over the display
   line people read. Both sit inside the h2. */
.head { display: grid; }
.head .eyebrow, .head .h2 { display: block; }

/* ------------------------------------------------------------- WHAT YOU GET */
.get { padding-top: 0; }
.perks { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.perk { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 12px; align-content: start; }
.perk__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--mist); color: var(--teal-deep); display: grid; place-items: center; }
.perk__icon svg { width: 28px; height: 28px; }
.perk h3 { font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.perk p { color: var(--ink-2); font-size: 16px; }
.get__note { margin-top: 20px; background: var(--mist); border-radius: var(--r-lg); padding: 20px 28px; color: var(--ink-2); }
.get__note strong { color: var(--ink); }

/* =====================================================================
   INNER PAGES (Start here first, 21 October 2026)
   ===================================================================== */
/* One height for every inner-page hero, tall enough for the longest
   heading, so pages match as you move between them. */
.page-hero { margin: var(--gutter); border-radius: var(--r-xl); overflow: hidden; position: relative; isolation: isolate; min-height: 580px; display: flex; flex-direction: column; color: var(--white); }
.page-hero .hero__img img { animation: none; }
.page-hero h1 { display: grid; gap: 22px; }
@media (max-width: 700px) { .page-hero { min-height: 660px; } }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,45,42,.65) 0%, rgba(10,45,42,.6) 40%, rgba(10,45,42,.88) 100%); }
.page-hero .hero__display { font-size: clamp(42px, 7vw, 104px); max-width: 13ch; }

/* Start here: the form beside what happens next */
.plan__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .plan__grid { grid-template-columns: 1.35fr .65fr; gap: 32px; } }
.form-card { background: var(--white); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 40px); min-height: 480px; }
.form-card__fallback { color: var(--ink-2); }
.form-card__fallback a { color: var(--teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.next { background: var(--white); border-radius: var(--r-xl); padding: 32px; display: grid; gap: 22px; }
@media (min-width: 1000px) { .next { position: sticky; top: 24px; } }
.next h2 { font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: -.025em; }
.next ol { display: grid; gap: 20px; }
.next li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.next .step__num { width: 40px; height: 40px; font-size: 15px; }
.next h3 { font-weight: 800; font-size: 18px; line-height: 1.25; }
.next p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }

.paid__grid { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .paid__grid { grid-template-columns: repeat(3, 1fr); } }
.paid__card { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 10px; align-content: start; border-top: 6px solid var(--teal); }
.paid__card h3 { font-weight: 800; font-size: 21px; line-height: 1.2; }
.paid__card p { color: var(--ink-2); }

/* Thank-you page */
.sent { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.sent__card { max-width: 720px; background: var(--white); border-radius: var(--r-xl); padding: clamp(32px, 6vw, 64px); display: grid; gap: 20px; text-align: center; justify-items: center; }
.sent__card img.sent__logo { width: 200px; }
.sent__card > a:first-child { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
.sent__card h1 { font-weight: 900; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.035em; }
.sent__card p { color: var(--ink-2); font-size: 18px; max-width: 46ch; }
.sent__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* Family travel page, 21 October 2026 */
.cards { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { border-radius: var(--r-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.card img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.card > div { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; flex: 1; }
.card h3 { font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.card p { font-size: 15px; color: var(--ink-2); }
.card__link { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

.ages { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .ages { grid-template-columns: repeat(3, 1fr); } }
.age { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 12px; align-content: start; }
.age__range { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 800; font-size: 14px; }
.age h3 { font-weight: 900; font-size: 28px; letter-spacing: -.025em; line-height: 1.05; }
.age ul { display: grid; gap: 8px; }
.age li { position: relative; padding-left: 22px; color: var(--ink-2); }
.age li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }

.trips-plan { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 1000px) { .trips-plan { grid-template-columns: repeat(3, 1fr); } }
.itin { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 16px; align-content: start; }
.itin__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.itin__meta span { padding: 4px 12px; border-radius: 999px; background: var(--mist); color: var(--teal-deep); font-size: 13px; font-weight: 700; }
.itin h3 { font-weight: 900; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.itin ol { display: grid; gap: 12px; }
.itin li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 15px; color: var(--ink-2); }
.itin li b { color: var(--ink); font-weight: 800; }
.note { margin-top: 20px; color: var(--ink-2); max-width: 70ch; }

.breaks { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 900px) { .breaks { grid-template-columns: repeat(4, 1fr); } }
.break { background: var(--white); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 8px; align-content: start; }
.break__when { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.break h3 { font-weight: 800; font-size: 22px; line-height: 1.15; }
.break p { color: var(--ink-2); font-size: 15px; }
.break__lead { font-weight: 800; color: var(--ink); }

.mine__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .mine__grid { grid-template-columns: 1fr 1.1fr; } }
.mine__text > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); font-size: 18px; max-width: 54ch; }
.mine__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mine__photos figure { display: grid; gap: 8px; }
.mine__photos img { border-radius: var(--r-md); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.mine__photos figure:nth-child(2) { transform: translateY(24px); }
.mine__photos figcaption { font-size: 13px; color: var(--ink-2); }
@media (max-width: 560px) { .mine__photos { grid-template-columns: 1fr 1fr; } .mine__photos figure:nth-child(3) { display: none; } .mine__photos figure:nth-child(2) { transform: none; } }
@media (min-width: 900px) { .perks--six { grid-template-columns: repeat(3, 1fr); } }

/* Celebrations: her own wedding story */
.wed__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .wed__grid { grid-template-columns: 1fr 1.1fr; } }
.wed__text > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); font-size: 18px; max-width: 54ch; }
.wed__list { margin-top: 22px; display: grid; gap: 10px; }
.wed__list li { position: relative; padding-left: 22px; color: var(--ink-2); }
.wed__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.wed__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wed__photos figure { display: grid; gap: 8px; }
.wed__photos figure:first-child { grid-column: 1 / -1; }
.wed__photos img { border-radius: var(--r-md); width: 100%; object-fit: cover; }
.wed__photos figure:first-child img { aspect-ratio: 16/9; }
.wed__photos figure:not(:first-child) img { aspect-ratio: 4/5; }
.wed__photos figcaption { font-size: 13px; color: var(--ink-2); }

/* Cruises page, 21 October 2026 */
.lines { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.line { background: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 10px; align-content: start; border-top: 6px solid var(--teal); }
.line h3 { font-weight: 900; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
.line__best { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.line p { color: var(--ink-2); font-size: 15px; }

/* =====================================================================
   ABOUT, 22 October 2026
   ===================================================================== */
/* Hero: an ink panel with a tilted collage of her own photos, no scrim. */
.page-hero--about { min-height: 0; background: radial-gradient(120% 90% at 88% 8%, rgba(41,211,196,.26), transparent 55%), var(--ink); }
.page-hero--about::after { content: none; }
.page-hero--about .hero__display { max-width: 10ch; }
.ahero { display: grid; gap: 40px; align-items: center; padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 64px); }
@media (min-width: 1000px) { .ahero { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.ahero__text { display: grid; gap: 22px; align-content: center; }
.hero h1.hero__tag, .page-hero h1.hero__tag { display: inline-flex; gap: 10px; font-size: 15px; font-weight: 600; }
.collage { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 580px; justify-self: center; }
.collage figure { position: absolute; }
.collage img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); border: 8px solid var(--white); box-shadow: 0 24px 48px rgba(0,0,0,.3); }
.collage__main { left: 17%; top: 0; width: 60%; transform: rotate(-3deg); z-index: 2; }
.collage__side--a { left: 0; bottom: 0; width: 38%; transform: rotate(5deg); z-index: 3; }
.collage__side--b { right: 0; top: 12%; width: 33%; transform: rotate(6deg); z-index: 1; }
.collage__side img { border-width: 6px; }
.collage__badge { right: 6%; bottom: 6%; z-index: 4; }

/* Southern Caribbean */
.carib__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .carib__grid { grid-template-columns: .9fr 1.1fr; } }
.carib__grid .lead { max-width: 52ch; }
.carib__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.carib__photos figure { display: grid; gap: 8px; }
.carib__photos img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-md); }
.carib__photos figure:nth-child(2) { transform: translateY(28px); }
.carib__photos figcaption { font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .carib__photos figure:nth-child(2) { transform: none; } }

/* Destination strip: drifts sideways; static under reduced motion. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; margin-top: clamp(16px, 3vw, 40px); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex: none; }
.marquee__list li { font-weight: 900; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -.035em; line-height: 1.1; padding: 0 .5em; white-space: nowrap; display: flex; align-items: center; gap: 1em; }
.marquee__list li::after { content: ""; width: .28em; height: .28em; border-radius: 50%; background: var(--teal); margin-left: .5em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { width: auto; flex-wrap: wrap; } .marquee__list { flex-wrap: wrap; } .marquee__list[aria-hidden] { display: none; } }

/* How I work: a checklist beside one tall photo */
.work__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .work__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } }
.work__pic img { width: 100%; max-width: 480px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xl); }
.checks { margin-top: 32px; display: grid; gap: 24px 32px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { position: relative; padding-left: 44px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A2D2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.checks h3 { font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.checks p { color: var(--ink-2); font-size: 16px; margin-top: 4px; }

/* Family line, reusing the ask band */
.ask--quote p { font-size: 19px; }

/* Contact card */
.contact { background: var(--white); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; justify-items: start; }
.contact h3 { font-weight: 900; font-size: 30px; letter-spacing: -.025em; line-height: 1.05; }
.contact > p { color: var(--ink-2); }
.contact__list { display: grid; gap: 4px; width: 100%; }
.contact__list li { display: grid; gap: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.contact__list span { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.contact__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 21px; overflow-wrap: anywhere; }
.contact__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact__affil { font-size: 14px; color: var(--ink-2); }

/* Footer: contact line, and column labels that are not headings */
.foot__contact { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 8px; }
.foot__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; }
.foot__contact a:hover { text-decoration: underline; }
.foot__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mine__photos--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .mine__photos--two figure:nth-child(2) { transform: none; } }

/* About: "I travel with my boys" photo row */
.boys__head { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1000px) { .boys__head { grid-template-columns: 1fr 1fr; gap: 72px; } }
.boys__text { display: grid; gap: 20px; justify-items: start; }
.boys__text p { color: var(--ink-2); font-size: 18px; max-width: 54ch; }
.boys { margin-top: 40px; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .boys { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .boys { grid-template-columns: repeat(6, 1fr); } .boys figure:nth-child(even) { transform: translateY(28px); } }
.boys figure { display: grid; gap: 8px; align-content: start; }
.boys img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-md); }
.boys figcaption { font-size: 14px; font-weight: 700; color: var(--ink); }


/* Reviews carousel (About, 22 October 2026): same card size as the grid,
   three across on desktop, one and a peek on phones. */
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.carousel__nav { display: flex; gap: 10px; }
.carousel__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover { background: var(--teal); border-color: var(--teal); }
.quotes--carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.quotes--carousel::-webkit-scrollbar { display: none; }
.quotes--carousel .quote { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 900px) { .quotes--carousel { grid-template-columns: none; } .quotes--carousel .quote { flex-basis: calc((100% - 32px) / 3); } }

/* About favorites: one sideways strip (Disney, St. Lucia, St. Maarten),
   tiles at the old size. Disney photos are vertical cards like the rest
   (her request). */
.fav { margin-top: 32px; display: grid; gap: 16px; min-width: 0; }
.fav__jump { display: flex; flex-wrap: wrap; gap: 8px; }
.fav__jump button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, border-color .2s; }
.fav__jump button:hover, .fav__jump button.is-on { background: var(--teal); border-color: var(--teal); }
.fav__strip { --tile: clamp(150px, 42vw, 210px); position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
.fav__strip::-webkit-scrollbar { height: 6px; }
.fav__strip::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 999px; }
.fav__strip figure { flex: 0 0 var(--tile); scroll-snap-align: start; display: grid; gap: 6px; align-content: start; }
.fav__strip figure.fav__first:not(:first-child) { margin-left: 20px; }
.fav__strip img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-md); }
.fav__strip figcaption { font-size: 13px; font-weight: 700; color: var(--ink); }
.fav__strip .fav__dsn figcaption { font-weight: 500; color: var(--ink-2); }
.fav__strip figcaption span { white-space: nowrap; }
/* Let the strip run to the screen's right edge, so the next photos peek in. */
.fav__strip { margin-right: calc((100vw - min(1320px, 100vw)) / -2 - var(--gutter)); padding-right: var(--gutter); }

/* =====================================================================
   THEME PARK PAGES (Disney), 22 October 2026
   Official DisneyCopyright photos only: shown whole at 3:2, nothing laid
   over them, captioned directly underneath with ©Disney.
   ===================================================================== */
.page-hero--disney { min-height: 0; background: radial-gradient(120% 90% at 88% 8%, rgba(41,211,196,.24), transparent 55%), var(--ink); }
.page-hero--disney::after { content: none; }
.page-hero--disney .hero__display { max-width: 12ch; }
.dfig { display: grid; gap: 10px; align-self: center; }
.dfig img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-lg); }
.dfig figcaption { font-size: 14px; color: rgba(255,255,255,.86); }
.dcards { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .dcards { grid-template-columns: repeat(3, 1fr); } }
.dcard { background: var(--white); border-radius: var(--r-lg); padding: 14px 14px 26px; display: grid; gap: 10px; align-content: start; }
.dcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-md); }
.dcard figcaption { font-size: 13px; color: var(--ink-2); }
.dcard h3 { font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; padding: 6px 10px 0; }
.dcard p { color: var(--ink-2); font-size: 16px; padding: 0 10px; }
.dcard .card__link { margin-left: 10px; }
.notices { max-width: 1320px; margin: 0 auto; padding: 8px var(--gutter) 0; font-size: 13px; color: var(--ink-2); display: grid; gap: 6px; }
.more-parks { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-2); font-size: 15px; }
.more-parks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.more-parks a:hover { background: var(--teal); border-color: var(--teal); }
.trips-plan--one { grid-template-columns: 1fr; max-width: 680px; }
@media (min-width: 1000px) { .trips-plan--one { grid-template-columns: 1fr; } }

/* Split heroes (About, theme park pages) match the other inner pages:
   580px tall on desktop, like every photo hero. 22 October 2026. */
.page-hero--about, .page-hero--disney { min-height: 580px; }
.page-hero--about .ahero, .page-hero--disney .ahero { flex: 1; padding-top: 8px; padding-bottom: clamp(24px, 3vw, 40px); }
@media (min-width: 1000px) {
  .page-hero--about .ahero__text, .page-hero--disney .ahero__text { gap: 18px; }
  .page-hero--about .hero__display, .page-hero--disney .hero__display { font-size: clamp(40px, 4.6vw, 72px); max-width: 14ch; }
  .page-hero--about .hero__lede, .page-hero--disney .hero__lede { font-size: 17px; }
  .page-hero--about .collage { max-width: 400px; }
  .page-hero--disney .dfig { max-width: 560px; justify-self: end; }
}
/* About: top-align the local text beside the taller contact card. */
.about__grid.about__grid--top { align-items: start; }

/* Split heroes on phones and tablets: the same height as the photo heroes
   (660px up to 700px wide, 580px above that). The text keeps its natural
   size and the photo shrinks to fill what is left, still whole. */
@media (max-width: 999px) {
  .page-hero--about, .page-hero--disney { height: 580px; min-height: 0; }
  .page-hero--about .ahero, .page-hero--disney .ahero { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 4px; padding-bottom: 20px; }
  .page-hero--about .ahero__text, .page-hero--disney .ahero__text { gap: 12px; }
  .page-hero--about .hero__display, .page-hero--disney .hero__display { font-size: clamp(34px, 8vw, 52px); max-width: none; }
  .page-hero--about .hero__lede, .page-hero--disney .hero__lede { font-size: 16px; line-height: 1.5; }
  .page-hero--disney .hero__ctas .pill, .page-hero--about .hero__ctas .pill { min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
  .page-hero--disney .dfig { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .page-hero--disney .dfig picture { flex: 1 1 0; min-height: 0; display: flex; }
  .page-hero--disney .dfig img { height: 100%; width: auto; max-width: 100%; aspect-ratio: 3/2; border-radius: var(--r-md); }
  .page-hero--disney .dfig figcaption { font-size: 12px; line-height: 1.35; }
  .page-hero--about .collage { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; aspect-ratio: 1 / 1.02; align-self: center; }
  .page-hero--about .collage img { border-width: 5px; border-radius: var(--r-md); }
  .page-hero--about .collage__badge { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 700px) {
  .page-hero--about, .page-hero--disney { height: 660px; }
}
/* Tablets: text and photo side by side, so the photo can be larger. */
@media (min-width: 701px) and (max-width: 999px) {
  .page-hero--about .ahero, .page-hero--disney .ahero { flex-direction: row; align-items: center; gap: 28px; }
  .page-hero--about .ahero__text, .page-hero--disney .ahero__text { flex: 1.25 1 0; }
  .page-hero--disney .dfig { flex: 1 1 0; display: grid; }
  .page-hero--disney .dfig picture { display: block; }
  .page-hero--disney .dfig img { height: auto; width: 100%; }
  .page-hero--about .collage { flex: 0 0 38%; height: auto; }
}
@media (max-width: 700px) {
  /* About on phones: both buttons on one line, badge hidden (the heading
     already says Stacy), so the photo collage has room. */
  .page-hero--about .hero__ctas { flex-wrap: nowrap; gap: 8px; }
  .page-hero--about .hero__ctas .pill { font-size: 14px; padding-left: 14px; gap: 8px; min-height: 44px; }
  .page-hero--about .hero__ctas .pill .arr { width: 30px; height: 30px; }
  .page-hero--about .collage__badge { display: none; }
}

/* 404: quick links to the trip pages under the buttons. */
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.lost__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.lost__links a:hover { background: var(--teal); border-color: var(--teal); }

/* =====================================================================
   LAYOUT AND MOTION PASS, 22 October 2026 (HANDOFF "Layout and motion")
   ===================================================================== */
/* Trip types as the big typographic list with a hover photo (Girls' trips,
   Celebrations), the homepage trip menu pattern inside a page section. */
.trips--inline { margin: 40px 0 0; }
.trips__list .trips__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; cursor: default; }
.trips__list a.trips__item { cursor: pointer; }
.trips__list h3.trips__name { margin: 0; }
.trips__list .trips__item.is-on .trips__name, .trips__list .trips__item:hover .trips__name { color: var(--ink); }
.trips__list a.trips__item:hover .trips__go, .trips__list a.trips__item.is-on .trips__go { background: var(--teal); border-color: var(--teal); }
.trips--inline .trips__pic { aspect-ratio: 4/3; max-height: none; }
.trips__thumb { display: none; }
@media (max-width: 899px) {
  .trips__list .trips__item { grid-template-columns: 88px 1fr auto; }
  .trips__list div.trips__item { grid-template-columns: 88px 1fr; }
  .trips--inline .trips__thumb { display: block; }
  .trips__thumb img { width: 88px; height: 72px; object-fit: cover; border-radius: 14px; }
}

/* Zig-zag editorial rows (Family travel, Cruises). */
.zig { display: grid; gap: clamp(32px, 5vw, 64px); margin-top: 40px; }
.zig__row { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) {
  .zig__row { grid-template-columns: 5fr 6fr; gap: 56px; }
  .zig__row:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .zig__row:nth-child(even) picture { order: 2; }
}
.zig__row img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-xl); }
.zig__row h3 { font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -.025em; }
.zig__row p { margin-top: 12px; color: var(--ink-2); font-size: 18px; max-width: 46ch; }

/* Itineraries (her pick, 22 October 2026): magazine rows on desktop, a
   large photo beside the trip, alternating sides (option B); on phones each
   becomes a photo card with the days underneath (option A). */
.trips-plan--rows { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .trips-plan--rows { grid-template-columns: 1fr; } }
.itin--row { padding: 0; overflow: hidden; gap: 0; }
.itin__pic { display: block; }
.itin__pic img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.itin__body { padding: 22px 24px 28px; display: grid; gap: 14px; align-content: center; }
@media (min-width: 900px) {
  .itin--row { grid-template-columns: 5fr 6fr; border-radius: var(--r-xl); }
  .itin--row:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .itin--row:nth-child(even) .itin__pic { order: 2; }
  .itin__pic img { height: 100%; min-height: 300px; aspect-ratio: auto; }
  .itin__body { padding: clamp(28px, 4vw, 48px); }
  .itin--row .itin__body li { grid-template-columns: 110px 1fr; }
}
/* Motion: hero lines rise in on load; cards lift with a slow photo zoom.
   All of it is switched off under reduced motion by the rule above. */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero__body > *, .js .page-hero .hero__body > *, .js .ahero__text > * { animation: rise-in .7s ease both; }
.js .hero__body > :nth-child(2), .js .ahero__text > :nth-child(2) { animation-delay: .12s; }
.js .hero__body > :nth-child(3), .js .ahero__text > :nth-child(3) { animation-delay: .24s; }
.js .ahero__text > :nth-child(4) { animation-delay: .36s; }
.card, .idea, .dcard, .zig__row picture { transition: transform .35s ease, box-shadow .35s ease; }
.card img, .idea img, .zig__row img { transition: transform .8s ease; }
.zig__row picture { display: block; overflow: hidden; border-radius: var(--r-xl); }
@media (hover: hover) {
  .card:hover, .idea:hover, .dcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10,45,42,.12); }
  .card:hover img, .idea:hover img, .zig__row:hover img { transform: scale(1.04); }
}

/* =====================================================================
   JOURNAL guides (tools/build-journal.py), 22 October 2026
   ===================================================================== */
.draft-note { max-width: 760px; margin: 24px auto 0; padding: 14px 20px; border-radius: var(--r-md); background: #FFF4D6; color: #5A4300; font-size: 15px; }
.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(48px, 7vw, 96px); font-size: 18px; color: var(--ink-2); }
.article__kind { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.article__kind span { margin: 0 6px; }
.article__lede { margin-top: 18px; font-size: 22px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.article h2 { margin-top: 48px; font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.article h3 { margin-top: 30px; font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.article p { margin-top: 14px; }
.article ul, .article ol { margin-top: 14px; display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 24px; }
.article ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.article ol { counter-reset: n; }
.article ol li { position: relative; padding-left: 40px; counter-increment: n; }
.article ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--ink); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.article a:not(.pill) { color: var(--teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article strong { color: var(--ink); }
.article table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 16px; background: var(--white); border-radius: var(--r-md); overflow: hidden; }
.article th, .article td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article thead th { background: var(--ink); color: var(--white); font-weight: 700; }
.article h3.article__q { font-size: 19px; margin-top: 24px; }
.article__ask { margin-top: 48px; }
.article__photo { margin-top: 20px; }
.article__photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
/* Disney photo in an itinerary row: whole photo with its caption under it. */
.itin__pic--dsn { display: grid; gap: 6px; padding: 14px 14px 0; align-content: center; }
.itin__pic--dsn img { aspect-ratio: 3/2; border-radius: var(--r-md); min-height: 0; height: auto; }
.itin__pic--dsn figcaption { font-size: 13px; color: var(--ink-2); }
@media (min-width: 900px) { .itin__pic--dsn { padding: 20px 0 20px 20px; } }
@media (min-width: 900px) {
  /* The text sets the row height; the photo fills its side. */
  .itin--row .itin__pic:not(.itin__pic--dsn) { position: relative; min-height: 340px; }
  .itin--row .itin__pic:not(.itin__pic--dsn) img { position: absolute; inset: 0; height: 100%; min-height: 0; }
}

/* =====================================================================
   SERVICE AREA pages (tools/build-city-pages.py), 22 October 2026
   ===================================================================== */
.area__links { margin-top: 32px; border-top: 1px solid var(--line); }
.area__links li { border-bottom: 1px solid var(--line); }
.area__link { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 0; }
.area__link b { display: block; font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.area__link b + span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 16px; }
.area__link:hover .trips__go { background: var(--teal); border-color: var(--teal); }
.area__others { margin-top: 10px; }
.area__others a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
.area__others a:hover { text-decoration: underline; }
.local li:has(a) { padding: 0; }
.local a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
.local li:has(a):hover { background: var(--mist); border-color: var(--teal); }
/* School break dates stay on one line so the cards line up (her request). */
.break__when { white-space: nowrap; }
.breaks .break { grid-template-rows: auto auto 1fr; }
/* City pages show three breaks: winter, spring, summer. */
@media (min-width: 900px) { #breaks .breaks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cards--three { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   MOTION, made visible (23 October 2026). She could not see the earlier
   effects: the hero zoom moved about 1.5% and finished early, and the
   headline rise was over before the page settled. Still calm, now
   noticeable. Everything here is off under reduced motion (rule above).
   ===================================================================== */
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.hero__img img { animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 50%; }
.page-hero.on-photo .hero__img img { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes rise-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.js .hero__body > *, .js .ahero__text > * { animation: rise-in 1s cubic-bezier(.2,.7,.2,1) .25s both; }
.js .hero__body > :nth-child(2), .js .ahero__text > :nth-child(2) { animation-delay: .45s; }
.js .hero__body > :nth-child(3), .js .ahero__text > :nth-child(3) { animation-delay: .65s; }
.js .ahero__text > :nth-child(4) { animation-delay: .85s; }
.js [data-rise] { transform: translateY(44px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .hero__img img, .page-hero.on-photo .hero__img img { animation: none !important; transform: none; }
  .js [data-rise] { transform: none; }
}

/* =====================================================================
   FOOTER, redesigned 23 October 2026 (one source: content/partials/footer.html,
   applied by tools/apply-footer.py). A white card with the brand and the
   ask on top, three link columns, and a quiet legal bar underneath.
   ===================================================================== */
.foot { display: block; max-width: none; margin: 0; padding: 0 var(--gutter) 28px; color: var(--ink-2); font-size: 15px; }
.foot__card { max-width: 1320px; margin: 0 auto; background: var(--white); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); display: grid; gap: clamp(28px, 4vw, 48px); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.foot__brand { display: grid; gap: 12px; max-width: 46ch; }
.foot__home { display: inline-flex; min-height: 44px; align-items: center; }
.foot__logo { width: 190px; margin: 0; }
.foot__brand p { font-size: 17px; color: var(--ink); }
.foot__cols { display: grid; gap: 28px; }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot__cols { grid-template-columns: 1.1fr 1fr 1.2fr; } }
.foot .foot__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 6px; }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--ink); font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--teal), var(--teal)); background-size: 0 2px; background-position: 0 calc(50% + 12px); background-repeat: no-repeat; transition: background-size .25s ease; }
.foot ul a:hover, .foot ul a:focus-visible { background-size: 100% 2px; text-decoration: none; }
.foot ul a[aria-current="page"] { font-weight: 800; }
.foot__reach a { font-weight: 700 !important; }
.foot__area { margin-top: 10px; font-size: 14px; max-width: 34ch; }
.foot__bar { max-width: 1320px; margin: 0 auto; padding: 18px 8px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; font-size: 13px; }
.foot__legal-links { display: flex; gap: 20px; }
.foot__legal-links a { font-size: 13px; font-weight: 600 !important; color: var(--ink-2) !important; }
/* Plain inner hero (privacy, terms): ink panel, no photo. */
.page-hero--plain { min-height: 0; background: radial-gradient(120% 90% at 88% 8%, rgba(41,211,196,.22), transparent 55%), var(--ink); }
.page-hero--plain::after { content: none; }
.page-hero--plain .hero__body { padding-top: clamp(32px, 5vw, 64px); }
.page-hero--plain .hero__display { font-size: clamp(38px, 6vw, 80px); max-width: 16ch; }
/* Footer card spans the same width as the heroes and closing bands. */
.foot__card, .foot__bar { max-width: none; }
.foot__bar { padding-left: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }

/* =====================================================================
   PHONES, 23 October 2026: pages read as one long column on a phone
   (homepage about 15 screens). Card rows become swipeable rows with the
   next card peeking in, sections sit closer together, and the footer is
   compact. Desktop and tablet layouts are unchanged.
   ===================================================================== */
@media (max-width: 699px) {
  .section { padding: 52px 0; }
  .ideas__grid, .cards, .zig, .trips-plan--rows, .perks, .steps, .breaks, .ages, .lines, .dcards, .reviews .quotes:not(.quotes--carousel) {
    display: flex; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 6px;
    scrollbar-width: none;
  }
  .ideas__grid::-webkit-scrollbar, .cards::-webkit-scrollbar, .zig::-webkit-scrollbar, .trips-plan--rows::-webkit-scrollbar, .perks::-webkit-scrollbar, .steps::-webkit-scrollbar, .breaks::-webkit-scrollbar, .ages::-webkit-scrollbar, .lines::-webkit-scrollbar, .dcards::-webkit-scrollbar, .reviews .quotes::-webkit-scrollbar { display: none; }
  .ideas__grid > *, .cards > *, .zig > *, .trips-plan--rows > *, .perks > *, .steps > *, .breaks > *, .ages > *, .lines > *, .dcards > *, .reviews .quotes > * { flex: 0 0 84%; scroll-snap-align: start; }
  .perks > *, .steps > *, .breaks > * { flex-basis: 76%; }
  /* Items in a sideways row never cross the vertical "rise" line, so show them. */
  .js .ideas__grid > [data-rise], .js .cards > [data-rise], .js .zig > [data-rise], .js .trips-plan--rows > [data-rise], .js .perks > [data-rise], .js .steps > [data-rise], .js .breaks > [data-rise], .js .ages > [data-rise], .js .lines > [data-rise], .js .dcards > [data-rise], .js .reviews .quotes > [data-rise] { opacity: 1; transform: none; }
  .zig__row { background: var(--white); border-radius: var(--r-lg); overflow: hidden; gap: 0; }
  .zig__row picture { border-radius: 0; }
  .zig__row img { border-radius: 0; aspect-ratio: 4/3; }
  .zig__row > div { padding: 18px 20px 22px; }
  .zig__row h3 { font-size: 22px; }
  .zig__row p { font-size: 16px; }
  .trips-plan--rows .itin__pic img { aspect-ratio: 16/10; }
  .step--photo { min-height: 0; }

  /* Footer, compact */
  .foot__card { padding: 24px 20px; gap: 22px; }
  .foot__top { flex-wrap: nowrap; padding-bottom: 20px; gap: 12px; }
  .foot__brand p { display: none; }
  .foot__logo { width: 150px; }
  .foot__top .pill { font-size: 14px; padding: 5px 5px 5px 16px; min-height: 44px; gap: 8px; flex: none; }
  .foot__top .pill .arr { width: 32px; height: 32px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .foot__cols > div { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
  .foot ul a { font-size: 15px; }
  .foot__area { display: none; }
  .foot__bar { flex-direction: column; align-items: flex-start; padding: 14px 6px 0; }
}
@media (max-width: 699px) {
  .about__pic { max-width: 64%; }
  .about__badge { font-size: 13px; padding: 9px 14px; }
  .work__pic img { aspect-ratio: 16/11; object-position: 50% 25%; border-radius: var(--r-lg); }
  .wed__photos, .boys { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .wed__photos::-webkit-scrollbar, .boys::-webkit-scrollbar { display: none; }
  .wed__photos > figure, .boys > figure { flex: 0 0 62%; scroll-snap-align: start; transform: none !important; }
  .wed__photos > figure:first-child { flex-basis: 84%; }
  .wed__photos figure img { aspect-ratio: 4/5 !important; }
  .wed__photos > figure:first-child img { aspect-ratio: 4/3 !important; }
  .js .wed__photos[data-rise], .js .boys[data-rise] { opacity: 1; transform: none; }
}
/* Phones: swipe cues (v2.js adds .swipe-dots after each sideways row). */
.swipe-dots { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.swipe-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.swipe-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .25s ease, background .25s ease; }
.swipe-dots button.is-on::before { width: 22px; background: var(--teal-deep); }
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-36px); } 70% { transform: translateX(-36px); } }
.is-nudging > * { animation: swipe-nudge 1s ease-in-out; }
@media (min-width: 700px) { .swipe-dots { display: none; } }