/* Trek with Meg: site stylesheet.
   Tokens first (generated from the design system's tokens.json), then components.
   Flexbox only; the sticky header is the only positioned element. */

:root {
  --mist: #eef4ef;
  --white: #ffffff;
  --canopy: #14432f;
  --canopy-deep: #0d2e20;
  --canopy-raised: #1d5540;
  --sun: #f6a500;
  --sun-light: #fdeac2;
  --leaf-light: #d7ecdf;
  --sky-light: #dcebf3;
  --ink: #16251d;
  --ink-muted: #55645b;
  --leaf: #2f6b3a;
  --on-canopy: #ffffff;
  --on-canopy-muted: #b8d8c2;
  --line: #d5e2d9;
  --line-strong: #7f8f85;
  --line-canopy: #2c5f48;
  --shadow-green: rgba(13, 46, 32, 0.16);
  --overlay-top: rgba(13, 46, 32, 0.15);
  --overlay-bottom: rgba(13, 46, 32, 0.62);
  --focus: #14432f;
  --focus-on-canopy: #f6a500;
  --clear: rgba(13, 46, 32, 0);
  --danger: #b42318;
  --danger-light: #fdecea;
  --mist-glass: rgba(238, 244, 239, 0.82);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --space-10: 136px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 48px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px rgba(13, 46, 32, 0.16);
  --shadow-photo: 0 12px 28px rgba(13, 46, 32, 0.22);
  --fs-hero: clamp(2.625rem, 1.5rem + 4.4vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-hand: clamp(1.625rem, 1.45rem + 0.6vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-button: 1rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-hero: 1.0;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-hero: -0.02em;
  --tracking-heading: -0.01em;
  --tilt-left: -5deg;
  --tilt-right: 5deg;
  --tilt-soft-left: -3deg;
  --tilt-soft-right: 3deg;
  --tilt-none: 0deg;
  --size-container: 1180px;
  --size-text: 620px;
  --size-hero-text: 760px;
  --size-logo: 52px;
  --size-logo-sm: 42px;
  --size-logo-footer: 96px;
  --size-hero-min: 640px;
  --size-hero-min-sm: 520px;
  --size-intro-min: 380px;
  --size-overlap: 88px;
  --size-overlap-sm: 56px;
  --size-field: 48px;
  --size-textarea: 170px;
  --size-badge: 52px;
  --size-icon: 26px;
  --size-stroke: 2px;
  --size-hairline: 1px;
  --size-focus: 3px;
  --size-collage: 300px;
  --size-collage-sm: 150px;
  --size-collage-lift: 32px;
  --size-arch: 240px;
  --size-pile: 220px;
  --size-pile-overlap: 70px;
  --size-dot: 8px;
  --size-full: 100%;
  --size-half: 50%;
  --size-third: 33.333%;
  --size-scroll-card: 80%;
  --size-gallery-wide: 440px;
  --size-gallery-tall: 220px;
  --size-gallery-wide-md: 340px;
  --size-gallery-tall-md: 170px;
  --size-gallery-tall-sm: 40%;
  --bp-desktop: 1024px;
  --bp-phone: 680px;
  --size-hero-photo-pad: 75%;
  --size-lift: 6px;
  --size-enter-shift: 28px;
  --size-season-bar: 64px;
  --size-season-bar-low: 28px;
  --size-swatch: 14px;
  --ratio-wide: 3 / 2;
  --ratio-card: 4 / 3;
  --ratio-portrait: 4 / 5;
  --ratio-arch: 3 / 4;
  --ratio-square: 1 / 1;
  --shape-arch: 999px 999px 24px 24px;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-enter: 720ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --delay-step: 90ms;
  --press-scale: 0.97;
  --zoom-scale: 1.05;
  --blur-header: 14px;
  --focal-meg: 70% 65%;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", "Arial", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
}

html, body { margin: 0; }

/* Trek with Meg: website stylesheet (v3, after the Tripstar reference).
   Every colour, family, size, space, radius, angle and ratio is a custom property from :root (tokens.css).
   Flexbox only. The sticky header is the only positioned element; overlaps use negative margins.
   Breakpoints: tablet below 1024px, phone below 680px (CSS cannot read a custom property inside @media). */

/* ---------- Base ---------- */
.site {
  display: flex;
  flex-direction: column;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  margin: 0;
}
.site * { box-sizing: border-box; }
.site img { display: block; max-width: var(--size-full); }
.site h1, .site h2, .site h3, .site p, .site ul, .site ol, .site figure { margin: 0; }
.site ul, .site ol { padding: 0; list-style: none; }
.site a, .site button, .site input, .site select, .site textarea { font-family: inherit; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible,
.site select:focus-visible, .site textarea:focus-visible {
  outline: var(--size-focus) solid var(--focus);
  outline-offset: var(--size-focus);
}
.page { display: flex; flex-direction: column; }
.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: var(--size-full);
  max-width: calc(var(--size-container) + var(--space-6) + var(--space-6));
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.section { display: flex; flex-direction: column; padding: var(--space-9) 0; }

/* Green bands sit inside the page margin with big curved corners, like the reference. */
.band {
  display: flex;
  flex-direction: column;
  margin: 0 var(--space-5);
  padding: var(--space-9) 0;
  background: var(--canopy);
  color: var(--on-canopy);
  border-radius: var(--radius-xl);
}
.band .heading-section { color: var(--on-canopy); }
/* A larger section heading, the same size as the golden home page headings. */
.heading-section.heading-lg { font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); }
/* Golden heading on a green band, at the normal size (heading-sun is golden and larger). */
.band .heading-section.heading-gold { color: var(--sun); }
.band .heading-section.heading-sun { color: var(--sun); font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); }
.band .heading-sun + .text-body { font-size: var(--fs-lead); }
.band .text-lead, .band .text-body { color: var(--on-canopy-muted); }
.band a:focus-visible, .band button:focus-visible { outline-color: var(--focus-on-canopy); }

/* ---------- Type ---------- */
.heading-hero, .heading-page, .heading-section, .heading-card {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--canopy);
}
.heading-hero { font-size: var(--fs-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero); color: var(--on-canopy); }
.heading-page { font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); color: var(--on-canopy); }
.heading-section { font-size: var(--fs-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); }
.heading-card { font-size: var(--fs-h3); line-height: var(--leading-snug); font-weight: var(--weight-semibold); color: var(--ink); }
.text-lead { font-size: var(--fs-lead); max-width: var(--size-text); }
.text-body { font-size: var(--fs-body); max-width: var(--size-text); }
.text-small { font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--ink-muted); line-height: var(--leading-snug); }
.hand { font-family: var(--font-hand); font-size: var(--fs-hand); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--leaf); }
.band .hand { color: var(--sun); }

.head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); }
.head-split .heading-section { flex: 0 1 var(--size-text); }
.head-split .text-body { flex: 0 1 var(--size-text); }
/* Centred headings and their intro split into even lines, with no single word left on a line of its own. */
.head-center .heading-section, .head-center .text-body, .head-center .text-lead { text-wrap: balance; }
/* Heading with its description directly underneath, left-aligned. */
.head-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.head-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); max-width: var(--size-hero-text); margin: 0 auto; }

/* ---------- Actions ---------- */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.action-center { justify-content: center; }
.site .button-primary, .site .button-sun, .site .button-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-field);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 0;
  font-size: var(--fs-button);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
}
.site .button-primary { background: var(--canopy); color: var(--on-canopy); }
.site .button-primary:hover { background: var(--canopy-deep); }
.site .button-sun { background: var(--sun); color: var(--canopy); }
.site .button-sun:hover { background: var(--white); }
.site .button-light { background: var(--white); color: var(--canopy); }
.site .button-light:hover { background: var(--leaf-light); }
.site .link-text { overflow-wrap: anywhere; font-weight: var(--weight-semibold); color: var(--leaf); text-underline-offset: var(--space-1); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--mist);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: var(--size-full);
  max-width: calc(var(--size-container) + var(--space-6) + var(--space-6));
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}
.brand-link { display: flex; align-items: center; }
.brand-logo { height: var(--size-logo); width: auto; }
.nav-main { display: flex; align-items: center; gap: var(--space-2); }
.site .nav-link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--fs-button);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.site .nav-link:hover { background: var(--white); }
.site .nav-link.is-current { background: var(--white); color: var(--canopy); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-field);
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  color: var(--canopy);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-button);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.menu-icon { display: flex; flex-direction: column; gap: var(--space-1); }
.menu-icon-bar { width: var(--space-5); height: var(--size-stroke); background: var(--canopy); border-radius: var(--radius-pill); }
.nav-mobile { display: none; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-6) var(--space-4); }
.site .nav-mobile .nav-link { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.125rem; }
.nav-mobile .button-primary { margin-top: var(--space-3); }
.site-header.is-open .nav-mobile { display: flex; }

