/* ============================================================
   SWISS ERA — All Products
   Tokens lifted EXACTLY from Collections Preview.html
   ============================================================ */
:root {
  /* type — aligned with Swiss Era brand (index.html) */
  --ink:        #073649;            /* deep teal text */
  --ink-2:      #245269;
  --muted:      #647d8a;

  /* atmospheric palette */
  --bg-1:       #f3ece1;            /* warm cream top-right */
  --bg-2:       #eef1f3;            /* neutral mid */
  --bg-3:       #cfe2ec;            /* icy blue */
  --bg-4:       #b6d3e3;

  /* accents */
  --accent:     #2f8ba3;            /* primary blue accent */
  --accent-dark: #034c5c;           /* dark accent */
  --accent-2:   #6fa6cf;
  --accent-soft:rgba(47,139,163,.10);

  /* card chrome */
  --card:       rgba(255,255,255,.55);
  --card-border:rgba(255,255,255,.85);
  --card-strong:rgba(255,255,255,.78);
  --shadow-card:
    0 30px 60px -30px rgba(7,54,73,.35),
    0 8px 24px -8px rgba(7,54,73,.18);
  --shadow-soft:
    0 18px 40px -22px rgba(7,54,73,.30),
    inset 0 1px 0 rgba(255,255,255,.9);

  /* fonts */
  --font-sans:  "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #eef1f3; scroll-behavior: smooth; }
body {
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: transparent;
  overflow-x: hidden;
}

/* ============================================================
   Background stage — 5 chapter palettes
   All within Swiss Era's family (cream / off-white / light teal /
   deep teal / warm ivory). Same world, different mood — arranged
   as a tonal arc from atelier-light → summit-deep.
   ============================================================ */
.bg-stage {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background: #eef3f6;
}
.bg-layer {
  position: absolute; inset: 0;
  opacity: 0;
  /* slower, longer cross-fade so chapter shifts feel atmospheric, not abrupt */
  transition: opacity 2200ms cubic-bezier(.4,0,.2,1);
}
.bg-layer.is-active { opacity: 1; }

/* ============================================================
   COLD + LIGHT palette — all 5 chapters share one tonal family.
   Anchor: icy white. Drift: gentle saturation gain from chapter 1
   to chapter 5, but max saturation stays LIGHT (no dark closer).
   Adjacent chapter palettes share most of their stops so the
   cross-fade reads as atmospheric drift, not a hard cut.
   ============================================================ */

/* HERO — icy white wash, matches ch1 opening tone */
.bg-layer[data-bg="hero"] {
  background:
    radial-gradient(70% 55% at 95% 5%,  #eaf2f7 0%, rgba(234,242,247,0) 55%),
    radial-gradient(95% 75% at 0% 95%,  #c8dde8 0%, rgba(200,221,232,0) 60%),
    linear-gradient(160deg, #f4f8fb 0%, #e6eef3 45%, #d2e1eb 100%);
}

/* ============================================================
   CHAPTER 1 — HARD SHELL · ARCTIC WHITE
   Near-pure white, faintest cool drift. User's anchor tone.
   Texture: fine horizontal ribs (ABS shell reference).
   ============================================================ */
.bg-layer[data-bg="hardshell"] {
  background:
    radial-gradient(55% 45% at 92% 8%,  #ffffff 0%, rgba(255,255,255,0) 55%),
    radial-gradient(65% 55% at 4% 96%,  #d4e6f0 0%, rgba(212,230,240,0) 60%),
    linear-gradient(162deg, #f6fafb 0%, #e8f0f5 50%, #d4e4ee 100%);
}
.bg-layer[data-bg="hardshell"]::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 22px,
      rgba(20,50,70,.038) 22px,
      rgba(20,50,70,.038) 23px
    );
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 35%, #000 100%);
}

/* ============================================================
   CHAPTER 2 — PRINTED · POWDER BLUE
   First clear step toward blue. Warm white gives way to
   cool pale azure.
   Texture: fine 45° screen-print dot grid.
   ============================================================ */
.bg-layer[data-bg="printed"] {
  background:
    radial-gradient(65% 50% at 8% 4%,   #ffffff 0%, rgba(255,255,255,0) 55%),
    radial-gradient(75% 60% at 96% 96%, #a8c8dc 0%, rgba(168,200,220,0) 60%),
    linear-gradient(158deg, #e8f3f9 0%, #cee3ef 52%, #aecde0 100%);
}
.bg-layer[data-bg="printed"]::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(20,50,70,.10) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 30%, #000 100%);
}

/* ============================================================
   CHAPTER 3 — SOFT SHELL · SKY BLUE
   The sky opens up — a clear, airy mid-blue.
   Texture: fine diagonal weave (ballistic nylon reference).
   ============================================================ */
.bg-layer[data-bg="softshell"] {
  background:
    radial-gradient(70% 50% at 88% 6%,  #daeef8 0%, rgba(218,238,248,0) 55%),
    radial-gradient(80% 65% at 2% 98%,  #90bcd4 0%, rgba(144,188,212,0) 60%),
    linear-gradient(168deg, #d4eaf6 0%, #b2d2e6 50%, #88b8d0 100%);
}
.bg-layer[data-bg="softshell"]::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 10px,
      rgba(20,50,70,.042) 10px, rgba(20,50,70,.042) 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 10px,
      rgba(20,50,70,.042) 10px, rgba(20,50,70,.042) 11px
    );
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 28%, #000 100%);
}

/* ============================================================
   CHAPTER 4 — BACKPACKS · STEEL BLUE
   Richer, more saturated — like deep glacier melt water.
   Texture: tight crosshatch grid (600D polyester weave).
   ============================================================ */
.bg-layer[data-bg="backpacks"],
.bg-layer[data-bg="laptop"] {
  background:
    radial-gradient(70% 50% at 96% 10%, #c4dcec 0%, rgba(196,220,236,0) 55%),
    radial-gradient(80% 65% at 0% 100%, #74a8c4 0%, rgba(116,168,196,0) 60%),
    linear-gradient(168deg, #bcd8ea 0%, #96bed4 45%, #68a0bc 100%);
}
.bg-layer[data-bg="backpacks"]::after,
.bg-layer[data-bg="laptop"]::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 13px,
      rgba(20,50,70,.055) 13px, rgba(20,50,70,.055) 14px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 13px,
      rgba(20,50,70,.055) 13px, rgba(20,50,70,.055) 14px
    );
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 100%);
}

/* ============================================================
   CHAPTER 5 — TREKKING · DEEP ICY HORIZON
   The closing chapter — a rich, full icy blue like a mountain
   lake viewed from altitude.
   Texture: ripstop grid (thick+fine lines) + terrain silhouette.
   ============================================================ */
.bg-layer[data-bg="trekking"] {
  background:
    radial-gradient(65% 48% at 50% 0%,  #b0ccde 0%, rgba(176,204,222,0) 60%),
    radial-gradient(80% 70% at 100% 100%, #4e86a4 0%, rgba(78,134,164,0) 65%),
    radial-gradient(60% 55% at 0% 100%,  #5e96b0 0%, rgba(94,150,176,0) 70%),
    linear-gradient(172deg, #a8c8dc 0%, #7aacc4 42%, #4e88a4 100%);
}
.bg-layer[data-bg="trekking"]::after {
  content: ""; position: absolute; inset: 0;
  /* ripstop: fine grid with heavier lines every 5th interval */
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 19px, rgba(20,50,70,.06) 19px,  rgba(20,50,70,.06) 20px),
    repeating-linear-gradient(90deg,  transparent, transparent 19px, rgba(20,50,70,.06) 19px,  rgba(20,50,70,.06) 20px),
    repeating-linear-gradient(0deg,   transparent, transparent 99px, rgba(20,50,70,.10) 99px,  rgba(20,50,70,.10) 101px),
    repeating-linear-gradient(90deg,  transparent, transparent 99px, rgba(20,50,70,.10) 99px,  rgba(20,50,70,.10) 101px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'><g fill='%23143246'><path fill-opacity='.08' d='M0 720 L140 530 L260 630 L420 360 L580 530 L700 440 L840 610 L960 450 L1120 590 L1280 410 L1420 540 L1600 460 L1600 900 L0 900 Z'/><path fill-opacity='.12' d='M0 830 L180 700 L340 760 L500 580 L660 700 L820 610 L980 730 L1120 610 L1300 740 L1460 620 L1600 720 L1600 900 L0 900 Z'/></g></svg>");
  background-size: auto, auto, auto, auto, 100% 80%;
  background-position: 0 0, 0 0, 0 0, 0 0, bottom center;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 100%);
}

/* film grain texture overlay across all bg layers */
.bg-grain {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Type scale — matches Collections Preview headline + sub
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.t-eyebrow-lg {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.t-cta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.t-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .98;
  letter-spacing: -1.6px;
  color: var(--ink);
  margin: 0;
}
.t-headline .accent { color: var(--accent); font-style: italic; font-weight: 600; }
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--ink);
  margin: 0;
}
.t-h2 .accent { color: var(--accent); font-style: italic; font-weight: 600; }
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.3px;
  color: var(--ink);
  margin: 0;
}
.t-body  { color: var(--muted); font-size: 14px; line-height: 1.55; }
.t-large { color: var(--ink-2); font-size: 16px; line-height: 1.55; }

/* ============================================================
   NAV — identical structure to Collections Preview's glass nav
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 28px;
  transition: background .25s ease;
}
.nav.scrolled {
  background: transparent;
}
.nav-left   { justify-self: start; display: inline-flex; align-items: center; gap: 14px; }
.nav-center { justify-self: center; }
.nav-right  { justify-self: end;   display: inline-flex; align-items: center; gap: 10px; }

.plus-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(20,50,70,.08);
}
.plus-mark svg { width: 14px; height: 14px; }

.logo-word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo { display: inline-flex; align-items: center; text-decoration: none; color: currentColor; }
.brand-mark { height: 96px; width: auto; display: block; }
.brand-word { font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: 1.5px; line-height: 1; color: var(--ink); }
.nav .brand-word { color: #fff; }
.nav.past-hero .brand-word { color: var(--ink); }

.nav-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 32px rgba(17,70,88,.10);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  overflow: hidden;
}
.nav-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.nav-indicator {
  position: absolute; top: 6px; left: 0;
  height: 32px; width: 0; border-radius: 999px;
  background: rgba(47,127,174,.10);
  box-shadow:
    inset 0 0 0 1px rgba(47,127,174,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:
    transform 360ms cubic-bezier(.22,1,.36,1),
    width 360ms cubic-bezier(.22,1,.36,1),
    opacity 200ms ease;
  pointer-events: none;
  opacity: 0; z-index: 0;
}
.nav-glass.ready .nav-indicator { opacity: 1; }
.nav-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 16px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  transition: color .25s ease;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  background: rgba(255,255,255,.85);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 16px rgba(20,50,70,.10), inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.pill.dark { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 8px 20px rgba(20,50,70,.25); }
.pill:hover { transform: translateY(-1px); }
.pill .muted { opacity: .55; }

/* ============================================================
   HERO — full-viewport video with text overlay
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: block;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg video,
.hero-bg .video-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.video-fallback {
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(47,127,174,.30), transparent 60%),
    radial-gradient(60% 50% at 70% 70%, rgba(159,193,212,.55), transparent 60%),
    linear-gradient(135deg, #e2eef6 0%, #b6d3e3 60%, #6e8ba2 100%);
  display: grid; place-items: center;
}
.video-fallback .ph-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: #fff;
  padding: 8px 14px; border-radius: 4px;
  border: 1px dashed rgba(255,255,255,.45);
  background: rgba(20,50,70,.45);
}
.hero-bg::after {
  /* readability scrim — darken bottom, slight darken top so nav stays legible */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,50,70,.55) 0%,
      rgba(20,50,70,.15) 22%,
      rgba(20,50,70,.10) 50%,
      rgba(20,50,70,.60) 95%,
      rgba(20,50,70,.85) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 5;
  min-height: 100vh;
  max-width: 1480px;
  margin: 0 auto;
  padding: 140px 28px 56px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 56px;
}
.hero-headline {
  align-self: center;
  text-align: center;
  display: flex; flex-direction: column; gap: 22px;
  align-items: center;
  color: #fff;
}
.hero-headline .eyebrow { color: #ddff34; }
.hero-headline .t-headline {
  color: #fff;
  max-width: 22ch;
}
.hero-headline .t-headline .accent {
  color: #b8d8ee; /* icy blue accent on dark video */
  font-style: italic;
}
.hero-headline .sub {
  max-width: 56ch;
  color: rgba(255,255,255,.78);
  font-size: 16px; line-height: 1.55;
  margin: 0;
}

/* bottom bar — play btn left, stats right, on top of video */
.hero-bar {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  color: #fff;
  padding-bottom: 8px;
}
.hero-bar .left {
  display: inline-flex; align-items: center; gap: 16px;
}
.hero-bar .left .play-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.hero-bar .left .play-meta .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hero-bar .left .play-meta .v { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: #fff; }

.hero-bar .stats { display: flex; gap: 36px; align-items: flex-end; }
.hero-bar .stat  { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hero-bar .stat .v {
  font-family: var(--font-sans); font-weight: 600; font-size: 32px;
  line-height: 1; letter-spacing: -.4px;
}
.hero-bar .stat .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.7); }

.scroll-hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.7); pointer-events: none;
}
.scroll-hint .line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  animation: trickle 2.2s ease-in-out infinite;
}
@keyframes trickle {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.play-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink);
  border: 1px solid rgba(255,255,255,.6);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 18px 40px rgba(20,50,70,.35);
  transition: transform .2s ease;
}
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { width: 18px; height: 18px; }

/* nav becomes transparent over the hero video (hero owns its own scrim) */
.nav { color: #fff; }
.nav .plus-mark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); }
.nav .plus-mark svg path { stroke: #fff; }
.nav .logo-word { color: #fff; }
.nav .nav-glass {
  background: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 8px 32px rgba(17,70,88,.10);
}
.nav .nav-link { color: rgba(255,255,255,.7); }
.nav .nav-link:hover, .nav .nav-link.active { color: #fff; }
.nav .nav-indicator {
  background: rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.nav .pill {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav .pill.dark { background: #fff; color: var(--ink); border-color: #fff; }

/* once scrolled past the hero, nav swaps back to the light token version */
.nav.past-hero { color: var(--ink); }
.nav.past-hero.scrolled {
  background: transparent;
}
.nav.past-hero .plus-mark { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); }
.nav.past-hero .plus-mark svg path { stroke: var(--ink); }
.nav.past-hero .logo-word { color: var(--ink); }
.nav.past-hero .nav-glass {
  background: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 8px 32px rgba(17,70,88,.10);
}
.nav.past-hero .nav-link { color: var(--ink-2); }
.nav.past-hero .nav-link:hover, .nav.past-hero .nav-link.active { color: var(--accent); }
.nav.past-hero .nav-indicator {
  background: rgba(47,127,174,.10);
  box-shadow:
    inset 0 0 0 1px rgba(47,127,174,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.nav.past-hero .pill {
  background: rgba(255,255,255,.85);
  color: var(--ink);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 6px 16px rgba(20,50,70,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.nav.past-hero .pill.dark { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   ZONE (per-category section)
   ============================================================ */
.zone {
  position: relative;
  padding: 96px 28px 120px;
}
.zone-inner { max-width: 1480px; margin: 0 auto; }

.zone-divider {
  height: 1px; background: rgba(20,50,70,.12);
  max-width: 1480px; margin: 0 auto;
}

.zone-header {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  margin-bottom: 56px;
}
.zone-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent);
  margin-bottom: 18px;
}
.zone-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zone-title { max-width: 16ch; }
.zone-desc { max-width: 56ch; margin: 16px 0 0; }
.zone-meta {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; text-align: right; color: var(--ink-2);
}
.zone-meta .count {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 56px; line-height: 1; letter-spacing: -1px; color: var(--ink);
}

/* ============================================================
   CHAPTER-SCOPED ELEMENT STYLING
   Each zone gets subtle element tweaks to reinforce its mood,
   keeping the same vocabulary (cards / pills / type) but
   shifting tone like chapter typography in a book.
   ============================================================ */

/* CH1 · Hard Shell — Arctic white bg; pure glass cards */
.zone[data-bg-zone="hardshell"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.26));
  border-color: rgba(255,255,255,.78);
}
.zone[data-bg-zone="hardshell"] .zone-eyebrow .dot { background: var(--accent); }

/* CH2 · Printed — Powder blue bg; cards stay bright with faint blue cast */
.zone[data-bg-zone="printed"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(240,248,253,.28));
  border-color: rgba(255,255,255,.72);
}
.zone[data-bg-zone="printed"] .zone-eyebrow .dot {
  width: 8px; height: 8px;
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
}
.zone[data-bg-zone="printed"] .card-art {
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
}

/* CH3 · Soft Shell — Sky blue bg; cards need more opacity to pop */
.zone[data-bg-zone="softshell"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(232,244,250,.32));
  border-color: rgba(255,255,255,.78);
}
.zone[data-bg-zone="softshell"] .zone-eyebrow .dot {
  background: transparent;
  border: 1.5px solid var(--accent);
  width: 8px; height: 8px;
}
.zone[data-bg-zone="softshell"] .card-art {
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
}

/* CH4 · Backpacks / CH5 · Laptop — Steel blue bg; higher card luminosity for contrast */
.zone[data-bg-zone="backpacks"] .card,
.zone[data-bg-zone="laptop"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(228,242,250,.38));
  border-color: rgba(255,255,255,.84);
  box-shadow: 0 22px 50px -26px rgba(20,50,70,.28), inset 0 1px 0 rgba(255,255,255,.95);
}
.zone[data-bg-zone="backpacks"] .zone-eyebrow .dot,
.zone[data-bg-zone="laptop"] .zone-eyebrow .dot {
  background: var(--accent);
  border-radius: 1px;
}
.zone[data-bg-zone="backpacks"] .card-art,
.zone[data-bg-zone="laptop"] .card-art {
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
}

/* CH5 · Trekking — Deepest blue bg; cards at full luminosity */
.zone[data-bg-zone="trekking"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(220,238,248,.44));
  border-color: rgba(255,255,255,.90);
  box-shadow: 0 24px 54px -28px rgba(20,50,70,.32), inset 0 1px 0 rgba(255,255,255,.98);
}
.zone[data-bg-zone="trekking"] .zone-eyebrow .dot { background: var(--accent); }
.zone[data-bg-zone="trekking"] .card-art {
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,.70), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
}

/* dividers stay light and consistent across all chapters */
.zone-divider { background: rgba(20,50,70,.10); }

/* footer adapts when sitting under the dark chapter */
.foot { transition: color .4s ease; }
.grid {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px;
}
@media (max-width: 1400px) { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 740px)  { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px)  { .grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition:
    transform 700ms cubic-bezier(.22,1,.36,1),
    box-shadow 700ms ease,
    background 700ms ease,
    border-color 700ms ease;
}
.card:hover {
  transform: translateY(-6px);
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.32));
  border-color: rgba(255,255,255,.85);
  box-shadow: var(--shadow-card);
}


.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
}
.card-num {
  display: flex; flex-direction: column; gap: 2px;
}
.card-num .sku {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: .8px; color: var(--ink-2);
}
.card-num .tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent);
}
.card-fav {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.65); color: var(--ink-2);
  border: 1px solid rgba(20,50,70,.08);
  display: grid; place-items: center; cursor: pointer;
}
.card-fav svg { width: 12px; height: 12px; }
.card-fav:hover { color: var(--accent); }

