/* ================================================================
   THEMTACC — The Mount Trek and Camping Company
   Design System: css/style.css
   Complete CSS design system — tokens, resets, typography,
   layout, components, animations, utilities, responsive rules
   ================================================================ */

/* ----------------------------------------------------------------
   @IMPORTS — Web fonts (no system fonts, no generics)
   Bebas Neue  → display headings, prices, hero
   Syne        → section headings, UI labels
   Outfit      → body copy, UI text
   Playfair    → pull quotes, editorial accents
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');


/* ================================================================
   DESIGN TOKENS — All values as CSS custom properties.
   Zero hardcoded hex/numeric values anywhere below this block.
   ================================================================ */
:root {

  /* ----- Color: Backgrounds ----- */
  --color-bg-base:      #070c18; /* darkest — body base, footer inner  */
  --color-bg-primary:   #0a1020; /* main page background                */
  --color-bg-elevated:  #0f1729; /* cards, panels, dropdowns            */
  --color-bg-overlay:   #141e33; /* modals, drawers, tooltips           */
  --color-bg-surface:   #1a2540; /* inputs, secondary UI surfaces       */
  --color-bg-footer:    #050810; /* footer — slightly darker than base  */

  /* ----- Color: Hero gradient stops (kept in tokens) ----- */
  --color-hero-grad-1: #020508;
  --color-hero-grad-2: #050b1a;
  --color-hero-grad-3: #070d1e;
  --color-hero-grad-4: #060b18;
  --color-hero-grad-5: #040810;

  /* ----- Color: Text ----- */
  --color-text-primary:   #e8eef8; /* headlines, strong copy             */
  --color-text-secondary: #a0b0c8; /* body paragraphs, descriptions      */
  --color-text-muted:     #5a6a84; /* captions, placeholders, metadata   */
  --color-text-inverse:   #070c18; /* text on teal / gold surfaces       */
  --color-text-link:      #00d4c8; /* inline hyperlinks                  */

  /* ----- Color: Accent — Teal ----- */
  --color-accent-teal:        #00d4c8;
  --color-accent-teal-light:  #33ddd8;
  --color-accent-teal-dark:   #00a89f;
  --color-accent-teal-dim:    rgba(0, 212, 200, 0.12);
  --color-accent-teal-glow:   rgba(0, 212, 200, 0.35);
  --color-accent-teal-border: rgba(0, 212, 200, 0.25);

  /* ----- Color: Accent — Gold ----- */
  --color-accent-gold:        #e8b84b;
  --color-accent-gold-light:  #f0cc72;
  --color-accent-gold-dark:   #c49830;
  --color-accent-gold-dim:    rgba(232, 184, 75, 0.12);
  --color-accent-gold-glow:   rgba(232, 184, 75, 0.35);
  --color-accent-gold-border: rgba(232, 184, 75, 0.25);

  /* ----- Color: Difficulty Badges ----- */
  --color-difficulty-easy:         #22c55e;
  --color-difficulty-easy-bg:      rgba(34,  197,  94, 0.14);
  --color-difficulty-easy-border:  rgba(34,  197,  94, 0.25);
  --color-difficulty-moderate:        #e8b84b;
  --color-difficulty-moderate-bg:     rgba(232, 184,  75, 0.14);
  --color-difficulty-moderate-border: rgba(232, 184,  75, 0.25);
  --color-difficulty-hard:         #f97316;
  --color-difficulty-hard-bg:      rgba(249, 115,  22, 0.14);
  --color-difficulty-hard-border:  rgba(249, 115,  22, 0.25);
  --color-difficulty-expert:        #ef4444;
  --color-difficulty-expert-bg:     rgba(239,  68,  68, 0.14);
  --color-difficulty-expert-border: rgba(239,  68,  68, 0.25);

  /* ----- Color: Borders ----- */
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-strong: rgba(255, 255, 255, 0.13);
  --color-border-glow:   rgba(0,   212, 200, 0.30);
  --color-border-gold:   rgba(232, 184,  75, 0.25);

  /* ----- Color: Semantic States ----- */
  --color-success:    #22c55e;
  --color-warning:    #f59e0b;
  --color-error:      #ef4444;
  --color-info:       #3b82f6;
  --color-success-bg: rgba(34,  197,  94, 0.10);
  --color-error-bg:   rgba(239,  68,  68, 0.10);
  --color-warning-bg: rgba(245, 158,  11, 0.10);

  /* ----- Typography: Families ----- */
  --font-display:   'Bebas Neue', 'Syne', sans-serif;  /* hero, prices, big display */
  --font-heading:   'Syne', 'Outfit', sans-serif;       /* section headings, UI      */
  --font-body:      'Outfit', sans-serif;               /* body copy, UI text        */
  --font-editorial: 'Playfair Display', serif;          /* pull quotes, editorial    */

  /* ----- Typography: Fluid Scale (clamp) ----- */
  --text-xs:   clamp(0.6875rem, 1.4vw,  0.75rem);   /* 11–12px  */
  --text-sm:   clamp(0.8125rem, 1.7vw,  0.875rem);  /* 13–14px  */
  --text-base: clamp(0.9375rem, 2vw,    1rem);       /* 15–16px  */
  --text-md:   clamp(1rem,      2.1vw,  1.125rem);  /* 16–18px  */
  --text-lg:   clamp(1.125rem,  2.3vw,  1.25rem);   /* 18–20px  */
  --text-xl:   clamp(1.25rem,   2.6vw,  1.5rem);    /* 20–24px  */
  --text-2xl:  clamp(1.5rem,    3.2vw,  2rem);      /* 24–32px  */
  --text-3xl:  clamp(1.875rem,  4vw,    2.5rem);    /* 30–40px  */
  --text-4xl:  clamp(2.25rem,   5vw,    3.5rem);    /* 36–56px  */
  --text-5xl:  clamp(2.75rem,   6.5vw,  5rem);      /* 44–80px  */
  --text-hero: clamp(3.25rem,   9vw,    7.5rem);    /* 52–120px — hero headline */

  /* ----- Typography: Weights ----- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ----- Typography: Line Heights ----- */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ----- Typography: Letter Spacing ----- */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.20em;

  /* ----- Spacing Scale — 8pt grid ----- */
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-11:   44px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-56:   224px;
  --space-64:   256px;

  /* ----- Border Radius ----- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  48px;
  --radius-pill: 9999px;

  /* ----- Shadows ----- */
  --shadow-xs:          0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-xl:          0 16px 48px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-2xl:         0 24px 80px rgba(0, 0, 0, 0.60);
  --shadow-card-hover:  0 20px 60px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--color-border-glow);
  --shadow-teal-glow:   0 0 20px var(--color-accent-teal-glow), 0 0 60px rgba(0, 212, 200, 0.12);
  --shadow-gold-glow:   0 0 20px var(--color-accent-gold-glow), 0 0 60px rgba(232, 184, 75, 0.12);
  --shadow-inner:       inset 0 2px 8px rgba(0, 0, 0, 0.40);

  /* ----- Transitions ----- */
  --transition-instant:      80ms  ease;
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         400ms ease;
  --transition-slower:       600ms ease;
  --transition-spring:       400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce:       500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-ease-out-expo: 600ms cubic-bezier(0.19, 1, 0.22, 1);

  /* ----- Z-Index Scale ----- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;

  /* ----- Layout ----- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;
  --container-pad:  clamp(var(--space-4), 5vw, var(--space-16));

  /* ----- Component Tokens ----- */
  --nav-height:            72px;
  --nav-height-mobile:     60px;
  --hero-min-height:       100svh;
  --card-border-radius:    var(--radius-lg);
  --input-height:          52px;
  --btn-height:            52px;
  --btn-height-sm:         40px;
  --btn-height-lg:         60px;
  --section-pad:           clamp(var(--space-16), 10vw, var(--space-32));
}


