/* =========================================================
   Maple Fun Tours — 2026 Website Demo
   Brand: Canadian red & white, nature-inspired
   ========================================================= */

/* Smooth cross-document (multi-page) navigation: Chromium cross-fades between
   full page loads instead of a hard white flash (Chrome/Edge 126+; graceful
   no-op elsewhere). Pairs with the hero prefetch in partials/hero-prefetch.php. */
@view-transition { navigation: auto; }

/* ---------- Design Tokens ---------- */
:root {
  /* Canadian flag palette */
  --c-red: #D52B1E;
  --c-red-dark: #A91D0F;
  --c-red-light: #E84A3F;
  --c-red-faint: #FDF2F1;

  /* Neutrals */
  --c-white: #FFFFFF;
  --c-cream: #FAF7F2;
  --c-bg-alt: #F8F6F1;
  --c-ink: #1A1A1A;
  --c-text: #2C2C2C;
  --c-muted: #6B7280;
  --c-line: #E5E7EB;
  --c-line-soft: #F0EEE9;

  /* Accents (nature) */
  --c-forest: #2D5016;
  --c-lake: #1E3A8A;
  --c-gold: #B7791F;

  /* Typography */
  --ff-serif: "Playfair Display", "Noto Serif TC", "Noto Serif SC", "Noto Serif JP", Georgia, serif;
  --ff-sans: "Inter", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing & radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* Layout */
  --container: 1280px;
  --nav-h: 80px;
  --nav-safe-top: env(safe-area-inset-top, 0px);
}

/* When the page is Japanese, lead with the JP fonts. Two reasons:
   1. Glyph forms — kanji render in their Japanese shapes (e.g. 令, 直, 今, 海,
      the bottom-left 。 period) instead of the Chinese forms. CJK share Unicode
      codepoints (Han unification), so an SC/TC-first stack would draw the
      Chinese forms.
   2. Baseline alignment — a mixed heading like "カナダ大地で44年" otherwise draws
      the digits with the Latin font (Inter/Playfair) and the kanji with Noto,
      whose differing vertical metrics make the numbers sit low. Leading with
      Noto Serif/Sans JP means digits AND kanji come from one font, so they
      share a baseline. Noto carries full Latin, so English/numbers still look
      clean; Playfair/Inter remain as fallbacks for pure-Latin runs. */
html[lang="ja"] {
  --ff-serif: "Noto Serif JP", "Playfair Display", Georgia, serif;
  --ff-sans: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* When the page is Simplified Chinese, lead with the SC fonts. Without this,
   the default stack lists Noto ... TC (Traditional) *before* SC, so Simplified
   text falls through to the TC build — which draws full-width punctuation
   (。，、) CENTERED (Taiwan convention) and uses Traditional glyph forms.
   Noto ... SC draws that punctuation at the LOWER-LEFT (mainland GB convention)
   and uses Simplified glyph forms. Latin/Playfair/Inter follow as fallbacks
   for pure-Latin runs; Noto carries full Latin so digits stay baseline-aligned
   (same reasoning as the [lang="ja"] block above).
   NOTE: zh-TW is deliberately left on the default TC stack for now. */
html[lang="zh-CN"] {
  --ff-serif: "Noto Serif SC", "Playfair Display", Georgia, serif;
  --ff-sans: "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-white);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--c-red); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 1rem;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: clamp(60px, 8vw, 120px) 0; }
.section--alt { background: var(--c-bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-head p { color: var(--c-muted); margin-top: 1rem; font-size: 1.05rem; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Grow the nav by the device's safe-area-inset-top so the iOS status bar /
     notch sits ON the nav's background instead of OVER the logo. env() falls
     back to 0 on browsers/devices without a safe area, so desktop is unaffected. */
  height: calc(var(--nav-h) + var(--nav-safe-top));
  padding-top: var(--nav-safe-top);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line-soft);
  z-index: 1000;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Pages with a full-bleed hero (body.has-hero) start with a transparent
   nav so the image shows through, then fade back to opaque white once
   the user scrolls past the hero (.nav.is-scrolled, toggled by main.js).
   Text + logo go white while transparent so they're readable against
   the hero's darker bottom-gradient. */
body.has-hero .nav:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}
body.has-hero .nav:not(.is-scrolled) .nav__logo,
body.has-hero .nav:not(.is-scrolled) .nav__logo small,
body.has-hero .nav:not(.is-scrolled) .nav__links > a,
body.has-hero .nav:not(.is-scrolled) .nav__item > a,
body.has-hero .nav:not(.is-scrolled) .lang__btn {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
}
body.has-hero .nav:not(.is-scrolled) .lang__btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
}
body.has-hero .nav:not(.is-scrolled) .nav__links a.active,
body.has-hero .nav:not(.is-scrolled) .nav__links a.nav__link--active {
  /* Keep brand red even on transparent — it stays legible and on-brand. */
  color: var(--c-red);
}
/* Brand-coloured "Request A Quote" pill stays visible on its own, but
   add a subtle outline when on a dark hero so it doesn't float weirdly. */
body.has-hero .nav:not(.is-scrolled) .nav__cta {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.nav__inner {
  /* Fix at --nav-h instead of 100% so the safe-area padding above stays as
     "system status bar" zone and the interactive content sits BELOW it. */
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  /* Honor left/right safe area too — important for landscape on notched phones
     where the notch eats horizontal space. max() keeps the normal 24px minimum. */
  padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-ink);
  flex-shrink: 0;
}
.nav__logo-mark {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav__logo small {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.nav__links {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: nowrap;
}
.nav__links > a,
.nav__item > a {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--c-text);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  display: inline-block;
}

/* CTA-style nav item (Plan Your Trip) */
.nav__cta {
  padding: 9px 18px !important;
  background: var(--c-red);
  color: white !important;
  border-radius: var(--r-md);
  font-weight: 600 !important;
  transition: background 0.2s ease;
}
.nav__cta:hover {
  background: var(--c-red-dark) !important;
  color: white !important;
}
.nav__cta::after { display: none !important; }

/* Nav dropdowns */
.nav__item {
  position: relative;
  display: inline-block;
}
.nav__item > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 3px;
  vertical-align: middle;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav__item:hover > a::after {
  transform: rotate(225deg);
  margin-bottom: -1px;
  opacity: 1;
}
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 200px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 100;
  margin-top: 4px;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: white;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.nav__dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--c-text);
  white-space: nowrap;
  position: relative;
}
.nav__dropdown a:hover {
  background: var(--c-red-faint);
  color: var(--c-red);
}
.nav__dropdown a::after { display: none !important; }

/* Social icons in nav */
.nav__socials {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-muted);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.nav__social:hover {
  color: var(--c-red);
  border-color: var(--c-red);
}
.nav__social svg {
  width: 14px;
  height: 14px;
}
/* Languages with longer labels (Japanese / Vietnamese) need tighter nav */
:lang(ja) .nav__links,
:lang(vi) .nav__links {
  gap: 16px;
}
/* Visual-size parity across scripts: CJK (Japanese / Chinese) render smaller than
   Latin at the same font-size, so bump them up; Vietnamese has longer Latin labels
   so keep it a touch smaller. Goal: all languages look about the same in the nav. */
:lang(ja) .nav__links a,
:lang(zh) .nav__links a {
  font-size: 1.1rem;
  letter-spacing: 0;
}
:lang(vi) .nav__links a {
  font-size: 1.1rem;
  letter-spacing: 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--c-red);
  transition: width 0.25s ease;
}
.nav__links a:hover::after,
.nav__links a.active::after,
.nav__links a.nav__link--active::after { width: 100%; }
.nav__links a.active,
.nav__links a.nav__link--active { color: var(--c-red); }