.card-art {
  position: relative; flex: 1;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  padding: 14px;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}
.card-art svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 18px 18px rgba(20,50,70,.18));
  transition: transform 700ms cubic-bezier(.22,1,.36,1), filter 700ms ease;
}
.card:hover .card-art svg {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 26px 28px rgba(20,50,70,.28));
}
.card-art.has-photo { padding: 6px; aspect-ratio: 1 / 1; }
.card-art.has-photo img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.card:hover .card-art.has-photo img { transform: translateY(-4px) scale(1.04); }

.pdp-media--photo { padding: 32px 56px 96px; background: radial-gradient(60% 50% at 50% 55%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); }
.pdp-art-photo {
  width: 100%; max-height: 520px;
  object-fit: contain; display: block;
  animation: pdp-breathe 6s ease-in-out infinite alternate;
}
.pdp-thumb--photo { padding: 0; overflow: hidden; }
.pdp-thumb--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }

.card-foot { display: flex; flex-direction: column; gap: 5px; }
.card-name {
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  letter-spacing: -.3px; color: var(--ink); margin: 0; line-height: 1.1;
}
.card-cat {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
}
.card-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.size-list {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.size-pill {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.6); color: var(--ink-2);
  border: 1px solid rgba(20,50,70,.10);
}
.swatch-row { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(20,50,70,.22);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.swatch-more {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
  color: var(--muted);
}

.card-cta-row {
  display: flex; align-items: center; justify-content: flex-end;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid rgba(20,50,70,.10);
}
.card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
}
.card-cta svg { width: 10px; height: 10px; }

