<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║  DEMO 96 — SUMMIT Mountain Expedition Company                               ║
║  "Beyond the Altitude"                                                      ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  DESIGN CONTRACT                                                            ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  Brand:        SUMMIT — Mountain Expedition Company                          ║
║  Tagline:      "Beyond the Altitude"                                        ║
║  Lever Triplet: creativity:80 · layout_structure:78 · immersivity:85        ║
║                                                                              ║
║  PALETTE — "Alpine Expedition"                                               ║
║  ─────────────────────────────────────                                      ║
║  granite-dark     #1a1e23  — primary background                             ║
║  storm-slate      #2d3436  — secondary surfaces                             ║
║  slate-blue       #6c8ea4  — accent (derived from alpine slate rock at      ║
║                               altitude — NOT generic blue)                  ║
║  snow-white       #f0f4f8  — primary text                                   ║
║  warm-basecamp    #c9a87c  — secondary accent (campfire warmth vs cold)     ║
║  ice-cyan         #a8d8ea  — highlights, ice details                        ║
║  alert-red        #c0392b  — safety / urgency                               ║
║  moss-green       #5a7247  — alpine vegetation accents                      ║
║                                                                              ║
║  TYPOGRAPHY                                                                  ║
║  ─────────────────────────────────────                                      ║
║  Display: Bebas Neue (bold expedition headlines)                             ║
║  Body:    Libre Franklin (clear readability at altitude)                     ║
║  Contrast: Extreme weight & scale contrast                                   ║
║                                                                              ║
║  EDGE LANGUAGE                                                               ║
║  ─────────────────────────────────────                                      ║
║  Angular / chamfered — clip-path mountain-peak shapes on section            ║
║  dividers, sharp angular card edges, tent-peak triangular accents,          ║
║  diagonal cuts suggesting mountain ridges                                    ║
║                                                                              ║
║  SURFACES                                                                    ║
║  ─────────────────────────────────────                                      ║
║  Topographic contour-line overlays, rocky texture gradients,                ║
║  fog/mist blur effects, frosted-glass UI cards, subtle grain                ║
║                                                                              ║
║  MOTION DIRECTION — "Ascent Chronicle"                                       ║
║  ─────────────────────────────────────                                      ║
║  Canvas snow particles with wind drift. Scroll-driven altitude counter      ║
║  rises as user descends. Multi-layer parallax for mountain depth.           ║
║  Elements reveal by sliding up (climbing motion). Staggered timing.          ║
║  Hover lifts cards upward. Kinetic headline reveal.                          ║
║                                                                              ║
║  SECTIONS                                                                   ║
║  ─────────────────────────────────────                                      ║
║  Hero → Featured Expeditions → The Experience → Gallery →                   ║
║  Guides/Team → Book Your Climb → Footer                                     ║
║                                                                              ║
║  ANTI-DEFAULTS                                                              ║
║  ─────────────────────────────────────                                      ║
║  No 3-equal-cards. No centered-hero-template. Mountain-peak section          ║
║  dividers. Cards at varying heights. Dominant featured climb.               ║
║                                                                              ║
║  MEDIA                                                                      ║
║  ─────────────────────────────────────                                      ║
║  Unsplash: mountain peak, alpine climbing, snow mountain, Himalayas,        ║
║  rock climbing, base camp, mountain guide, glacier, summit view,            ║
║  mountain sunrise                                                            ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SUMMIT — Beyond the Altitude</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Franklin:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  /* ═══════════════════════════════════════════
     CSS CUSTOM PROPERTIES — ALPINE EXPEDITION
     ═══════════════════════════════════════════ */
  :root {
    --granite-dark: #1a1e23;
    --storm-slate: #2d3436;
    --slate-blue: #6c8ea4;
    --snow-white: #f0f4f8;
    --warm-basecamp: #c9a87c;
    --ice-cyan: #a8d8ea;
    --alert-red: #c0392b;
    --moss-green: #5a7247;

    --bg-primary: var(--granite-dark);
    --bg-secondary: var(--storm-slate);
    --accent: var(--slate-blue);
    --accent-warm: var(--warm-basecamp);
    --text-primary: var(--snow-white);
    --text-muted: rgba(240, 244, 248, 0.6);
    --text-dim: rgba(240, 244, 248, 0.35);

    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Libre Franklin', sans-serif;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* ═══════════════════════════════════════════
     RESET & BASE
     ═══════════════════════════════════════════ */
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

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

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

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

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

  /* ═══════════════════════════════════════════
     UTILITY CLASSES
     ═══════════════════════════════════════════ */
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .section-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }

  .section-label::before {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--accent);
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
  }

  /* ═══════════════════════════════════════════
     GRAIN OVERLAY
     ═══════════════════════════════════════════ */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
  }

  /* ═══════════════════════════════════════════
     ALTITUDE COUNTER — FIXED
     ═══════════════════════════════════════════ */
  .altitude-counter {
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .altitude-counter .alt-value {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
    color: var(--ice-cyan);
    letter-spacing: 0.05em;
  }

  .altitude-counter .alt-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
  }

  .altitude-counter .alt-line {
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, var(--ice-cyan), transparent);
    margin-top: 0.5rem;
  }

  /* ═══════════════════════════════════════════
     NAVIGATION
     ═══════════════════════════════════════════ */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.4s ease, padding 0.4s ease;
  }

  .nav.scrolled {
    background: rgba(26, 30, 35, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(108, 142, 164, 0.15);
  }

  .nav-brand {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    color: var(--snow-white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-brand .brand-icon {
    width: 28px;
    height: 28px;
    position: relative;
  }

  .nav-brand .brand-icon::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid var(--slate-blue);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
  }

  .nav-links a {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s var(--ease-out-expo);
  }

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

  .nav-links a:hover::after {
    width: 100%;
  }

  .nav-cta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--granite-dark);
    background: var(--accent);
    padding: 0.65rem 1.5rem;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
  }

  .nav-cta:hover {
    background: var(--snow-white);
    transform: translateY(-2px);
  }

  .nav-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }

  .nav-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--snow-white);
    transition: all 0.3s ease;
  }

  /* ═══════════════════════════════════════════
     HERO SECTION
     ═══════════════════════════════════════════ */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(175deg, #0d1015 0%, var(--granite-dark) 40%, #1f2933 100%);
  }

  .hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .hero-bg-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .hero-mountain-far {
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 55%;
    background: linear-gradient(180deg, rgba(45, 52, 54, 0.4) 0%, rgba(26, 30, 35, 0.6) 100%);
    clip-path: polygon(0 100%, 5% 60%, 12% 40%, 18% 55%, 25% 25%, 32% 45%, 40% 15%, 48% 35%, 55% 8%, 62% 30%, 68% 20%, 75% 42%, 82% 28%, 88% 50%, 95% 35%, 100% 55%, 100% 100%);
  }

  .hero-mountain-mid {
    position: absolute;
    bottom: 0;
    left: -3%;
    width: 106%;
    height: 45%;
    background: linear-gradient(180deg, rgba(45, 52, 54, 0.6) 0%, rgba(26, 30, 35, 0.8) 100%);
    clip-path: polygon(0 100%, 3% 55%, 10% 35%, 18% 50%, 28% 20%, 35% 40%, 45% 10%, 52% 30%, 58% 5%, 65% 32%, 72% 18%, 80% 45%, 88% 30%, 95% 48%, 100% 40%, 100% 100%);
  }

  .hero-mountain-near {
    position: absolute;
    bottom: 0;
    left: -2%;
    width: 104%;
    height: 35%;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.9) 0%, var(--granite-dark) 100%);
    clip-path: polygon(0 100%, 2% 50%, 8% 30%, 15% 48%, 22% 15%, 30% 38%, 38% 8%, 45% 28%, 52% 3%, 60% 25%, 68% 12%, 75% 42%, 85% 22%, 92% 40%, 100% 30%, 100% 100%);
  }

  .hero-fog {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, var(--granite-dark) 0%, transparent 100%);
    z-index: 3;
  }

  .hero-content {
    position: relative;
    z-index: 10;
    padding: 0 2rem 8rem;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s var(--ease-out-expo) 0.5s forwards;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--snow-white);
    margin-bottom: 1.5rem;
    overflow: hidden;
  }

  .hero-title .line {
    display: block;
    overflow: hidden;
  }

  .hero-title .line span {
    display: inline-block;
    transform: translateY(110%);
    animation: heroRevealLine 1.2s var(--ease-out-expo) forwards;
  }

  .hero-title .line:nth-child(1) span {
    animation-delay: 0.3s;
  }

  .hero-title .line:nth-child(2) span {
    animation-delay: 0.5s;
  }

  .hero-title .line:nth-child(3) span {
    animation-delay: 0.7s;
    color: var(--accent);
  }

  .hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 300;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s var(--ease-out-expo) 0.9s forwards;
  }

  .hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s var(--ease-out-expo) 1.1s forwards;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--granite-dark);
    background: var(--accent);
    padding: 1rem 2rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    border: none;
  }

  .btn-primary:hover {
    background: var(--snow-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(108, 142, 164, 0.3);
  }

  .btn-primary .arrow {
    transition: transform 0.3s ease;
  }

  .btn-primary:hover .arrow {
    transform: translateX(4px);
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 1rem 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .btn-outline:hover {
    color: var(--snow-white);
  }

  .hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease-out-expo) 1.5s forwards;
  }

  .hero-scroll-indicator span {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .hero-scroll-indicator .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--text-dim), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }

  /* ═══════════════════════════════════════════
     TOPOGRAPHIC CONTOUR OVERLAY
     ═══════════════════════════════════════════ */
  .topo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.04;
    z-index: 1;
    background-image:
      repeating-radial-gradient(circle at 20% 50%, transparent 0px, transparent 40px, rgba(108, 142, 164, 0.5) 41px, transparent 42px),
      repeating-radial-gradient(circle at 80% 30%, transparent 0px, transparent 55px, rgba(108, 142, 164, 0.4) 56px, transparent 57px),
      repeating-radial-gradient(circle at 50% 80%, transparent 0px, transparent 70px, rgba(108, 142, 164, 0.3) 71px, transparent 72px);
  }

  /* ═══════════════════════════════════════════
     SECTION DIVIDER — MOUNTAIN PEAK
     ═══════════════════════════════════════════ */
  .section-divider {
    position: relative;
    height: 100px;
    overflow: hidden;
    margin-top: -1px;
  }

  .section-divider svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .section-divider.positive {
    background: transparent;
  }

  .section-divider.negative {
    background: transparent;
  }

  /* ═══════════════════════════════════════════
     FEATURED EXPEDITIONS
     ═══════════════════════════════════════════ */
  .expeditions {
    position: relative;
    padding: 8rem 0;
    background: var(--bg-secondary);
  }

  .expeditions .topo-overlay {
    opacity: 0.03;
  }

  .expeditions-header {
    position: relative;
    z-index: 2;
    margin-bottom: 5rem;
  }

  .expeditions-header .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .expeditions-header-right {
    max-width: 400px;
    text-align: right;
  }

  .expeditions-header-right p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.7;
  }

  .expeditions-grid {
    position: relative;
    z-index: 2;
  }

  .expeditions-grid .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
  }

  .expedition-card {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    background: rgba(26, 30, 35, 0.6);
    border: 1px solid rgba(108, 142, 164, 0.1);
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
    cursor: pointer;
  }

  .expedition-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }

  .expedition-card.featured {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .expedition-card.featured .card-image {
    height: 100%;
    min-height: 550px;
  }

  .expedition-card:not(.featured) .card-image {
    height: 260px;
  }

  .card-image {
    position: relative;
    overflow: hidden;
  }

  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
  }

  .expedition-card:hover .card-image img {
    transform: scale(1.08);
  }

  .card-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(26, 30, 35, 0.95) 0%, transparent 100%);
  }

  .card-difficulty {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    z-index: 3;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  }

  .card-difficulty.extreme {
    background: var(--alert-red);
    color: white;
  }

  .card-difficulty.advanced {
    background: var(--warm-basecamp);
    color: var(--granite-dark);
  }

  .card-difficulty.moderate {
    background: var(--moss-green);
    color: white;
  }

  .card-altitude-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ice-cyan);
    background: rgba(26, 30, 35, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.4rem 0.8rem;
    z-index: 3;
    letter-spacing: 0.05em;
  }

  .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 4;
  }

  .card-content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    line-height: 1;
  }

  .expedition-card.featured .card-content h3 {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .card-content .card-location {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .card-content .card-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .card-content .card-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  /* ═══════════════════════════════════════════
     THE EXPERIENCE — TIMELINE
     ═══════════════════════════════════════════ */
  .experience {
    position: relative;
    padding: 10rem 0;
    background: var(--bg-primary);
  }

  .experience-header {
    text-align: center;
    margin-bottom: 6rem;
  }

  .experience-header .section-label {
    justify-content: center;
  }

  .experience-header .section-label::before {
    display: none;
  }

  .experience-header .section-desc {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
  }

  .timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent), var(--accent), transparent);
    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 6rem;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--ease-out-expo);
  }

  .timeline-item.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .timeline-item:nth-child(odd) {
    flex-direction: row;
  }

  .timeline-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .timeline-item .tl-content {
    width: calc(50% - 3rem);
    position: relative;
  }

  .timeline-item:nth-child(odd) .tl-content {
    text-align: right;
    padding-right: 0;
  }

  .timeline-item:nth-child(even) .tl-content {
    text-align: left;
    padding-left: 0;
  }

  .timeline-item .tl-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: var(--bg-primary);
    border: 2px solid var(--accent);
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .timeline-item .tl-marker .tl-phase {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--accent);
  }

  .timeline-item .tl-image {
    width: calc(50% - 3rem);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
  }

  .timeline-item:nth-child(odd) .tl-image {
    margin-left: auto;
  }

  .timeline-item .tl-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
  }

  .timeline-item:hover .tl-image img {
    transform: scale(1.05);
  }

  .tl-content .tl-step {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--accent);
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
  }

  .tl-content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    line-height: 1;
  }

  .tl-content p {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
  }

  /* ═══════════════════════════════════════════
     GALLERY — MASONRY
     ═══════════════════════════════════════════ */
  .gallery {
    position: relative;
    padding: 8rem 0;
    background: var(--bg-secondary);
  }

  .gallery-header {
    margin-bottom: 4rem;
  }

  .gallery-header .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .gallery-masonry {
    columns: 3;
    column-gap: 1.25rem;
    padding: 0 2rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  .gallery-item {
    break-inside: avoid;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    cursor: pointer;
  }

  .gallery-item:nth-child(odd) {
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }

  .gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.6s var(--ease-out-expo), filter 0.6s ease;
    filter: saturate(0.8) brightness(0.85);
  }

  .gallery-item:hover img {
    transform: scale(1.06);
    filter: saturate(1) brightness(1);
  }

  .gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(26, 30, 35, 0.85) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
  }

  .gallery-item:hover .gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .gallery-item-overlay span {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--snow-white);
  }

  /* ═══════════════════════════════════════════
     GUIDES / TEAM
     ═══════════════════════════════════════════ */
  .guides {
    position: relative;
    padding: 10rem 0;
    background: var(--bg-primary);
  }

  .guides-header {
    margin-bottom: 5rem;
  }

  .guides-header .container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: end;
  }

  .guides-header-right p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
  }

  .guides-grid {
    position: relative;
  }

  .guides-grid .container {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: start;
  }

  .guide-card {
    position: relative;
    overflow: hidden;
    background: rgba(26, 30, 35, 0.5);
    border: 1px solid rgba(108, 142, 164, 0.08);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
  }

  .guide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
  }

  .guide-card:nth-child(1) {
    grid-row: 1 / 3;
  }

  .guide-card-image {
    position: relative;
    overflow: hidden;
  }

  .guide-card:nth-child(1) .guide-card-image {
    height: 380px;
  }

  .guide-card:not(:nth-child(1)) .guide-card-image {
    height: 220px;
  }

  .guide-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
    filter: saturate(0.7) brightness(0.8);
  }

  .guide-card:hover .guide-card-image img {
    transform: scale(1.05);
    filter: saturate(0.9) brightness(0.9);
  }

  .guide-card-info {
    padding: 1.5rem;
  }

  .guide-card-info h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
  }

  .guide-card-info .guide-role {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
  }

  .guide-card-info .guide-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .guide-card-info .guide-creds span {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    background: rgba(108, 142, 164, 0.1);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .guide-card-info .guide-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(108, 142, 164, 0.1);
  }

  .guide-card-info .guide-stats .stat {
    display: flex;
    flex-direction: column;
  }

  .guide-card-info .guide-stats .stat-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--accent);
    line-height: 1;
  }

  .guide-card-info .guide-stats .stat-label {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 0.2rem;
  }

  /* ═══════════════════════════════════════════
     BOOK YOUR CLIMB — CTA
     ═══════════════════════════════════════════ */
  .book {
    position: relative;
    padding: 10rem 0;
    background: var(--bg-secondary);
    overflow: hidden;
  }

  .book .topo-overlay {
    opacity: 0.04;
  }

  .book .container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    position: relative;
    z-index: 2;
  }

  .book-left {
    padding-top: 2rem;
  }

  .book-left .section-title {
    margin-bottom: 1rem;
  }

  .book-left .book-desc {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 460px;
  }

  .book-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .book-features li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
  }

  .book-features li .check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 142, 164, 0.15);
    color: var(--accent);
    font-size: 0.7rem;
    margin-top: 2px;
  }

  .book-form-wrap {
    background: rgba(26, 30, 35, 0.5);
    border: 1px solid rgba(108, 142, 164, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 3rem;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  }

  .book-form-wrap h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    margin-bottom: 2rem;
    color: var(--snow-white);
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .form-group.full {
    grid-column: 1 / -1;
  }

  .form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--snow-white);
    background: rgba(45, 52, 54, 0.6);
    border: 1px solid rgba(108, 142, 164, 0.15);
    padding: 0.85rem 1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(108, 142, 164, 0.1);
  }

  .form-group textarea {
    resize: vertical;
    min-height: 100px;
  }

  .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236c8ea4' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
  }

  .form-group select option {
    background: var(--storm-slate);
    color: var(--snow-white);
  }

  .form-submit {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
  }

  .form-submit .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 1.1rem 2rem;
    font-size: 0.85rem;
  }

  /* ═══════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════ */
  .footer {
    position: relative;
    padding: 6rem 0 2rem;
    background: var(--granite-dark);
    border-top: 1px solid rgba(108, 142, 164, 0.08);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .footer-brand .brand-name {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.12em;
    color: var(--snow-white);
  }

  .footer-brand p {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 300px;
  }

  .footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(108, 142, 164, 0.2);
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
  }

  .footer-social a:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
  }

  .footer-col h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--snow-white);
    margin-bottom: 1.25rem;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .footer-col ul li a {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  .footer-col ul li a:hover {
    color: var(--accent);
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(108, 142, 164, 0.08);
  }

  .footer-bottom span {
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }

  /* ═══════════════════════════════════════════
     SCROLL REVEAL
     ═══════════════════════════════════════════ */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  }

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

  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  }

  .reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  }

  .reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* ═══════════════════════════════════════════
     KEYFRAME ANIMATIONS
     ═══════════════════════════════════════════ */
  @keyframes heroRevealLine {
    to {
      transform: translateY(0);
    }
  }

  @keyframes heroFadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1); }
  }

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

  /* ═══════════════════════════════════════════
     STATS BAR
     ═══════════════════════════════════════════ */
  .stats-bar {
    position: relative;
    z-index: 5;
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  }

  .stats-bar .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .stat-item {
    text-align: center;
    min-width: 140px;
  }

  .stat-item .stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .stat-item .stat-text {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ═══════════════════════════════════════════
     TESTIMONIAL STRIP
     ═══════════════════════════════════════════ */
  .testimonial-strip {
    position: relative;
    padding: 6rem 0;
    background: var(--granite-dark);
    overflow: hidden;
  }

  .testimonial-strip-inner {
    display: flex;
    gap: 2rem;
    padding: 0 2rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  .testimonial-card {
    flex: 1;
    min-width: 300px;
    padding: 2.5rem;
    background: rgba(45, 52, 54, 0.4);
    border-left: 2px solid var(--accent);
    position: relative;
  }

  .testimonial-card .quote-mark {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: rgba(108, 142, 164, 0.15);
    position: absolute;
    top: 1rem;
    left: 1.5rem;
  }

  .testimonial-card blockquote {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
  }

  .testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .testimonial-card .author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
  }

  .testimonial-card .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial-card .author-name {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .testimonial-card .author-climb {
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.08em;
  }

  /* ═══════════════════════════════════════════
     SAFETY BANNER
     ═══════════════════════════════════════════ */
  .safety-banner {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--storm-slate) 0%, var(--granite-dark) 100%);
    overflow: hidden;
  }

  .safety-banner .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
  }

  .safety-icon-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .safety-icon {
    width: 100px;
    height: 100px;
    border: 2px solid var(--alert-red);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: float 4s ease-in-out infinite;
  }

  .safety-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--alert-red);
    fill: none;
    stroke-width: 2;
  }

  .safety-content h3 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    color: var(--snow-white);
  }

  .safety-content p {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 550px;
  }

  .safety-badge-row {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }

  .safety-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(192, 57, 43, 0.4);
    color: var(--alert-red);
  }

  /* ═══════════════════════════════════════════
     FROSTED GLASS EFFECT UTILITY
     ═══════════════════════════════════════════ */
  .frost {
    background: rgba(26, 30, 35, 0.55);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(108, 142, 164, 0.1);
  }

  /* Mobile Menu Overlay */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(26, 30, 35, 0.97);
    backdrop-filter: blur(20px);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }

  .mobile-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu a {
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    color: var(--snow-white);
    transition: color 0.3s ease;
  }

  .mobile-menu a:hover {
    color: var(--accent);
  }

  .mobile-menu-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    color: var(--snow-white);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .mobile-menu-close:hover {
    color: var(--accent);
  }

  /* ═══════════════════════════════════════════
     RESPONSIVE — TABLET
     ═══════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .nav-links {
      gap: 1.5rem;
    }

    .expeditions-grid .container {
      grid-template-columns: 1fr 1fr;
    }

    .expedition-card.featured {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    .expedition-card.featured .card-image {
      min-height: 400px;
    }

    .guides-grid .container {
      grid-template-columns: 1fr 1fr;
    }

    .guide-card:nth-child(1) {
      grid-row: auto;
    }

    .guide-card:nth-child(5) {
      grid-column: 1 / -1;
    }

    .book .container {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .gallery-masonry {
      columns: 2;
    }

    .altitude-counter {
      right: 1rem;
    }

    .testimonial-strip-inner {
      flex-direction: column;
    }

    .testimonial-card {
      min-width: unset;
    }
  }

  /* ═══════════════════════════════════════════
     RESPONSIVE — MOBILE
     ═══════════════════════════════════════════ */
  @media (max-width: 768px) {
    .nav-links, .nav-cta {
      display: none;
    }

    .nav-mobile-toggle {
      display: flex;
    }

    .hero-title {
      font-size: clamp(3rem, 14vw, 6rem);
    }

    .hero-content {
      padding-bottom: 6rem;
    }

    .expeditions-header .container {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .expeditions-header-right {
      text-align: left;
      max-width: 100%;
    }

    .expeditions-grid .container {
      grid-template-columns: 1fr;
    }

    .timeline::before {
      left: 1.5rem;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
      flex-direction: column;
      padding-left: 4rem;
    }

    .timeline-item .tl-content,
    .timeline-item .tl-image {
      width: 100%;
    }

    .timeline-item:nth-child(odd) .tl-content {
      text-align: left;
    }

    .timeline-item .tl-marker {
      left: 1.5rem;
      width: 36px;
      height: 36px;
    }

    .timeline-item:nth-child(odd) .tl-image {
      margin-left: 0;
    }

    .gallery-masonry {
      columns: 1;
      padding: 0 1rem;
    }

    .guides-header .container {
      grid-template-columns: 1fr;
    }

    .guides-grid .container {
      grid-template-columns: 1fr;
    }

    .guide-card:nth-child(5) {
      grid-column: auto;
    }

    .guide-card:nth-child(1) .guide-card-image {
      height: 280px;
    }

    .book {
      padding: 6rem 0;
    }

    .book-form-wrap {
      padding: 2rem;
    }

    .form-grid {
      grid-template-columns: 1fr;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .footer-bottom {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
    }

    .altitude-counter {
      display: none;
    }

    .container {
      padding: 0 1.25rem;
    }

    .section-title {
      font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .safety-banner .container {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .safety-content p {
      max-width: 100%;
    }

    .safety-badge-row {
      justify-content: center;
    }
  }
</style>
</head>
<body>

  <!-- ═══════════════════════════════════════════
       ALTITUDE COUNTER
       ═══════════════════════════════════════════ -->
  <div class="altitude-counter" id="altitudeCounter">
    <span class="alt-value" id="altValue">2,400</span>
    <span class="alt-label">Altitude M</span>
    <div class="alt-line"></div>
  </div>

  <!-- ═══════════════════════════════════════════
       NAVIGATION
       ═══════════════════════════════════════════ -->
  <nav class="nav" id="mainNav">
    <a href="#" class="nav-brand">
      <div class="brand-icon"></div>
      SUMMIT
    </a>
    <ul class="nav-links">
      <li><a href="#expeditions">Expeditions</a></li>
      <li><a href="#experience">Experience</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#guides">Guides</a></li>
    </ul>
    <a href="#book" class="nav-cta">Book a Climb</a>
    <button class="nav-mobile-toggle" id="mobileToggle" aria-label="Open menu">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </nav>

  <!-- ═══════════════════════════════════════════
       MOBILE MENU
       ═══════════════════════════════════════════ -->
  <div class="mobile-menu" id="mobileMenu">
    <button class="mobile-menu-close" id="mobileMenuClose" aria-label="Close menu">&times;</button>
    <a href="#expeditions" class="mobile-menu-link">Expeditions</a>
    <a href="#experience" class="mobile-menu-link">Experience</a>
    <a href="#gallery" class="mobile-menu-link">Gallery</a>
    <a href="#guides" class="mobile-menu-link">Guides</a>
    <a href="#book" class="mobile-menu-link">Book a Climb</a>
  </div>

  <!-- ═══════════════════════════════════════════
       HERO SECTION
       ═══════════════════════════════════════════ -->
  <section class="hero">
    <canvas class="hero-canvas" id="snowCanvas"></canvas>
    <div class="hero-bg-layers">
      <div class="topo-overlay"></div>
      <div class="hero-mountain-far" data-parallax="0.15"></div>
      <div class="hero-mountain-mid" data-parallax="0.3"></div>
      <div class="hero-mountain-near" data-parallax="0.5"></div>
      <div class="hero-fog"></div>
    </div>
    <div class="hero-content">
      <div class="hero-tag">Mountain Expedition Company</div>
      <h1 class="hero-title">
        <span class="line"><span>Beyond</span></span>
        <span class="line"><span>the</span></span>
        <span class="line"><span>Altitude</span></span>
      </h1>
      <p class="hero-subtitle">
        We lead climbers to the world's most extraordinary peaks. From first ascent
        to summit glory — every journey begins with a single, deliberate step upward.
      </p>
      <div class="hero-actions">
        <a href="#expeditions" class="btn-primary">
          View Expeditions <span class="arrow">→</span>
        </a>
        <button class="btn-outline">
          ▶ Watch Film
        </button>
      </div>
    </div>
    <div class="hero-scroll-indicator">
      <span>Scroll</span>
      <div class="scroll-line"></div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider negative">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 60 L80 60 L160 30 L280 65 L380 15 L480 50 L580 8 L680 40 L780 22 L880 55 L980 10 L1080 45 L1180 28 L1280 50 L1380 35 L1440 55 L1440 100 Z" fill="var(--storm-slate)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       FEATURED EXPEDITIONS
       ═══════════════════════════════════════════ -->
  <section class="expeditions" id="expeditions">
    <div class="topo-overlay"></div>
    <div class="expeditions-header">
      <div class="container">
        <div class="reveal">
          <span class="section-label">Featured Climbs</span>
          <h2 class="section-title">Choose Your<br>Summit</h2>
        </div>
        <div class="expeditions-header-right reveal-right" style="transition-delay: 0.15s;">
          <p>
            Every expedition is a chapter in a larger story. From the storied ridges of the
            Himalayas to untouched peaks in Patagonia — we craft journeys that redefine limits.
          </p>
        </div>
      </div>
    </div>
    <div class="expeditions-grid">
      <div class="container">
        <!-- Featured Card — Dominant -->
        <article class="expedition-card featured reveal">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=900&q=80"
                 alt="Everest expedition camp" loading="lazy">
            <div class="card-image-overlay"></div>
            <span class="card-difficulty extreme">Extreme</span>
            <span class="card-altitude-badge">8,849m</span>
          </div>
          <div class="card-content">
            <div class="card-location">📍 Nepal — Khumbu Region</div>
            <h3>Everest South Col</h3>
            <div class="card-meta">
              <span>🕐 60 Days</span>
              <span>👥 Max 8</span>
              <span>⭐ Expert Only</span>
            </div>
          </div>
        </article>

        <!-- Secondary Card -->
        <article class="expedition-card reveal" style="transition-delay: 0.2s;">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=800&q=80"
                 alt="Alpine mountain peak" loading="lazy">
            <div class="card-image-overlay"></div>
            <span class="card-difficulty advanced">Advanced</span>
            <span class="card-altitude-badge">4,478m</span>
          </div>
          <div class="card-content">
            <div class="card-location">📍 Swiss Alps</div>
            <h3>Matterhorn Traverse</h3>
            <div class="card-meta">
              <span>🕐 12 Days</span>
              <span>👥 Max 6</span>
            </div>
          </div>
        </article>

        <!-- Tertiary Card -->
        <article class="expedition-card reveal" style="transition-delay: 0.35s;">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1601134991665-a57af6ef5765?w=800&q=80"
                 alt="Mountain guide on glacier" loading="lazy">
            <div class="card-image-overlay"></div>
            <span class="card-difficulty moderate">Moderate</span>
            <span class="card-altitude-badge">5,895m</span>
          </div>
          <div class="card-content">
            <div class="card-location">📍 Tanzania</div>
            <h3>Kilimanjaro Machame</h3>
            <div class="card-meta">
              <span>🕐 8 Days</span>
              <span>👥 Max 12</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider" style="background: var(--storm-slate);">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 55 L120 55 L220 20 L340 60 L440 10 L560 45 L660 5 L780 40 L880 18 L1000 50 L1100 8 L1220 42 L1320 25 L1440 50 L1440 100 Z" fill="var(--granite-dark)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       STATS BAR
       ═══════════════════════════════════════════ -->
  <section class="stats-bar">
    <div class="container">
      <div class="stat-item reveal">
        <div class="stat-number" data-count="147">0</div>
        <div class="stat-text">Summits Reached</div>
      </div>
      <div class="stat-item reveal" style="transition-delay: 0.1s;">
        <div class="stat-number" data-count="23">0</div>
        <div class="stat-text">Countries</div>
      </div>
      <div class="stat-item reveal" style="transition-delay: 0.2s;">
        <div class="stat-number" data-count="12">0</div>
        <div class="stat-text">Years Guiding</div>
      </div>
      <div class="stat-item reveal" style="transition-delay: 0.3s;">
        <div class="stat-number special">100%</div>
        <div class="stat-text">Safety Record</div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       THE EXPERIENCE — TIMELINE
       ═══════════════════════════════════════════ -->
  <section class="experience" id="experience">
    <div class="experience-header">
      <div class="container">
        <span class="section-label reveal">The Journey</span>
        <h2 class="section-title reveal" style="transition-delay: 0.1s;">From Base Camp<br>to Summit</h2>
        <p class="section-desc reveal" style="transition-delay: 0.2s;">
          Every expedition follows a disciplined arc. From the first gear check to the final
          celebration, each phase is designed to build confidence, forge bonds, and spirit you
          safely through the thin air above.
        </p>
      </div>
    </div>
    <div class="timeline">
      <!-- Phase 1 -->
      <div class="timeline-item">
        <div class="tl-content">
          <div class="tl-step">Phase 01</div>
          <h3>Preparation &amp; Base Camp</h3>
          <p>
            Your expedition begins long before the trailhead. Our team conducts comprehensive
            gear audits, fitness assessments, and altitude physiology briefings. At base camp,
            acclimatization walks and team bonding set the foundation for everything that follows.
          </p>
        </div>
        <div class="tl-marker"><span class="tl-phase">01</span></div>
        <div class="tl-image">
          <img src="https://images.unsplash.com/photo-1526512340740-92183d0dd9a8?w=800&q=80"
               alt="Base camp at dusk" loading="lazy">
        </div>
      </div>

      <!-- Phase 2 -->
      <div class="timeline-item">
        <div class="tl-content">
          <div class="tl-step">Phase 02</div>
          <h3>Acclimatization Rotations</h3>
          <p>
            Climb high, sleep low. Our proven acclimatization schedule involves progressive
            rotations through higher camps, giving your body time to adapt to thinning oxygen.
            Medical checks at every stage ensure you're climbing within safe physiological limits.
          </p>
        </div>
        <div class="tl-marker"><span class="tl-phase">02</span></div>
        <div class="tl-image">
          <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80"
               alt="Climber acclimatizing on ridge" loading="lazy">
        </div>
      </div>

      <!-- Phase 3 -->
      <div class="timeline-item">
        <div class="tl-content">
          <div class="tl-step">Phase 03</div>
          <h3>Push to High Camp</h3>
          <p>
            With acclimatization complete, the team pushes through the upper mountain's technical
            terrain — ice walls, exposed ridges, and wind-scoured cols. Fixed ropes and
            Sherpa support create a secure corridor to high camp.
          </p>
        </div>
        <div class="tl-marker"><span class="tl-phase">03</span></div>
        <div class="tl-image">
          <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?w=800&q=80"
               alt="Climbers on steep snow slope" loading="lazy">
        </div>
      </div>

      <!-- Phase 4 -->
      <div class="timeline-item">
        <div class="tl-content">
          <div class="tl-step">Phase 04</div>
          <h3>Summit Day</h3>
          <p>
            Alpine start. Headlamps piercing the darkness. The world drops away below as you
            climb through the predawn cold toward sunrise at the roof of the world. Every step
            upward is a step into the history of your own life. This is what you came for.
          </p>
        </div>
        <div class="tl-marker"><span class="tl-phase">04</span></div>
        <div class="tl-image">
          <img src="https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?w=800&q=80"
               alt="Sunrise on summit ridge" loading="lazy">
        </div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider" style="background: var(--granite-dark);">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 60 L100 35 L200 60 L300 12 L420 48 L520 5 L650 38 L750 22 L860 50 L960 8 L1060 40 L1180 15 L1280 45 L1380 25 L1440 55 L1440 100 Z" fill="var(--storm-slate)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       GALLERY — MASONRY
       ═══════════════════════════════════════════ -->
  <section class="gallery" id="gallery">
    <div class="gallery-header">
      <div class="container">
        <div class="reveal">
          <span class="section-label">Captured</span>
          <h2 class="section-title">Summit<br>Gallery</h2>
        </div>
        <div class="reveal-right" style="transition-delay: 0.15s;">
          <a href="#" class="btn-outline">View All →</a>
        </div>
      </div>
    </div>
    <div class="gallery-masonry">
      <div class="gallery-item reveal">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
             alt="Mountain peak panorama" loading="lazy">
        <div class="gallery-item-overlay"><span>Alpine Panorama</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.1s;">
        <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80"
             alt="Rugged mountain peaks at sunset" loading="lazy"
             style="height:320px; object-fit:cover;">
        <div class="gallery-item-overlay"><span>Evening Ridge</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.2s;">
        <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
             alt="Starry night over mountains" loading="lazy">
        <div class="gallery-item-overlay"><span>Night at Camp</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.15s;">
        <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80"
             alt="Snow-covered mountain" loading="lazy"
             style="height:280px; object-fit:cover;">
        <div class="gallery-item-overlay"><span>The North Face</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.25s;">
        <img src="https://images.unsplash.com/photo-1494864622201-43089595e0e0?w=800&q=80"
             alt="Glacier crevasse" loading="lazy">
        <div class="gallery-item-overlay"><span>Khumbu Icefall</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.3s;">
        <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?w=800&q=80"
             alt="Mountain sunrise" loading="lazy">
        <div class="gallery-item-overlay"><span>Golden Hour</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.2s;">
        <img src="https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?w=800&q=80"
             alt="Climbers at sunrise" loading="lazy"
             style="height:350px; object-fit:cover;">
        <div class="gallery-item-overlay"><span>Dawn Assault</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.35s;">
        <img src="https://images.unsplash.com/photo-1544735716-392fe2489ffa?w=800&q=80"
             alt="Glacier landscape" loading="lazy">
        <div class="gallery-item-overlay"><span>Glacier Descent</span></div>
      </div>
      <div class="gallery-item reveal" style="transition-delay: 0.4s;">
        <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?w=800&q=80"
             alt="Snow slope climbing" loading="lazy"
             style="height:260px; object-fit:cover;">
        <div class="gallery-item-overlay"><span>Summit Push</span></div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       TESTIMONIAL STRIP
       ═══════════════════════════════════════════ -->
  <section class="testimonial-strip">
    <div class="testimonial-strip-inner">
      <div class="testimonial-card reveal">
        <div class="quote-mark">"</div>
        <blockquote>
          SUMMIT didn't just take me up a mountain — they changed how I think about
          what's possible. The level of professionalism and genuine care is unmatched.
        </blockquote>
        <div class="author">
          <div class="author-avatar">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80"
                 alt="Client portrait" loading="lazy">
          </div>
          <div>
            <div class="author-name">Marcus Lindqvist</div>
            <div class="author-climb">Everest 2023</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal" style="transition-delay: 0.15s;">
        <div class="quote-mark">"</div>
        <blockquote>
          From base camp to 8,849 meters, I never once doubted the team. Every decision
          was calculated, every risk was managed. An experience of a lifetime.
        </blockquote>
        <div class="author">
          <div class="author-avatar">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80"
                 alt="Client portrait" loading="lazy">
          </div>
          <div>
            <div class="author-name">Sarah Chen</div>
            <div class="author-climb">K2 2024</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal" style="transition-delay: 0.3s;">
        <div class="quote-mark">"</div>
        <blockquote>
          The acclimatization program was exceptional. I felt strong, prepared, and
          supported throughout my entire Kilimanjaro expedition.
        </blockquote>
        <div class="author">
          <div class="author-avatar">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80"
                 alt="Client portrait" loading="lazy">
          </div>
          <div>
            <div class="author-name">James Okafor</div>
            <div class="author-climb">Kilimanjaro 2024</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider" style="background: var(--granite-dark);">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 50 L100 70 L200 35 L320 60 L440 18 L560 50 L660 10 L780 45 L880 20 L1000 55 L1100 12 L1220 48 L1320 30 L1440 60 L1440 100 Z" fill="var(--granite-dark)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       SAFETY BANNER
       ═══════════════════════════════════════════ -->
  <section class="safety-banner" id="safety">
    <div class="container">
      <div class="safety-icon-col reveal-left">
        <div class="safety-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12 2L3 7V12C3 17.25 6.75 21.5 12 23C17.25 21.5 21 17.25 21 12V7L12 2Z"/>
            <path d="M12 8V13M12 16H12.01"/>
          </svg>
        </div>
      </div>
      <div class="safety-content reveal-right">
        <h3>Safety Is Our Non-Negotiable</h3>
        <p>
          We've maintained a perfect safety record across 147 expeditions because we
          never compromise. Every route is backed by real-time weather intelligence,
          emergency oxygen systems, satellite communications, and medical professionals
          on-station.
        </p>
        <div class="safety-badge-row">
          <span class="safety-badge">UIAA Certified</span>
          <span class="safety-badge">IFMGA Guides</span>
          <span class="safety-badge">Heli-Evac Ready</span>
          <span class="safety-badge">Medical On-Station</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider" style="background: var(--storm-slate);">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 65 L80 40 L180 65 L280 22 L400 58 L500 6 L620 48 L720 15 L840 52 L920 8 L1040 45 L1140 20 L1260 50 L1360 30 L1440 55 L1440 100 Z" fill="var(--granite-dark)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       GUIDES / TEAM
       ═══════════════════════════════════════════ -->
  <section class="guides" id="guides">
    <div class="guides-header">
      <div class="container">
        <div class="reveal">
          <span class="section-label">Our Team</span>
          <h2 class="section-title">Expert<br>Guides</h2>
        </div>
        <div class="guides-header-right reveal-right" style="transition-delay: 0.15s;">
          <p>
            Every SUMMIT guide holds international mountaineering certifications and
            averages 15+ years of alpine experience. They don't just lead — they teach,
            protect, and inspire.
          </p>
        </div>
      </div>
    </div>
    <div class="guides-grid">
      <div class="container">
        <!-- Lead Guide — Tall Card -->
        <article class="guide-card reveal">
          <div class="guide-card-image">
            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=600&q=80"
                 alt="Lead mountain guide" loading="lazy">
          </div>
          <div class="guide-card-info">
            <h3>Tenzing Dorje</h3>
            <div class="guide-role">Expedition Director</div>
            <div class="guide-creds">
              <span>IFMGA</span>
              <span>UIAGM</span>
              <span>Everest 14x</span>
            </div>
            <div class="guide-stats">
              <div class="stat">
                <span class="stat-value">14</span>
                <span class="stat-label">Everest Summits</span>
              </div>
              <div class="stat">
                <span class="stat-value">22</span>
                <span class="stat-label">Years Exp.</span>
              </div>
              <div class="stat">
                <span class="stat-value">89</span>
                <span class="stat-label">Total Summits</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Guide 2 -->
        <article class="guide-card reveal" style="transition-delay: 0.15s;">
          <div class="guide-card-image">
            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&q=80"
                 alt="Mountain guide" loading="lazy">
          </div>
          <div class="guide-card-info">
            <h3>Elena Voss</h3>
            <div class="guide-role">Senior Alpine Guide</div>
            <div class="guide-creds">
              <span>IFMGA</span>
              <span>Alpine Rescue</span>
            </div>
            <div class="guide-stats">
              <div class="stat">
                <span class="stat-value">45</span>
                <span class="stat-label">Summits</span>
              </div>
              <div class="stat">
                <span class="stat-value">18</span>
                <span class="stat-label">Years</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Guide 3 -->
        <article class="guide-card reveal" style="transition-delay: 0.25s;">
          <div class="guide-card-image">
            <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=500&q=80"
                 alt="Mountain guide" loading="lazy">
          </div>
          <div class="guide-card-info">
            <h3>Kai Nakamura</h3>
            <div class="guide-role">Technical Climbing Lead</div>
            <div class="guide-creds">
              <span>IFMGA</span>
              <span>Big Wall</span>
            </div>
            <div class="guide-stats">
              <div class="stat">
                <span class="stat-value">38</span>
                <span class="stat-label">Summits</span>
              </div>
              <div class="stat">
                <span class="stat-value">12</span>
                <span class="stat-label">Years</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Guide 4 -->
        <article class="guide-card reveal" style="transition-delay: 0.3s;">
          <div class="guide-card-image">
            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=500&q=80"
                 alt="Mountain guide" loading="lazy">
          </div>
          <div class="guide-card-info">
            <h3>Anika Holm</h3>
            <div class="guide-role">Expedition Medic</div>
            <div class="guide-creds">
              <span>WFR</span>
              <span>Altitude Med</span>
            </div>
            <div class="guide-stats">
              <div class="stat">
                <span class="stat-value">30+</span>
                <span class="stat-label">Expeditions</span>
              </div>
              <div class="stat">
                <span class="stat-value">10</span>
                <span class="stat-label">Years</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Guide 5 -->
        <article class="guide-card reveal" style="transition-delay: 0.4s;">
          <div class="guide-card-image">
            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500&q=80"
                 alt="Mountain guide" loading="lazy">
          </div>
          <div class="guide-card-info">
            <h3>Rafael Mendez</h3>
            <div class="guide-role">Logistics Chief</div>
            <div class="guide-creds">
              <span>NOLS</span>
              <span>Base Camp Mgr</span>
            </div>
            <div class="guide-stats">
              <div class="stat">
                <span class="stat-value">55</span>
                <span class="stat-label">Expeditions</span>
              </div>
              <div class="stat">
                <span class="stat-value">15</span>
                <span class="stat-label">Years</span>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SECTION DIVIDER
       ═══════════════════════════════════════════ -->
  <div class="section-divider" style="background: var(--granite-dark);">
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" fill="none">
      <path d="M0 100 L0 55 L130 70 L230 28 L350 58 L440 12 L580 48 L680 4 L800 42 L900 18 L1020 55 L1120 10 L1240 48 L1340 22 L1440 58 L1440 100 Z" fill="var(--storm-slate)"/>
    </svg>
  </div>

  <!-- ═══════════════════════════════════════════
       BOOK YOUR CLIMB — CTA
       ═══════════════════════════════════════════ -->
  <section class="book" id="book">
    <div class="topo-overlay"></div>
    <div class="container">
      <div class="book-left reveal-left">
        <span class="section-label">Get Started</span>
        <h2 class="section-title">Book<br>Your Climb</h2>
        <p class="book-desc">
          Your next great adventure starts with a conversation. Tell us about your
          experience level, target peak, and preferred dates — our team will design
          a personalized expedition plan.
        </p>
        <ul class="book-features">
          <li>
            <span class="check">✓</span>
            <span>Personalized expedition planning with certified guides</span>
          </li>
          <li>
            <span class="check">✓</span>
            <span>Full gear outfitting and logistical support included</span>
          </li>
          <li>
            <span class="check">✓</span>
            <span>Comprehensive travel and evacuation insurance</span>
          </li>
          <li>
            <span class="check">✓</span>
            <span>24/7 satellite communication with base operations</span>
          </li>
          <li>
            <span class="check">✓</span>
            <span>Post-expedition recovery program and celebration</span>
          </li>
        </ul>
      </div>
      <div class="reveal-right" style="transition-delay: 0.15s;">
        <div class="book-form-wrap">
          <h3>Start Your Ascent</h3>
          <form class="form-grid" id="bookForm" onsubmit="return false;">
            <div class="form-group">
              <label for="firstName">First Name</label>
              <input type="text" id="firstName" placeholder="First name" required>
            </div>
            <div class="form-group">
              <label for="lastName">Last Name</label>
              <input type="text" id="lastName" placeholder="Last name" required>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" placeholder="your@email.com" required>
            </div>
            <div class="form-group">
              <label for="phone">Phone</label>
              <input type="tel" id="phone" placeholder="+1 555 000 0000">
            </div>
            <div class="form-group">
              <label for="expedition">Expedition</label>
              <select id="expedition" required>
                <option value="" disabled selected>Select expedition</option>
                <option value="everest">Everest South Col — 60 Days</option>
                <option value="k2">K2 Abruzzi Ridge — 55 Days</option>
                <option value="matterhorn">Matterhorn Traverse — 12 Days</option>
                <option value="kilimanjaro">Kilimanjaro Machame — 8 Days</option>
                <option value="denali">Denali West Buttress — 21 Days</option>
                <option value="amaDablam">Ama Dablam — 30 Days</option>
                <option value="custom">Custom Expedition</option>
              </select>
            </div>
            <div class="form-group">
              <label for="experience">Experience Level</label>
              <select id="experience" required>
                <option value="" disabled selected>Select level</option>
                <option value="beginner">Beginner — First major climb</option>
                <option value="intermediate">Intermediate — Several peaks above 4,000m</option>
                <option value="advanced">Advanced — Technical alpine experience</option>
                <option value="expert">Expert — 8,000m+ experience</option>
              </select>
            </div>
            <div class="form-group full">
              <label for="message">Message</label>
              <textarea id="message" placeholder="Tell us about your climbing goals and any questions..."></textarea>
            </div>
            <div class="form-submit">
              <button type="submit" class="btn-primary">
                Request Expedition Plan <span class="arrow">→</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════ -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <div class="brand-name">SUMMIT</div>
          <p>
            Mountain Expedition Company. Leading climbers to the world's most
            extraordinary peaks since 2012. Base camp: Zermatt, Switzerland.
          </p>
          <div class="footer-social">
            <a href="#" aria-label="Instagram">IG</a>
            <a href="#" aria-label="YouTube">YT</a>
            <a href="#" aria-label="Vimeo">VM</a>
            <a href="#" aria-label="Twitter">X</a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Expeditions</h4>
          <ul>
            <li><a href="#">Everest</a></li>
            <li><a href="#">K2</a></li>
            <li><a href="#">Kilimanjaro</a></li>
            <li><a href="#">Matterhorn</a></li>
            <li><a href="#">Denali</a></li>
            <li><a href="#">Custom Trips</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Safety</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Resources</h4>
          <ul>
            <li><a href="#">Training Plans</a></li>
            <li><a href="#">Gear Lists</a></li>
            <li><a href="#">Altitude Guide</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <span>&copy; 2024 SUMMIT Mountain Expedition Co. All rights reserved.</span>
        <span>Privacy &middot; Terms &middot; Cookies</span>
      </div>
    </div>
  </footer>

  <!-- ═══════════════════════════════════════════
       JAVASCRIPT
       ═══════════════════════════════════════════ -->
  <script>
  (function() {
    'use strict';

    /* ─────────────────────────────────────
       SNOW PARTICLE CANVAS
       ───────────────────────────────────── */
    var canvas = document.getElementById('snowCanvas');
    var ctx = canvas.getContext('2d');
    var particles = [];
    var animFrameId;

    function resizeCanvas() {
      var hero = canvas.parentElement;
      canvas.width = hero.offsetWidth;
      canvas.height = hero.offsetHeight;
    }

    function createParticles() {
      particles = [];
      var count = Math.floor((canvas.width * canvas.height) / 4000);
      for (var i = 0; i < count; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 2.5 + 0.5,
          speed: Math.random() * 0.8 + 0.2,
          drift: (Math.random() - 0.5) * 0.5,
          opacity: Math.random() * 0.6 + 0.15,
          windPhase: Math.random() * Math.PI * 2,
          windSpeed: Math.random() * 0.002 + 0.001
        });
      }
    }

    function animateSnow() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      var time = Date.now();

      for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        var wind = Math.sin(time * p.windSpeed + p.windPhase) * 0.3;

        p.y += p.speed;
        p.x += p.drift + wind;

        if (p.y > canvas.height + 5) {
          p.y = -5;
          p.x = Math.random() * canvas.width;
        }
        if (p.x > canvas.width + 5) p.x = -5;
        if (p.x < -5) p.x = canvas.width + 5;

        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(240, 244, 248,' + p.opacity + ')';
        ctx.fill();
      }

      animFrameId = requestAnimationFrame(animateSnow);
    }

    resizeCanvas();
    createParticles();
    animateSnow();

    window.addEventListener('resize', function() {
      resizeCanvas();
      createParticles();
    });

    /* ─────────────────────────────────────
       ALTITUDE COUNTER (scroll-driven)
       ───────────────────────────────────── */
    var altValueEl = document.getElementById('altValue');
    var minAlt = 2400;
    var maxAlt = 8849;
    var currentAlt = minAlt;
    var targetAlt = minAlt;

    function updateAltitude() {
      var scrollTop = window.scrollY;
      var docHeight = document.documentElement.scrollHeight - window.innerHeight;
      var progress = Math.min(scrollTop / Math.max(docHeight, 1), 1);
      targetAlt = Math.round(minAlt + (maxAlt - minAlt) * progress);
    }

    function animateAltitude() {
      if (currentAlt !== targetAlt) {
        currentAlt += (targetAlt - currentAlt) * 0.08;
        if (Math.abs(currentAlt - targetAlt) < 1) currentAlt = targetAlt;
        altValueEl.textContent = Math.round(currentAlt).toLocaleString();
      }
      requestAnimationFrame(animateAltitude);
    }

    animateAltitude();

    window.addEventListener('scroll', updateAltitude, { passive: true });

    /* ─────────────────────────────────────
       NAVIGATION SCROLL STATE
       ───────────────────────────────────── */
    var nav = document.getElementById('mainNav');

    window.addEventListener('scroll', function() {
      if (window.scrollY > 80) {
        nav.classList.add('scrolled');
      } else {
        nav.classList.remove('scrolled');
      }
    }, { passive: true });

    /* ─────────────────────────────────────
       MOBILE MENU
       ───────────────────────────────────── */
    var mobileToggle = document.getElementById('mobileToggle');
    var mobileMenu = document.getElementById('mobileMenu');
    var mobileMenuClose = document.getElementById('mobileMenuClose');
    var mobileLinks = mobileMenu.querySelectorAll('.mobile-menu-link');

    mobileToggle.addEventListener('click', function() {
      mobileMenu.classList.add('active');
      document.body.style.overflow = 'hidden';
    });

    mobileMenuClose.addEventListener('click', function() {
      mobileMenu.classList.remove('active');
      document.body.style.overflow = '';
    });

    mobileLinks.forEach(function(link) {
      link.addEventListener('click', function() {
        mobileMenu.classList.remove('active');
        document.body.style.overflow = '';
      });
    });

    /* ─────────────────────────────────────
       SCROLL REVEAL — IntersectionObserver
       ───────────────────────────────────── */
    var revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');

    var revealObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var delay = entry.target.style.transitionDelay || '0s';
          entry.target.style.transitionDelay = delay;
          entry.target.classList.add('revealed');
          revealObserver.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -50px 0px'
    });

    revealElements.forEach(function(el) {
      revealObserver.observe(el);
    });

    /* ─────────────────────────────────────
       TIMELINE REVEAL
       ───────────────────────────────────── */
    var timelineItems = document.querySelectorAll('.timeline-item');

    var timelineObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          timelineObserver.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.2,
      rootMargin: '0px 0px -60px 0px'
    });

    timelineItems.forEach(function(item, index) {
      item.style.transitionDelay = (index * 0.12) + 's';
      timelineObserver.observe(item);
    });

    /* ─────────────────────────────────────
       STAT COUNTER ANIMATION
       ───────────────────────────────────── */
    var statNumbers = document.querySelectorAll('.stat-number[data-count]');

    var statObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var el = entry.target;
          var target = parseInt(el.getAttribute('data-count'), 10);
          var current = 0;
          var duration = 2000;
          var startTime = Date.now();

          function countUp() {
            var elapsed = Date.now() - startTime;
            var progress = Math.min(elapsed / duration, 1);
            var eased = 1 - Math.pow(1 - progress, 3);
            current = Math.round(eased * target);
            el.textContent = current;
            if (progress < 1) {
              requestAnimationFrame(countUp);
            }
          }

          countUp();
          statObserver.unobserve(el);
        }
      });
    }, { threshold: 0.5 });

    statNumbers.forEach(function(el) {
      statObserver.observe(el);
    });

    /* ─────────────────────────────────────
       PARALLAX ON SCROLL (Hero mountains)
       ───────────────────────────────────── */
    var heroMountains = document.querySelectorAll('[data-parallax]');

    function updateParallax() {
      var scrollY = window.scrollY;
      heroMountains.forEach(function(el) {
        var speed = parseFloat(el.getAttribute('data-parallax'));
        el.style.transform = 'translateY(' + (scrollY * speed * 0.4) + 'px)';
      });
    }

    window.addEventListener('scroll', updateParallax, { passive: true });

    /* ─────────────────────────────────────
       SMOOTH ANCHOR SCROLL
       ───────────────────────────────────── */
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        var target = document.querySelector(this.getAttribute('href'));
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });

    /* ─────────────────────────────────────
       FORM SUBMISSION HANDLER
       ───────────────────────────────────── */
    var bookForm = document.getElementById('bookForm');
    if (bookForm) {
      bookForm.addEventListener('submit', function(e) {
        e.preventDefault();
        var submitBtn = bookForm.querySelector('.btn-primary');
        var originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = 'Sending... <span class="arrow">↑</span>';
        submitBtn.style.pointerEvents = 'none';

        setTimeout(function() {
          submitBtn.innerHTML = 'Request Sent ✓';
          submitBtn.style.background = 'var(--moss-green)';
          setTimeout(function() {
            submitBtn.innerHTML = originalText;
            submitBtn.style.background = '';
            submitBtn.style.pointerEvents = '';
            bookForm.reset();
          }, 2500);
        }, 1200);
      });
    }

  })();
  </script>
</body>
</html>