/* Quote page — preselected-tour banner */
.quote-preselect {
  background: var(--c-bg-alt, #f6f3ee);
  border-left: 3px solid var(--c-red, #D52B1E);
  padding: 14px 20px;
  border-radius: 4px;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.quote-preselect strong { color: var(--c-text, #1a1a1a); }
.quote-preselect__clear {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--c-muted, #888);
  text-decoration: underline;
}
.form__required { color: var(--c-red, #D52B1E); }

/* Checklist (about-fleet bullets) */
.checklist {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}
.checklist li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 2px;
  background: var(--c-red, #D52B1E);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-ink);
  margin: 5px auto;
  transition: all 0.3s ease;
}

/* Language switcher */
.lang {
  position: relative;
}
.lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--c-text);
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: white;
  transition: border-color 0.2s ease;
}
.lang__btn:hover { border-color: var(--c-red); }
.lang__btn svg { width: 12px; transition: transform 0.2s ease; }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}
.lang.open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang.open .lang__btn svg { transform: rotate(180deg); }
.lang__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--c-text);
  border-radius: var(--r-sm);
  transition: background 0.15s ease;
}
.lang__menu button:hover { background: var(--c-red-faint); color: var(--c-red); }
.lang__menu button.active { background: var(--c-red); color: white; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--r-md);
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
  letter-spacing: 0.02em;
}
.btn--primary {
  background: var(--c-red);
  color: white;
}
.btn--primary:hover {
  background: var(--c-red-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
.btn--white {
  background: white;
  color: var(--c-ink);
}
.btn--white:hover {
  background: var(--c-red);
  color: white;
}
.btn--outline-white {
  border-color: rgba(255,255,255,0.4);
  color: white;
}
.btn--outline-white:hover {
  background: white;
  color: var(--c-red);
  border-color: white;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
  margin-top: 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.96) contrast(1.02);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Lighter overall, but keep a stronger floor at the bottom so the
     white CTA buttons + "scroll" link stay legible against the image. */
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.55) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  padding-top: var(--nav-h);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 24px;
  opacity: 0.9;
}
.hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--c-red);
}
.hero h1 {
  color: white;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 600;
  line-height: 1.1;
  max-width: 900px;
  margin-bottom: 24px;
}
/* Japanese hero title is a fixed set phrase ("四季を巡る、感動のカナダへ") — keep it on
   ONE line. The 900px clamp forced a wrap even though it fits; and the big rem floor
   in the shared clamp would overflow on phones. Size it off the viewport (no floor,
   capped on desktop) so the whole phrase stays on a single line at every width. */
:lang(ja) .hero h1 {
  white-space: nowrap;
  max-width: none;
  font-size: min(4.8rem, 5.4vw);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  max-width: 600px;
  margin-bottom: 40px;
  opacity: 0.92;
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bounce 2.5s ease-in-out infinite;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background: white;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* Hero variant — interior pages */
.hero--inner {
  min-height: 60vh;
}
.hero--inner h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }

/* ---------- Stats bar ---------- */
.stats {
  background: var(--c-ink);
  color: white;
  padding: 60px 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.stats__num {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 600;
  color: var(--c-red-light);
  line-height: 1;
  margin-bottom: 8px;
}
.stats__label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Seasons grid ---------- */
.seasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.season-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  cursor: pointer;
}
.season-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.season-card:hover img { transform: scale(1.06); }
.season-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.75) 100%);
}
.season-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px;
  color: white;
}
.season-card__body h3 {
  color: white;
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.season-card__body p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 12px;
}
.season-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Tour grid ---------- */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tour-card {
  background: white;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.tour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.tour-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}
