/* ==========================================================================
   Glowworm Kayaking — Main Stylesheet
   Structure:
     1. CSS Custom Properties (Design Tokens)
     2. Reset & Base
     3. Typography
     4. Layout Utilities
     5. Buttons
     6. Section Labels
     7. Scroll Reveal
   ==========================================================================

   NOTE: All colour values live in :root only.
   Never hardcode hex values outside of :root.
   ========================================================================== */


/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
  /* --- Dark Palette (hero, features, CTA, footer) --- */
  --color-bg:           #0a0e0f;
  --color-surface:      #111518;
  --color-elevated:     #1a1e20;
  --color-footer:       #080a0b;  /* deepest dark — footer only */

  /* --- Light Palette (social proof, tours, FAQ) --- */
  --color-bg-light:     #f2f2f0;
  --color-surface-light:#ffffff;

  /* --- Text --- */
  --color-text-primary:     #e8e5e0;
  --color-text-muted:       #9a9a98;
  --color-text-dark:        #1a1a18;
  --color-text-dark-muted:  #6b6b68;

  /* --- Brand Accent --- */
  --color-cyan:         #5FFBF1;
  --color-cyan-rgb:     95, 251, 241;
  --color-dark-btn:     #050816;

  /* --- RGB variants for use in rgba() overlays --- */
  --color-footer-rgb:        8, 10, 11;
  --color-text-primary-rgb:  232, 229, 224;
  --color-text-dark-rgb:     26, 26, 24;
  --color-parallax-rgb:      5, 8, 10;   /* slightly cooler dark for parallax overlay */

  /* --- Borders --- */
  --color-border-dark:  #2a2e30;
  --color-border-light: #ddddd8;

  /* --- Typography --- */
  --font-heading: 'EB Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* --- Spacing (8pt base) --- */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   80px;
  --space-2xl:  120px;
  --space-3xl:  160px;

  /* --- Layout --- */
  --max-width:       1280px;
  --padding-desktop: 64px;
  --padding-mobile:  24px;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.8s ease-out;

  /* --- Radii --- */
  --radius-pill: 999px;
  --radius-card: 10px;
  --radius-sm:   4px;
}


/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

svg {
  display: block;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

/* Hero H1 */
.h1-hero {
  font-size: clamp(38px, 5.5vw, 68px);
  color: var(--color-text-primary);
  max-width: 600px;
}

/* Section H2 — dark backgrounds */
.h2-section {
  font-size: clamp(30px, 4vw, 48px);
  color: var(--color-text-primary);
}

/* Section H2 — light backgrounds */
.h2-section--light {
  font-size: clamp(30px, 4vw, 48px);
  color: var(--color-text-dark);
}

/* Feature H2 — split heading, larger */
.h2-feature {
  font-size: clamp(32px, 4.5vw, 52px);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* CTA H2 — italic */
.h2-cta {
  font-size: clamp(32px, 4.5vw, 58px);
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.2;
}

/* H3 card titles */
.h3-card {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--color-text-dark);
}

/* Body text — dark sections */
.body-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Body text — light sections */
.body-text--dark {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-dark-muted);
}


/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-desktop);
  padding-right: var(--padding-desktop);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }
}

/* Fallback index.php — shown only if no front page is configured */
.fallback-page {
  padding: 120px var(--padding-desktop);
  text-align: center;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */

/* Primary — Cyan Glow (for dark backgrounds) */
.btn-primary {
  display: inline-block;
  background: var(--color-cyan);
  color: var(--color-dark-btn);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(var(--color-cyan-rgb), 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 40px rgba(var(--color-cyan-rgb), 0.55);
  color: var(--color-dark-btn);
}

/* Secondary — Ghost Outline (for dark backgrounds) */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(var(--color-text-primary-rgb), 0.35);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--transition-base), background var(--transition-base);
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: rgba(var(--color-text-primary-rgb), 0.7);
  background: rgba(var(--color-text-primary-rgb), 0.06);
  color: var(--color-text-primary);
}


/* ==========================================================================
   6. Section Labels (eyebrow text above headings)
   ========================================================================== */

.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* On dark sections — cyan */
.section-label--light-text {
  color: var(--color-cyan);
}

/* On light sections — muted grey */
.section-label--dark-text {
  color: var(--color-text-dark-muted);
}


/* ==========================================================================
   7. Scroll Reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   8. Navigation
   ========================================================================== */

/* --- Header wrapper --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: transparent;
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(var(--color-footer-rgb), 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--color-border-dark);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}

/* --- Inner flex row --- */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

/* --- Logo --- */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}

/* Homepage hero: the large hero mark already carries the brand, so hide the
   small nav mark while at the top, then fade it in once the header turns into
   the scrolled glass bar. Only the front page gets the overlay class. */
.site-header--overlay:not(.scrolled) .nav-logo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .site-header--overlay:not(.scrolled) .nav-logo { transform: none; }
}