/* ================================================================
   MODERN CSS RESET — Opinionated for dark-theme single-page sites
   ================================================================ */

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

/* Remove list markers only on semantic navigation lists */
:where(ul, ol):where([role='list']) {
  list-style: none;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ensure full-height works correctly on mobile browsers */
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  /* Prevent horizontal bleed from animations */
  overflow-x: hidden;
  /* Crisp font rendering on dark backgrounds */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

/* Remove default focus — replaced with custom :focus-visible below */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Prevent media from overflowing their containers */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit the page's type system */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Strip browser button chrome */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Readable line lengths for body paragraphs */
p {
  max-width: 65ch;
}

/* Heading defaults — all headings share base styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

/* Anchor reset */
a {
  color: inherit;
  text-decoration: none;
}

/* Table resets */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ================================================================
   SCROLLBAR — Webkit custom scrollbar for dark theme
   ================================================================ */

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb  {
  background: var(--color-bg-surface);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-teal-dim);
}


/* ================================================================
   SELECTION — Custom highlight color
   ================================================================ */

::selection {
  background: var(--color-accent-teal-dim);
  color: var(--color-accent-teal);
}


/* ================================================================
   TYPOGRAPHY — Type system utility classes
   ================================================================ */

/* --- Display / Bebas Neue large type --- */
.type-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular); /* Bebas Neue is single-weight */
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-none);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* --- Semantic heading classes --- */
.type-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.type-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.type-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
.type-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
.type-h5 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* --- Overline / section label style --- */
.type-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-teal);
}

/* --- Body size classes --- */
.type-lead  { font-size: var(--text-lg);  line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.type-body  { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.type-small { font-size: var(--text-sm);  line-height: var(--leading-normal);  color: var(--color-text-muted); }
.type-tiny  { font-size: var(--text-xs);  line-height: var(--leading-normal);  color: var(--color-text-muted); }

/* --- Pull quote — editorial serif --- */
.type-pull-quote {
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* --- Price display — Bebas Neue, gold --- */
.type-price {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-gold);
  line-height: 1;
}
.type-price-hero {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-gold);
  line-height: 1;
}


/* ================================================================
   LAYOUT — Container, section, grid, flex
   ================================================================ */

/* --- Centered max-width container --- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-sm  { max-width: var(--container-sm);  }
.container-md  { max-width: var(--container-md);  }
.container-lg  { max-width: var(--container-lg);  }
.container-2xl { max-width: var(--container-2xl); }

/* --- Vertical section padding --- */
.section    { padding-block: var(--section-pad); }
.section-sm { padding-block: clamp(var(--space-10), 6vw, var(--space-20)); }

/* --- Responsive grid helpers --- */
.grid   { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fill grids — naturally responsive */
.grid-auto-sm  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid-auto-md  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.grid-auto-lg  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }

/* --- Flex helpers --- */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }


/* ================================================================
   SECTION HEADERS — Reusable section intro blocks
   ================================================================ */

.section-header         { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section-header.centered { text-align: center; }

/* Eyebrow label — teal overline with a decorative rule */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: var(--space-3);
}
/* Decorative line before the label text */
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-accent-teal);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* Colored accent words inside headings */
.highlight-teal { color: var(--color-accent-teal); }
.highlight-gold { color: var(--color-accent-gold); }

.section-description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 52ch;
}
.section-header.centered .section-description { margin-inline: auto; }


/* ================================================================
   BUTTONS — Full button system
   ================================================================ */

/* --- Base button shell --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding-inline: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  /* Minimum accessible touch target */
  min-width: 44px;
  min-height: 44px;
  transition:
    transform      var(--transition-fast),
    box-shadow     var(--transition-fast),
    background-color var(--transition-fast),
    border-color   var(--transition-fast),
    color          var(--transition-fast);
}

/* Universal hover lift */
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* --- Variant: Solid teal (primary CTA) --- */
.btn-primary {
  background: var(--color-accent-teal);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-teal);
  box-shadow: 0 4px 20px var(--color-accent-teal-glow);
}
.btn-primary:hover {
  background: var(--color-accent-teal-light);
  box-shadow: 0 8px 30px var(--color-accent-teal-glow), var(--shadow-teal-glow);
}

/* Arrow slides right on hover — used on "Book Now" */
.btn-primary .btn-arrow { display: inline-block; transition: transform var(--transition-base); }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* --- Variant: Outlined teal (secondary) --- */
.btn-secondary {
  background: transparent;
  color: var(--color-accent-teal);
  border-color: var(--color-accent-teal-border);
}
.btn-secondary:hover {
  background: var(--color-accent-teal-dim);
  border-color: var(--color-accent-teal);
}

/* --- Variant: Ghost (subtle outline) --- */
.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-ghost:hover {
  background: var(--color-bg-surface);
}

/* --- Variant: Gold CTA --- */
.btn-gold {
  background: var(--color-accent-gold);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-gold);
  box-shadow: 0 4px 20px var(--color-accent-gold-glow);
}
.btn-gold:hover {
  background: var(--color-accent-gold-light);
  box-shadow: 0 8px 30px var(--color-accent-gold-glow), var(--shadow-gold-glow);
}

/* --- Size modifiers --- */
.btn-sm { height: var(--btn-height-sm); padding-inline: var(--space-5); font-size: var(--text-xs); }
.btn-lg { height: var(--btn-height-lg); padding-inline: var(--space-10); font-size: var(--text-md); }

/* --- Icon-only square/rounded button --- */
.btn-icon { width: var(--btn-height); padding-inline: 0; border-radius: var(--radius-lg); }
.btn-icon.btn-sm { width: var(--btn-height-sm); }

/* --- Loading state --- */
.btn[data-loading] { pointer-events: none; opacity: 0.7; }
.btn[data-loading]::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  margin-left: var(--space-2);
}


/* ================================================================
   BADGES & PILLS — Difficulty, duration, tags
   ================================================================ */