/* Travel mega menu. The panel hangs below the sticky header, so it is positioned against it
   (the one exception to the flex-only layout). JavaScript opens it on click, hover and keyboard;
   without JavaScript it opens on hover or focus. */
.site .nav-trigger { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--clear); border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.site .nav-trigger:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-hairline); }
.nav-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) ease; }
.site .nav-trigger[aria-expanded="true"] { background: var(--white); color: var(--canopy); }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.mega { display: none; position: absolute; top: var(--size-full); left: 0; right: 0; background: var(--white); border-bottom: var(--size-hairline) solid var(--line); box-shadow: 0 24px 40px rgba(13, 46, 32, 0.12); }
.site-header.mega-open .mega { display: block; animation: mega-in var(--dur-base) var(--ease-out); }
html:not(.js) .site-header:has(.nav-trigger:hover, .nav-trigger:focus, .mega:hover, .mega:focus-within) .mega { display: block; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-inner { display: flex; gap: var(--space-5); width: var(--size-full); max-width: calc(var(--size-container) + var(--space-6) + var(--space-6)); margin: 0 auto; padding: var(--space-6); }
.site .mega-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast) ease; }
.site .mega-card:hover { background: var(--mist); }
.site .mega-card:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-hairline); }
.site .mega-image { width: var(--size-full); height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.mega-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h3); line-height: var(--leading-snug); color: var(--canopy); }
.mega-card[aria-current] .mega-title { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mega-text { font-size: var(--fs-small); line-height: var(--leading-snug); color: var(--ink-muted); }

/* Phone and tablet menu: Travel becomes a labelled group of three links with small pictures. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { padding: var(--space-2) var(--space-4) 2px; font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--weight-semibold); color: var(--ink); }
.site .nav-sublink { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-4); padding: 6px var(--space-3); border-radius: var(--radius-md); color: var(--ink); font-weight: var(--weight-semibold); text-decoration: none; }
.site .nav-sublink:hover, .site .nav-sublink.is-current { background: var(--white); color: var(--canopy); }
.site .nav-sublink img { width: 52px; height: 34px; object-fit: cover; border-radius: var(--radius-sm); }

/* ---------- Photo heroes ---------- */
.hero-wrap { display: flex; flex-direction: column; padding: 0 var(--space-5); }
.hero-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  min-height: var(--size-hero-min);
  padding: var(--space-9) var(--space-6) var(--space-10);
  border-radius: var(--radius-xl);
  background-image: linear-gradient(var(--overlay-top), var(--overlay-bottom)), var(--hero-photo);
  background-size: cover;
  background-position: center;
  color: var(--on-canopy);
}
.hero-card .text-lead { color: var(--on-canopy); max-width: var(--size-text); }
.hero-card .hand { color: var(--sun); }
.hero-card-page { min-height: var(--size-intro-min); padding-bottom: var(--space-9); }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--size-container); }

/* About hero: text on the left so Meg stays visible on the right of the photo. */
.site .hero-card-left { min-height: var(--size-hero-min); align-items: flex-start; text-align: left; background-position: var(--focal-meg); }
.hero-card-left .hero-copy { align-items: flex-start; max-width: var(--size-text); }
/* Photo with people in the middle (Start Planning): the text sits at the top over the scenery, the photo is
   anchored to its top edge so the people stay below the text, and the top is darkened for the white text.
   On phones the whole photo shows above the text instead (see the 679px rules). */
.site .hero-card-top { justify-content: flex-start; padding-top: var(--space-7); background-image: linear-gradient(rgba(13, 46, 32, 0.62), rgba(13, 46, 32, 0.12) 42%, rgba(13, 46, 32, 0) 60%, rgba(13, 46, 32, 0.25)), var(--hero-photo); background-position: center top; }
.hero-card-top .hero-copy { gap: var(--space-3); }

/* A wide photo with a short note beside it. */
.section-tight { padding-top: 0; }
/* About page group photo: the caption sits centred over the bottom of the photo, inside its white frame.
   Photo and caption share one grid cell; on phones the caption moves below the photo. */
.photo-feature { display: grid; width: var(--size-full); max-width: 1000px; align-self: center; } /* centred in the column; margin auto would lose to the .site figure reset */
.photo-feature > img, .photo-feature-caption { grid-area: 1 / 1; }
.photo-wide-frame { flex: 3 1 0; min-width: 0; width: var(--size-full); aspect-ratio: var(--ratio-wide); object-fit: cover; border-radius: var(--radius-lg); border: var(--space-2) solid var(--white); box-shadow: var(--shadow-photo); }
.photo-feature-caption { z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: var(--space-2); padding: var(--space-7) var(--space-7) var(--space-6); border-radius: calc(var(--radius-lg) - var(--space-2)); background: linear-gradient(to top, rgba(13, 46, 32, 0.88), rgba(13, 46, 32, 0.45) 30%, rgba(13, 46, 32, 0) 55%); text-align: center; }
.photo-feature-caption .hand { color: var(--sun); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.photo-feature-caption .text-body { max-width: 34em; color: var(--on-canopy); }

/* The planner card rides up over the bottom of the hero. */
.planner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: var(--size-full);
  max-width: var(--size-container);
  margin: calc(var(--size-overlap) * -1) auto 0;
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.planner-top { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.planner-title { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); color: var(--canopy); text-align: center; }
.tab-row { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: center; border-bottom: var(--size-hairline) solid var(--line); }
.site .tab {
  padding: var(--space-2) var(--space-4);
  background: var(--clear);
  border: 0;
  border-bottom: var(--size-stroke) solid var(--clear);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.site .tab.is-active { color: var(--canopy); border-bottom-color: var(--sun); }
.planner-fields { display: flex; align-items: flex-end; gap: var(--space-4); }
.planner-fields .form-field { flex: 1 1 0; }
.mockup-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  background: var(--sun-light);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
}

/* ---------- Icons ---------- */
.badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-pill); background: var(--leaf-light); color: var(--canopy); }
.badge-sun { background: var(--sun-light); }
.icon { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: var(--size-stroke); stroke-linecap: round; stroke-linejoin: round; }
.planner-title .icon { width: 32px; height: 32px; color: var(--leaf); }

/* ---------- Collage ---------- */
.collage { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding-top: var(--size-collage-lift); }
.collage-photo {
  flex: 0 1 var(--size-collage);
  min-width: 0;
  padding: var(--space-2);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-photo);
}
.collage-photo img { width: var(--size-full); aspect-ratio: var(--ratio-portrait); object-fit: cover; border-radius: var(--radius-md); }
.collage-left { transform: rotate(var(--tilt-left)); margin-right: calc(var(--space-6) * -1); }
.collage-mid { flex-basis: calc(var(--size-collage) + var(--space-7)); margin-bottom: var(--size-collage-lift); }
.collage-right { transform: rotate(var(--tilt-right)); margin-left: calc(var(--space-6) * -1); }

/* ---------- Feature trio ---------- */
.feature-panel { display: flex; gap: var(--space-6); padding: var(--space-6); background: var(--white); border: var(--size-hairline) solid var(--line); border-radius: var(--radius-lg); }
.feature { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }

/* ---------- Place cards ---------- */
.card-place {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-5);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
}
.card-place img { width: var(--size-full); aspect-ratio: var(--ratio-card); object-fit: cover; border-radius: var(--radius-md); }
.card-place-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
.card-place .text-body { color: var(--ink); }
.card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }

.dot { flex: 0 0 auto; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--sun); }

/* ---------- Steps with photo ---------- */
.split { display: flex; align-items: center; gap: var(--space-8); }
.split-text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-7); }
.split-media { flex: 1 1 0; display: flex; }
.photo-frame { width: var(--size-full); aspect-ratio: var(--ratio-portrait); object-fit: cover; border-radius: var(--radius-lg); border: var(--space-2) solid var(--white); box-shadow: var(--shadow-photo); }
/* "How a trip comes together": icon stops joined by a dashed trail, like the road in the logo. */
.steps-head { display: flex; flex-direction: column; gap: var(--space-3); }
.step-list { display: flex; flex-direction: column; }
.step-item { display: flex; align-items: stretch; gap: var(--space-5); }
.step-rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.step-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--sun); color: var(--canopy); }
.step-line { flex: 1 1 auto; width: 0; min-height: var(--space-6); margin: var(--space-3) 0; border-left: 2px dashed var(--line-strong); }
.step-item:last-child .step-line { display: none; }
.step-copy { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0 var(--space-6); }
.step-item:last-child .step-copy { padding-bottom: 0; }
.step-title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--canopy); }

.tint-row { display: flex; gap: var(--space-5); }
.card-tint { flex: 1 1 0; min-width: 0; color: var(--ink); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); }
.tint-leaf { background: var(--leaf-light); }
.tint-sun { background: var(--sun-light); }
.tint-sky { background: var(--sky-light); }
.tint-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }

/* ---------- Questions on the band ---------- */
/* Photo on the left, an accordion of native <details> on the right. One question opens at a time. */
.faq { display: flex; align-items: stretch; gap: var(--space-8); }
.faq-photo { flex: 0 0 40%; display: flex; margin: 0; }
.site .faq-photo img { width: var(--size-full); height: var(--size-full); min-height: 520px; object-fit: cover; object-position: 60% 40%; border-radius: var(--radius-lg); }
.faq-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); }
.faq-head { display: flex; flex-direction: column; gap: var(--space-3); }
.band .faq-head .heading-section { color: var(--sun); }
.faq-list { display: flex; flex-direction: column; border-top: var(--size-hairline) solid var(--line-canopy); }
.faq-item { border-bottom: var(--size-hairline) solid var(--line-canopy); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; list-style: none; cursor: pointer; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:focus-visible { outline: var(--size-focus) solid var(--focus-on-canopy); outline-offset: var(--size-focus); border-radius: var(--radius-sm); }
.faq .heading-card { color: var(--on-canopy); transition: color var(--dur-fast) ease; }
.faq-question:hover .heading-card, .faq-item[open] .heading-card { color: var(--sun); }
.faq-sign { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: var(--size-stroke) solid var(--line-canopy); border-radius: var(--radius-pill); color: var(--on-canopy); font-size: 1.375rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) ease, border-color var(--dur-base) ease; }
.faq-sign::before { content: "+"; }
.faq-question:hover .faq-sign { border-color: var(--sun); }
.faq-item[open] .faq-sign { transform: rotate(45deg); background: var(--sun); border-color: var(--sun); color: var(--canopy); }
.faq-answer { padding: 0 var(--space-8) var(--space-5) 0; }

/* ---------- Arch panel (the signature move) ---------- */
.panel { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-8) var(--space-7); background: var(--white); border-radius: var(--radius-xl); }

/* Home "Uganda, your way" tiles: square-cornered photos; a green overlay with the label rises on hover.
   Photo and caption share one grid cell so the overlay sits on the photo without positioning. */
/* Activities: a row that scrolls sideways and snaps to each tile. Arrow buttons appear when JavaScript runs. */
.activities .container { gap: var(--space-6); }
.activities-head { flex: 0 1 var(--size-text); display: flex; flex-direction: column; gap: var(--space-3); }
.head-split .activities-head > * { flex: none; } /* the shared head-split basis is a width, not a height */
.site .activities .head-split { flex-direction: row; align-items: flex-end; gap: var(--space-5); }
.site .head-split > .activities-head { flex: 1 1 auto; min-width: 0; } /* shrinks beside the arrows instead of pushing the page wider */ /* keep the arrows beside the heading at every width */
.scroll-buttons { display: flex; gap: var(--space-2); flex: none; }
.scroll-buttons[hidden] { display: none; }
.site .scroll-button { display: inline-flex; align-items: center; justify-content: center; width: var(--size-field); height: var(--size-field); padding: 0; background: var(--white); color: var(--canopy); border: var(--size-hairline) solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.site .scroll-button:hover { background: var(--sun); border-color: var(--sun); }
.site .scroll-button:disabled { opacity: 0.35; cursor: default; background: var(--white); border-color: var(--line-strong); }
.scroll-button-next .icon { transform: scaleX(-1); }
.activity-track { display: flex; gap: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } /* no visible scrollbar: swipe, trackpad or the arrow buttons */
.activity-track::-webkit-scrollbar { display: none; }
.activity-track:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); border-radius: var(--radius-lg); }
.way-tile { flex: 0 0 clamp(240px, 24vw, 290px); min-width: 0; display: grid; margin: 0; overflow: hidden; border-radius: var(--radius-lg); scroll-snap-align: start; background: var(--canopy-raised); }
.way-tile img, .way-label { grid-area: 1 / 1; }
.way-label { z-index: 1; } /* above the photo while it zooms */
.site .way-tile img { width: var(--size-full); aspect-ratio: var(--ratio-arch); object-fit: cover; transition: transform var(--dur-enter) var(--ease-out); }
/* The title always shows over a soft shade at the bottom; on hover the shade deepens and the summary opens below it. */
.way-label {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: var(--space-5);
  background-color: rgba(13, 46, 32, 0);
  background-image: linear-gradient(to top, rgba(13, 46, 32, 0.85), rgba(13, 46, 32, 0) 50%);
  transition: background-color var(--dur-base) var(--ease-out);
}
.way-label-text {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading);
  color: var(--on-canopy);
}
.way-label-sub {
  max-height: 0; margin-top: 0; overflow: hidden; opacity: 0;
  font-size: var(--fs-small); line-height: var(--leading-snug); color: var(--on-canopy);
  transition: max-height var(--dur-base) var(--ease-out), margin-top var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.way-tile { text-decoration: none; }
.way-tile:focus-visible { outline: var(--size-focus) solid var(--sun); outline-offset: calc(var(--size-focus) * -1); } /* drawn inside: the scrolling row clips anything outside */
.way-tile:hover .way-label, .way-tile:focus-visible .way-label { background-color: rgba(13, 46, 32, 0.4); }
.way-tile:hover .way-label-sub, .way-tile:focus-visible .way-label-sub { max-height: 6em; margin-top: var(--space-2); opacity: 1; }
.way-tile:hover img { transform: scale(var(--zoom-scale)); }

/* Home "Places I keep going back to": wider destination tiles in the same sideways row.
   Only the name shows; "Read more" opens under it on hover or keyboard focus. */
.dest-tile { flex-basis: clamp(280px, 34vw, 420px); }
.site .dest-tile img { aspect-ratio: 4 / 5; }
.dest-tile .way-label { padding: var(--space-6); }
.dest-tile .way-label-text { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.dest-more { display: flex; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur-base) var(--ease-out), margin-top var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.dest-tile:hover .dest-more, .dest-tile:focus-within .dest-more { max-height: 5em; margin-top: var(--space-4); opacity: 1; }
.dest-tile:focus-within .way-label { background-color: rgba(13, 46, 32, 0.4); }
.dest-more .button-sun:focus-visible { outline: var(--size-focus) solid var(--white); outline-offset: var(--size-focus); }
.band .action-row .scroll-buttons { margin-right: var(--space-3); }

/* Photo tiles in a grid, three to a row (two on tablets, one on phones): Destinations and Activities pages. */
.dest-grid, .tile-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.dest-grid .dest-tile, .tile-grid > .way-tile { flex: 0 1 calc((var(--size-full) - var(--space-5) * 2) / 3); scroll-snap-align: none; }
.activities-page-hint, .tile-grid-hint { color: var(--ink-muted); }
/* Activity tiles are buttons that open a popup. */
.site button.way-tile { padding: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* Activity popup (a native <dialog>): photo beside the details, closes with the X, Escape or a click outside.
   The close button is positioned in the corner of the card (an exception to the flex-only layout). */
html:has(dialog.popup[open]) { overflow: hidden; }
.popup { width: var(--size-full); max-width: min(960px, calc(var(--size-full) - var(--space-6))); max-height: calc(100vh - var(--space-6)); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(13, 46, 32, 0.35); overflow: auto; overscroll-behavior: contain; }
.popup:focus, .popup:focus-visible { outline: none; } /* the dialog itself is not a control; its close button shows focus */
.popup::backdrop { background: rgba(13, 46, 32, 0.6); backdrop-filter: blur(3px); }
.popup[open] { animation: popup-in var(--dur-base) var(--ease-out); }
@keyframes popup-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.popup-card { position: relative; display: flex; align-items: stretch; }
.popup-media { flex: 0 0 42%; display: flex; }
.site .popup-media img { width: var(--size-full); height: var(--size-full); min-height: 420px; object-fit: cover; }
.popup-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) var(--space-7) var(--space-6); }
.popup-body .heading-section { padding-right: var(--space-7); }
.popup-text { display: flex; flex-direction: column; gap: var(--space-3); }
.popup-where { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--size-hairline) solid var(--line); }
.site .popup-places { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site .popup-place { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--leaf-light); color: var(--canopy); border-radius: var(--radius-pill); font-weight: var(--weight-semibold); text-decoration: none; transition: background-color var(--dur-fast) ease; }
.site .popup-place:hover { background: var(--sun-light); }
.popup-place .icon { width: 18px; height: 18px; }
.popup-close-form { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1; margin: 0; }
.site .popup-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--white); color: var(--canopy); border: var(--size-hairline) solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.site .popup-close:hover { background: var(--sun); border-color: var(--sun); }
.popup-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
.site .popup a:focus-visible, .site .popup button:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-hairline); }