.nav-logo__img {
  height: 44px;
  width: auto;
  display: block;
  /* Full-colour brand mark (teal, with the Maori-inspired detail intact).
     No brightness/invert filter here: that would flatten it to a white silhouette. */
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.nav-logo:hover .nav-logo__img {
  opacity: 1;
}

/* --- Desktop nav links --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
  transition: color var(--transition-fast), text-shadow var(--transition-fast), opacity var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-cyan);
}

.site-header.scrolled .nav-links a {
  font-weight: 500;
  color: rgba(var(--color-text-primary-rgb), 0.85);
  text-shadow: none;
}

.site-header.scrolled .nav-links a:hover {
  color: var(--color-cyan);
}

/* --- Desktop nav dropdown (Corporate) --- */
.nav-links__item--has-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-links__chev {
  transition: transform var(--transition-fast);
}

.nav-links__item--has-menu:hover .nav-links__chev,
.nav-links__item--has-menu:focus-within .nav-links__chev {
  transform: rotate(180deg);
}

/* invisible hover bridge so the menu stays open across the gap */
.nav-links__item--has-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 18px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  transform: translateY(6px);
  min-width: 210px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(var(--color-footer-rgb), 0.97);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 300;
}

.nav-links__item--has-menu:hover .nav-dropdown,
.nav-links__item--has-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  padding: 9px 14px;
  border-radius: 8px;
  text-shadow: none;
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: rgba(var(--color-text-primary-rgb), 0.08);
  color: var(--color-cyan);
}

/* --- Desktop CTA button (slightly smaller than page buttons) --- */
.nav-cta {
  padding: 10px 22px;
  font-size: 12px;
}

/* --- Hamburger button (hidden on desktop) --- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: opacity var(--transition-fast);
}

.nav-hamburger:hover span {
  opacity: 0.7;
}

/* --- Mobile nav overlay --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(var(--color-footer-rgb), 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav__close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.mobile-nav__close:hover {
  opacity: 1;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-nav__links a {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__links a:hover {
  color: var(--color-cyan);
}

.mobile-nav__cta {
  margin-top: 8px;
}

/* Expandable group inside the mobile nav (e.g. Services) */
.mobile-nav__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mobile-nav__group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.mobile-nav__group-toggle:hover {
  color: var(--color-cyan);
}

.mobile-nav__group-chevron {
  transition: transform var(--transition-fast);
  opacity: 0.7;
}

.mobile-nav__group-toggle[aria-expanded="true"] .mobile-nav__group-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--color-cyan);
}

.mobile-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.mobile-nav__sublist[hidden] {
  display: none;
}

.mobile-nav__sublist a {
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__sublist a:hover {
  color: var(--color-cyan);
}

.mobile-nav__sublist-all {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  color: var(--color-cyan);
  opacity: 0.85;
  margin-top: 2px;
}

/* --- Responsive: show hamburger, hide desktop nav --- */
@media (max-width: 767px) {
  .site-header {
    height: 56px;
  }

  .nav-inner {
    padding: 0 var(--padding-mobile);
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }
}


/* ==========================================================================
   9. Hero Section
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg); /* fallback while image loads */
}

/* Background image — fills the section */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay — dark bottom fade */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-footer-rgb), 0.10) 0%,
    rgba(var(--color-footer-rgb), 0.30) 55%,
    rgba(var(--color-footer-rgb), 0.75) 100%
  );
}

/* Content container */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 700px;
  padding: 80px var(--padding-desktop) 0;
}

/* Hero brand mark — the Waimarino logo rendered as if lit from within by the
   glowworms in the scene. Prominence comes from light, not a container, so the
   photography still leads. */
.hero__brand {
  display: flex;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

/* Ambient bloom behind the mark. Breathes slowly, like the scene. */
.hero__brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(var(--color-cyan-rgb), 0.15) 0%,
    rgba(var(--color-cyan-rgb), 0.06) 36%,
    rgba(var(--color-cyan-rgb), 0) 70%
  );
  filter: blur(22px);
  animation: hero-glow 8s ease-in-out infinite;
}

.hero__brand-mark {
  height: 150px;
  width: auto;
  display: block;
  /* No filter on the mark itself — it stays pixel-crisp. The luminescence
     lives only in the ::before bloom behind it, so edges never smudge. */
}

@keyframes hero-glow {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.99); }
  50%      { opacity: 0.7;  transform: translate(-50%, -50%) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__brand::before { animation: none; opacity: 0.8; }
}

@media (max-width: 640px) {
  .hero__brand-mark { height: 112px; }
  .hero__brand::before { width: 240px; height: 240px; }
}

/* Subtext */
.hero__subtext {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 460px;
}

/* Trust indicators row */
.hero__trust {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}

.hero__trust-item svg {
  color: var(--color-cyan);
  flex-shrink: 0;
}