/* ============================================================
   PDP overlay — full screen, glass white over the same bg stage
   ============================================================ */
.pdp-overlay {
  position: fixed; inset: 0; z-index: 100;
  opacity: 0; pointer-events: none;
  background: rgba(20,50,70,.20);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: opacity .4s ease;
  overflow-y: auto;
}
.pdp-overlay.open { opacity: 1; pointer-events: auto; }

.pdp {
  position: relative;
  max-width: 1480px; margin: 40px auto;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform: translateY(40px); opacity: 0;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.pdp-overlay.open .pdp { transform: translateY(0); opacity: 1; }
.pdp-close {
  position: fixed; top: 24px; right: 36px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--ink);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 30px rgba(20,50,70,.18);
  display: grid; place-items: center; cursor: pointer;
}
.pdp-close svg { width: 16px; height: 16px; }

.pdp-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.pdp-media {
  position: relative;
  min-height: 720px;
  padding: 64px 56px 96px;
  display: grid; place-items: center;
  border-right: 1px solid rgba(20,50,70,.08);
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
}
.pdp-media svg {
  width: 100%; height: 100%;
  max-height: 560px;
  filter: drop-shadow(0 40px 60px rgba(20,50,70,.30));
  animation: pdp-breathe 6s ease-in-out infinite alternate;
}
@keyframes pdp-breathe {
  from { transform: translateY(4px) scale(.99); }
  to   { transform: translateY(-6px) scale(1.02); }
}
.pdp-thumbs-outer {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 6px;
}
.pdp-thumbs {
  display: flex; gap: 8px; flex: 1;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb-arrow {
  flex-shrink: 0; width: 30px; height: 56px; border-radius: 8px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
  border: 1px solid rgba(20,50,70,.12);
  display: grid; place-items: center; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-2);
  transition: background 150ms, color 150ms;
}
.pdp-thumb-arrow:hover { background: rgba(255,255,255,.97); color: var(--accent); }
.pdp-thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(20,50,70,.12);
  display: grid; place-items: center; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-2);
}
.pdp-thumb.active {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47,127,174,.18);
}