/* ---------- Photo notes ---------- */
.note-row { display: flex; gap: var(--space-5); align-items: stretch; }
.note-row .card-tint img { width: var(--size-full); aspect-ratio: var(--ratio-wide); object-fit: cover; border-radius: var(--radius-md); }

/* ---------- CTA band ---------- */
.cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); }
.cta-copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--size-text); }
.cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
/* Golden variant of the green band, used for the "Write to Meg" call to action. */
.band.band-sun { background: var(--sun); color: var(--canopy-deep); }
.band.band-sun .heading-section { color: var(--canopy-deep); }
.band.band-sun .text-lead, .band.band-sun .text-body { color: var(--canopy-deep); }
.band.band-sun a:focus-visible, .band.band-sun button:focus-visible { outline-color: var(--canopy-deep); }
.site .cta-actions .button-primary { min-height: 60px; padding: var(--space-4) var(--space-7); font-size: var(--fs-lead); border-radius: var(--radius-md); }

/* ---------- Photo pile over the footer ---------- */
.pile { display: flex; justify-content: center; align-items: flex-end; margin: var(--space-8) 0 calc(var(--size-pile-overlap) * -1); padding: 0 var(--space-5); }
.pile-photo { flex: 0 1 var(--size-pile); min-width: 0; padding: var(--space-2); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-photo); margin: 0 calc(var(--space-4) * -1); }
.pile-photo img { width: var(--size-full); aspect-ratio: var(--ratio-square); object-fit: cover; border-radius: var(--radius-sm); }
.pile-photo:nth-child(odd) { transform: rotate(var(--tilt-soft-left)); }
.pile-photo:nth-child(even) { transform: rotate(var(--tilt-soft-right)); margin-bottom: var(--space-5); }

/* ---------- About ---------- */
.list-pair { display: flex; gap: var(--space-5); }
.dot-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dot-list-item { display: flex; align-items: baseline; gap: var(--space-3); }
.signature { font-family: var(--font-hand); font-size: var(--fs-hand); font-weight: var(--weight-semibold); color: var(--leaf); }

/* ---------- Destinations ---------- */
.place-list { display: flex; flex-direction: column; gap: var(--space-9); }
.place-entry { display: flex; align-items: center; gap: var(--space-8); }
.place-entry.is-reversed { flex-direction: row-reverse; }
.place-entry { scroll-margin-top: var(--space-10); } /* links to a destination or activity land below the sticky header */
.place-entry.is-activity .place-media img { border-radius: var(--radius-lg); } /* activities use plain rounded photos, not arches */
.place-media { flex: 0 0 var(--size-third); display: flex; }
.place-media img { width: var(--size-full); aspect-ratio: var(--ratio-arch); object-fit: cover; border-radius: var(--shape-arch); }
.place-text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-4); }

/* A destination's own page: description beside an "At a glance" box, then its activities,
   places to stay, photos and news, each only when there is something to show. */
.back-crumb { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; color: var(--ink-muted); font-size: var(--fs-small); font-weight: var(--weight-semibold); text-decoration: none; }
.back-crumb .icon { width: 18px; height: 18px; }
.back-crumb:hover { color: var(--canopy); text-decoration: underline; }
/* Destination page: the park's content on the left, the enquiry form on the right. The form column runs the
   full height of the content, so the form stays in view (sticky) while you read and scroll. */
.dest-layout { display: flex; align-items: flex-start; gap: var(--space-8); }
.dest-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); }
.dest-block { display: flex; flex-direction: column; gap: var(--space-6); scroll-margin-top: var(--space-10); }
.dest-block .card-tint { max-width: var(--size-hero-text); }
.dest-block .head-split { gap: var(--space-5); }
.site #activities.dest-block .head-split { flex-direction: row; align-items: flex-end; }
#activities.dest-block .activities-head { flex: 1 1 auto; }
.dest-block .head-split > .link-text { flex: none; white-space: nowrap; }
.dest-about { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
/* Destination quick facts: one light leaf-green bar (as the "First time in Africa?" card), a golden icon disc per fact,
   label in leaf green, value in canopy green.
   Facts sit side by side with thin dividers; on phones they stack. */
.fact-bar { display: flex; flex-wrap: wrap; margin: var(--space-1) 0 var(--space-2); padding: var(--space-2); background: var(--leaf-light); border-radius: var(--radius-lg); }
.fact-item { flex: 1 1 160px; display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); }
.fact-item + .fact-item { border-left: var(--size-hairline) solid rgba(20, 67, 47, 0.15); }
.fact-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--sun); color: var(--canopy-deep); }
.fact-icon .icon { width: 22px; height: 22px; }
.fact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact-text dt, .fact-text dd { margin: 0; }
.fact-text dt { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }
.fact-text dd { font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--canopy); }
.dest-about .text-body { max-width: none; text-align: justify; hyphens: auto; } /* full width of the left column, justified; hyphens avoid wide gaps */
.dest-glance { flex: 0 0 340px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--white); border: var(--size-hairline) solid var(--line); border-radius: var(--radius-lg); }
.glance-list { display: flex; flex-direction: column; margin: 0; }
.glance-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: var(--size-hairline) solid var(--line); }
.glance-row:first-child { padding-top: 0; }
.glance-row dt { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }
.glance-row dd { margin: 0; color: var(--ink); }
.dest-glance .button-primary { align-self: flex-start; }
/* Quick facts above the description (a <dl>, so reset its default spacing), and the enquiry form beside it. */
.dest-glance { gap: var(--space-3); position: sticky; top: calc(var(--space-9) - var(--space-2)); padding: var(--space-5); box-shadow: 0 18px 40px rgba(13, 46, 32, 0.08); }
/* Compact fields, so the whole form fits on a laptop screen while it sticks. */
.dest-form .form-field { gap: var(--space-1); }
.dest-form .field-input, .dest-form .field-select { min-height: 40px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.dest-form { display: flex; flex-direction: column; gap: var(--space-2); }
.dest-form .field-input, .dest-form .field-select, .dest-form .field-textarea { background: var(--white); }
.dest-form .field-textarea.dest-form-message { min-height: 64px; height: 64px; }
.site .button-primary.button-full { width: var(--size-full); align-self: stretch; margin-top: var(--space-1); }
.route-row { display: flex; gap: var(--space-3); }
.route-stop { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--canopy-raised); border-radius: var(--radius-md); }
.route-days { font-family: var(--font-hand); font-size: var(--fs-hand); color: var(--sun); line-height: var(--leading-tight); }
.route-place { font-weight: var(--weight-semibold); color: var(--on-canopy); line-height: var(--leading-snug); }