/* Scroll indicator — bouncing chevron at bottom */
.hero__scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-text-muted);
  opacity: 0.5;
  animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(4px); }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero__content {
    padding: 80px var(--padding-mobile) 0;
    gap: 20px;
  }

  /* Disable CSS parallax on mobile — avoids iOS scroll jank */
  .hero__bg-img {
    position: absolute;
  }
}


/* ==========================================================================
   10. Social Proof Strip
   ========================================================================== */

.social-proof {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: 28px 0;
}

.social-proof__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 56px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

.social-proof__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dark-muted);
  opacity: 0.5;
  transition: opacity var(--transition-base), color var(--transition-base);
  cursor: default;
}

.social-proof__badge:hover {
  opacity: 1;
  color: var(--color-text-dark);
}

.social-proof__badge svg {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .social-proof__inner {
    padding: 0 var(--padding-mobile);
    gap: 24px 40px;
  }
}


/* ==========================================================================
   11. Tours Grid
   ========================================================================== */

.tours {
  background: var(--color-bg-light);
  padding: 100px 0;
}

@media (max-width: 767px) {
  .tours {
    padding: 64px 0;
  }
}

/* Section header */
.tours__header {
  text-align: center;
  margin-bottom: 56px;
}

/* Grid — 2 destinations */
.tours__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .tours__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Card */
.tour-card {
  background: var(--color-surface-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tour-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Image */
.tour-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-elevated); /* placeholder bg while image loads */
}

.tour-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tour-card:hover .tour-card__image {
  transform: scale(1.05);
}

/* Region image carousel (homepage tour cards): tour photos cross-fade */
.tour-carousel {
  position: relative;
}

.tour-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease, transform 0.5s ease;
  will-change: opacity;
}

.tour-carousel__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tour-carousel__slide {
    transition: none;
  }
}

/* Card body */
.tour-card__body {
  padding: 24px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Destination name — larger, centred, EB Garamond */
.tour-card__destination {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.tour-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-dark-muted);
  margin-top: 10px;
  max-width: 340px;
}

.tour-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  text-decoration: none;
  margin-top: 16px;
  transition: color var(--transition-fast);
}

.tour-card__link:hover {
  color: var(--color-text-dark);
}

.tour-card__arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.tour-card__link:hover .tour-card__arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   12. Features Section
   ========================================================================== */

.features {
  background: var(--color-bg);
  padding: 120px 0;
}

@media (max-width: 767px) {
  .features {
    padding: 80px 0;
  }
}

/* 2-column grid */
.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 767px) {
  .features__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* Left: text */
.features__text {
  display: flex;
  flex-direction: column;
}

.features__text .h2-feature {
  margin-bottom: 48px;
}

/* Feature list */
.features__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.feature-block {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: flex-start;
}

.feature-block__icon {
  color: var(--color-cyan);
  padding-top: 2px;
  flex-shrink: 0;
}

.feature-block__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.feature-block__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Right: images */
.features__images {
  position: relative;
}

/* Main portrait image */
.features__img-main {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

/* Small inset — overlaps bottom-left of main image */
.features__img-inset {
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 42%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 3px solid var(--color-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* On mobile, remove absolute inset to avoid overflow */
@media (max-width: 767px) {
  .features__images {
    padding-bottom: 0;
    order: -1; /* image above text on mobile */
  }

  .features__img-inset {
    display: none;
  }
}


/* ==========================================================================
   13. Parallax Image Break
   ========================================================================== */

.parallax-break {
  width: 100%;
  height: 55vh;
  min-height: 360px;
  background-image: url('../images/parallax.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: var(--color-bg); /* fallback */
  position: relative;
}

.parallax-break::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--color-parallax-rgb), 0.55);
}

/* Disable fixed attachment on mobile — prevents iOS scroll jank */
@media (max-width: 767px) {
  .parallax-break {
    background-attachment: scroll;
  }
}


/* ==========================================================================
   14. FAQ Accordion
   ========================================================================== */

.faq {
  background: var(--color-bg-light);
  padding: 100px 0;
}

@media (max-width: 767px) {
  .faq {
    padding: 64px 0;
  }
}

.faq__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

@media (max-width: 767px) {
  .faq__inner {
    padding: 0 var(--padding-mobile);
  }
}

.faq__header {
  text-align: center;
  margin-bottom: 56px;
}

/* Accordion item */
.accordion-item {
  border-bottom: 1px solid var(--color-border-light);
}

/* Header button */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-dark);
  text-align: left;
  gap: 16px;
  min-height: 44px; /* tap target */
}

.accordion-header:hover {
  color: var(--color-text-dark);
}

/* Chevron icon */
.accordion-chevron {
  color: var(--color-text-dark-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}

/* Collapsible body */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.accordion-body-inner {
  padding: 0 0 22px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-dark-muted);
}