.tour-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tour-card:hover .tour-card__img img { transform: scale(1.05); }
.tour-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--c-red);
  color: white;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
}
.tour-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tour-card__meta {
  font-size: 0.8rem;
  color: var(--c-muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.tour-card__title {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 12px;
  line-height: 1.3;
}
.tour-card__desc {
  font-size: 0.9rem;
  color: var(--c-muted);
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}
.tour-card__cta {
  color: var(--c-red);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Service grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-card {
  padding: 40px 32px;
  background: white;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  transition: all 0.3s ease;
}
.service-card:hover {
  border-color: var(--c-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-card__icon {
  width: 56px;
  height: 56px;
  background: var(--c-red-faint);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-red);
  font-size: 1.6rem;
  margin-bottom: 24px;
}
.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.service-card p {
  font-size: 0.92rem;
  color: var(--c-muted);
}

/* ---------- Province cards ---------- */
.provinces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.province-card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.province-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.province-card:hover img { transform: scale(1.04); }
.province-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.province-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px;
  color: white;
}
.province-card__body h3 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.province-card__body p {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 16px;
}

/* ---------- About snippet ---------- */
.about-snippet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-snippet__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.about-snippet__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-snippet__body p {
  font-size: 1.05rem;
  color: var(--c-text);
  margin-bottom: 1.25rem;
  line-height: 1.75;
}
.about-snippet__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line);
}
.about-snippet__stat strong {
  display: block;
  font-family: var(--ff-serif);
  font-size: 2rem;
  color: var(--c-red);
  line-height: 1;
  margin-bottom: 6px;
}
.about-snippet__stat span {
  font-size: 0.85rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Clients strip ---------- */
.clients {
  background: var(--c-bg-alt);
  padding: 60px 0;
  text-align: center;
}
.clients__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 32px;
}
.clients__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  opacity: 0.55;
}
.clients__logos span {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: 0.05em;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  padding: 100px 0;
  color: white;
  text-align: center;
  overflow: hidden;
}
.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}
.cta-banner__content {
  position: relative;
  z-index: 1;
}
.cta-banner h2 {
  color: white;
  margin-bottom: 16px;
}
.cta-banner p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 32px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer__brand h4 {
  color: white;
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.footer__brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 24px;
}
.footer__col h5 {
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__col ul li {
  margin-bottom: 12px;
}
.footer__col a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--c-red-light); }
.footer__office {
  margin-bottom: 16px;
}
.footer__office strong {
  display: block;
  color: white;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.footer__office span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
}
.footer__legal {
  display: flex;
  gap: 24px;
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--c-bg-alt);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  text-align: center;
}
.page-header h1 {
  margin-bottom: 16px;
}
.page-header p {
  color: var(--c-muted);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
}

/* Hero variant — real Canadian scenery behind the page title (people-free). */
.page-header--hero {
  position: relative;
  /* Taller, near-full-screen banner so the photo reads as a proper hero (not a
     thin strip). min-height lets the text sit centred over the image; users
     scroll past it to reach the content below. */
  min-height: 103vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1a2430;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Keep the photo clear — only a light scrim, legibility comes from text-shadow. */
.page-header--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 35, 0.10) 0%, rgba(15, 23, 35, 0.30) 100%);
}
.page-header--hero .container {
  position: relative;
  z-index: 1;
}
.page-header--hero h1 {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.page-header--hero p {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ---------- Content blocks (interior) ---------- */
.prose {
  max-width: 800px;
  margin: 0 auto;
}
.prose p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--c-text);
}
.prose h2 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
.prose ul {
  margin-bottom: 1.5rem;
  padding-left: 0;
}
.prose ul li {
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
  font-size: 1rem;
  line-height: 1.7;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 2px;
  background: var(--c-red);
}