/* --- Base badge shell --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1;
}

/* Color-coded difficulty pills */
.badge-easy     { background: var(--color-difficulty-easy-bg);     color: var(--color-difficulty-easy);     border: 1px solid var(--color-difficulty-easy-border); }
.badge-moderate { background: var(--color-difficulty-moderate-bg); color: var(--color-difficulty-moderate); border: 1px solid var(--color-difficulty-moderate-border); }
.badge-hard     { background: var(--color-difficulty-hard-bg);     color: var(--color-difficulty-hard);     border: 1px solid var(--color-difficulty-hard-border); }
.badge-expert   { background: var(--color-difficulty-expert-bg);   color: var(--color-difficulty-expert);   border: 1px solid var(--color-difficulty-expert-border); }

/* Dark semi-transparent duration pill — sits over card images */
.badge-duration {
  background: rgba(7, 12, 24, 0.75);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Neutral tag pill */
.badge-tag {
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.badge-tag:hover {
  border-color: var(--color-accent-teal-border);
  color: var(--color-accent-teal);
}


/* ================================================================
   FORM ELEMENTS — Custom styled inputs, selects, textareas
   ================================================================ */

/* --- Base input / select / textarea --- */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    background   var(--transition-fast);
}

.form-textarea {
  height: auto;
  min-height: 140px;
  padding: var(--space-4) var(--space-5);
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px var(--color-accent-teal-dim);
  background: var(--color-bg-overlay);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* --- Floating label wrapper --- */
.form-field {
  position: relative;
}
.form-field .form-input,
.form-field .form-select,
.form-field .form-textarea {
  padding-top: var(--space-6);
  padding-bottom: var(--space-2);
}
.form-field label {
  position: absolute;
  top: 50%;
  left: var(--space-5);
  transform: translateY(-50%);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: all var(--transition-fast);
}
.form-field .form-textarea ~ label {
  top: var(--space-5);
  transform: none;
}
/* Float up when focused or filled */
.form-field .form-input:focus ~ label,
.form-field .form-input:not(:placeholder-shown) ~ label,
.form-field .form-select:focus ~ label,
.form-field .form-textarea:focus ~ label,
.form-field .form-textarea:not(:placeholder-shown) ~ label {
  top: var(--space-2);
  transform: translateY(0) scale(0.78);
  color: var(--color-accent-teal);
  letter-spacing: var(--tracking-wide);
}

/* --- Custom select dropdown arrow --- */
.form-select-wrapper          { position: relative; }
.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
  pointer-events: none;
}
.form-select option {
  background: var(--color-bg-overlay);
  color: var(--color-text-primary);
}


/* ================================================================
   CARD — Base card shell
   ================================================================ */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform      var(--transition-base),
    box-shadow     var(--transition-base),
    border-color   var(--transition-base);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-glow);
}

/* Card image — overflow hidden ensures scale stays clipped */
.card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.card:hover .card-image img { transform: scale(1.04); }

.card-body   { padding: var(--space-5) var(--space-6); }
.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ================================================================
   TOUR CARD — Full spec component
   ================================================================ */

.tour-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform    var(--transition-base),
    box-shadow   var(--transition-base),
    border-color var(--transition-base);
}
.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-glow);
}

/* Image wrapper */
.tour-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
}
.tour-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.tour-card:hover .tour-card__image img { transform: scale(1.04); }

/* Duration badge — positioned top-right over the image */
.tour-card__duration {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(7, 12, 24, 0.75);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Heart / save button — top-left over the image */
.tour-card__heart {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(7, 12, 24, 0.65);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition:
    transform         var(--transition-spring),
    background-color  var(--transition-fast),
    border-color      var(--transition-fast),
    color             var(--transition-fast);
}
.tour-card__heart:hover {
  color: var(--color-accent-teal);
  border-color: var(--color-accent-teal-border);
}
/* Filled teal state when saved */
.tour-card__heart.is-saved {
  background: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  color: var(--color-text-inverse);
}
/* Bounce animation triggered by JS on click */
.tour-card__heart.animate-bounce {
  animation: heartBounce var(--transition-bounce) forwards;
}

/* Card body */
.tour-card__body {
  padding: var(--space-5) var(--space-6) var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tour-card__region {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: var(--space-2);
}
.tour-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-card__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Footer: price left, book button right */
.tour-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
}
.tour-card__price-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}
.tour-card__price {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-gold);
  line-height: 1;
}

/* "Book Now" button within the card */
.tour-card__book-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  background: var(--color-accent-teal);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    box-shadow       var(--transition-fast),
    transform        var(--transition-fast);
}
.tour-card__book-btn .btn-arrow { display: inline-block; transition: transform var(--transition-base); }
.tour-card__book-btn:hover {
  background: var(--color-accent-teal-light);
  box-shadow: 0 4px 16px var(--color-accent-teal-glow);
}
.tour-card__book-btn:hover .btn-arrow { transform: translateX(4px); }


/* ================================================================
   NAVIGATION — Base shell
   ================================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition:
    background-color var(--transition-base),
    backdrop-filter  var(--transition-base);
}
/* Frosted glass after scrolling past hero */
.nav.is-scrolled {
  background: rgba(10, 16, 32, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Logo wordmark */
.nav__logo {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__logo span { color: var(--color-accent-teal); }

/* Desktop nav links — hidden on mobile */
.nav__links {
  display: none;
  list-style: none;
  align-items: center;
  gap: var(--space-1);
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color 120ms ease;
}
/* Teal underline that slides in from left */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-accent-teal);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.nav__link:hover,
.nav__link.is-active   { color: var(--color-text-primary); }
.nav__link:hover::after { transform: scaleX(1); }
/* Active underline appears instantly — no slide-in on page load */
.nav__link.is-active::after {
  transform: scaleX(1);
  transition: none;
}

/* Nav CTA */
.nav__cta { flex-shrink: 0; }

/* Hamburger button — visible on mobile */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2-5);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
}
.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-pill);
  transform-origin: center;
  transition:
    transform  var(--transition-base),
    opacity    var(--transition-fast);
}
/* Animate spans into an ✕ when menu is open */
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen mobile overlay */
.nav__mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: rgba(7, 12, 24, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity   var(--transition-base),
    transform var(--transition-base);
}
.nav__mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav__mobile-link {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-tight);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.nav__mobile-link:hover { color: var(--color-accent-teal); }


/* ================================================================
   HERO — Base shell
   ================================================================ */

.hero {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #070c18;
}

/* Background photo layer */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1;
}

