/* ============================================================
   ASZEND — website stylesheet
   Design system mirrored from the iOS app:
   - Pure black background, white line-art, ONE red accent (the flag)
   - Space Grotesk (titles/buttons) + DM Sans (body)
   - Glass surfaces, embossed white capsule CTAs
   - Secondary text = white @ .85, tertiary = white @ .6 (never grey)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #000000;
  --white: #ffffff;
  --white-85: rgba(255, 255, 255, 0.85);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-35: rgba(255, 255, 255, 0.35);
  --flag: #d93333; /* aszendFlag — the only color in the system */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.12);
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --nav-h: 64px;
  --page-pad: clamp(20px, 5vw, 48px);
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over the whole page — turns flat black into designed texture.
   Tiny inline SVG noise tile, ~4% opacity, above everything, never interactive. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: rgba(217, 51, 51, 0.55); color: var(--white); }

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* DM Sans ships Regular + Medium only — map bold text to the Medium file
   so the browser never fakes a synthetic bold. */
strong, b {
  font-weight: 500;
  color: var(--white);
}

.eyebrow {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white-60);
}

/* ============================================================
   Navigation — merged flat bar at the top of the page that
   morphs into the floating glass capsule once you scroll.
   JS toggles .scrolled on .nav-wrap (threshold ~40px).
   ============================================================ */
.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 36px);
  width: 100%;
  max-width: 1800px;
  height: 76px;
  padding: 0 clamp(20px, 4vw, 44px);
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: none;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.nav-wrap.scrolled {
  padding: 14px var(--page-pad) 0;
}

.nav-wrap.scrolled .nav {
  max-width: 780px;
  height: var(--nav-h);
  padding: 0 12px 0 24px;
  border-radius: 999px;
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.22em;
}

.brand .pennant { flex: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
}

.nav-links a {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white-85);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--white); }

/* ---------- Embossed white capsule CTA (EmbossedPrimaryButtonStyle) ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 16px;
  color: #000;
  background: var(--white);
  border: none;
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15),
              0 0 24px rgba(255, 255, 255, 0.10);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
}
.cta:hover {
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.22),
              0 0 34px rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.cta:active {
  transform: scale(0.97);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
/* The pennant PLANTS itself when the button is engaged — the app's own ritual, and the
   page's only red accent now that the hero flagship is gone. It drops in from above with
   the same overshoot curve the button itself uses.
   The slot is occupied at all times and only opacity/transform animate, so the button
   never changes width. */
/* The flag and the label move as ONE block. The flag hangs off the label's left edge, so
   on hover the label slides right by half the flag's footprint (11px flag + 7px gap) and
   the pair ends up centred in the pill together — and STAYS there while the pointer is on
   the button. Only the label is in the flex row, so the button never changes width. */
.cta-label {
  position: relative;
  display: inline-block;
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cta:hover .cta-label,
.cta:focus-visible .cta-label {
  transform: translateX(9px);
}
.cta .pennant--cta {
  position: absolute;
  right: 100%;
  margin-right: 7px;
  top: 50%;
  margin-top: -7px;
  opacity: 0;
  transform: translateY(-9px);
  transition: opacity 0.18s ease,
              transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cta:hover .pennant--cta,
.cta:focus-visible .pennant--cta {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices never fire :hover, and that is exactly where the red accent is most needed
   — so plant it by default there instead of hiding it forever. */
@media (hover: none) {
  .cta .pennant--cta { opacity: 1; transform: none; }
  .cta-label { transform: translateX(9px); }
}

.cta--nav { padding: 11px 20px; font-size: 14px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 72px) var(--page-pad) 0;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-85);
}

.hero h1 {
  font-size: clamp(44px, 8vw, 88px);
  color: var(--white);
}

.hero .sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--white-85);
  max-width: min(520px, 100%);
}

.hero-note {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--white-60);
}

/* ---------- Hero mountain scene ---------- */
.scene {
  position: absolute;
  inset: auto 0 0 0;
  height: min(66vh, 700px);
  z-index: 1;
  pointer-events: none;
}

.scene .layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* The real traced mountain SVGs, bottom-anchored at their native aspect
   (never deformed — same rule as the app). left/right/height per peak inline.
   Bases dissolve into the page via a mask so no drawing ever shows a hard
   rectangular edge — they emerge from the dark instead of sitting on it. */