.accordion-body-inner p {
  margin: 0 0 12px;
}

.faq-policy-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-policy-list li {
  padding: 10px 0;
  border-top: 1px solid var(--color-border-light);
}

.faq-policy-list li strong {
  display: block;
  color: var(--color-text-dark);
  font-weight: 500;
  margin-bottom: 2px;
}


/* ==========================================================================
   15. Final CTA Section
   ========================================================================== */

.cta-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-dark);
  padding: 140px 0;
}

@media (max-width: 767px) {
  .cta-section {
    padding: 80px 0;
  }
}

.cta-section__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

@media (max-width: 767px) {
  .cta-section__inner {
    padding: 0 var(--padding-mobile);
  }
}

/* Muted eyebrow on dark background */
.section-label--muted {
  color: var(--color-text-muted);
}

.cta-section .h2-cta {
  margin-top: 0;
  margin-bottom: 20px;
}

.cta-section__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 440px;
  margin-bottom: 36px;
}

.cta-section__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}


/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
  background: var(--color-footer);
  border-top: 1px solid var(--color-border-dark);
  padding: 64px 0 40px;
}

/* ==========================================================================
   Trust strip — top of footer
   Certifications + regional partners. Auto-swaps placeholders for real logo
   files when they land in assets/images/trust/.
   ========================================================================== */
.trust-strip {
  padding: 0 var(--padding-desktop) 40px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--color-border-dark);
}

.trust-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.trust-strip__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 24px;
}

.trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 44px;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}

.trust-strip__item img {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.trust-strip__placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 14px;
  min-width: 96px;
  max-width: 140px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 700px) {
  .trust-strip {
    padding: 0 20px 32px;
    margin-bottom: 36px;
  }
  .trust-strip__list {
    gap: 20px 28px;
  }
  .trust-strip__item {
    height: 44px;
  }
  .trust-strip__item img {
    max-height: 44px;
    max-width: 110px;
  }
  .trust-strip__placeholder {
    height: 44px;
    min-width: 78px;
    padding: 0 10px;
    font-size: 9px;
  }
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

@media (max-width: 767px) {
  .footer__inner {
    padding: 0 var(--padding-mobile);
  }
}

/* 4-column grid */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer {
    padding: 56px 0 32px;
  }
}

/* Brand column */
.footer__logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 16px;
}

.footer__logo-img {
  height: 72px;
  width: auto;
  display: block;
  /* Full-colour brand lockup (teal). No brightness/invert filter: it would
     flatten the detailed mark to a white silhouette. */
  opacity: 0.95;
  transition: opacity var(--transition-fast);
}

.footer__logo:hover .footer__logo-img {
  opacity: 1;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Column headings */
.footer__col-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

/* Link lists */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-text-primary);
}

/* Social icons */
.footer__social {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.footer__social-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.footer__social-link:hover {
  color: var(--color-cyan);
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-dark);
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}

.footer__bottom-links {
  display: flex;
  gap: 24px;
}

.footer__bottom-links a {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__bottom-links a:hover {
  color: var(--color-text-primary);
}


/* ==========================================================================
   Destination Pages — Tauranga & Rotorua
   ========================================================================== */

/* --- Destination Hero (45vh cinematic banner) --- */
.dest-hero {
  position: relative;
  height: 45vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dest-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.dest-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-parallax-rgb), 0.55) 0%,
    rgba(var(--color-parallax-rgb), 0.70) 100%
  );
  z-index: 1;
}

.dest-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}

.dest-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin: 8px 0 12px;
}

.dest-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(var(--color-text-primary-rgb), 0.80);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Tour Selector Section (light background) --- */
.dest-tours {
  background: var(--color-bg-light);
  padding: 80px 0;
}

.dest-tours__header {
  text-align: center;
  margin-bottom: 48px;
}

.dest-tours__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}

/* 4-card variant — single row of 4 */
.dest-tours__grid--four {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1160px;
}

/* --- Destination Tour Cards (selector) --- */
.dest-tour-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--color-border-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dest-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.dest-tour-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

/* Tour card meta row — time of day + duration + age, displayed in card body */
.dest-tour-card__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 4px;
  column-gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(26, 26, 24, 0.25);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  text-align: center;
}

.dest-tour-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.dest-tour-card__meta svg {
  flex-shrink: 0;
}

.dest-tour-card__meta-sep {
  opacity: 0.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.dest-tour-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dest-tour-card:hover .dest-tour-card__img-wrap img {
  transform: scale(1.04);
}

.dest-tour-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dest-tour-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.2;
}

/* .dest-tour-card__duration removed — replaced by .dest-tour-card__meta */

.dest-tour-card__tagline {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text-dark-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* --- Elegant tour price (shared: cards + detail) --- */
.tour-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 22px;
}

.tour-price__tier {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.tour-price__amount {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-dark);
}