/* Directional gradient overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      rgba(7, 12, 24, 0.55) 0%,
      rgba(7, 12, 24, 0.45) 30%,
      rgba(7, 12, 24, 0.40) 60%,
      rgba(10, 16, 32, 0.85) 85%,
      var(--color-bg-primary) 100%
    );
}

/* Ambient coloured light mesh — CSS-only, no images */
.hero__gradient-mesh {
  position: absolute;
  inset: -50%;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0, 212, 200, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 72% 62%, rgba(232, 184, 75, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 82%, rgba(0, 60, 110, 0.12) 0%, transparent 60%);
  animation: gradientMesh 10s ease-in-out infinite alternate;
}

/* Mountain SVG silhouette at the hero base */
.hero__silhouette {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: 4;
  line-height: 0;
  pointer-events: none;
}
.hero__silhouette svg {
  width: 100%;
  height: auto;
  fill: var(--color-bg-primary);
}

/* Hero text content */
.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-top: var(--nav-height);
}


/* ================================================================
   DESTINATION CARD — Region/category cards with overlay on hover
   ================================================================ */

.destination-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.destination-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-base);
}
.destination-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.75);
}
/* Gradient overlay that slides up on hover */
.destination-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 12, 24, 0.85) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}
.destination-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.destination-card__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* "Explore →" label revealed on hover */
.destination-card__explore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  background: var(--color-accent-teal);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-spring);
  white-space: nowrap;
}
.destination-card:hover .destination-card__explore {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ================================================================
   STAT / COUNTER BLOCKS
   ================================================================ */

.stat-block { text-align: center; }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-teal);
  line-height: 1;
  display: block;
}
.stat-suffix { color: var(--color-accent-gold); }
.stat-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  display: block;
}


/* ================================================================
   ACCORDION — Day-by-day itinerary
   ================================================================ */

.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.accordion-item + .accordion-item { margin-top: var(--space-3); }
.accordion-item.is-open { border-color: var(--color-accent-teal-border); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-elevated);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}
.accordion-trigger:hover { background: var(--color-bg-overlay); }

.accordion-trigger__day {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-teal);
  white-space: nowrap;
  flex-shrink: 0;
}
.accordion-trigger__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}
/* Chevron rotates 180° when open */
.accordion-trigger__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-base), color var(--transition-fast);
}
.accordion-item.is-open .accordion-trigger__icon {
  transform: rotate(180deg);
  color: var(--color-accent-teal);
}

/* Height animated via JS (element.style.height = scrollHeight) */
.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-base);
}
.accordion-panel__inner {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-overlay);
}


/* ================================================================
   INCLUDES / EXCLUDES LISTS — Tour detail
   ================================================================ */

.includes-list,
.excludes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.includes-list li,
.excludes-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
/* Green check circle */
.includes-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  margin-top: 1px;
}
/* Red X circle */
.excludes-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
  margin-top: 1px;
}


/* ================================================================
   TOUR DETAIL LAYOUT — Sticky sidebar + main content
   ================================================================ */

.tour-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .tour-detail-layout { grid-template-columns: 65fr 35fr; }
}

.tour-sidebar {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
@media (min-width: 1024px) {
  .tour-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    max-height: calc(100svh - var(--nav-height) - var(--space-12));
    overflow-y: auto;
  }
}


/* ================================================================
   FILTERS SIDEBAR — Tours listing page
   ================================================================ */

.filters-sidebar {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
@media (min-width: 1024px) {
  .filters-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    max-height: calc(100svh - var(--nav-height) - var(--space-12));
    overflow-y: auto;
  }
}

.filter-group {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }

.filter-group__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* Active filter chips above results */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-teal-dim);
  border: 1px solid var(--color-accent-teal-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent-teal);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.filter-chip:hover { opacity: 0.7; }

/* Custom checkbox */
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding-block: var(--space-1-5);
  min-height: 44px;
}
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.custom-checkbox__box {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color     var(--transition-fast),
    background-color var(--transition-fast);
}
.custom-checkbox input:checked ~ .custom-checkbox__box {
  background: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
}


/* ================================================================
   RANGE SLIDER — Custom styled
   ================================================================ */

.range-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  outline: none;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  cursor: pointer;
  border: 3px solid var(--color-bg-elevated);
  box-shadow: 0 0 0 1px var(--color-accent-teal);
  transition: box-shadow var(--transition-fast);
}
.range-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px var(--color-accent-teal-dim);
}
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  cursor: pointer;
  border: 3px solid var(--color-bg-elevated);
}


/* ================================================================
   MOBILE BOTTOM SHEET — Filter drawer on small screens
   ================================================================ */

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-6);
  max-height: 85svh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
}
.bottom-sheet.is-open { transform: translateY(0); }
.bottom-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  margin: 0 auto var(--space-6);
}

/* Sheet backdrop */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(7, 12, 24, 0.70);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: all; }


/* ================================================================
   STICKY BOOK BAR — Bottom of screen on mobile tour detail
   ================================================================ */

.sticky-book-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(15, 23, 41, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  /* Hidden on desktop — sidebar handles booking */
  .sticky-book-bar { display: none; }
}


/* ================================================================
   FOOTER
   ================================================================ */

.footer {
  background: var(--color-bg-footer);
  /* Teal accent line at top, with soft glow */
  border-top: 1px solid var(--color-accent-teal-border);
  box-shadow: 0 -1px 0 var(--color-accent-teal-border), 0 -6px 24px rgba(0, 212, 200, 0.04);
}

.footer__main {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

.footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--color-accent-teal); }

/* Social icon grid */
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer__social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition:
    transform         var(--transition-fast),
    color             var(--transition-fast),
    background-color  var(--transition-fast),
    box-shadow        var(--transition-fast);
}
.footer__social-icon:hover {
  transform: scale(1.2);
  color: var(--color-accent-teal);
  background: var(--color-accent-teal-dim);
  box-shadow: 0 0 12px var(--color-accent-teal-glow);
}

/* Newsletter form */
.footer__newsletter { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer__newsletter .form-input { height: 44px; font-size: var(--text-sm); flex: 1; min-width: 0; }
.footer__newsletter .btn        { height: 44px; padding-inline: var(--space-5); font-size: var(--text-xs); flex-shrink: 0; }

/* Bottom copyright bar */
.footer__bottom { border-top: 1px solid var(--color-border-subtle); padding-block: var(--space-6); }
.footer__bottom-inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer__copyright { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer__legal-link:hover { color: var(--color-accent-teal); }


/* ================================================================
   DIVIDERS & DECORATIVE ELEMENTS
   ================================================================ */

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin-block: var(--space-8);
}
/* Gradient divider that fades to transparent at edges */
.divider-glow {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent-teal-border), transparent);
  border: none;
}

/* Large decorative section number — sits behind content */
.section-number {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 12rem);
  color: var(--color-border-subtle);
  line-height: 1;
  position: absolute;
  user-select: none;
  pointer-events: none;
  letter-spacing: var(--tracking-wider);
}

/* Breadcrumb nav */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb__separator { opacity: 0.35; }
.breadcrumb a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-accent-teal); }
.breadcrumb__current { color: var(--color-text-secondary); }