.pdp-info { padding: 56px 48px; display: flex; flex-direction: column; gap: 26px; }
.pdp-crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pdp-crumb .sep { opacity: .5; }
.pdp-info h1 {
  margin: 0;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(40px,4vw,60px); line-height: .98; letter-spacing: -1.2px;
  color: var(--ink);
}
.pdp-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.pdp-desc { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 56ch; }

.pdp-row { display: flex; flex-direction: column; gap: 12px; }
.pdp-row .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
  display: flex; gap: 8px; align-items: center;
}
.pdp-row .label .val { color: var(--ink); }

.pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-size {
  padding: 10px 16px; border-radius: 8px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,50,70,.12);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .6px;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pdp-size:hover { border-color: var(--accent); }
.pdp-size.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 10px 24px -10px rgba(47,127,174,.7);
}

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pdp-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid transparent; padding: 2px;
  background-clip: content-box; cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4);
}
.pdp-swatch.active { border-color: var(--accent); }

.pdp-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(20,50,70,.12);
}
.pdp-spec {
  padding: 16px 0;
  border-bottom: 1px solid rgba(20,50,70,.08);
  display: flex; flex-direction: column; gap: 6px;
}
.pdp-spec:nth-child(odd) { border-right: 1px solid rgba(20,50,70,.08); padding-right: 18px; }
.pdp-spec:nth-child(even) { padding-left: 18px; }
.pdp-spec .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.pdp-spec .v { font-family: var(--font-sans); font-size: 15px; color: var(--ink); }