.scene .peak {
  position: absolute;
  /* The traced SVGs end in dangling root strokes. Rather than fading the drawing out to
     hide them — which reads as the artwork being cut — they are buried in the .fogbank
     cloud line, so the peaks keep almost their full height. Only a short fade at the very
     end, for whatever pokes through the weather. */
  /* Flush with the scene floor, not past it. .hero is overflow:hidden, so anything that
     overhangs gets sliced at the hero's bottom edge and the slice reads as a hairline
     across the page. Nothing overhangs, nothing can be sliced. */
  bottom: 0;
  width: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.scene .peak.flip { transform: scaleX(-1); }

/* Atmospheric depth: distant ranges are hazier, softer and drained of color
   (grayscale kills their red flags — the ONE red flag belongs to the front
   aszend75, matching the app's single-accent rule). */
.layer--far {
  /* Sparse and pushed well back — it is atmosphere, not detail. When this layer was the
     DENSER of the two it competed stroke for stroke with the near ridge, and since these
     SVGs are open line-art rather than filled silhouettes, every crossing branch showed. */
  opacity: 0.18;
  filter: blur(3px) grayscale(1);
}
.layer--mid {
  /* The continuous ridge. Lower than before on purpose: with half as many strokes crossing,
     each remaining line reads more, so the old 0.62 would sit heavy. */
  opacity: 0.55;
  filter: blur(0.7px) grayscale(1);
}
/* Wide, even ambient lift across the whole range — no centre hotspot, since no
   single peak is the hero any more. */
.scene::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 72%;
  background: radial-gradient(ellipse 62% 60% at 50% 78%,
              rgba(255, 255, 255, 0.035), transparent 72%);
  z-index: 0;
  pointer-events: none;
}

/* Base fade carrying the scene into the page black. A plain two-stop gradient ramped too
   fast and left a visible seam at the hero's bottom edge, so this is a longer, eased ramp:
   nearly nothing for the first third, then most of the darkening low down where there is
   little left to hide. */
.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  /* Reaches solid black at 88%, not at 100%. .hero is overflow:hidden and the peaks and
     fog bank both extend past its bottom edge, so they are HARD-CLIPPED there — the fade
     has to be FINISHED before the cut, or the clip shows as a seam across the page. The
     last 28% of this band is therefore solid black, with room to spare: an earlier version
     only reached full black past the hero's edge, leaving ~12% of the range still visible
     at the exact pixel where it got sliced. */
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.05) 14%,
              rgba(0, 0, 0, 0.16) 27%,
              rgba(0, 0, 0, 0.38) 40%,
              rgba(0, 0, 0, 0.66) 52%,
              rgba(0, 0, 0, 0.90) 62%,
              #000 72%,
              #000 100%);
  z-index: 6;
}

/* Signature words plant a flag when you hover them — the same gesture as the CTAs, so the
   page rewards poking at it. Sized in em, so the flag scales with whatever type it sits on:
   big on the h1, small in body copy. --flag-x picks which letter the pole lands on, set
   per word inline. Drawn from two pseudo-elements rather than one masked SVG so the pole
   can follow the text colour while the pennant keeps the brand red, matching the wordmark
   and the CTA flag. */
.peakword {
  position: relative;
  transition: color 0.2s ease;
}
/* Measured from the BASELINE, not from the top of the box. Headings run line-height 1.08,
   so there is no usable leading above a word — anchoring to the box top put the flag
   straight through the descenders of the line above. Space Grotesk caps reach ~0.70em, and
   the em box goes to ~1.0em, so a flag planted at the cap line and 0.26em tall lives
   entirely inside the word's own line box and can never collide. */
.peakword::before,
.peakword::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2em);
  transition: opacity 0.18s ease,
              transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Stacked drop-shadows fake a 1px black stroke around both halves — a border triangle
   cannot take an outline, and the flag sits on top of white letters where it needs one. */
.peakword::before,
.peakword::after {
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
          drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}
.peakword::before {                      /* pole, standing on the cap line */
  left: var(--flag-x, 45%);
  bottom: 0.70em;
  /* em keeps it proportional on the big headings; the px floors stop it shrinking to a
     speck in body copy, where 0.26em is only about 5px. */
  width: max(1.6px, 0.045em);
  height: max(11px, 0.26em);
  background: var(--white);
  border-radius: 1px;
}
.peakword::after {                       /* pennant, flying from the top of the pole */
  left: calc(var(--flag-x, 45%) + 0.045em);
  bottom: calc(0.70em + max(5.5px, 0.13em));
  width: 0;
  height: 0;
  border-top: max(2.8px, 0.065em) solid transparent;
  border-bottom: max(2.8px, 0.065em) solid transparent;
  border-left: max(6.5px, 0.15em) solid var(--flag);
}
.peakword:hover { color: var(--white); }
.peakword:hover::before,
.peakword:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Planting pulls focus: the OTHER letters of the same heading (or the same paragraph) drop
   back to almost nothing, so the word and its flag are all that stays lit. Scoped to the
   hovered word's own block on purpose — the surrounding page is left alone.

   Done with COLOR, not opacity: opacity on a parent is multiplicative and would take the
   hovered word down with it, whereas a colour on the span overrides the inherited one. */