.tour-price__unit {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-dark-muted);
}

/* "(not incl. booking fees)": lowercase so it reads as a footnote, not
   another rate tier. */
.tour-price__note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-dark-muted);
  white-space: nowrap;
}

/* Card: sits below the tagline, set off by a hairline. */
.dest-tour-card__price {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-light);
}

/* Narrow destination cards: stack tiers as an aligned rate list so a
   three-price tour never wraps mid-line. Single prices stay one row.
   The min-width on the amount lines the unit tags up into a neat column. */
.dest-tour-card__price .tour-price {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.dest-tour-card__price .tour-price__amount {
  min-width: 3.1em;
}
.dest-tour-card__price .tour-price__note {
  margin-top: 3px;
}

.dest-tour-card__link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- Tour Detail Sections --- */
.tour-detail {
  padding: 96px 0;
}

.tour-detail--dark {
  background: var(--color-bg);
}

.tour-detail--light {
  background: var(--color-bg-light);
}

.tour-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.tour-detail__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tour-detail--dark .tour-detail__text h2 {
  color: var(--color-text-primary);
}

.tour-detail--light .tour-detail__text h2 {
  color: var(--color-text-dark);
}

.tour-detail__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  margin-top: 16px;
  margin-bottom: 28px;
}

.tour-detail--dark .tour-detail__desc {
  color: rgba(var(--color-text-primary-rgb), 0.78);
}

.tour-detail--light .tour-detail__desc {
  color: var(--color-text-dark-muted);
}

.tour-detail__includes {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tour-detail__includes li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tour-detail--dark .tour-detail__includes li {
  color: rgba(var(--color-text-primary-rgb), 0.85);
}

.tour-detail--dark .tour-detail__includes svg {
  color: var(--color-cyan);
  flex-shrink: 0;
}

.tour-detail--light .tour-detail__includes li {
  color: var(--color-text-dark);
}

.tour-detail--light .tour-detail__includes svg {
  color: var(--color-text-dark);
  flex-shrink: 0;
}

/* Price + gift action (Phase 2) */
.tour-detail__price {
  margin: 0 0 20px;
}

/* Detail price is a focal point, so a touch larger than on the card. */
.tour-detail__price .tour-price__amount {
  font-size: 1.55rem;
}

/* Dark detail sections: light amount, muted unit. */
.tour-detail--dark .tour-price__amount {
  color: var(--color-text-primary);
}
/* Fee note sits close to the last unit (8px, the amount-to-unit gap)
   rather than a full 22px tier gap away. */
.tour-detail__price .tour-price__note {
  margin-left: -14px;
}

.tour-detail--dark .tour-price__unit,
.tour-detail--dark .tour-price__note {
  color: var(--color-text-muted);
}

/* Secondary actions row: gift link left, Watch Video right. With no video the
   gift link simply sits left on its own. */
.tour-detail__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 16px;
}

.tour-detail__gift {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap var(--transition-base), opacity var(--transition-base);
}

.tour-detail--dark .tour-detail__gift {
  color: var(--color-cyan);
}

.tour-detail--light .tour-detail__gift {
  color: var(--color-text-dark);
}

.tour-detail__gift:hover {
  gap: 10px;
  opacity: 0.85;
}

/* Watch Video: quiet outlined pill so the Book button stays the one loud
   action. Sits right of the gift link. */
.tour-detail__video {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.tour-detail__video-icon {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.tour-detail--dark .tour-detail__video {
  color: var(--color-text-primary);
  border-color: rgba(var(--color-text-primary-rgb), 0.35);
}

.tour-detail--dark .tour-detail__video-icon {
  color: var(--color-cyan);
}

.tour-detail--dark .tour-detail__video:hover {
  border-color: var(--color-cyan);
  background-color: rgba(var(--color-cyan-rgb), 0.08);
}

.tour-detail--light .tour-detail__video {
  color: var(--color-text-dark);
  border-color: rgba(var(--color-text-dark-rgb), 0.35);
}

.tour-detail--light .tour-detail__video:hover {
  border-color: var(--color-text-dark);
  background-color: rgba(var(--color-text-dark-rgb), 0.06);
}

.tour-detail__video:hover .tour-detail__video-icon {
  transform: scale(1.15);
}

.tour-detail__video:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.tour-detail--light .tour-detail__video:focus-visible {
  outline-color: var(--color-text-dark);
}

/* Call pill: the closing band's outlined "Call 0800" button, used when a tour
   has no booking link. Sized to its text, not the column. Light sections get
   dark ink so it stays readable on off-white. */
.tour-detail__call {
  align-self: flex-start;
}

/* Contact Us + Call pair, matching the Corporate closing band. */
.tour-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
}

/* Phones: the pair stacks, so give both pills the wider one's width. */
@media (max-width: 479px) {
  .tour-detail__actions {
    display: grid;
    grid-template-columns: max-content;
  }

  .tour-detail__actions > a {
    text-align: center;
  }
}

.tour-detail__actions .btn-primary:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.tour-detail--light .tour-detail__actions .btn-primary:focus-visible {
  outline-color: var(--color-text-dark);
}

.tour-detail__call:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.tour-detail--light .tour-detail__call {
  color: var(--color-text-dark);
  border-color: rgba(var(--color-text-dark-rgb), 0.35);
}

.tour-detail--light .tour-detail__call:hover {
  color: var(--color-text-dark);
  border-color: var(--color-text-dark);
  background: rgba(var(--color-text-dark-rgb), 0.06);
}

.tour-detail--light .tour-detail__call:focus-visible {
  outline-color: var(--color-text-dark);
}

/* Video popup. Built by assets/js/tour-video.js on first click. */
.video-modal {
  width: min(960px, 92vw);
  max-width: none;
  /* The global reset zeroes dialog margins; auto restores the centring. */
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--color-text-primary);
  animation: video-modal-in 0.25s ease-out;
}