/* A+ content */
.aplus { background: rgba(255,255,255,.45); }
.aplus-block { max-width: 1280px; margin: 0 auto; padding: 80px 32px; }
.aplus-block + .aplus-block { border-top: 1px solid rgba(20,50,70,.08); }

.aplus-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 96px 32px 64px; }
.aplus-hero h2 { margin: 0; max-width: 22ch; }
.aplus-hero p { margin: 0; max-width: 56ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

.aplus-banner {
  aspect-ratio: 16 / 7; border-radius: 14px;
  border: 1px solid rgba(20,50,70,.12);
  background:
    radial-gradient(60% 70% at 30% 50%, rgba(47,127,174,.12), transparent 60%),
    linear-gradient(135deg, #f1e7d4 0%, #c5dbe6 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.aplus-banner video,
.aplus-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.aplus-banner .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-2);
  padding: 8px 14px; border-radius: 4px;
  border: 1px dashed rgba(20,50,70,.30);
  background: rgba(255,255,255,.65);
}

.aplus-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 56px 0;
}
.aplus-feature.reverse { direction: rtl; }
.aplus-feature.reverse > * { direction: ltr; }
.aplus-feature .ft-text { display: flex; flex-direction: column; gap: 16px; }
.aplus-feature .ft-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.aplus-feature .ft-title { margin: 0; max-width: 20ch; }
.aplus-feature .ft-body { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 50ch; }
.aplus-feature .ft-meta { display: flex; gap: 32px; padding-top: 18px; margin-top: 6px; border-top: 1px solid rgba(20,50,70,.10); }
.aplus-feature .ft-meta .item { display: flex; flex-direction: column; gap: 6px; }
.aplus-feature .ft-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.aplus-feature .ft-meta .v { font-family: var(--font-sans); font-weight: 600; font-size: 22px; color: var(--ink); letter-spacing: -.3px; }
.aplus-feature .ft-img {
  border-radius: 14px;
  overflow: hidden;
}
.aplus-feature .ft-img img,
.aplus-feature .ft-img video {
  width: 100%; height: auto;
  display: block;
}
.aplus-feature .ft-img:has(.tag) {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(20,50,70,.12);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #e7edf2 0%, #c5d7e0 100%);
  display: grid; place-items: center;
}
.aplus-feature .ft-img .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-2);
  padding: 8px 14px; border-radius: 4px;
  border: 1px dashed rgba(20,50,70,.30);
  background: rgba(255,255,255,.65);
}