h1, h2, .hero .sub {
  transition: color 0.28s ease;
}
h1:has(.peakword:hover),
h2:has(.peakword:hover),
.hero .sub:has(.peakword:hover) {
  color: rgba(255, 255, 255, 0.07);
}

/* Touch has no hover, same as the CTA flag — show it planted rather than never. */
@media (hover: none) {
  .peakword::before,
  .peakword::after { opacity: 1; transform: none; }
}

/* The cloud line at the feet of the range. Built from many overlapping puffs, each with
   its own size, height and alpha, so the bank visibly thickens and thins along the range
   rather than washing over it evenly.

   Both fog layers are masked to fade out at BOTH ends. Upward because fog thins with
   altitude, and because a veil over the peaks was flattening the whole skyline. Downward
   because the scene floor is also the hero's bottom edge: a cloud that stopped dead there
   met the next section on a hard line. */
.fogbank {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 32%;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 17% 67% at -4.0% 56%, rgba(255, 255, 255, 0.37), transparent 70%),
    radial-gradient(ellipse 11% 70% at 9.0% 58%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 12% 48% at 22.0% 42%, rgba(255, 255, 255, 0.24), transparent 70%),
    radial-gradient(ellipse 19% 68% at 35.0% 56%, rgba(255, 255, 255, 0.41), transparent 70%),
    radial-gradient(ellipse 22% 70% at 48.0% 58%, rgba(255, 255, 255, 0.48), transparent 70%),
    radial-gradient(ellipse 16% 48% at 61.0% 42%, rgba(255, 255, 255, 0.34), transparent 70%),
    radial-gradient(ellipse 10% 68% at 74.0% 56%, rgba(255, 255, 255, 0.21), transparent 70%),
    radial-gradient(ellipse 13% 70% at 87.0% 58%, rgba(255, 255, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 20% 48% at 100.0% 42%, rgba(255, 255, 255, 0.43), transparent 70%);
  filter: blur(26px);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 34%, #000 62%, transparent 100%);
  will-change: transform;
  --drift-amp: 30px;
  animation: drift 104s ease-in-out infinite alternate;
}

/* Fog packed into the SEAMS — the saddles where two neighbouring peaks' flanks cross and
   their line-art tangles. The first pass sits on the saddles (half a step off the mid
   range's 8.3% rhythm); the second is offset a quarter step and lower, so the puffs pile
   onto each other. REGENERATE THESE IF THE PEAK POSITIONS CHANGE. */