.video-modal::backdrop {
  background: rgba(var(--color-footer-rgb), 0.9);
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Close sits above the player's top-right corner so it never covers YouTube's own controls. */
.video-modal__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(var(--color-text-primary-rgb), 0.35);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.video-modal__close:hover {
  border-color: var(--color-cyan);
  background-color: rgba(var(--color-cyan-rgb), 0.08);
}

.video-modal__close:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

html.video-modal-open {
  overflow: hidden;
}

@keyframes video-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal { animation: none; }
  .tour-detail__video,
  .tour-detail__video-icon { transition: none; }
}

/* Map column */
.tour-detail__map {
  height: 420px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.tour-detail__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tour media column: photo leads, smaller map below.
   A map should never be the first thing people see. The Evening Glowworm
   tour swaps the plain map for a "Location to meet" note (meet at Waimarino). */
.tour-detail__media {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.tour-detail__photo-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  flex: 2 1 0;
  min-height: 240px;
}

.tour-detail__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.tour-detail__region {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-footer-rgb), 0.72);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.tour-detail__map--small {
  height: auto;
  flex: 2 1 0;
  min-height: 200px;
}

/* Every tour's media column holds photo + a "Location to meet" block
   (heading + note + map). The meet wrapper is a flex column so the map
   fills the remaining height and its attribution strip is not truncated. */