/* ---------- Gallery ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Gallery photos (Gallery page and destination pages): the caption sits over the bottom of the photo
   on a soft dark fade. Photo and caption share one grid cell. */
.gallery-item { display: grid; overflow: hidden; border-radius: var(--radius-md); }
.gallery-item > .media, .gallery-item > figcaption { grid-area: 1 / 1; }
.site .gallery-item > figcaption { z-index: 1; align-self: end; padding: var(--space-7) var(--space-4) var(--space-3); background: linear-gradient(to top, rgba(13, 46, 32, 0.8), rgba(13, 46, 32, 0)); color: var(--on-canopy); font-weight: var(--weight-semibold); line-height: var(--leading-snug); text-shadow: 0 1px 2px rgba(13, 46, 32, 0.4); pointer-events: none; }
.gallery-item img { width: var(--size-full); object-fit: cover; border-radius: var(--radius-md); }
.gallery-item-wide { flex: 16 1 var(--size-gallery-wide); }
.gallery-item-tall { flex: 8 1 var(--size-gallery-tall); }
.gallery-item-wide img { aspect-ratio: var(--ratio-wide); }
.gallery-item-tall img { aspect-ratio: var(--ratio-portrait); }
.gallery-spacer { flex: 1000 1 0; }

/* ---------- Contact ---------- */
.contact-card {
  display: flex;
  gap: var(--space-7);
  width: var(--size-full);
  max-width: var(--size-container);
  margin: calc(var(--size-overlap) * -1) auto 0;
  padding: var(--space-7);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.contact-form { flex: 3 1 0; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-aside { flex: 2 1 0; display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: flex; gap: var(--space-4); }
.form-field { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-label { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--ink); }
.field-input, .field-select, .field-textarea {
  width: var(--size-full);
  min-height: var(--size-field);
  padding: var(--space-3) var(--space-4);
  background: var(--mist);
  border: var(--size-hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-body);
}
.field-textarea { min-height: var(--size-textarea); resize: vertical; }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-field); padding: var(--space-2) var(--space-4); background: var(--mist); border: var(--size-hairline) solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--weight-medium); cursor: pointer; }
.choice-box { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--canopy); }
.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-direction: column; background: var(--canopy-deep); color: var(--on-canopy-muted); padding: calc(var(--size-pile-overlap) + var(--space-8)) 0 var(--space-6); }
.site-footer .container { gap: var(--space-7); }
/* Four columns: brand, pages, contact, newsletter. Two by two on tablets, stacked on phones. */
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-7) var(--space-8); }
.footer-brand { flex: 1.3 1 240px; display: flex; flex-direction: column; gap: var(--space-4); }
.footer-logo { height: var(--size-logo-footer); width: auto; align-self: flex-start; }
.footer-column { flex: 1 1 150px; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-newsletter { flex: 1.5 1 260px; gap: var(--space-3); }
.newsletter-row { display: flex; gap: var(--space-2); }
.newsletter-input { flex: 1 1 auto; min-width: 0; min-height: var(--size-field); padding: var(--space-3) var(--space-4); background: var(--canopy); color: var(--on-canopy); border: var(--size-hairline) solid var(--line-canopy); border-radius: var(--radius-md); font: inherit; font-size: var(--fs-small); }
.newsletter-input::placeholder { color: var(--on-canopy-muted); opacity: 0.8; }
.newsletter-input:focus-visible { outline: var(--size-focus) solid var(--focus-on-canopy); outline-offset: var(--size-hairline); }
.newsletter-input[aria-invalid="true"] { border-color: #f08a7e; }
.site .newsletter-button { flex: none; min-height: var(--size-field); padding: var(--space-3) var(--space-5); background: var(--sun); color: var(--canopy-deep); border: 0; border-radius: var(--radius-md); font: inherit; font-size: var(--fs-small); font-weight: var(--weight-bold); cursor: pointer; transition: background-color var(--dur-fast) ease; }
.site .newsletter-button:hover { background: var(--white); }
.site .newsletter-button:focus-visible { outline: var(--size-focus) solid var(--focus-on-canopy); outline-offset: var(--size-hairline); }
.newsletter-message { margin: 0; font-size: var(--fs-small); font-weight: var(--weight-semibold); }
.newsletter-message.is-notice { color: var(--sun); }
.newsletter-message.is-problem { color: #f6b1a8; }
.footer-heading { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--on-canopy); }
.site .footer-link { color: var(--on-canopy-muted); text-decoration: none; font-size: var(--fs-small); }
.site .footer-link:hover { color: var(--on-canopy); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--focus-on-canopy); }
.footer-text { font-size: var(--fs-small); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--size-hairline) solid var(--line-canopy); font-size: var(--fs-small); }