/* ================================================================
   MASONRY GRID — Photo gallery
   ================================================================ */

.masonry-grid {
  columns: 1;
  column-gap: var(--space-4);
}
@media (min-width: 640px)  { .masonry-grid { columns: 2; } }
@media (min-width: 1024px) { .masonry-grid { columns: 3; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.masonry-item img {
  width: 100%;
  display: block;
  transition: transform var(--transition-slow), filter var(--transition-base);
}
.masonry-item:hover img { transform: scale(1.04); filter: brightness(0.82); }
.masonry-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 12, 24, 0.65), transparent);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  transition: opacity var(--transition-base);
}
.masonry-item:hover .masonry-item__overlay { opacity: 1; }


/* ================================================================
   LIGHTBOX
   ================================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(7, 12, 24, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.lightbox.is-open { opacity: 1; pointer-events: all; }

.lightbox__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.lightbox__close:hover { color: var(--color-text-primary); background: var(--color-bg-overlay); }
.lightbox__img {
  max-width: 90vw;
  max-height: 85svh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.lightbox__prev { left: var(--space-6); }
.lightbox__next { right: var(--space-6); }
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--color-accent-teal); background: var(--color-bg-overlay); }


/* ================================================================
   CUSTOM CURSOR — Desktop only (hover: hover)
   ================================================================ */

@media (min-width: 1024px) and (hover: hover) {
  /* Suppress native cursor site-wide */
  * { cursor: none !important; }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    will-change: transform;
  }
  /* Small solid dot — snaps to mouse position via JS */
  .cursor__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent-teal);
    transform: translate(-50%, -50%);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }
  /* Larger ring — follows with inertia via JS lerp */
  .cursor__ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 212, 200, 0.50);
    transform: translate(-50%, -50%);
    transition:
      width          var(--transition-base),
      height         var(--transition-base),
      border-radius  var(--transition-base),
      background     var(--transition-fast),
      opacity        var(--transition-fast);
  }
  /* "Trek" pill shape when hovering over a tour card */
  .cursor__ring.is-card-hover {
    width: 64px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-teal);
    border-color: transparent;
  }
}


/* ================================================================
   SCROLL-DRIVEN REVEAL ANIMATIONS
   Classes applied via IntersectionObserver in main.js
   Only transform/opacity animated — never width/height/margin
   ================================================================ */

/* Hidden initial state */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered card children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

/* Section label slides in from the left */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

/* Scale-up for imagery */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }


/* ================================================================
   HERO STAGGER — Page-load entry animations
   All use transform/opacity only
   ================================================================ */

.hero-anim-1 { animation: fadeUp 0.70s var(--transition-ease-out-expo) 0ms    both; }
.hero-anim-2 { animation: fadeUp 0.70s var(--transition-ease-out-expo) 200ms  both; }
.hero-anim-3 { animation: fadeUp 0.70s var(--transition-ease-out-expo) 400ms  both; }
.hero-anim-4 { animation: popIn  0.60s var(--transition-spring)         900ms  both; }
.hero-anim-5 { animation: barSlideUp 0.70s var(--transition-ease-out-expo) 1100ms both; }
.hero-anim-6 { animation: slideUp 0.70s var(--transition-ease-out-expo) 1300ms both; }


/* ================================================================
   TOAST / NOTIFICATION
   ================================================================ */

.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: var(--z-toast);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
  opacity: 0;
  transition:
    transform var(--transition-spring),
    opacity   var(--transition-base);
}
.toast.is-shown           { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-success         { border-color: rgba(34,  197,  94, 0.30); }
.toast.is-error           { border-color: rgba(239,  68,  68, 0.30); }


/* ================================================================
   LOADING SKELETON — Shimmer placeholder for async content
   ================================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-surface)  25%,
    var(--color-bg-overlay)  50%,
    var(--color-bg-surface)  75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}


/* ================================================================
   KEYFRAME ANIMATIONS
   All animate only transform and/or opacity
   ================================================================ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes heartBounce {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.42); }
  60%  { transform: scale(0.90); }
  80%  { transform: scale(1.16); }
  100% { transform: scale(1);    }
}

/* Hero mesh background animation — subtle hue and position drift */
@keyframes gradientMesh {
  0%   { transform: translate(0,   0)   rotate(0deg);  filter: hue-rotate(0deg);  }
  33%  { transform: translate(3%,  2%)  rotate(1deg);  filter: hue-rotate(10deg); }
  66%  { transform: translate(-2%, 3%)  rotate(-1deg); filter: hue-rotate(-8deg); }
  100% { transform: translate(0,   0)   rotate(0deg);  filter: hue-rotate(0deg);  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.84); }
  70%  {             transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1);    }
}

@keyframes barSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

/* Pulsing ring glow for CTA buttons */
@keyframes pulseRing {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0   var(--color-accent-teal-glow); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 12px transparent; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0   transparent;  }
}

@keyframes countPulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}


/* ================================================================
   UTILITY CLASSES — Spacing, text, display, overflow
   ================================================================ */

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }
.px-4  { padding-inline: var(--space-4); }
.py-4  { padding-block: var(--space-4); }

/* Display */
.hidden  { display: none; }
.block   { display: block; }
.inline  { display: inline; }
/* 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-width: 0;
}

/* Text */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-teal    { color: var(--color-accent-teal); }
.text-gold    { color: var(--color-accent-gold); }
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-text-primary); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Dimension shortcuts */
.w-full       { width: 100%; }
.h-full       { height: 100%; }
.min-h-screen { min-height: 100svh; }

/* Aspect ratios */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1; }
.aspect-card   { aspect-ratio: 16 / 10; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Border radius shortcuts */
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-pill); }

/* Pointer events */
.pointer-events-none { pointer-events: none; }


/* ================================================================
   RESPONSIVE UTILITY OVERRIDES — Mobile-first breakpoints
   ================================================================ */

/* sm: 480px */
@media (min-width: 480px) {
  .sm\:grid-2    { grid-template-columns: repeat(2, 1fr); }
  .sm\:hidden    { display: none !important; }
  .sm\:block     { display: block !important; }
  .sm\:flex      { display: flex !important; }
  .sm\:flex-row  { flex-direction: row !important; }
}