.tour-detail__meet {
  flex: 2 1 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.tour-detail__meet .tour-detail__map--small {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
}

/* Evening Glowworm meeting note */
.tour-detail__meet-heading {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.tour-detail__meet-note {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.tour-detail--dark .tour-detail__meet-heading,
.tour-detail--dark .tour-detail__meet-note {
  color: var(--color-text-primary);
}

.tour-detail--light .tour-detail__meet-heading,
.tour-detail--light .tour-detail__meet-note {
  color: var(--color-text-dark);
}

/* --- Tour Stat Tiles --- */
.tour-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.tour-stat-tile {
  border-radius: var(--border-radius-md, 8px);
  padding: 16px 12px;
  text-align: center;
}

.tour-stat-tile__value {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.tour-stat-tile__label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Dark section: light text on dark surface tiles */
.tour-detail--dark .tour-stat-tile {
  background: var(--color-surface);
}
.tour-detail--dark .tour-stat-tile__value {
  color: var(--color-text-primary);
}
.tour-detail--dark .tour-stat-tile__label {
  color: var(--color-text-muted);
}

/* Light section: dark text on white tiles with a subtle border */
.tour-detail--light .tour-stat-tile {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-light);
}
.tour-detail--light .tour-stat-tile__value {
  color: var(--color-text-dark);
}
.tour-detail--light .tour-stat-tile__label {
  color: var(--color-text-dark-muted);
}

/* --- Tour Add-On Block --- */
.tour-addon {
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: var(--radius-card);
  border-left: 3px solid var(--color-cyan);
}

.tour-addon--dark {
  background: var(--color-surface);
  border-color: var(--color-cyan);
}

.tour-addon--light {
  background: var(--color-surface-light);
  border-color: var(--color-text-dark);
}

.tour-addon__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 10px;
}

.tour-addon--light .tour-addon__label {
  color: var(--color-text-dark-muted);
}

.tour-addon__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 14px;
}

.tour-addon--dark .tour-addon__name {
  color: var(--color-text-primary);
}

.tour-addon--light .tour-addon__name {
  color: var(--color-text-dark);
}

.tour-addon__desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.tour-addon--dark .tour-addon__desc {
  color: rgba(var(--color-text-primary-rgb), 0.72);
}

.tour-addon--light .tour-addon__desc {
  color: var(--color-text-dark-muted);
}

.tour-addon__includes {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tour-addon__includes li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-addon--dark .tour-addon__includes li {
  color: rgba(var(--color-text-primary-rgb), 0.80);
}

.tour-addon--dark .tour-addon__includes svg {
  color: var(--color-cyan);
  flex-shrink: 0;
}

.tour-addon--light .tour-addon__includes li {
  color: var(--color-text-dark);
}

.tour-addon--light .tour-addon__includes svg {
  color: var(--color-text-dark);
  flex-shrink: 0;
}

.tour-addon__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.tour-addon--dark .tour-addon__btn {
  color: var(--color-cyan);
}

.tour-addon--dark .tour-addon__btn:hover {
  color: var(--color-text-primary);
  gap: 10px;
}

.tour-addon--light .tour-addon__btn {
  color: var(--color-text-dark);
}

.tour-addon--light .tour-addon__btn:hover {
  gap: 10px;
}

/* --- Destination Pages — Responsive --- */
@media (max-width: 1100px) {
  .dest-tours__grid--four {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
  }
}

@media (max-width: 900px) {
  .dest-tours__grid,
  .dest-tours__grid--four {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .tour-detail__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tour-detail__map {
    height: 300px;
  }

  .tour-detail {
    padding: 64px 0;
  }
}

@media (max-width: 600px) {
  .dest-hero {
    height: 38vh;
  }

  .dest-tours {
    padding: 56px 0;
  }

  .dest-tours__header {
    margin-bottom: 32px;
  }
}

/* ============================================================
   About page (page-about.php)
   Magazine-style brand story: alternating bands, narrow reading
   column, milestones strip, closing statement. Reveal handled
   globally by .reveal / scroll-reveal.js.
   ============================================================ */

/* --- About hero ---
   Overrides the shared .dest-hero (a short 45vh banner built for
   three-word destination headings). The About headline is a full
   sentence, so this hero is taller, clears the 64px fixed header,
   caps the heading size, and grades the overlay so the photo stays
   visible up top instead of sitting under a flat dark wash. */
.about-hero {
  height: 74vh;
  min-height: 560px;
}

.about-hero .dest-hero__content {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 96px; /* keeps hero content clear of the fixed nav */
}

.about-hero .dest-hero__heading {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem);
  max-width: 21ch;
  margin: 14px auto 18px;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.about-hero .dest-hero__sub {
  max-width: 600px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.about-hero .dest-hero__bg {
  /* Lift the photo out of the mud without blowing highlights:
     a touch more brightness, gentle contrast to hold the shadows,
     and a nudge of saturation so the greens and sky read as film,
     not flat digital. Reads as a graded 35mm frame, not AI slop. */
  filter: brightness(1.10) contrast(1.04) saturate(1.08);
}

.about-hero .dest-hero__overlay {
  /* Lighter wash up top so the sky and pines breathe; keep enough
     grade at the bottom third to seat the sub-headline copy. */
  background: linear-gradient(
    to bottom,
    rgba(var(--color-parallax-rgb), 0.12) 0%,
    rgba(var(--color-parallax-rgb), 0.28) 55%,
    rgba(var(--color-parallax-rgb), 0.70) 100%
  );
}

@media (max-width: 600px) {
  .about-hero {
    height: 62vh;
    min-height: 480px;
  }

  .about-hero .dest-hero__content {
    padding-top: 80px;
  }
}

.about-band {
  padding: clamp(72px, 9vw, 128px) 0;
}

.about-band--light {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

.about-band--dark {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.about-band--close {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* Opening statement */
.about-lead {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-lead__text {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  line-height: 1.4;
  color: var(--color-text-dark);
  margin: 0;
}

/* Milestones strip */
.about-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  justify-content: center;
  max-width: 860px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--color-border-light);
}

.about-milestone {
  text-align: center;
  flex: 1 1 auto;
}

.about-milestone__value {
  font-family: var(--font-heading);
  /* Sized so word values ("Two Generations") hold one line beside "1975" */
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-dark);
}

.about-milestone__label {
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--color-text-dark-muted);
}

/* Story blocks */
.about-story {
  max-width: 720px;
  margin: 0 auto;
}

.about-story__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  margin: 14px 0 24px;
  color: var(--color-text-dark);
}

.about-story__heading--light {
  color: var(--color-text-primary);
}

.about-story__body {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin: 0;
}

.about-story__body--light {
  color: var(--color-text-primary);
}

/* Same paragraph gap the split sections use (.about-split__text). */
.about-story .about-story__body + .about-story__body {
  margin-top: 20px;
}

/* Closing statement */
.about-close {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.about-close__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.35;
  color: var(--color-text-primary);
  margin: 0 0 clamp(32px, 4vw, 44px);
}

.about-close__btn {
  display: inline-flex;
}

/* Opening support line under the lead */
.about-lead__support {
  margin: 20px 0 0;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-text-dark-muted);
}

/* Split layout: text beside a figure */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

.about-split__text .about-story__body + .about-story__body {
  margin-top: 20px;
}

.about-split--reverse .about-split__text { order: 2; }
.about-split--reverse .about-figure { order: 1; }

/* Figures (photo or "to be supplied" placeholder) */
.about-figure {
  margin: 0;
}

.about-figure__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.about-figure__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-figure__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
  border: 2px dashed currentColor;
  border-radius: var(--radius-card);
  opacity: 0.5;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
}

.about-figure__ph small {
  font-size: 0.82rem;
}

.about-figure__caption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Full-bleed glowworm feature band */
/* Editorial photo band: the image is the hero, copy is a plaque
   anchored bottom-left. Do not centre-stack type over a hero photo. */
.about-feature {
  position: relative;
  min-height: min(80vh, 720px);
  overflow: hidden;
  color: var(--color-text-primary);
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.about-feature__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.about-feature__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Only a corner shade under the plaque, plus a very gentle edge
     falloff so the image sits inside its own band. Everywhere else,
     the photo is untouched. */
  background:
    radial-gradient(ellipse 60% 60% at 82% 92%, rgba(var(--color-parallax-rgb), 0.55) 0%, rgba(var(--color-parallax-rgb), 0.18) 55%, rgba(var(--color-parallax-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--color-parallax-rgb), 0.10) 0%, rgba(var(--color-parallax-rgb), 0) 25%, rgba(var(--color-parallax-rgb), 0) 75%, rgba(var(--color-parallax-rgb), 0.25) 100%);
}

.about-feature .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 0;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.about-feature__heading {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 2px 0 0 auto;
  max-width: 32ch;
  color: rgba(245, 240, 232, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  text-align: right;
}

.about-feature .container {
  text-align: right;
}

.about-feature .section-label {
  text-align: right;
  display: inline-block;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .about-feature {
    min-height: 70vh;
  }
  .about-feature__heading {
    max-width: 22ch;
  }
  .about-feature .container {
    padding-bottom: 20px;
    padding-right: 16px;
  }
  /* Pull the corner shade tighter to the bottom-right so it still
     sits behind the plaque now that the plaque hugs the corner. */
  .about-feature__overlay {
    background:
      radial-gradient(ellipse 75% 45% at 92% 96%, rgba(var(--color-parallax-rgb), 0.6) 0%, rgba(var(--color-parallax-rgb), 0.22) 55%, rgba(var(--color-parallax-rgb), 0) 100%),
      linear-gradient(180deg, rgba(var(--color-parallax-rgb), 0.10) 0%, rgba(var(--color-parallax-rgb), 0) 25%, rgba(var(--color-parallax-rgb), 0) 75%, rgba(var(--color-parallax-rgb), 0.28) 100%);
  }
}

/* Closing lines */
.about-close__lines {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 0;
}

.about-close__lines li {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.about-close__sign {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  color: var(--color-cyan);
  margin: 0 0 clamp(32px, 4vw, 44px);
}

/* About page responsive */
@media (max-width: 860px) {
  .about-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-split--reverse .about-split__text,
  .about-split--reverse .about-figure {
    order: 0;
  }
}




/* ==========================================================================
   19. Enhancements (tour card meta, heritage intro, testimonials,
       footer contact, skip link)
   ========================================================================== */

/* Skip to content — visible on keyboard focus only */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 300;
  background: var(--color-cyan);
  color: var(--color-dark-btn);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 16px;
}

/* Tour card meta line — lake, tour count, duration */
.tour-card__meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dark-muted);
  margin: 8px 0 12px;
}