/* ---------- Office grid ---------- */
.offices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.office-card {
  padding: 36px;
  background: white;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  transition: border-color 0.2s ease;
}
.office-card:hover { border-color: var(--c-red); }
.office-card h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.office-card__sub {
  font-size: 0.8rem;
  color: var(--c-red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.office-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.office-card__row {
  display: flex;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--c-text);
  line-height: 1.5;
}
.office-card__row strong {
  color: var(--c-muted);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 60px;
  padding-top: 2px;
}

/* ---------- Form ---------- */
.form {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form__field {
  display: flex;
  flex-direction: column;
}
.form__field--full { grid-column: 1 / -1; }
.form__field label {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.form__field input,
.form__field select,
.form__field textarea {
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-text);
  background: white;
  transition: border-color 0.2s ease;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--c-red);
}
.form__field textarea { resize: vertical; min-height: 120px; }
.form__submit { grid-column: 1 / -1; text-align: center; margin-top: 8px; }
.form__status {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.form__status[data-kind="ok"]  { color: #1f7a4d; }
.form__status[data-kind="err"] { color: var(--c-red, #D52B1E); }

/* ---------- Filter pills (tours) ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 56px;
}
.filter-pill {
  padding: 10px 20px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  background: white;
  color: var(--c-text);
  transition: all 0.2s ease;
}
.filter-pill:hover { border-color: var(--c-red); color: var(--c-red); }
.filter-pill.active {
  background: var(--c-red);
  border-color: var(--c-red);
  color: white;
}

/* ---------- Animations (intersection observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 0.88rem; }
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .seasons { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .about-snippet { grid-template-columns: 1fr; gap: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  :root {
    --nav-h: 64px;
    --nav-safe-top: env(safe-area-inset-top, 0px);
  }
  /* Mobile: tighter side padding, but still honor safe-area-inset on notched
     phones (landscape) so the logo isn't pushed under the notch. */
  .nav__inner { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 24px;
    gap: 8px;
    border-bottom: 1px solid var(--c-line);
    transform: translateY(calc(-100% - var(--nav-h) - 48px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
    z-index: 999;
  }
  .nav.open .nav__links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s;
  }
  .nav__links a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .nav__toggle { display: block; }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* On hero pages the nav links are white (legible over the image). But the
     open mobile menu is a solid WHITE panel, so white-on-white made the links
     invisible — the menu looked like an empty white box. When the menu is
     open, force the panel's links dark and restore the red CTA pill. Scoped
     to .nav.open so the transparent top bar (logo / lang / X over the hero)
     keeps its white treatment. */
  body.has-hero .nav.open:not(.is-scrolled) .nav__links > a {
    color: var(--c-text);
    border-bottom-color: var(--c-line-soft);
  }
  body.has-hero .nav.open:not(.is-scrolled) .nav__links a.active,
  body.has-hero .nav.open:not(.is-scrolled) .nav__links a.nav__link--active {
    color: var(--c-red);
  }
  body.has-hero .nav.open:not(.is-scrolled) .nav__cta {
    background: var(--c-red);
    color: #fff !important;
  }

  .nav__logo small { display: none; }

  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { width: 100%; }

  .tours-grid, .services-grid, .seasons, .provinces, .offices-grid, .form {
    grid-template-columns: 1fr;
  }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .clients__logos { gap: 24px; }
  .clients__logos span { font-size: 0.95rem; }
}

/* =========================================================
   ENHANCED SECTIONS — Phase 2
   ========================================================= */

/* ---------- Why Us strip ---------- */
.why-us {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  margin-top: 48px;
}
.why-us__item {
  padding: 56px 32px;
  border-right: 1px solid var(--c-line-soft);
  text-align: left;
}
.why-us__item:last-child { border-right: none; }
.why-us__num {
  font-family: var(--ff-serif);
  font-size: 3.6rem;
  color: var(--c-red);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px;
  opacity: 0.85;
}
.why-us__item h3 { font-size: 1.15rem; margin-bottom: 12px; }
.why-us__item p { font-size: 0.92rem; color: var(--c-muted); line-height: 1.6; }

/* ---------- "How it works" steps (quote page) ---------- */
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 8px;
}
.how-step {
  padding: 8px 28px;
  border-right: 1px solid var(--c-line-soft);
}
.how-step:last-child { border-right: none; }
.how-step__num {
  font-family: var(--ff-serif);
  font-size: 3.6rem;
  color: var(--c-red);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px;
  opacity: 0.85;
}
.how-step h3 { font-size: 1.15rem; margin-bottom: 12px; }
.how-step p { font-size: 0.92rem; color: var(--c-muted); line-height: 1.6; }
.how-contact {
  text-align: center;
  margin-top: 48px;
  font-size: 1.02rem;
}
.how-contact a { color: var(--c-red); font-weight: 600; text-decoration: none; }
.how-contact a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .how-step { border-right: none; padding: 16px 0; }
}
@media (max-width: 520px) {
  .how-steps { grid-template-columns: 1fr; }
}

/* ---------- Photo gallery mosaic ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: row dense; /* back-fill cells skipped by --wide/--tall items */
  gap: 12px;
}
.gallery__item {
  overflow: hidden;
  border-radius: var(--r-md);
  position: relative;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery__item:hover::after { opacity: 1; }
.gallery__item__caption {
  position: absolute;
  bottom: 16px; left: 20px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
  z-index: 1;
}
.gallery__item:hover .gallery__item__caption { opacity: 1; transform: translateY(0); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

/* ---------- Affiliations strip (dark bg + white tile cards) ---------- */
.affiliations {
  background: #1c2026;
  color: #fff;
  padding: 96px 0;
}
.affiliations__head { text-align: center; max-width: 720px; margin: 0 auto; }
.affiliations__head .eyebrow { color: rgba(255, 255, 255, 0.55); }
.affiliations__head h2 { color: #fff; margin: 12px 0 16px; }
.affiliations__head p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; }
.affiliations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.affiliations__tile {
  background: #fff;
  border-radius: 12px;
  padding: 18px 14px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.affiliations__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.affiliations__tile img {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

/* ---------- Best Time to Visit calendar ---------- */
.calendar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-top: 32px;
}
.calendar__month {
  position: relative;
  aspect-ratio: 1/1.4;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-ink);
}
.calendar__month img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.calendar__month:hover img { opacity: 1; transform: scale(1.06); }
.calendar__month__label {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.calendar__month__hl {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--c-red);
  color: white;
  padding: 3px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  text-transform: uppercase;
}
.calendar__legend {
  text-align: center;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.calendar__legend strong {
  color: var(--c-red);
  font-weight: 600;
}

/* ---------- Highlights strip (numbers/data) ---------- */
.highlights-strip {
  background: var(--c-red);
  color: white;
  padding: 50px 0;
}
.highlights-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.highlights-strip__num {
  font-family: var(--ff-serif);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}
.highlights-strip__lbl {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.9;
}

/* ---------- Social icons in footer ---------- */
.footer__socials {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.footer__social {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer__social:hover {
  background: var(--c-red);
  color: white;
  transform: translateY(-2px);
}

/* =========================================================
   TOUR DETAIL PAGE
   ========================================================= */

.tour-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  color: white;
  overflow: hidden;
}
.tour-hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.tour-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.7);
}
.tour-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
}
.tour-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 80px;
  width: 100%;
}
.tour-hero__crumbs {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.85;
}
.tour-hero__crumbs a { color: white; text-decoration: underline; text-underline-offset: 4px; }
.tour-hero__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.tour-hero__meta span {
  padding: 6px 16px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.tour-hero__meta span.season-badge {
  background: var(--c-red);
}
.tour-hero h1 {
  color: white;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  margin-bottom: 16px;
  max-width: 900px;
  line-height: 1.1;
}
.tour-hero__sub {
  font-size: 1.1rem;
  max-width: 640px;
  opacity: 0.92;
}

/* Sticky info sidebar layout */
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: flex-start;
}
.tour-info {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 32px;
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-soft);
}
.tour-info h4 {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 20px;
  font-family: var(--ff-sans);
  font-weight: 700;
}
.tour-info__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.92rem;
}
.tour-info__row:last-of-type { border-bottom: none; }
.tour-info__row > span:first-child {
  color: var(--c-muted);
  min-width: 92px;             /* keep multi-word labels on one line */
  flex-shrink: 0;
}
.tour-info__row > span:last-child { font-weight: 600; color: var(--c-ink); text-align: right; }
.tour-info .btn { width: 100%; margin-top: 20px; }
.tour-info__note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-top: 12px;
}

/* Tour highlights badges */
.tour-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}
.tour-highlights__badge {
  padding: 9px 18px;
  background: var(--c-red-faint);
  color: var(--c-red);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}
.tour-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 32px;
  color: var(--c-text);
}

/* Section heading inside tour body */
.tour-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-top: 56px;
  margin-bottom: 24px;
}