.fogseams {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 24%;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 5% 53% at -3.8% 71%, rgba(255, 255, 255, 0.42), transparent 70%),
    radial-gradient(ellipse 7% 27% at 4.5% 57%, rgba(255, 255, 255, 0.27), transparent 70%),
    radial-gradient(ellipse 11% 54% at 12.8% 53%, rgba(255, 255, 255, 0.23), transparent 70%),
    radial-gradient(ellipse 8% 26% at 21.1% 72%, rgba(255, 255, 255, 0.43), transparent 70%),
    radial-gradient(ellipse 5% 54% at 29.4% 51%, rgba(255, 255, 255, 0.20), transparent 70%),
    radial-gradient(ellipse 9% 25% at 37.7% 60%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(ellipse 11% 55% at 46.0% 69%, rgba(255, 255, 255, 0.39), transparent 70%),
    radial-gradient(ellipse 6% 25% at 54.3% 48%, rgba(255, 255, 255, 0.17), transparent 70%),
    radial-gradient(ellipse 5% 55% at 62.6% 67%, rgba(255, 255, 255, 0.38), transparent 70%),
    radial-gradient(ellipse 11% 25% at 70.9% 62%, rgba(255, 255, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 10% 56% at 79.2% 50%, rgba(255, 255, 255, 0.19), transparent 70%),
    radial-gradient(ellipse 5% 24% at 87.5% 71%, rgba(255, 255, 255, 0.42), transparent 70%),
    radial-gradient(ellipse 7% 56% at 95.8% 55%, rgba(255, 255, 255, 0.25), transparent 70%),
    radial-gradient(ellipse 13% 32% at -5.9% 72%, rgba(255, 255, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 10% 23% at 2.4% 65%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 10% 43% at 10.7% 81%, rgba(255, 255, 255, 0.17), transparent 70%),
    radial-gradient(ellipse 14% 39% at 19.0% 78%, rgba(255, 255, 255, 0.27), transparent 70%),
    radial-gradient(ellipse 7% 22% at 27.3% 64%, rgba(255, 255, 255, 0.11), transparent 70%),
    radial-gradient(ellipse 15% 37% at 35.6% 76%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(ellipse 7% 44% at 43.9% 82%, rgba(255, 255, 255, 0.11), transparent 70%),
    radial-gradient(ellipse 13% 25% at 52.2% 66%, rgba(255, 255, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 10% 30% at 60.5% 71%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 10% 46% at 68.8% 84%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 13% 30% at 77.2% 71%, rgba(255, 255, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 7% 24% at 85.5% 66%, rgba(255, 255, 255, 0.11), transparent 70%);
  filter: blur(22px);
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 32%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 32%, #000 60%, transparent 100%);
  will-change: transform;
  --drift-amp: 16px;
  animation: drift 132s ease-in-out infinite alternate;
}

/* ---------- Hero load-in: content rises, mountains fade up ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sceneIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-content > * {
  opacity: 0;
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.28s; }
.hero-content > *:nth-child(4) { animation-delay: 0.40s; }
.hero-content > *:nth-child(5) { animation-delay: 0.52s; }

.scene { animation: sceneIn 1.4s ease 0.25s backwards; }

/* ---------- Fog bands ---------- */
.fog {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(255, 255, 255, 0.38) 0%,
              rgba(255, 255, 255, 0.09) 45%,
              transparent 68%);
  filter: blur(36px);
  will-change: transform;
  animation: drift var(--drift-dur, 70s) ease-in-out infinite alternate;
  opacity: var(--fog-op, 0.3);
}

@keyframes drift {
  from { transform: translateX(calc(var(--drift-amp, 60px) * -1)); }
  to   { transform: translateX(var(--drift-amp, 60px)); }
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  position: relative;
  padding: clamp(90px, 12vh, 150px) var(--page-pad);
  max-width: 1120px;
  margin: 0 auto;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(48px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.section-head h2 {
  font-size: clamp(32px, 5vw, 52px);
}

.section-head p { color: var(--white-85); }

/* ---------- Ascent steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: clamp(64px, 9vh, 110px);
}

.step {
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step .num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--white-60);
}

.step h3 { font-size: 20px; }
.step p { font-size: 15px; color: var(--white-85); }

/* ---------- Mountain cards ---------- */
.mountains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.mountain-card {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}
.mountain-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.24);
}

.mountain-card .mountain-art {
  height: 190px;
  width: auto;
  margin: 0 auto 18px;
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.mountain-card .days {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
}
.mountain-card .days small {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--white-60);
  margin-left: 6px;
  vertical-align: 4px;
  text-transform: uppercase;
}

.mountain-card .name {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white-60);
  margin: 10px 0 8px;
}

.mountain-card p { font-size: 15px; color: var(--white-85); }

/* ---------- Closing CTA band ---------- */
.closing {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  overflow: hidden;
}
.closing h2 { font-size: clamp(32px, 5vw, 56px); max-width: min(620px, 100%); }
.closing > * { position: relative; z-index: 2; }

/* ghosted flagship behind the closing words — the mountain is always present */
.closing .closing-art {
  position: absolute;
  left: 50%;
  bottom: -12%;
  transform: translateX(-50%);
  height: 105%;
  width: auto;
  opacity: 0.08;
  filter: grayscale(1);
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 22%, #000 48%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 22%, #000 48%, transparent 96%);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 44px var(--page-pad) 56px;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer .brand { font-size: 15px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}
.footer-links a { color: var(--white-60); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--white); }

.footer .copyright {
  width: 100%;
  font-size: 13px;
  color: var(--white-60);
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   Legal / support pages
   ============================================================ */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 90px) var(--page-pad) 110px;
}

.legal h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 10px; }

.legal .updated {
  font-size: 14px;
  color: var(--white-60);
  margin-bottom: 44px;
}

.legal h2 {
  font-size: 22px;
  margin: 42px 0 14px;
}

.legal p, .legal li { color: var(--white-85); margin-bottom: 14px; }

.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 14px;
}
.legal li { margin-bottom: 8px; }

.legal a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.legal .card {
  margin-top: 20px;
  padding: 24px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav { padding-left: 20px; }
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .scene { height: 48vh; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-content > *, .scene { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}