/* ================= Tablet: below 1024px ================= */
@media (max-width: 1023px) {
  .dest-grid .dest-tile, .tile-grid > .way-tile { flex-basis: calc((var(--size-full) - var(--space-5)) / 2); }
  .dest-layout { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .dest-glance { flex-basis: auto; position: static; }
  .container, .header-bar, .nav-mobile { padding-left: var(--space-5); padding-right: var(--space-5); }
  .nav-main { display: none; }
  .site-header .mega, .site-header.mega-open .mega { display: none; }
  .menu-toggle { display: inline-flex; }
  .section, .band { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .band { margin: 0 var(--space-4); }
  .hero-wrap { padding: 0 var(--space-4); }

  .head-split { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .head-split > *, .head-split .heading-section, .head-split .text-body { flex: 0 0 auto; }
  .planner-fields { flex-wrap: wrap; }
  .planner-fields .form-field { flex: 1 1 calc(var(--size-half) - var(--space-4)); }
  .planner-fields .button-primary { flex: 1 1 var(--size-full); }

  .feature-panel { gap: var(--space-4); }
  .card-place .text-body { font-size: var(--fs-small); }

  .split { gap: var(--space-6); align-items: stretch; }
  .photo-frame { height: var(--size-full); }
  .activity-track { gap: var(--space-3); }
  .way-label { padding: var(--space-4); }
  .note-row { gap: var(--space-3); }
  .note-row .card-tint { padding: var(--space-4); }

  .place-entry, .place-entry.is-reversed { gap: var(--space-6); }
  .place-media { flex-basis: calc(var(--size-third) + var(--space-6)); }
  .route-row { flex-wrap: wrap; }
  .route-stop { flex: 1 1 calc(var(--size-third) - var(--space-3)); }

  .contact-card { flex-direction: column; padding: var(--space-6); }
  .contact-aside { flex-direction: row; flex-wrap: wrap; }
  .contact-aside .card-tint { flex: 1 1 calc(var(--size-half) - var(--space-5)); }

  .gallery-item-wide { flex-basis: var(--size-gallery-wide-md); }
  .gallery-item-tall { flex-basis: var(--size-gallery-tall-md); }

  /* Tablet and phone: the photo sits at the top of the card and the words sit on green below it, so they never cover Meg. */
  .site .hero-card-top { align-items: flex-start; text-align: left; }
  .hero-card-top .hero-copy { align-items: flex-start; }
  .site .hero-card-top { min-height: 0; justify-content: flex-start; padding-top: calc(var(--size-hero-photo-pad) + var(--space-5)); padding-bottom: calc(var(--size-overlap-sm) + var(--space-7)); background-image: var(--hero-photo); background-color: var(--canopy); background-size: var(--size-full) auto; background-repeat: no-repeat; background-position: center top; }
  .site .hero-card-left { min-height: 0; justify-content: flex-start; padding-top: calc(var(--size-hero-photo-pad) + var(--space-5)); padding-bottom: var(--space-6); background-color: var(--canopy); background-size: var(--size-full) auto; background-repeat: no-repeat; background-position: center top; }
  .cta { flex-direction: column; align-items: flex-start; }
  .cta-actions { align-items: flex-start; }
  .footer-brand, .footer-newsletter, .footer-column { flex-basis: calc(var(--size-half) - var(--space-8)); }
}

/* ================= Phone: below 680px ================= */
@media (max-width: 679px) {
  .fact-bar { flex-direction: column; }
  .fact-item { flex-basis: auto; }
  .fact-item + .fact-item { border-left: 0; border-top: var(--size-hairline) solid rgba(20, 67, 47, 0.15); }
  .band .heading-section.heading-sun { font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem); }
  .photo-feature-caption { grid-area: 2 / 1; margin: var(--space-4) 0 0; padding: 0; background: none; }
  .photo-feature-caption .hand { color: var(--leaf); }
  .photo-feature-caption .text-body { color: var(--ink); }
  .dest-grid .dest-tile, .tile-grid > .way-tile { flex-basis: var(--size-full); }
  .popup { max-width: calc(var(--size-full) - var(--space-4)); max-height: calc(100vh - var(--space-4)); }
  .popup-card { flex-direction: column; }
  .popup-media { flex-basis: auto; }
  .site .popup-media img { min-height: 0; height: 240px; }
  .popup-body { padding: var(--space-5) var(--space-4) var(--space-5); }
  .popup-body .heading-section { padding-right: 0; }
  .container, .header-bar, .nav-mobile { padding-left: var(--space-4); padding-right: var(--space-4); }
  .container { gap: var(--space-6); }
  .brand-logo { height: var(--size-logo-sm); }
  .site .header-actions .button-primary { display: none; } /* phones: Write to Meg lives inside the menu */
  .header-actions { gap: var(--space-2); }
  .site .menu-toggle { min-height: 40px; padding: var(--space-2) var(--space-3); }
  .band { margin: 0 var(--space-2); border-radius: var(--radius-lg); }
  .hero-wrap { padding: 0 var(--space-2); }

  .hero-card { min-height: var(--size-hero-min-sm); padding: var(--space-8) var(--space-4) calc(var(--size-overlap-sm) + var(--space-7)); border-radius: var(--radius-lg); }
  .hero-card-page { min-height: var(--size-intro-min); }
  .planner, .contact-card { margin-top: calc(var(--size-overlap-sm) * -1); padding: var(--space-5); }
  .tab-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .site .tab { flex: 0 0 auto; }
  .planner-fields { flex-direction: column; align-items: stretch; }

  /* Collage on phones: a swipeable row. One photo sits in the middle, its neighbours peek in at the sides.
     The side padding lets the first and last photos centre too; site.js starts on the middle photo. */
  .collage { justify-content: flex-start; align-items: center; gap: var(--space-3); margin: 0 calc(var(--space-4) * -1); padding: var(--space-3) 14vw var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .collage::-webkit-scrollbar { display: none; }
  .collage-photo, .collage-mid { flex: 0 0 72vw; margin: 0; padding: var(--space-1); scroll-snap-align: center; }
  .collage-left, .collage-right, .collage-left:hover, .collage-right:hover { transform: none; margin: 0; }

  .feature-panel { flex-direction: column; gap: var(--space-5); }
  .feature { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-4); }
  .feature-copy { display: flex; flex-direction: column; gap: var(--space-1); }

  /* Places become a swipe row with the next card peeking in. */

  .split { flex-direction: column-reverse; }
  .photo-frame { aspect-ratio: var(--ratio-wide); height: auto; }
  .tint-row { flex-direction: column; }
  .faq { flex-direction: column; gap: var(--space-6); }
  .site .faq-photo img { min-height: 0; aspect-ratio: var(--ratio-wide); object-position: 50% 45%; }
  .faq-answer { padding-right: 0; }

  .panel { padding: var(--space-7) var(--space-4); border-radius: var(--radius-lg); }
  .way-tile { flex-basis: 72%; }
  .note-row { flex-direction: column; }

  /* Phones: all seven photos in a row you swipe sideways, snapping photo by photo. The next photo peeks in at the edge, so it is clear there is more. */
  .pile { justify-content: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .pile::-webkit-scrollbar { display: none; }
  .pile-photo { flex: 0 0 44%; margin: 0; scroll-snap-align: start; }
  .pile-photo:nth-child(even) { margin-bottom: var(--space-4); }
  .pile::after { content: ""; flex: 0 0 var(--space-1); } /* keeps the last photo off the screen edge */

  .list-pair { flex-direction: column; }
  .place-entry, .place-entry.is-reversed { flex-direction: column; align-items: stretch; }
  .place-media { flex-basis: auto; }
  .place-media img { aspect-ratio: var(--ratio-wide); border-radius: var(--radius-lg); }
  .route-row { flex-direction: column; }
  .route-stop { flex-direction: row; align-items: baseline; gap: var(--space-4); padding: var(--space-4); }

  .gallery { gap: var(--space-3); }
  .gallery-item-wide { flex-basis: var(--size-full); }
  .gallery-item-tall { flex-basis: var(--size-gallery-tall-sm); }
  .gallery-spacer { display: none; }

  .form-row { flex-direction: column; }
  .form-foot .button-primary, .cta-actions .button-primary { width: var(--size-full); }
  .cta-actions { align-self: stretch; }
  .contact-aside { flex-direction: column; flex-wrap: nowrap; }
  .contact-aside .card-tint { flex: 0 0 auto; }
  .footer-top { flex-direction: column; gap: var(--space-6); }
  .footer-brand, .footer-newsletter, .footer-column { flex-basis: auto; }
}

/* =====================================================================
   v3.1: modern finish. Glass header, one hero entrance, card lift and photo zoom,
   pressed states, working filters, seasons strip, skip link.
   All motion uses the timing tokens and stops under prefers-reduced-motion.
   ===================================================================== */

/* Skip link: in normal flow, zero height until focused. */
.site .skip-link { display: block; height: 0; overflow: hidden; background: var(--canopy); color: var(--on-canopy); font-weight: var(--weight-semibold); text-align: center; }
.site .skip-link:focus { height: auto; padding: var(--space-3); }
.page:focus { outline: none; }

/* Glass header */
.site-header { background: var(--mist-glass); backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header)); border-bottom: var(--size-hairline) solid var(--line); }

/* Shared transitions */
.site .button-primary, .site .button-sun, .site .button-light, .site .nav-link, .site .tab, .filter-chip, .choice-chip {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.site .button-primary:active, .site .button-sun:active, .site .button-light:active, .site .tab:active, .filter-chip:active, .choice-chip:active { transform: scale(var(--press-scale)); }

/* Cards lift; photos inside them zoom within their own frame */
.card-place, .card-tint, .gallery-item, .route-stop { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card-place:hover, .note-row .card-tint:hover { transform: translateY(calc(var(--size-lift) * -1)); box-shadow: var(--shadow-card); }
.route-stop:hover { transform: translateY(calc(var(--size-lift) * -1)); }
.card-place img, .note-row .card-tint img, .gallery-item img, .place-media img { transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.card-place:hover img, .note-row .card-tint:hover img { transform: scale(var(--zoom-scale)); }
.gallery-item:hover img { transform: scale(var(--zoom-scale)); }
.media { display: flex; overflow: hidden; border-radius: var(--radius-md); }
.media img { border-radius: 0; }
.collage-photo { transition: transform var(--dur-base) var(--ease-out); }
.collage-left:hover { transform: rotate(var(--tilt-none)); }
.collage-right:hover { transform: rotate(var(--tilt-none)); }

/* One entrance per page: hero copy, then planner card, rise into place. */
@keyframes twm-rise { from { opacity: 0; transform: translateY(var(--size-enter-shift)); } to { opacity: 1; transform: none; } }
.is-entering .hero-copy > * { animation: twm-rise var(--dur-enter) var(--ease-out) both; }
.is-entering .hero-copy > *:nth-child(2) { animation-delay: var(--delay-step); }
.is-entering .hero-copy > *:nth-child(3) { animation-delay: calc(var(--delay-step) * 2); }
.is-entering .planner, .is-entering .contact-card { animation: twm-rise var(--dur-enter) var(--ease-out) both; animation-delay: calc(var(--delay-step) * 3); }

/* Gallery filters */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  min-height: var(--size-field);
  padding: var(--space-2) var(--space-5);
  background: var(--white);
  color: var(--ink);
  border: var(--size-hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--canopy); }
.filter-chip.is-active { background: var(--canopy); border-color: var(--canopy); color: var(--on-canopy); }
.gallery-item[hidden], .news-card[hidden] { display: none; }

/* Seasons strip */
.season-panel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--white); border-radius: var(--radius-lg); }
.season-strip { display: flex; align-items: flex-end; gap: var(--space-2); }
.season-month { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.season-bar { width: var(--size-full); height: var(--size-season-bar-low); border-radius: var(--radius-sm); border: var(--size-stroke) solid var(--leaf); background: var(--clear); }
.season-month.is-dry .season-bar { height: var(--size-season-bar); background: var(--sun); border-color: var(--sun); }
.season-name { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--canopy); font-size: var(--fs-small); }
.season-word { font-size: var(--fs-small); color: var(--ink-muted); }
.season-initial { display: none; }
.season-key { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--fs-small); color: var(--ink); }
.season-key-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.season-swatch { width: var(--size-swatch); height: var(--size-swatch); border-radius: var(--radius-pill); border: var(--size-stroke) solid var(--leaf); }
.season-swatch.is-dry { background: var(--sun); border-color: var(--sun); }