.aplus-callouts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 32px;
}
.callout {
  padding: 24px; border-radius: 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(20,50,70,.10);
  display: flex; flex-direction: column; gap: 10px;
}
.callout .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--muted); }
.callout h4 { font-family: var(--font-sans); font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: -.2px; color: var(--ink); margin: 0; }
.callout p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

@media (max-width: 1100px) {
  .pdp-top { grid-template-columns: 1fr; }
  .pdp-media { min-height: 520px; border-right: none; border-bottom: 1px solid rgba(20,50,70,.08); padding: 32px 28px 80px; }
  .pdp-info { padding: 40px 28px; }
  .aplus-feature { grid-template-columns: 1fr; gap: 28px; }
  .aplus-callouts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .nav-center { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .hero { padding: 110px 16px 60px; }
  .zone { padding: 64px 16px 96px; }
  .zone-header { grid-template-columns: 1fr; }
  .zone-meta { align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; }
  .aplus-callouts { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative;
  padding: 80px 28px 36px;
  max-width: 1480px; margin: 0 auto;
  border-top: 1px solid rgba(20,50,70,.12);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.foot h4 { margin: 0 0 18px; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.foot a:hover { color: var(--accent); }
.foot-end {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(20,50,70,.10);
  color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
}
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ============================================================
   ABOUT (short)
   ============================================================ */
.about {
  max-width: 760px; margin: 0 auto; padding: 80px 32px;
}
.about .pill-eyebrow {
  display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 999px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(20,50,70,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 22px; display: block;
}
.about h2 {
  margin: 0 0 18px; font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -1px; color: var(--ink);
}
.about .sub {
  margin: 0 0 26px; color: var(--ink-2); font-size: 17px; font-weight: 500; letter-spacing: -.2px;
}
.about .rule {
  width: 64px; height: 3px; margin: 0 0 26px; border-radius: 2px; background: var(--accent);
}
.about p {
  margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; text-wrap: pretty;
}

/* ============================================================
   RICH FOOTER — matches Swiss Era Index landing page design
   ============================================================ */
.footer {
  position: relative;
  min-height: 100vh;
  padding: 118px 60px 46px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(88% 72% at 99% 3%, rgba(244,230,211,.98) 0%, rgba(244,230,211,0) 56%),
    radial-gradient(70% 55% at 0% 96%, rgba(77,178,199,.78) 0%, rgba(77,178,199,0) 58%),
    radial-gradient(70% 50% at 100% 82%, rgba(88,187,205,.45) 0%, rgba(88,187,205,0) 61%),
    linear-gradient(150deg, #efe4d4 0%, #eeeeeb 34%, #dce9ee 63%, #9dccdc 100%);
  color: var(--ink);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 50% 110%, rgba(255,255,255,.27) 0 1px, rgba(255,255,255,0) 1px 10px),
    radial-gradient(42% 34% at 51% 56%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    linear-gradient(115deg, rgba(255,255,255,.54), rgba(255,255,255,0) 34% 62%, rgba(255,255,255,.28));
  filter: blur(.2px);
  opacity: .8;
  mix-blend-mode: screen;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 34% at 50% 72%, rgba(255,255,255,.68), rgba(255,255,255,0) 74%),
    radial-gradient(72% 50% at 10% 112%, rgba(34,151,176,.58), rgba(34,151,176,0) 72%),
    radial-gradient(70% 54% at 94% 108%, rgba(45,172,195,.45), rgba(45,172,195,0) 70%);
  opacity: .85;
}
.footer-content {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(36px, 5vw, 58px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.12fr) repeat(3, minmax(190px, .7fr));
  gap: clamp(36px, 7vw, 92px);
  align-items: start;
}
.closing h2 {
  max-width: 520px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(56px, 6vw, 86px);
  line-height: .98;
  font-weight: 800;
}
.closing h2 span { color: var(--accent); }
.closing p {
  max-width: 420px;
  margin: 24px 0 36px;
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.28;
}
/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section {
  padding: clamp(72px, 9vw, 128px) clamp(24px, 6vw, 96px);
  background: #edf1f4;
}
.about-section .about-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.about-section .about-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.06;
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 780px;
}
.about-rule {
  width: 52px;
  height: 3px;
  background: rgba(47,139,163,.78);
  margin: 0 0 36px;
  border: none;
}
.about-body {
  max-width: 680px;
  color: var(--ink-2);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  margin: 0;
}

.copyright {
  margin: 0;
  color: rgba(7,54,73,.88);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-address {
  display: block;
  font-style: normal;
  text-align: right;
  padding-top: 18px;
  opacity: .72;
}
.link-group h3 {
  margin: 22px 0 30px;
  color: var(--accent-dark);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.link-group h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 17px;
  background: rgba(47,139,163,.78);
}
.link-list {
  display: grid;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.link-list a {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  color: var(--ink);
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.1;
  text-decoration: none;
  transition: color .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.link-list a::before {
  content: ">";
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 22px;
}
.link-list a:hover { color: var(--accent-dark); transform: translateX(4px); }
.mega-word {
  --mx: 0px;
  --my: 0px;
  color: rgba(255,255,255,.42);
  font-size: clamp(92px, 17vw, 250px);
  line-height: .74;
  letter-spacing: -.055em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 28px 70px rgba(7,54,73,.12);
  transform: translate3d(var(--mx), var(--my), 0);
  user-select: none;
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .closing { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer { padding: 80px 20px 46px; }
  .footer-grid { grid-template-columns: 1fr; }
  .mega-word { white-space: normal; font-size: 24vw; }

  /* hero — fit portrait viewports without cropping the subject out of frame */
  .hero { min-height: 0; height: auto; aspect-ratio: 9 / 14; }
  .hero-bg video,
  .hero-bg .video-fallback { object-position: center 30%; }
  .hero-content { min-height: 0; padding: 120px 20px 36px; gap: 32px; }
  .hero-headline .t-headline { font-size: clamp(32px, 9vw, 56px); max-width: 100%; }
  .hero-headline .sub { font-size: 14px; max-width: 100%; }
  .hero-bar { grid-template-columns: 1fr; gap: 18px; }
  .hero-bar .stats { gap: 18px; flex-wrap: wrap; justify-content: flex-start; }
  .hero-bar .stat { align-items: flex-start; }
}