/* md: 768px */
@media (min-width: 768px) {
  .md\:grid-2    { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3    { grid-template-columns: repeat(3, 1fr); }
  .md\:hidden    { display: none !important; }
  .md\:block     { display: block !important; }
  .md\:flex      { display: flex !important; }
  .md\:flex-row  { flex-direction: row !important; }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .lg\:grid-3    { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4    { grid-template-columns: repeat(4, 1fr); }
  .lg\:hidden    { display: none !important; }
  .lg\:block     { display: block !important; }
  .lg\:flex      { display: flex !important; }
  .lg\:flex-row  { flex-direction: row !important; }
}

/* xl: 1280px */
@media (min-width: 1280px) {
  .xl\:grid-4    { grid-template-columns: repeat(4, 1fr); }
}


/* ================================================================
   REDUCED MOTION — Respect prefers-reduced-motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Ensure reveal elements are shown even without animation */
  .reveal,
  .reveal-stagger > *,
  .reveal-left,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Disable gradient mesh animation */
  .hero__gradient-mesh { animation: none; }
}


/* ================================================================
   NAVIGATION EXTENSION — Dropdown, actions, mobile overlay
   Extends the nav shell defined earlier in this file
   ================================================================ */

/* Actions wrapper: CTA button + hamburger sit together */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Small mountain SVG icon inside the logo wordmark */
.nav__logo-icon {
  color: var(--color-accent-teal);
  margin-right: var(--space-1-5);
  flex-shrink: 0;
}

/* ── Dropdown wrapper ─────────────────────────────────────── */

.nav__dropdown-wrapper {
  position: relative;
}

/* Trigger inherits .nav__link but is a <button> — reset chrome */
.nav__dropdown-trigger {
  background: none;
  font-family: var(--font-body);
  border: none;
}

/* Chevron rotates when wrapper is hovered or .is-open */
.nav__dropdown-chevron {
  transition: transform var(--transition-base), color var(--transition-fast);
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.nav__dropdown-wrapper:hover .nav__dropdown-chevron,
.nav__dropdown-wrapper.is-open .nav__dropdown-chevron {
  transform: rotate(180deg);
  color: var(--color-accent-teal);
}

/* The floating dropdown panel */
.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 264px;
  background: rgba(20, 30, 51, 0.96);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition:
    opacity   var(--transition-base),
    transform var(--transition-base);
}
/* CSS hover + JS .is-open both trigger visibility */
.nav__dropdown-wrapper:hover .nav__dropdown,
.nav__dropdown-wrapper.is-open .nav__dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Individual dropdown row */
.nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast);
}
.nav__dropdown-item:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Icon pill inside each dropdown row */
.nav__dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-teal);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}
.nav__dropdown-item:hover .nav__dropdown-icon {
  background: var(--color-accent-teal-dim);
}

/* Hairline divider between list items and "View All" */
.nav__dropdown-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) var(--space-3);
}

/* "View All Tours →" footer link */
.nav__dropdown-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-teal);
  transition: background-color var(--transition-fast);
}
.nav__dropdown-view-all:hover {
  background: var(--color-accent-teal-dim);
}

/* ── Mobile backdrop ──────────────────────────────────────── */

.nav__mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 2);
  background: rgba(7, 12, 24, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.nav__mobile-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Mobile overlay menu ──────────────────────────────────── */

/* Close (✕) button in the top-right corner of the overlay */
.nav__mobile-close {
  position: absolute;
  top: var(--space-6);
  right: var(--container-pad);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__mobile-close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-overlay);
}

/* THEMTACC wordmark repeated large inside the overlay */
.nav__mobile-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-10);
  display: block;
}
.nav__mobile-logo span { color: var(--color-accent-teal); }

/* Mobile link list */
.nav__mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-10);
  width: 100%;
}

/* Each <li> starts invisible and slides up — stagger via inline --mobile-delay */
.nav__mobile-links li {
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
  transition-delay: 0ms;
}
.nav__mobile-menu.is-open .nav__mobile-links li {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--mobile-delay, 60ms);
}

/* Mobile link text */
.nav__mobile-link {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-tight);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}
.nav__mobile-link:hover,
.nav__mobile-link.is-active { color: var(--color-accent-teal); }

/* Mobile CTA — also stagger-animated */
.nav__mobile-cta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo),
    background-color var(--transition-fast),
    box-shadow       var(--transition-fast);
  transition-delay: 0ms;
}
.nav__mobile-menu.is-open .nav__mobile-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--mobile-delay, 460ms);
}

/* Social icons in mobile overlay */
.nav__mobile-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  opacity: 0;
  transition: opacity var(--transition-slow) 520ms;
}
.nav__mobile-menu.is-open .nav__mobile-socials { opacity: 1; }

.nav__mobile-social {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition:
    color             var(--transition-fast),
    background-color  var(--transition-fast),
    box-shadow        var(--transition-fast);
}
.nav__mobile-social:hover {
  color: var(--color-accent-teal);
  background: var(--color-accent-teal-dim);
  box-shadow: 0 0 12px var(--color-accent-teal-glow);
}


/* ================================================================
   HERO SECTION — Homepage hero content
   Extends the .hero shell already defined above
   ================================================================ */

/* Override hero to flex-column so stats strip sits at the natural bottom */
.hero {
  flex-direction: column;
  justify-content: space-between;
}

/* Atmospheric layered gradient — kept minimal so photo shows through */
.hero__bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}

/* Vertically fills the hero, content is centered */
.hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-16);
}

/* Eyebrow: pulsing dot + label text */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  flex-shrink: 0;
  animation: pulseRing 2.5s ease-in-out infinite;
}

.hero__eyebrow-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Main headline — Bebas Neue, full viewport-scale size */
.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.92;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}

/* Each text line stacks as a block; overflow clips the char-reveal animation */
.hero__hl {
  display: block;
  overflow: hidden;
}

/* Accent line — teal */
.hero__hl--teal {
  color: var(--color-accent-teal);
}

/* Outline / hollow text for one line — very premium on Bebas Neue */
.hero__hl--outline {
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Individual character <span> injected by JS for the reveal animation */
.hero__char {
  display: inline-block;
  animation: charReveal 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: var(--char-delay, 0ms);
}

@keyframes charReveal {
  from { opacity: 0; transform: translateY(90%); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Body copy under the headline */
.hero__subtext {
  font-size: clamp(var(--text-base), 2.2vw, var(--text-xl));
  color: var(--color-text-secondary);
  max-width: 54ch;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

/* Altitude tag strip: K2 · 8611m etc */
.hero__peaks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-10);
}

.hero__peak-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Teal dot before each peak tag */
.hero__peak-tag::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  flex-shrink: 0;
}

.hero__peak-sep {
  color: var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
}

/* CTA button pair */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── Scroll indicator ─────────────────────────────────────── */

/* Appears late (2s delay) after all hero animations complete */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  animation: fadeUp 0.8s ease 2.2s both;
  pointer-events: none;
}

.hero__scroll-text {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--color-accent-teal), transparent);
  transform-origin: top;
  animation: scrollDrop 2.2s ease-in-out 2.5s infinite;
}