@media (max-width: 679px) {
  .season-panel { padding: var(--space-4); }
  .season-strip { gap: var(--space-1); }
  .season-word { display: none; }
  /* Single letters on phones; the full month name stays for screen readers. */
  .season-name { width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .season-initial { display: block; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--fs-small); color: var(--canopy); }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4) var(--space-1); }
  .filter-chip { flex: 0 0 auto; }
}

/* Touch screens: no hover lift that sticks after a tap. */
@media (hover: none) {
  .dest-more { max-height: none; margin-top: var(--space-4); opacity: 1; } /* touch screens cannot hover, so always show Read more */
  .way-label-sub { max-height: none; margin-top: var(--space-2); opacity: 1; } /* touch screens cannot hover, so show the summary */
  .card-place:hover, .note-row .card-tint:hover, .route-stop:hover { transform: none; box-shadow: none; }
  .card-place:hover img, .note-row .card-tint:hover img, .gallery-item:hover img { transform: none; }
}

/* Reduced motion: everything lands in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *:hover { animation: none; transition: none; }
}

/* =====================================================================
   PHP build additions: real forms, validation states, success message.
   ===================================================================== */

/* Hidden from sight, still read by screen readers. Kept in flow (no absolute positioning). */
.visually-hidden { width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }

.site fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.site legend { padding: 0; }

/* Planner tabs are real radio buttons styled as tabs, so the form works without JavaScript. */
.site .tab { display: inline-flex; align-items: center; }
.tab-input { width: var(--size-hairline); height: var(--size-hairline); margin: 0; overflow: hidden; clip-path: inset(50%); }
.site .tab:has(.tab-input:checked) { color: var(--canopy); border-bottom-color: var(--sun); }
.site .tab:has(.tab-input:focus-visible) { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); }

/* Field states */
.field-required { font-weight: var(--weight-regular); color: var(--ink-muted); }
.field-error { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--danger); }
.form-field.has-error .field-input, .form-field.has-error .field-select, .form-field.has-error .field-textarea { border-color: var(--danger); border-width: var(--size-stroke); }
.error-summary { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--danger-light); border: var(--size-stroke) solid var(--danger); border-radius: var(--radius-md); }
.error-summary:focus { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); }

/* Success state replaces the form */
.form-success { flex: 3 1 0; display: flex; align-items: flex-start; gap: var(--space-5); }
.form-success:focus { outline: none; }
.stack-tight { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 679px) { .form-success { flex-direction: column; } }

/* Very narrow phones: keep the logo full size; the menu button shows only its icon (label still read aloud). */
.brand-link { flex: none; }
@media (max-width: 359px) {
  .site .menu-toggle .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Phones: while the menu is open, its own Write to Meg button is the one to use, so the top-bar one hides. */
@media (max-width: 1023px) {
  .site-header.is-open .header-actions .button-primary { display: none; }
}

/* ---------- Itinerary page ----------
   Days run down a dashed route line (like the road in the logo), each with a golden stop, a label, a title,
   and the day's photo above its text so you can picture it. */
.itin-intro { display: flex; flex-direction: column; gap: var(--space-3); }
.itin-intro .text-body { max-width: none; font-size: var(--fs-lead); }
.route-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.route-day { position: relative; display: flex; gap: var(--space-5); padding-bottom: var(--space-7); scroll-margin-top: var(--space-10); }
.route-day::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 0; border-left: 2px dashed var(--line-strong); }
.route-day:last-child { padding-bottom: 0; }
.route-day:last-child::before { display: none; }
.route-dot { flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: var(--radius-pill); background: var(--sun); box-shadow: 0 0 0 5px var(--sun-light); }
.route-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.route-label { align-self: flex-start; padding: 2px var(--space-3); background: var(--canopy); color: var(--on-canopy); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--weight-semibold); }
.route-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--canopy); }
.route-text { display: flex; flex-direction: column; gap: var(--space-3); }
.route-text .text-body { max-width: none; }
.site .route-photo { margin: 0 0 var(--space-2); overflow: hidden; border-radius: var(--radius-lg); }
.site .route-photo img { width: var(--size-full); aspect-ratio: 16 / 9; object-fit: cover; }
.itin-price { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--leaf-light); border-radius: var(--radius-lg); scroll-margin-top: var(--space-10); }
.itin-price .heading-section { font-size: var(--fs-h3); }
/* Price cards: the group price leads in canopy green with a gold amount; the solo price sits beside it in white. */
.price-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.price-card { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--white); border-radius: var(--radius-md); }
.price-card.is-main { background: var(--canopy); color: var(--on-canopy); }
.price-who { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }
.price-card.is-main .price-who { color: var(--on-canopy-muted); }
.price-amount { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-heading); color: var(--canopy); }
.price-card.is-main .price-amount { color: var(--sun); }
.price-per { font-size: var(--fs-small); color: var(--ink-muted); }
.price-card.is-main .price-per { color: var(--on-canopy-muted); }
.price-extra { margin: 0; font-size: var(--fs-lead); color: var(--ink); }
.price-extra-amount { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--canopy); padding: 2px var(--space-3); background: var(--sun-light); border-radius: var(--radius-pill); }
.itin-price .text-body { max-width: none; }
.itin-closing { display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-5); border-left: 4px solid var(--sun); }
.itin-closing .text-body { max-width: none; }
@media (max-width: 679px) {
  .route-day { gap: var(--space-4); }
  .itin-price { padding: var(--space-5) var(--space-4); }
}
/* A day's own extra cost, as a gold tag beside its label. */
.route-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.route-price { padding: 2px var(--space-3); background: var(--sun); color: var(--canopy-deep); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--weight-bold); }

/* A taller page hero (itinerary), framed so the people at the top of the photo stay in view above the text. */
.site .hero-card-page.hero-card-tall { min-height: 560px; background-position: center 22%; }
@media (max-width: 679px) { .site .hero-card-page.hero-card-tall { min-height: 480px; justify-content: flex-end; padding-bottom: var(--space-7); background-position: 40% 0; } } /* text below the faces on phones */

/* ---------- News & Tips ----------
   Cards link to articles on other websites: photo on top, website and date, title, excerpt, "Read the article". */