/* Heritage intro under the features heading */
.features__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 460px;
  margin: -24px 0 40px;
}

/* --- Testimonials — DARK section --- */
.testimonials {
  background: var(--color-bg);
  padding: 120px 0;
}

@media (max-width: 767px) {
  .testimonials {
    padding: 80px 0;
  }
}

.testimonials__header {
  text-align: center;
  margin-bottom: 64px;
}

.testimonials__header .h2-section {
  margin-top: 12px;
}

.testimonials__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.testimonials__rating svg {
  color: var(--color-cyan);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-card);
  padding: 36px 32px;
}

.testimonial-card__quote p {
  font-family: var(--font-heading);
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-primary);
}

.testimonial-card__quote p::before {
  content: '\201C';
}

.testimonial-card__quote p::after {
  content: '\201D';
}

.testimonial-card__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 28px;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.testimonial-card__detail {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Footer additions --- */
.footer__operator {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: 16px;
}

.footer__links--contact {
  margin-bottom: 20px;
}


/* ==========================================================================
   Admin bar offset (logged-in users only)
   The header and mobile nav are position: fixed at top: 0, so the WP admin
   bar (32px desktop, 46px at <=782px) covered them. Millionleaves 2026-10-05.
   ========================================================================== */
.admin-bar .site-header,
.admin-bar .mobile-nav { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar .mobile-nav { top: 46px; }
}