@keyframes scrollDrop {
  0%   { transform: scaleY(0); opacity: 1; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Stats strip ────────────────────────────────────────────── */

/* Glassmorphism panel that locks to the bottom of the hero body */
.hero__stats-strip {
  position: relative;
  z-index: 5;
  background: rgba(7, 12, 24, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  /* Leaves room below for the mountain silhouette SVG */
  padding-bottom: calc(var(--space-5) + 220px);
}

/* 2-col on mobile, 4-col on wider screens */
.hero__stats-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}

@media (min-width: 640px) {
  .hero__stats-inner { grid-template-columns: repeat(4, 1fr); }
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  position: relative;
}

/* Subtle vertical divider between stats, desktop only */
@media (min-width: 640px) {
  .hero__stat + .hero__stat::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-4));
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--color-border);
  }
}

/* The large counting number */
.hero__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-teal);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* The + K+ ★ suffix in gold */
.hero__stat-suffix {
  color: var(--color-accent-gold);
  font-size: 0.75em;
  letter-spacing: var(--tracking-normal);
}

.hero__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ================================================================
   SEARCH BAR SECTION
   Pulls up with negative margin to overlap the hero silhouette
   ================================================================ */

.search-section {
  position: relative;
  z-index: var(--z-raised);
  /* Overlap the mountain silhouette at the bottom of the hero */
  margin-top: -200px;
  padding-bottom: var(--space-20);
}

/* Glassmorphism search card */
.search-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition:
    box-shadow    var(--transition-base),
    border-color  var(--transition-base);
}

.search-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-2xl);
}

/* Horizontal row on desktop, vertical stack on mobile */
.search-card__row {
  display: flex;
  align-items: stretch;
  min-height: 84px;
}

@media (max-width: 767px) {
  .search-card__row {
    flex-direction: column;
    min-height: auto;
  }
}

/* Each field cell */
.search-field {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  min-width: 0;
  transition: background-color var(--transition-fast);
}

.search-field:hover       { background: var(--color-bg-overlay); }
.search-field:focus-within { background: var(--color-bg-overlay); }

/* Main destination field gets more width */
.search-field--destination { flex: 1.7; }

/* Vertical divider between fields — horizontal on mobile */
.search-field + .search-field::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}

@media (max-width: 767px) {
  .search-field + .search-field::before {
    top: 0;
    bottom: auto;
    left: var(--space-6);
    right: var(--space-6);
    width: auto;
    height: 1px;
  }
}

/* Label above the input */
.search-field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
  pointer-events: none;
}

.search-field__icon { color: var(--color-accent-teal); flex-shrink: 0; }

/* Text input — completely invisible chrome */
.search-field__input {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  width: 100%;
}

.search-field__input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

/* Select — invisible chrome with custom chevron */
.search-field__select-wrap { position: relative; }

.search-field__select {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  padding-right: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.search-field__select option {
  background: var(--color-bg-overlay);
  color: var(--color-text-primary);
}

/* Custom chevron for selects */
.search-field__select-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-muted);
  pointer-events: none;
}

/* Right-side button cell */
.search-card__action {
  padding: var(--space-3);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .search-card__action {
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-left: none;
    border-top: 1px solid var(--color-border-subtle);
  }
  .search-card__action .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Popular search chips below the search card */
.search-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.search-tags__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  flex-shrink: 0;
}

.search-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color  var(--transition-fast),
    border-color      var(--transition-fast),
    color             var(--transition-fast);
}

.search-tag:hover {
  background: var(--color-accent-teal-dim);
  border-color: var(--color-accent-teal-border);
  color: var(--color-accent-teal);
}

/* ================================================================
   TOURS LISTING PAGE (tours.html)
   Layout + responsive filter sidebar + results grid
   ================================================================ */

/* Shorter hero for tours listing page */
.hero--tours-short {
  min-height: 400px;
}

/* Tours page overall layout (filters left on desktop) */
.tours-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .tours-layout {
    grid-template-columns: 360px 1fr;
  }
}

/* Mobile filter open button only */
.tours-mobile-toolbar {
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .tours-mobile-toolbar { display: none; }
}

/* Filter sheet: slide in on mobile, always visible on desktop */
.tours-filters-col .tours-filters-sheet {
  width: 100%;
}

@media (min-width: 1024px) {
  /* Hide mobile backdrop when filters are permanently visible */
  #filtersBackdrop { display: none; }

  /* Override bottom-sheet behavior so the panel participates in layout */
  .tours-filters-col .tours-filters-sheet.bottom-sheet {
    position: sticky;
    bottom: auto;
    left: auto;
    right: auto;
    top: calc(var(--nav-height) + var(--space-6));
    transform: none;
    opacity: 1;
    pointer-events: all;
    max-height: calc(100svh - var(--nav-height) - var(--space-12));
    overflow-y: auto;
    border-radius: var(--radius-xl);
    z-index: var(--z-sticky);
  }
}

/* Active difficulty pill state */
.pill-toggle.is-active {
  background: var(--color-accent-teal-dim);
  color: var(--color-accent-teal);
  border-color: var(--color-accent-teal-border);
}

/* Tours results grid: 1 col mobile, 2 col tablet, 3 col desktop */
.tours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .tours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tours-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Load-more alignment */
.tours-load-more-wrap {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

/* ================================================================
   TOUR DETAIL PAGE (tour-detail.html)
   Hero height + main-grid helpers
   ================================================================ */

/* Ensure tour hero matches spec: ~600px tall image area */
#tourHero {
  min-height: 600px;
}

/* Includes / Excludes two column grid on larger screens */
.tour-include-exclude-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .tour-include-exclude-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================================================================
   FOOTER — Brand column extras not covered above
   ================================================================ */

/* Logo wordmark in footer */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__logo:hover { color: var(--color-accent-teal); }
.footer__logo span  { color: var(--color-accent-teal); }
.footer__logo-icon  { color: var(--color-accent-teal); flex-shrink: 0; }

/* Full company name below the wordmark */
.footer__brand-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* Short tagline paragraph */
.footer__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 28ch;
  margin-bottom: var(--space-6);
}

/* Contact detail list (phone, email, address, hours) */
.footer__contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}
.footer__contact-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent-teal);
}
.footer__contact-item a {
  color: inherit;
  transition: color var(--transition-fast);
}
.footer__contact-item a:hover { color: var(--color-accent-teal); }

/* Label above the newsletter input */
.footer__newsletter-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}


/* ================================================================
   PAGE HERO — shorter interior-page hero (About, Contact, etc.)
   ================================================================ */

.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-16);
  background: var(--color-bg-base);
  padding-top: var(--nav-height);
}

/* Background image layer */
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.glacier-hero .page-hero__bg {
  opacity: 0.85;
}

/* Gradient overlay: dark at bottom, transparent at top */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--color-bg-base) 0%,
    rgba(7, 12, 24, 0.55) 55%,
    rgba(7, 12, 24, 0.20) 100%
  );
}
.glacier-hero .page-hero__overlay {
  background: linear-gradient(
    to top,
    var(--color-bg-base) 0%,
    rgba(7, 12, 24, 0.50) 50%,
    rgba(7, 12, 24, 0.25) 100%
  );
}