/* Day-by-day timeline */
.itinerary {
  position: relative;
  padding-left: 84px;
}
.itinerary::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--c-line);
}
.itinerary__day {
  position: relative;
  margin-bottom: 56px;
}
.itinerary__day:last-child { margin-bottom: 0; }
.itinerary__dot {
  position: absolute;
  left: -68px;
  top: 0;
  width: 50px;
  height: 50px;
  background: white;
  border: 2px solid var(--c-red);
  color: var(--c-red);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
}
.itinerary__dot small {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.itinerary__dot strong {
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  color: var(--c-red);
}
.itinerary__day h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.itinerary__route {
  font-size: 0.8rem;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.itinerary__img {
  /* Embedded photo at its natural proportions — NOT a cropped banner strip.
     Mobile: a modest block image above the text. Desktop floats it (below). */
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  border-radius: var(--r-md);
  margin: 4px 0 14px;
  background: var(--c-bg-alt);
}
.itinerary__img img {
  display: block;
  width: 100%;
  height: auto;                  /* keep the image's real aspect ratio, no crop */
  transition: transform 0.6s ease;
}
.itinerary__img figcaption {
  font-size: 0.78rem;
  color: var(--c-muted, #888);
  padding: 6px 2px 0;
  font-style: italic;
}
.itinerary__day:hover .itinerary__img img { transform: scale(1.03); }
/* No-photo placeholder for day cards (used until per-day images are added). */
.itinerary__img--placeholder {
  display: none;
}
.itinerary__img--placeholder::before {
  display: none;
}
/* Tour card placeholder — used on similar-tours when no image asset yet.
   A simple seasonal-tinted gradient so the layout doesn't collapse. */
.tour-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #cfe2e9, #8fa9b3);
}
.tour-card__img-placeholder--spring { background: linear-gradient(135deg, #f9d6e4, #e89bb8); }
.tour-card__img-placeholder--summer { background: linear-gradient(135deg, #d2eccc, #6fae6c); }
.tour-card__img-placeholder--autumn { background: linear-gradient(135deg, #f5d6a8, #c97a3a); }
.tour-card__img-placeholder--winter { background: linear-gradient(135deg, #d9e6f3, #6d8fb9); }

.tour-source-note {
  margin-top: 32px;
  padding: 14px 18px;
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-accent, #c97a3a);
  font-size: 0.88rem;
  color: var(--c-muted, #666);
  border-radius: 4px;
}
.itinerary__details__empty {
  font-size: 0.88rem;
  color: var(--c-muted, #888);
  font-style: italic;
}

/* ===== Rich tour-detail content ===== */

/* Multi-paragraph intro */
.tour-intro p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-text, #1a1a1a);
  margin: 0 0 18px;
}
.tour-intro p:last-child { margin-bottom: 0; }

/* Best-for block under intro */
.tour-bestfor {
  margin: 28px 0 8px;
  padding: 16px 20px;
  background: var(--c-bg-alt, #f6f3ee);
  border-left: 3px solid var(--c-red, #D52B1E);
  border-radius: 4px;
}
.tour-bestfor h4 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red, #D52B1E);
}
.tour-bestfor ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.tour-bestfor li {
  font-size: 0.92rem;
  color: var(--c-text, #1a1a1a);
  position: relative;
  padding-left: 14px;
}
.tour-bestfor li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--c-red, #D52B1E);
  font-weight: 700;
}

/* Highlights list (replaces simple badge row) */
.tour-highlights-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 8px;
}
.tour-highlights-list__item {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tour-highlights-list__item:hover {
  border-color: var(--c-red, #D52B1E);
  box-shadow: 0 4px 14px rgba(213, 43, 30, 0.06);
}
.tour-highlights-list__item h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--c-text, #1a1a1a);
}
.tour-highlights-list__item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-muted, #5f5f63);
  line-height: 1.55;
}

/* Day narrative + day highlights */
.itinerary__narrative {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 14px;
}
.itinerary__highlights {
  margin: 10px 0 14px;
  padding: 10px 14px;
  background: var(--c-bg-alt, #f6f3ee);
  border-radius: 4px;
  font-size: 0.9rem;
}
.itinerary__highlights strong {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red, #D52B1E);
  margin-bottom: 4px;
}
.itinerary__highlights ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}
.itinerary__highlights li {
  margin-bottom: 2px;
}
.itinerary__hotel-note {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--c-muted, #888);
  font-style: italic;
  font-weight: 400;
  padding-left: 0;
}

/* Included / Not-included grid */
.tour-incl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .tour-incl-grid { grid-template-columns: 1fr; }
}
.tour-incl-grid__yes,
.tour-incl-grid__no {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tour-incl-grid__yes { color: #2a7a3e; }
.tour-incl-grid__no  { color: #999; }
.tour-incl-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tour-incl-list li {
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.55;
  border-bottom: 1px solid #f3f1ed;
}
.tour-incl-list li:last-child { border-bottom: none; }
.tour-incl-list--yes li::before {
  content: "\2713";
  position: absolute;
  left: 4px;
  top: 8px;
  color: #2a7a3e;
  font-weight: 700;
}
.tour-incl-list--no li::before {
  content: "\2715";
  position: absolute;
  left: 4px;
  top: 8px;
  color: #aaa;
}

/* Optional add-ons */
.tour-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.tour-addons__item {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 8px;
  border-left: 3px solid var(--c-red, #D52B1E);
}
.tour-addons__item h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}
.tour-addons__item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-muted, #5f5f63);
  line-height: 1.55;
}

/* FAQ collapsibles */
.tour-faq {
  border-top: 1px solid #ececea;
}
.tour-faq__item {
  border-bottom: 1px solid #ececea;
}
.tour-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-text, #1a1a1a);
  position: relative;
  padding-right: 32px;
}
.tour-faq__item summary::-webkit-details-marker { display: none; }
.tour-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--c-red, #D52B1E);
  transition: transform 0.2s ease;
}
.tour-faq__item[open] summary::after {
  content: "\2212";
}
.tour-faq__item p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-muted, #5f5f63);
}
.itinerary__body p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: 16px;
}
.itinerary__details {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-top: 12px;
}
.itinerary__details > div { display: flex; align-items: center; gap: 8px; }
.itinerary__details strong { color: var(--c-ink); font-weight: 600; }
.itinerary__details .icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-red);
}

/* Desktop: day card is a single column. Image (if present) sits
   above the text as a narrow horizontal strip. Text fills the full
   column width below. */
@media (min-width: 720px) {
  /* Magazine-style: float a small photo to the top-right; text wraps around it. */
  .itinerary__day { display: flow-root; }   /* contain the float within the day */
  .itinerary__img {
    float: right;
    width: 38%;
    max-width: 240px;
    margin: 6px 0 12px 28px;     /* gap below + to the left of the wrapping text */
    box-shadow: 0 6px 18px rgba(20, 14, 5, 0.10);
  }
  /* Keep the background boxes clean — start them below the floated image. */
  .itinerary__highlights,
  .itinerary__details { clear: right; }
}

/* Tour gallery (smaller mosaic) */
.tour-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 10px;
}
.tour-gallery__item {
  overflow: hidden;
  border-radius: var(--r-sm);
}
.tour-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.tour-gallery__item:hover img { transform: scale(1.05); }
.tour-gallery__item--tall { grid-row: span 2; }

/* Similar tours strip */
.similar-tours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .why-us { grid-template-columns: repeat(2, 1fr); }
  .why-us__item { border-right: none; border-bottom: 1px solid var(--c-line-soft); }
  .why-us__item:nth-child(odd) { border-right: 1px solid var(--c-line-soft); }
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
  .calendar { grid-template-columns: repeat(6, 1fr); }
  .highlights-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .tour-layout { grid-template-columns: 1fr; }
  .tour-info { position: static; }
  .tour-gallery { grid-template-columns: repeat(2, 1fr); }
  .similar-tours { grid-template-columns: repeat(2, 1fr); }
  .affiliations__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .why-us { grid-template-columns: 1fr; }
  .why-us__item { border-right: none !important; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }
  .calendar { grid-template-columns: repeat(4, 1fr); }
  .affiliations__grid { grid-template-columns: repeat(2, 1fr); }
  .highlights-strip__grid { grid-template-columns: 1fr 1fr; }
  .itinerary { padding-left: 56px; }
  .itinerary__dot { left: -52px; width: 38px; height: 38px; }
  .itinerary__dot strong { font-size: 1rem; }
  .itinerary__dot small { font-size: 0.5rem; }
  .similar-tours { grid-template-columns: 1fr; }
  .tour-hero { height: 100vh; height: 100dvh; min-height: 500px; }
}

/* =========================================================
   PROUD MEMBER OF (Option C — grouped by region)
   ========================================================= */
.proud-member {
  background: var(--c-bg-alt);
  padding: 80px 0 70px;
  border-top: 1px solid var(--c-line-soft);
}
.proud-member__title {
  text-align: center;
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.proud-member__title::before,
.proud-member__title::after {
  content: "";
  flex: 0 0 60px;
  height: 1px;
  background: var(--c-line);
}
.proud-member__group { margin-bottom: 48px; }
.proud-member__group:last-child { margin-bottom: 0; }
.proud-member__group-title {
  text-align: center;
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  color: var(--c-ink);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.proud-member__group-title .flag {
  font-style: normal;
  font-size: 1.1rem;
}
.proud-member__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.proud-member__item {
  background: white;
  padding: 16px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  font-family: var(--ff-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-ink);
  text-align: center;
  min-width: 140px;
  transition: all 0.2s ease;
}
.proud-member__item:hover {
  border-color: var(--c-red);
  box-shadow: var(--shadow-sm);
}
.proud-member__item small {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.65rem;
  color: var(--c-muted);
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-top: 2px;
}
.proud-member__item img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .proud-member__title::before,
  .proud-member__title::after { flex: 0 0 30px; }
  .proud-member__grid { gap: 10px; }
  .proud-member__item {
    padding: 12px 16px;
    font-size: 0.82rem;
    min-width: 120px;
  }
}

/* =========================================================
   NEWS / ARTICLES
   ========================================================= */

/* Container variant — narrower for article body readability */
.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* News list grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.news-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.news-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card__meta {
  font-size: 0.78rem;
  color: var(--c-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.news-card__title {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 12px;
}
.news-card__excerpt {
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__cta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-red);
}

/* Article page */
.article__hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  color: var(--c-ink);
  overflow: hidden;
}
.article__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article__hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.article__hero-bg ~ .article__hero-inner {
  color: white;
  position: relative;
  z-index: 1;
}
.article__hero-bg ~ .article__hero-inner .article__title,
.article__hero-bg ~ .article__hero-inner .article__crumbs a,
.article__hero-bg ~ .article__hero-inner .article__crumbs,
.article__hero-bg ~ .article__hero-inner .article__meta { color: white; }
.article__hero-inner {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.article__crumbs {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.85;
}
.article__crumbs a { text-decoration: none; }
.article__title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 24px;
}
.article__meta {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  align-items: center;
}
.article__meta-sep { opacity: 0.4; }
.article__tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-red-faint);
  color: var(--c-red);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.article__hero-bg ~ .article__hero-inner .article__tag {
  background: rgba(255,255,255,0.15);
  color: white;
}

/* News page language picker */
.news-lang-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
}
.news-lang-picker__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--c-line);
  font-size: 0.82rem;
  color: var(--c-text);
  text-decoration: none;
  transition: all 0.2s ease;
}
.news-lang-picker__item:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
.news-lang-picker__item.is-active {
  background: var(--c-red);
  border-color: var(--c-red);
  color: white;
}

/* Also available in (post page) */
.article__also-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 40px;
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-md);
}
.article__also-in__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-right: 4px;
}
.article__also-in__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--c-text);
  transition: all 0.2s ease;
}
.article__also-in__link:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}