.news-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.news-card { flex: 0 1 calc((var(--size-full) - var(--space-5) * 2) / 3); display: flex; min-width: 0; }
.news-grid-two .news-card { flex-basis: calc((var(--size-full) - var(--space-5)) / 2); }
.site .news-link { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: var(--size-hairline) solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.site .news-link:hover { transform: translateY(calc(var(--size-lift) * -1)); box-shadow: var(--shadow-card); }
.site .news-link:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); }
.news-media { display: flex; overflow: hidden; }
.site .news-media img { width: var(--size-full); aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--dur-enter) var(--ease-out); }
.site .news-link:hover .news-media img { transform: scale(var(--zoom-scale)); }
.news-media-empty { align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--leaf-light); color: var(--leaf); }
.news-media-empty .icon { width: 48px; height: 48px; }
.news-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.news-meta { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }
.news-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--canopy); }
.news-excerpt { font-size: var(--fs-small); line-height: var(--leading-body); color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.news-more { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); text-decoration: underline; text-underline-offset: var(--space-1); }
.news-signup { margin-top: var(--space-8); max-width: var(--size-hero-text); }
@media (max-width: 1023px) { .news-card, .news-grid-two .news-card { flex-basis: calc((var(--size-full) - var(--space-5)) / 2); } }
@media (max-width: 679px) { .news-card, .news-grid-two .news-card { flex-basis: var(--size-full); } }
@media (hover: none) { .site .news-link:hover { transform: none; box-shadow: none; } }
.news-more .visually-hidden { position: absolute; } /* keep the hidden "(opens … in a new tab)" from wrapping the link */
.news-link { position: relative; }

/* One of Meg's own articles: a readable single column. */
.container.article { max-width: calc(760px + var(--space-6) * 2); gap: var(--space-6); }
.article-head { display: flex; flex-direction: column; gap: var(--space-3); }
.article-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); color: var(--canopy); text-wrap: balance; }
.article-lead { max-width: none; color: var(--ink-muted); }
.site .article-image { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.site .article-image img { width: var(--size-full); aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { display: flex; flex-direction: column; gap: var(--space-4); }
.article-body .text-body { max-width: none; font-size: 1.125rem; line-height: 1.75; }
.article-subheading { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--canopy); }
.section.dest-more-news { padding-top: 0; }
/* Bot trap: out of sight and out of the layout (no gap in flex forms). */
.trap-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.route-price-note { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* About Meg, "What surprises people most": the FAQ accordion on a light panel. One photo on the left
   changes to match the open question (a video plays there instead when Meg has uploaded one). */
.surprise-media { flex: 0 0 42%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.surprise-frame { grid-area: 1 / 1; display: flex; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--canopy); animation: surprise-in var(--dur-base) var(--ease-out); }
.surprise-frame[hidden] { display: none; }
.site .surprise-frame img, .surprise-frame video { width: var(--size-full); height: var(--size-full); min-height: 480px; object-fit: cover; }
.surprise-frame video { background: #000; }
@keyframes surprise-in { from { opacity: 0; } to { opacity: 1; } }
.surprise-faq .faq-list { border-top-color: var(--line); }
.surprise-faq .faq-item { border-bottom-color: var(--line); }
.surprise-faq .heading-card { color: var(--canopy); }
.surprise-faq .faq-question:hover .heading-card, .surprise-faq .faq-item[open] .heading-card { color: var(--canopy); }
.surprise-faq .faq-item[open] .faq-question .heading-card { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.surprise-faq .faq-sign { border-color: var(--line-strong); color: var(--canopy); }
.surprise-faq .faq-question:hover .faq-sign { border-color: var(--sun); background: var(--sun-light); }
.surprise-faq .faq-question:focus-visible { outline-color: var(--focus); }
.surprise-faq .faq-answer { display: flex; flex-direction: column; gap: var(--space-3); }
.surprise-video-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--leaf); }
.surprise-video-note .icon { width: 18px; height: 18px; color: var(--sun); }
@media (max-width: 679px) {
  .surprise-media { flex-basis: auto; }
  .site .surprise-frame img, .surprise-frame video { min-height: 0; height: auto; aspect-ratio: var(--ratio-wide); }
}

/* Destinations, "What a first trip often looks like": the optional extra days stand apart with a dashed gold edge. */
.route-days { white-space: nowrap; }
.route-stop.is-optional { background: transparent; border: var(--size-stroke) dashed var(--sun); }
.route-tag { align-self: flex-start; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--sun); color: var(--canopy); font-size: var(--fs-small); font-weight: var(--weight-semibold); }
@media (max-width: 679px) { .route-stop.is-optional { flex-wrap: wrap; } }

/* "When to come": months with discounted permits get a green tag badge in their bar, plus a note under the key. */
.season-bar { display: flex; align-items: center; justify-content: center; }
.season-deal { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--canopy); color: var(--sun); }
.season-deal .icon { width: 14px; height: 14px; }
.season-month.is-deal .season-bar { border-color: var(--canopy); background: var(--leaf-light); }
.season-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--leaf-light); color: var(--canopy); font-size: var(--fs-small); line-height: var(--leading-snug); }
.season-note-label { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--canopy); color: var(--on-canopy); font-weight: var(--weight-semibold); }
@media (max-width: 679px) { .season-deal { width: 18px; height: 18px; } .season-deal .icon { width: 11px; height: 11px; } }
/* The optional extra days sit in their own row under the main route. */
.route-extra { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.route-extra-title { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--on-canopy); font-weight: var(--weight-semibold); }
.route-extra .route-row { max-width: 50%; }
@media (max-width: 1023px) { .route-extra .route-row { max-width: none; } }

/* Floating WhatsApp button (bottom right, every public page). Hovering or keyboard focus slides out "Talk to Meg via WhatsApp";
   on touch screens the round button is enough, since tapping it opens WhatsApp straight away. */
.whatsapp-float {
  position: fixed; z-index: 20;
  right: max(var(--space-5), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.whatsapp-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--radius-pill);
  background: #25D366; color: var(--white);
  box-shadow: 0 8px 24px rgba(13, 46, 32, 0.28), 0 2px 6px rgba(13, 46, 32, 0.18);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
.whatsapp-icon svg { width: 32px; height: 32px; fill: currentColor; }
.whatsapp-tip {
  order: -1; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--canopy); color: var(--white); font-size: var(--fs-small); font-weight: var(--weight-semibold); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(13, 46, 32, 0.22);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover .whatsapp-icon, .whatsapp-float:focus-visible .whatsapp-icon { background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13, 46, 32, 0.32), 0 3px 8px rgba(13, 46, 32, 0.2); }
.whatsapp-float:hover .whatsapp-tip, .whatsapp-float:focus-visible .whatsapp-tip { opacity: 1; transform: none; }
.whatsapp-float:active .whatsapp-icon { transform: scale(0.95); }
.whatsapp-float:focus-visible, .site .whatsapp-float:focus-visible { outline: none; }
.whatsapp-float:focus-visible .whatsapp-icon { outline: var(--size-focus) solid var(--sun); outline-offset: 3px; }
.site-footer { padding-bottom: calc(var(--space-6) + 76px); } /* room so the button never covers "Back to top" */
@media (max-width: 679px) { .whatsapp-icon { width: 56px; height: 56px; } .whatsapp-icon svg { width: 30px; height: 30px; } }
@media (hover: none) { .whatsapp-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-tip, .whatsapp-icon { transition: none; } .whatsapp-tip { transform: none; } .whatsapp-float:hover .whatsapp-icon { transform: none; } }
@media print { .whatsapp-float { display: none; } }
/* "What surprises people most" on smaller screens: taller photos and videos (portrait on phones) instead of a short wide strip. */
@media (min-width: 680px) and (max-width: 1023px) { .site .surprise-frame img, .surprise-frame video { min-height: 420px; } }
@media (max-width: 679px) { .site .surprise-frame img, .surprise-frame video { aspect-ratio: 4 / 5; max-height: 70vh; } }

/* Phones, About Meg: less air between the "I know your questions" text, the signature and the group photo below it. */
@media (max-width: 679px) {
  .split-text { gap: var(--space-4); }
  .section.section-tight { padding-top: 0; }
  .section:has(+ .section-tight) { padding-bottom: var(--space-6); }
  .photo-feature-caption { align-items: flex-start; text-align: left; }
}