/* Text content sits above all layers */
.page-hero__content {
  position: relative;
  z-index: 2;
}

.page-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent-teal);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.page-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  line-height: var(--leading-relaxed);
}


/* ================================================================
   ABOUT PAGE
   ================================================================ */

/* Camping full-bleed banner */
.about-camping-banner {
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.about-camping-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-camping-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,12,24,.82) 0%, rgba(7,12,24,.45) 60%, transparent 100%);
}
.about-camping-banner__content {
  position: relative;
  z-index: 1;
  padding: var(--space-16) var(--space-8);
  max-width: 640px;
  margin-left: clamp(var(--space-6), 8vw, 120px);
}
@media (max-width: 640px) {
  .about-camping-banner__content { margin-left: var(--space-5); padding: var(--space-12) var(--space-5); }
}

/* Our Story: two-column editorial layout on desktop */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .about-story { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
}

/* Editorial image: slight tilt + border accent */
.about-story__media {
  position: relative;
}
.about-story__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-xl);
  display: block;
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
}
/* Teal accent border behind the image */
.about-story__media::after {
  content: '';
  position: absolute;
  inset: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5);
  border: 1px solid var(--color-accent-teal-border);
  border-radius: var(--radius-xl);
  z-index: -1;
  pointer-events: none;
}

/* Pull quote: teal left-border, Playfair italic */
.about-story__pull-quote {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-accent-teal);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-8);
  background: var(--color-accent-teal-dim);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Stats grid: 2-col mobile → 4-col desktop */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .about-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Individual stat card */
.about-stat-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition:
    border-color  var(--transition-base),
    transform     var(--transition-base),
    box-shadow    var(--transition-base);
}
.about-stat-card:hover {
  border-color: var(--color-accent-teal-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.about-stat-card__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--color-accent-teal);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-3);
}
.about-stat-card__suffix {
  color: var(--color-accent-gold);
  font-size: 0.55em;
}
.about-stat-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Team grid: 2-col → 3-col → 4-col */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .team-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Two-person duo layout — centred, max 600px each card */
.team-grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-inline: auto;
  gap: var(--space-10) var(--space-10);
}
@media (max-width: 640px) {
  .team-grid--duo { grid-template-columns: 1fr; }
}

.team-card { text-align: center; }

/* Large portrait card for duo layout */
.team-card--large .team-card__portrait-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 0 var(--space-5);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transition:
    border-color  var(--transition-base),
    box-shadow    var(--transition-base);
}
.team-card--large:hover .team-card__portrait-wrap {
  border-color: var(--color-accent-teal-border);
  box-shadow: 0 0 32px var(--color-accent-teal-glow), var(--shadow-xl);
}
.team-card--large .team-card__portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-slow);
  display: block;
}
.team-card--large:hover .team-card__portrait-wrap img { transform: scale(1.04); }
.team-card--large .team-card__name { font-size: var(--text-xl); }
.team-card--large .team-card__bio { font-size: var(--text-base); max-width: 38ch; margin-inline: auto; }

/* Circular portrait with hover glow */
.team-card__photo-wrap {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 0 auto var(--space-4);
  border: 2px solid var(--color-border);
  transition:
    border-color  var(--transition-base),
    box-shadow    var(--transition-base);
}
.team-card:hover .team-card__photo-wrap {
  border-color: var(--color-accent-teal-border);
  box-shadow: 0 0 20px var(--color-accent-teal-glow);
}
.team-card__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.team-card:hover .team-card__photo-wrap img { transform: scale(1.08); }

.team-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-accent-teal);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Partners strip: flex wrap, logo-style blocks */
.partners-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.partners-strip__item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition:
    border-color var(--transition-base),
    color        var(--transition-base);
  white-space: nowrap;
}
.partners-strip__item:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Values grid: 1-col → 2-col → 3-col */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

.value-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition:
    border-color  var(--transition-base),
    transform     var(--transition-base),
    box-shadow    var(--transition-base);
}
.value-card:hover {
  border-color: var(--color-accent-teal-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.value-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-accent-teal-dim);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-teal);
  margin-bottom: var(--space-5);
}
.value-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.value-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ================================================================
   CONTACT PAGE
   ================================================================ */

/* Two-column layout: form left, info right */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: stretch;
  }
  .contact-layout > div:last-child {
    display: flex;
    flex-direction: column;
  }
}

/* Contact info list (phone/email/address/hours) */
.contact-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  background: var(--color-accent-teal-dim);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-teal);
  flex-shrink: 0;
}
.contact-info-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.contact-info-value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.contact-info-value a {
  color: inherit;
  transition: color var(--transition-fast);
}
.contact-info-value a:hover { color: var(--color-accent-teal); }

/* Google map container with dark filter */
.contact-map-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 280px;
  flex: 1;
  min-height: 200px;
  background: var(--color-bg-elevated);
}
.contact-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(90%) hue-rotate(180deg) saturate(0.35) brightness(0.9);
}

/* Success message shown after form submit */
.form-success-msg {
  display: none;
  padding: var(--space-5) var(--space-6);
  background: var(--color-success-bg);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-success);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-align: center;
  margin-top: var(--space-4);
}
.form-success-msg.is-visible { display: block; }

/* Loading spinner inside submit button */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--radius-pill);
  animation: btnSpin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: var(--space-2);
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   SCROLL ANIMATIONS — IntersectionObserver driven
   js/main.js adds .is-visible when elements enter the viewport.
   NO scroll event listeners — only IntersectionObserver.
   ================================================================ */

/* Base hidden state */
.anim-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section label slides in from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.anim-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered children: each child gets a delay based on nth-child */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   var(--transition-ease-out-expo),
    transform var(--transition-ease-out-expo);
}
.anim-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.anim-stagger > *:nth-child(1)  { transition-delay: calc(0  * 80ms); }
.anim-stagger > *:nth-child(2)  { transition-delay: calc(1  * 80ms); }
.anim-stagger > *:nth-child(3)  { transition-delay: calc(2  * 80ms); }
.anim-stagger > *:nth-child(4)  { transition-delay: calc(3  * 80ms); }
.anim-stagger > *:nth-child(5)  { transition-delay: calc(4  * 80ms); }
.anim-stagger > *:nth-child(6)  { transition-delay: calc(5  * 80ms); }
.anim-stagger > *:nth-child(7)  { transition-delay: calc(6  * 80ms); }
.anim-stagger > *:nth-child(8)  { transition-delay: calc(7  * 80ms); }
.anim-stagger > *:nth-child(9)  { transition-delay: calc(8  * 80ms); }
.anim-stagger > *:nth-child(10) { transition-delay: calc(9  * 80ms); }
.anim-stagger > *:nth-child(11) { transition-delay: calc(10 * 80ms); }
.anim-stagger > *:nth-child(12) { transition-delay: calc(11 * 80ms); }

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-slide-left,
  .anim-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}