/* Article body (Quill output) */
.article__body {
  padding: 64px 24px 24px;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--c-text);
}
.article__body p { margin-bottom: 1.4em; }
.article__body h2 {
  font-family: var(--ff-serif);
  font-size: 1.7rem;
  font-weight: 600;
  margin: 2.4em 0 0.8em;
  color: var(--c-ink);
}
.article__body h3 {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2em 0 0.6em;
  color: var(--c-ink);
}
.article__body img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 1.6em 0;
  box-shadow: var(--shadow-sm);
}
.article__body a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article__body blockquote {
  border-left: 3px solid var(--c-red);
  padding: 8px 0 8px 24px;
  margin: 1.6em 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-ink);
}
.article__body ul, .article__body ol {
  margin: 1em 0 1.4em 1.6em;
  padding-left: 0;
}
.article__body li { margin-bottom: 0.5em; }
.article__body ul li { list-style: disc outside; }
.article__body ol li { list-style: decimal outside; }

/* Social share */
.article__share {
  padding: 40px 24px 80px;
  border-top: 1px solid var(--c-line);
  margin-top: 32px;
}
.article__share-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 18px;
  text-align: center;
}
.article__share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.share:hover {
  background: var(--c-ink);
  color: white;
  border-color: var(--c-ink);
  text-decoration: none;
}
.share--fb:hover { background: #1877F2; border-color: #1877F2; }
.share--x:hover { background: #000; border-color: #000; }
.share--line:hover { background: #06C755; border-color: #06C755; }
.share--wa:hover { background: #25D366; border-color: #25D366; }
.share--copy:hover { background: var(--c-red); border-color: var(--c-red); }
.share--email:hover { background: var(--c-ink); border-color: var(--c-ink); }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .article__title { font-size: 1.8rem; }
  .article__body { padding: 40px 16px 16px; font-size: 1rem; }
}

/* ===== Mobile responsive sweep (audited 2026-05) ===== */

/* Global guards — prevent any single component from inflating
   document scroll-width on mobile. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }

  /* Mobile menu panel must never exceed the viewport */
  .nav__links {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Fix 1: quote.php / contact.php form — remove desktop max-width
   that was causing 76px overflow on mobile. The minmax(0,1fr) +
   min-width:0 chain is required so flex/grid children can shrink
   below their intrinsic min-content (the default would otherwise
   let an <input>'s intrinsic width inflate the grid track). */
@media (max-width: 720px) {
  .form {
    max-width: 100%;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .form__field {
    min-width: 0;
  }
  .form__field input,
  .form__field select,
  .form__field textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .form__field--full { grid-column: 1; }
}

/* Fix 2: offices-grid was refusing to collapse cleanly because
   the 1fr column resolved against an inflated reference width.
   Lock the grid to minmax(0,1fr) so it never exceeds container. */
@media (max-width: 720px) {
  .offices-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }
  .office-card {
    padding: 22px 20px;
    min-width: 0;
  }
}

/* Fix 3: vertical-padding diet for the worst whitespace offenders */
@media (max-width: 720px) {
  .page-header {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 32px;
  }
  .page-header h1 { font-size: clamp(2rem, 7vw, 2.4rem); }

  .cta-banner { padding: 56px 0; }
  .cta-banner h2 { font-size: 1.6rem; }

  .why-us { grid-template-columns: 1fr; }
  .why-us__item {
    padding: 28px 20px;
    border-right: none !important;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .why-us__item:last-child { border-bottom: none; }

  .section { padding: 48px 0; }
  .section-head { margin-bottom: 32px; }
}

/* Fix 4: about-snippet was overflowing 19px on destinations.
   Lock both columns to minmax(0,1fr) and trim the gap. Also cap
   the portrait image so it doesn't dominate mobile viewport. */
@media (max-width: 720px) {
  .about-snippet {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
  }
  .about-snippet__img {
    aspect-ratio: 16 / 10;       /* shorter landscape on mobile */
    max-height: 280px;
  }
  .about-snippet__img img {
    object-position: center 35%;
  }
  /* The 3-col stats row had unbreakable strings like
     "Canadian Dollar (CAD)" forcing column width. */
  .about-snippet__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
  }
  .about-snippet__stat strong { font-size: 1.4rem; word-break: break-word; }
  .about-snippet__stat span { font-size: 0.72rem; word-break: break-word; }
}

/* Fix 5: calendar 12-month grid — 4 cols was illegible at 375px.
   Switch to 3 cols on phones and 2 cols only on very narrow devices. */
@media (max-width: 720px) {
  .calendar {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 24px;
  }
  .calendar__month__label { font-size: 0.78rem; }
}
@media (max-width: 340px) {
  .calendar { grid-template-columns: repeat(2, 1fr); }
}

/* Fix bonus: itinerary day-details rows — labels like "Stay:" were
   wrapping mid-word into the value column. Lock label width. */
@media (max-width: 720px) {
  .itinerary__details {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
  }
  .itinerary__details > div {
    width: 100%;
    align-items: flex-start;
  }
  .itinerary__details strong { flex-shrink: 0; }
  .itinerary__hotel-note { padding-left: 26px; }
}

/* ===== Mobile polish for tour-detail page ===== */

/* Tighten timeline indentation on phones so the day dot doesn't
   crowd the screen edge. (Base is 84px / -68px for desktop.) */
@media (max-width: 720px) {
  .itinerary {
    padding-left: 56px;
  }
  .itinerary__dot {
    left: -52px;
    width: 42px;
    height: 42px;
  }
  .itinerary__dot strong { font-size: 1.15rem; }
}

/* Hero meta pills — denser padding on small phones so they wrap
   evenly instead of breaking 4 ways on a 375px screen. */
@media (max-width: 480px) {
  .tour-hero__meta {
    gap: 8px;
    margin-bottom: 18px;
  }
  .tour-hero__meta span {
    padding: 4px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
}

/* Sticky bottom "Request A Quote" on mobile / tablet — because the
   sidebar with the inquiry button can be 15,000+ px down on a long
   itinerary page. Hidden on desktop (sidebar is sticky there). */
.tour-floating-cta {
  display: none;
}
@media (max-width: 1024px) {
  .tour-floating-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 50;
    padding: 14px 22px;
    background: var(--c-red, #D52B1E);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(213, 43, 30, 0.28), 0 2px 6px rgba(0,0,0,0.1);
  }
  .tour-floating-cta:hover { background: #b8231a; }
  /* Leave room above the footer so the bar doesn't cover content */
  .tour-floating-cta-spacer { height: 80px; }
}

/* ===== Destinations: province grid (destinations.php) ===== */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
/* Brief region cards — areas we cover on request (no detail page). */
.dest-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.dest-brief-card {
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.dest-brief-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.dest-brief-card p {
  color: var(--c-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.dest-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--c-line-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20,14,5,0.12);
  border-color: var(--c-red);
}
.dest-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.dest-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
/* Placeholder for regions whose photo isn't in the library yet. */
.dest-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(140deg, #2b3a4a 0%, #46606f 55%, #6b8a93 100%);
}
.dest-card:hover .dest-card__img img { transform: scale(1.04); }
.dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 100%);
}
.dest-card__body {
  padding: 20px 22px 22px;
}
.dest-card__name {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--c-ink);
}
.dest-card__tagline {
  font-size: 0.88rem;
  color: var(--c-muted);
  margin: 0 0 14px;
  font-style: italic;
}
.dest-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.dest-card__chips span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--c-bg-alt);
  color: var(--c-text);
  padding: 4px 10px;
  border-radius: 999px;
}
.dest-card__arrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-red);
  letter-spacing: 0.05em;
}

/* ===== Destination detail (destination.php?p=XX) ===== */
.dest-hero {
  position: relative;
  /* Capped below the others: this hero sits BELOW the fixed nav with a
     bottom-anchored title, so going past ~90vh would push the title off the
     first screen. 90vh keeps the photo immersive while the title stays visible. */
  height: 90vh;
  min-height: 560px;
  max-height: 980px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  /* No top margin: the photo runs up under the (transparent) fixed nav, matching
     the homepage hero. main.js flips the nav to solid once this hero scrolls past. */
  /* Fallback for regions with no hero photo yet (covered by the image when present). */
  background: linear-gradient(140deg, #2b3a4a 0%, #46606f 60%, #6b8a93 100%);
}
.dest-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dest-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.dest-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.12) 45%,
    rgba(0,0,0,0.50) 100%
  );
}
.dest-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--container-pad, 24px) 56px;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.dest-hero__crumbs {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 18px;
}
.dest-hero__crumbs a { color: #fff; text-decoration: underline; }
.dest-hero h1 {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin: 0 0 8px;
  line-height: 1.05;
  /* Override the global heading color (var(--c-ink) — dark) */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.dest-hero__tagline {
  font-size: 1.1rem;
  margin: 0;
  color: #fff;
  opacity: 0.96;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Two-column layout for destination detail */
.dest-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: flex-start;
}
.dest-intro p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 18px;
}
.dest-section-title {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-red);
  font-weight: 700;
  margin: 48px 0 22px;
}
.dest-places {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.dest-place {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  align-items: stretch;
}
.dest-place__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.dest-place__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.dest-place__body {
  padding: 18px 20px 18px 0;
}
.dest-place__body h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.dest-place__body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.dest-seasons {
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  padding: 18px 22px;
}
.dest-seasons__row {
  display: flex;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.dest-seasons__row:last-child { border-bottom: none; }
.dest-seasons__row strong {
  min-width: 150px;
  font-weight: 600;
  color: var(--c-ink);
}
.dest-seasons__row span {
  color: var(--c-text);
  font-size: 0.95rem;
}
.dest-no-tours {
  background: var(--c-bg-alt);
  padding: 18px 20px;
  border-radius: var(--r-md);
  font-style: italic;
  color: var(--c-muted);
}
.dest-no-tours a { color: var(--c-red); font-weight: 600; }

/* Sidebar quick facts */
.dest-facts {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 28px;
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-soft);
}
.dest-facts h4 {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 18px;
}
.dest-facts__row {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.88rem;
}
.dest-facts__row:last-of-type { border-bottom: none; }
.dest-facts__row > span:first-child {
  color: var(--c-muted);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.dest-facts__row > span:last-child {
  color: var(--c-ink);
  font-weight: 500;
}
.dest-facts .btn { width: 100%; margin-top: 18px; }

/* Under-construction placeholder for provinces without full content yet */
.dest-under-construction {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 28px;
  text-align: center;
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  border: 1px dashed var(--c-line);
}
.dest-under-construction__icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.6;
}
.dest-under-construction h2 {
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  margin: 0 0 12px;
  font-family: var(--ff-serif);
  color: var(--c-ink);
}
.dest-under-construction > p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 540px;
  margin: 0 auto 28px;
}
.dest-under-construction__chips {
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.dest-under-construction__chips-label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-right: 4px;
}
.dest-under-construction__chip {
  font-size: 0.78rem;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  padding: 5px 12px;
  border-radius: 999px;
}
.dest-under-construction__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 32px 0 20px;
}
.dest-under-construction__note {
  font-size: 0.88rem;
  color: var(--c-muted);
  margin: 16px auto 0;
  max-width: 520px;
  line-height: 1.6;
}
.dest-under-construction__note a {
  color: var(--c-red);
  font-weight: 600;
}

/* Mobile adjustments for destination detail */
@media (max-width: 1024px) {
  .dest-layout { grid-template-columns: 1fr; }
  .dest-facts { position: static; }
}
@media (max-width: 720px) {
  .dest-hero { height: 44vh; min-height: 280px; }
  .dest-hero__content { padding-bottom: 28px; }
  .dest-place {
    grid-template-columns: 1fr;
  }
  .dest-place__img { aspect-ratio: 16 / 10; }
  .dest-place__body { padding: 16px 18px 18px; }
  .dest-seasons__row { flex-direction: column; gap: 4px; }
  .dest-seasons__row strong { min-width: 0; }
}

/* ---------- Services grid (About — What We Offer) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card__body { padding: 18px 20px 22px; }
.service-card__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.service-card__body p {
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal .prose { max-width: 760px; }
.legal__updated {
  color: var(--c-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.legal__intro {
  font-size: 1.08rem;
  color: var(--c-text);
}
.legal .prose h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.legal .prose p { margin-bottom: 14px; line-height: 1.7; }
.legal .prose ul { margin: 0 0 14px 1.25em; }
.legal .prose li { margin-bottom: 8px; line-height: 1.6; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
}
.cookie-banner__text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-text);
  line-height: 1.5;
  flex: 1;
}
.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner__link {
  font-size: 0.9rem;
  color: var(--c-muted);
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-banner__btn { padding: 8px 20px; font-size: 0.9rem; }
@media (max-width: 720px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner__actions { justify-content: flex-end; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .cta-banner, .proud-member, .article__share,
  .tour-floating-cta, .cookie-banner { display: none; }
}