/* ==========================================================================
   DINH ADVENTURE SERIES 2027 — ONE CONTINUOUS JOURNEY
   Cinematic Trail Documentary & Editorial Design Stylesheet
   ========================================================================== */

:root {
  --das-ink: #071f19;
  --das-ink-deep: #04120e;
  --das-ink-soft: #0d2b23;
  --das-ink-card: #103329;
  --das-paper: #f6f6ee;
  --das-paper-warm: #ecece0;
  --das-text-light: #f6f6ee;
  --das-text-muted: #b8c7bf;
  --das-text-dark: #071f19;
  --das-text-dark-muted: #2c443c;
  --das-spring: #2ed66f;
  --das-explorer: #ffbb38;
  --das-rain: #12b9f1;
  --das-moon: #6756f5;
  --das-flowers: #ff7838;
  --das-final: #ff3757;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --wrap-max: 1320px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--das-text-light);
  background-color: var(--hrv-hero-bg-color, #071f19);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

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

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}

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

.wrap,
.container {
  width: 100%;
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* ==========================================================================
   Scroll Progress Indicator & Decorative Elevation Contour Line
   ========================================================================== */
.das-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9998;
  background: linear-gradient(90deg, #2ed66f 0%, #ffbb38 25%, #12b9f1 50%, #6756f5 70%, #ff7838 85%, #ff3757 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .das-scroll-progress {
    animation: dasGrowProgress linear forwards;
    animation-timeline: scroll(root block);
  }
  @keyframes dasGrowProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

.das-contour-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  right: max(12px, 2vw);
  width: 64px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  color: var(--color-primary, #2ed66f);
}

.das-contour-svg {
  width: 100%;
  height: 100%;
}

/* Sticky Chapter Progress Rail (Desktop Right Edge) */
.das-journey-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}

.das-journey-rail__inner {
  padding: 12px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 82%, transparent);
  border: 1px solid rgba(246, 246, 238, 0.14);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.das-journey-rail__kicker {
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(246, 246, 238, 0.55);
  margin-bottom: 4px;
}

.das-journey-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.das-journey-rail__dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(246, 246, 238, 0.55);
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.das-journey-rail__dot:hover,
.das-journey-rail__dot.is-active {
  color: var(--das-ink);
  background: var(--color-primary, #2ed66f);
  font-weight: 800;
  transform: scale(1.08);
}

.das-journey-rail__active-label {
  display: none;
}

@media (max-width: 1180px) {
  .das-journey-rail {
    display: none;
  }
  .das-contour-backdrop {
    right: 4px !important;
    width: 18px !important;
    opacity: 0.32 !important;
  }
}

/* ==========================================================================
   Typography & Common UI Primitives
   ========================================================================== */
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, #2ed66f);
  margin: 0 0 10px;
}

.chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(46, 214, 111, 0.35);
  color: var(--color-primary, #2ed66f);
  margin-bottom: 12px;
}

.sectionhead {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.sectionhead h2 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.section-sub {
  margin: 0;
  max-width: 48ch;
  line-height: 1.65;
}

.button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid rgba(246, 246, 238, 0.28);
  background: var(--hrv-button-secondary-bg-color, #12382e);
  color: var(--das-text-light);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease, border-color 0.25s ease;
}

.button:hover,
.btn:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary, #2ed66f);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.button.lime,
.btn-primary {
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  border-color: var(--color-primary, #2ed66f);
  font-weight: 800;
}

.button.lime:hover,
.btn-primary:hover {
  box-shadow: 0 14px 32px rgba(46, 214, 111, 0.28);
}

.button.disabled,
.button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Top Status Bar & Sticky Header
   ========================================================================== */
.site-status {
  background: var(--hrv-footer-bottom-bg-color, #04120e);
  border-bottom: 1px solid rgba(246, 246, 238, 0.08);
  padding: 8px 0;
  font-size: 12px;
  z-index: 102;
  position: relative;
}

.site-status__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-status__sep {
  opacity: 0.4;
}

.site-status__milestone {
  color: var(--color-secondary, #ffbb38);
  font-size: 12px;
  font-weight: 600;
}

.ws-header-placeholder {
  display: none;
  width: 100%;
}

.ws-header-placeholder.is-active {
  display: block;
}

.site-header {
  background: var(--hrv-header-bg-color, #071f19);
  border-bottom: 1px solid var(--hrv-header-border-color, #193d33);
  position: relative;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 105;
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 92%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.das-master-logo {
  height: 48px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(14px, 1.8vw, 26px);
}

.site-nav .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(246, 246, 238, 0.84);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  position: relative;
}

.site-nav .nav-link__num {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-primary, #2ed66f);
  opacity: 0.85;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.is-active {
  color: var(--color-primary, #2ed66f);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navcta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.navcta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46, 214, 111, 0.3);
}

.action-item {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.18);
  background: transparent;
  color: var(--das-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.action-item:hover {
  border-color: var(--color-primary, #2ed66f);
  color: var(--color-primary, #2ed66f);
}

.action-mobile-menu {
  display: none;
}

@media (max-width: 1120px) {
  .site-nav {
    display: none;
  }
  .action-mobile-menu {
    display: inline-flex;
  }
}

/* ==========================================================================
   CHAPTER 00 — THE CALL / LỜI HẸN VỚI NÚI DINH (HERO)
   ========================================================================== */
.das-chapter-00 {
  position: relative;
  background-color: var(--hrv-hero-bg-color, #071f19);
  overflow: hidden;
}

.app-welcome,
.hero-welcome-strip {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(246, 246, 238, 0.1);
  background: color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 88%, #000000);
  padding-top: 14px;
  padding-bottom: 14px;
}

.app-welcome__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-welcome__kicker {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-welcome__title,
.hero-welcome-strip__title {
  margin: 0;
}

.app-season-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(46, 214, 111, 0.45);
  background: color-mix(in srgb, var(--color-primary, #2ed66f) 14%, transparent);
  white-space: nowrap;
}

.hero {
  position: relative;
  min-height: calc(100svh - 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--hrv-hero-bg-color, #071f19);
  overflow: hidden;
  padding-bottom: 40px;
}

.heroimage,
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__bg-img,
.hero-backdrop {
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: center 24%;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.03);
  will-change: transform;
}

.heroshade,
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 48%, transparent);
  background-image:
    radial-gradient(circle at 72% 28%, rgba(7, 31, 25, 0.22) 0%, rgba(7, 31, 25, 0.84) 72%),
    linear-gradient(90deg, rgba(7, 31, 25, 0.88) 0%, rgba(7, 31, 25, 0.58) 52%, rgba(7, 31, 25, 0.78) 100%),
    linear-gradient(180deg, rgba(7, 31, 25, 0.48) 0%, rgba(7, 31, 25, 0.35) 45%, rgba(7, 31, 25, 0.96) 100%);
}

.hero__container,
.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  padding-top: clamp(48px, 7vh, 88px);
}

.herotext {
  min-width: 0;
}

.hero-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.hero-brand-lockup__img,
.hero-master-logo {
  max-width: clamp(200px, 24vw, 290px);
  height: auto;
}

.hero-brand-lockup__kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-secondary, #ffbb38);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__headline,
.hero-heading {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--das-text-light);
}

.hero-line {
  display: block;
}

.hero-line-1 {
  color: var(--das-text-light);
}

.hero-line-2,
.hero-line--2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  color: var(--color-primary, #2ed66f);
  letter-spacing: -0.01em;
  margin-top: 6px;
}

.intro,
.hero-lead {
  max-width: 58ch;
  margin: 0 0 28px;
  font-size: 17px;
  color: rgba(246, 246, 238, 0.88);
  line-height: 1.7;
}

.actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.28);
  background: color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 62%, transparent);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
}

.textlink:hover {
  border-color: var(--color-primary, #2ed66f);
}

.herofacts,
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 246, 238, 0.18);
}

.herofacts__item,
.hero-facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.herofacts__num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary, #2ed66f);
}

.herofacts__label {
  font-size: 13px;
  color: rgba(246, 246, 238, 0.82);
}

.hero-frame,
.hero-frame-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(246, 246, 238, 0.22);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48);
}

.hero-frame__img,
.hero-frame-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.hero-frame__caption,
.hero-frame-card figcaption {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-frame__kicker {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-scroll-cue {
  position: relative;
  z-index: 3;
  margin: 32px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 246, 238, 0.72);
}

.hero-scroll-cue__line {
  width: 32px;
  height: 1px;
  background: var(--color-primary, #2ed66f);
}

.app-quick {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(246, 246, 238, 0.12);
}

.app-quick__primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(46, 214, 111, 0.35);
  background: color-mix(in srgb, var(--hrv-product-card-bg-color, #0d2b23) 85%, transparent);
}

.app-quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary, #2ed66f) 18%, transparent);
  color: var(--color-primary, #2ed66f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-quick-icon svg {
  width: 20px;
  height: 20px;
}

.app-quick__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-quick__meta small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-primary, #2ed66f);
}

.app-quick__meta strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--das-text-light);
}

.app-quick__meta em {
  font-style: normal;
  font-size: 12px;
  color: var(--das-text-muted);
}

.app-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-quick-links a {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.16);
  font-size: 13px;
  font-weight: 600;
  color: var(--das-text-light);
}

.app-quick-links a:hover {
  border-color: var(--color-primary, #2ed66f);
  color: var(--color-primary, #2ed66f);
}

.colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 4px;
  width: 100%;
}

.colors i:nth-child(1) { background: #2ed66f; }
.colors i:nth-child(2) { background: #ffbb38; }
.colors i:nth-child(3) { background: #12b9f1; }
.colors i:nth-child(4) { background: #6756f5; }
.colors i:nth-child(5) { background: #ff7838; }
.colors i:nth-child(6) { background: #ff3757; }

/* ==========================================================================
   CHAPTER 01 — STEP INTO THE WILD / BƯỚC VÀO THIÊN NHIÊN
   ========================================================================== */
.das-chapter-01 {
  background-color: var(--hrv-wild-bg-color, #f6f6ee);
  color: var(--das-text-dark);
  padding: clamp(64px, 9vw, 128px) 0;
  position: relative;
  z-index: 2;
}

.das-chapter-01 .chapter-pill {
  border-color: rgba(7, 31, 25, 0.25);
  color: #0e6b45;
}

.brand-teaser {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(7, 31, 25, 0.12);
  background: color-mix(in srgb, var(--hrv-wild-bg-color, #f6f6ee) 65%, #ffffff);
  margin-bottom: clamp(56px, 8vw, 104px);
}

.brand-teaser__symbols {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-right: clamp(16px, 3vw, 36px);
  border-right: 1px solid rgba(7, 31, 25, 0.12);
}

.brand-teaser__sub-icons {
  display: flex;
  gap: 10px;
}

.brand-teaser__title {
  margin: 0 0 12px;
  line-height: 1.2;
}

.brand-teaser__desc {
  margin: 0 0 20px;
  max-width: 68ch;
}

.brand-button {
  background: var(--color-primary, #2ed66f);
  border-color: var(--color-primary, #2ed66f);
  color: var(--das-ink);
}

.statement {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(56px, 8vw, 96px);
}

.statement__header {
  grid-column: 1 / -1;
}

.statement__title {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.statement__desc {
  margin: 0 0 24px;
  line-height: 1.75;
}

.statement__elevation-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0e6b45;
}

.statement__elevation-line i {
  flex: 1;
  height: 1px;
  background: rgba(7, 31, 25, 0.22);
}

.moments {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.moments figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hrv-product-card-media-bg-color, #11352b);
  box-shadow: 0 24px 48px rgba(7, 31, 25, 0.14);
}

.moments__primary img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.moments__secondary img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.moments figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 31, 25, 0.9) 100%);
  color: var(--das-text-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.momentright {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vw, 36px);
}

.momentright .note {
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(7, 31, 25, 0.14);
  background: color-mix(in srgb, var(--hrv-wild-bg-color, #f6f6ee) 65%, #ffffff);
}

.note__index {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #0e6b45;
  margin-bottom: 10px;
}

.note__title {
  margin: 0 0 12px;
  line-height: 1.2;
}

.note__desc {
  margin: 0;
}

.photo-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.photo-ribbon__item {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--hrv-product-card-media-bg-color, #11352b);
}

.photo-ribbon__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.photo-ribbon__item:hover img {
  transform: scale(1.04);
}

.photo-ribbon__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(7, 31, 25, 0.88));
}

/* ==========================================================================
   CHAPTER 02 — SIX CHAPTERS, ONE JOURNEY
   ========================================================================== */
.chapters {
  background-color: var(--hrv-chapters-bg-color, #071f19);
  padding-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(72px, 10vw, 136px);
  position: relative;
}

.chapters-journey {
  display: grid;
  grid-template-columns: clamp(320px, 31vw, 390px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

.chapters-sticky-tracker {
  position: sticky;
  top: 104px;
}

.chapters-sticky-tracker__card {
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.chapters-sticky-tracker__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-primary, #2ed66f);
}

.chapters-sticky-tracker__number-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
}

.chapters-sticky-tracker__num {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--active-chapter-accent, #2ed66f);
  transition: color 0.3s ease;
}

.chapters-sticky-tracker__total {
  font-size: 18px;
  font-weight: 700;
  color: rgba(246, 246, 238, 0.45);
}

.chapters-sticky-tracker__name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--das-text-light);
}

.chapters-sticky-tracker__meta {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--das-text-muted);
}

.chapters-sticky-tracker__dots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.chapters-sticky-tracker__dots a {
  padding: 7px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  border: 1px solid rgba(246, 246, 238, 0.14);
  color: rgba(246, 246, 238, 0.65);
}

.chapters-sticky-tracker__dots a.is-active,
.chapters-sticky-tracker__dots a:hover {
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  border-color: var(--color-primary, #2ed66f);
}

.chapters-stream {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 84px);
}

.chapters-stream__line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, #2ed66f, #ffbb38, #12b9f1, #6756f5, #ff7838, #ff3757);
  opacity: 0.28;
  pointer-events: none;
}

.chapter-story {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(24px, 3.8vw, 48px);
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(246, 246, 238, 0.12);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.chapter-story:hover,
.chapter-story.is-active-chapter {
  border-color: var(--chapter-color, #2ed66f);
}

.chapter-story--even .chapter-story__media {
  order: 2;
}

.chapter-story--even .chapter-story__content {
  order: 1;
}

.chapter-story__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--hrv-product-card-media-bg-color, #11352b);
}

.chapter-story__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.chapter-story:hover .chapter-story__photo {
  transform: scale(1.04);
}

.chapter-story__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 31, 25, 0.32) 0%, rgba(7, 31, 25, 0.12) 45%, rgba(7, 31, 25, 0.86) 100%);
  pointer-events: none;
}

.chapter-story__floating-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.chapter-story__badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--chapter-color, var(--color-primary, #2ed66f));
  color: var(--das-ink);
}

.chapter-story__motif {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.chapter-story__logo-overlay {
  position: absolute;
  left: 20px;
  bottom: 16px;
  pointer-events: none;
}

.chapter-story__logo-overlay .chapter-logo {
  max-width: 210px;
  height: auto;
}

.chapter-story__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chapter-story__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-story__title {
  margin: 0;
  line-height: 1.1;
}

.chapter-story__meta {
  margin: 0;
}

.chapter-story__desc {
  margin: 0;
  line-height: 1.68;
}

.chapter-story__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chapter-story__pills span {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(246, 246, 238, 0.2);
  color: var(--das-text-light);
}

.chapter-story__pills .chapter-story__pill-highlight {
  border-color: var(--chapter-color, #2ed66f);
  color: var(--chapter-color, #2ed66f);
}

.chapter-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.chapter-story__btn-detail {
  border-color: var(--chapter-color, #2ed66f);
}

.chapter-story__link-passes {
  font-size: 13px;
  font-weight: 700;
  color: var(--chapter-color, #2ed66f);
}

.chapter-story__link-passes:hover {
  text-decoration: underline;
}

/* ==========================================================================
   CHAPTER 03 — THE SEASON UNFOLDS (REGISTRATION TIMELINE)
   ========================================================================== */
.timeline {
  background-color: var(--hrv-timeline-bg-color, #0b2921);
  padding-top: clamp(72px, 9vw, 124px);
  padding-bottom: clamp(72px, 9vw, 124px);
  border-radius: var(--radius-lg);
  margin-top: 24px;
  margin-bottom: 24px;
}

.timeline-journey {
  position: relative;
}

.timeline-journey__rail {
  position: relative;
  height: 3px;
  background: rgba(246, 246, 238, 0.14);
  border-radius: 999px;
  margin-bottom: 28px;
  overflow: hidden;
}

.timeline-journey__rail-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2ed66f 0%, #ffbb38 35%, #12b9f1 65%, #ff7838 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--timeline-progress, 0.35));
  transition: transform 0.2s linear;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.timeline-node {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline-node__marker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-node__index {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-primary, #2ed66f);
}

.timeline-node__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary, #2ed66f);
  box-shadow: 0 0 0 4px rgba(46, 214, 111, 0.18);
}

.timeline-node__card {
  flex: 1;
  padding: 22px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.12);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-node--highlight .timeline-node__card {
  border-color: var(--color-primary, #2ed66f);
}

.timeline-node__phase {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(246, 246, 238, 0.6);
}

.timeline-node__title {
  margin: 0;
}

.timeline-node__desc {
  margin: 0;
}

.timeline-journey__footer {
  margin-top: 28px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 187, 56, 0.35);
  background: color-mix(in srgb, var(--color-secondary, #ffbb38) 10%, transparent);
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-journey__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary, #ffbb38);
  flex-shrink: 0;
}

.timeline-journey__footer p {
  margin: 0;
}

/* ==========================================================================
   CHAPTER 04 — CHOOSE YOUR JOURNEY & PRICING STUDIO V6
   ========================================================================== */
.das-chapter-04 {
  background-color: var(--hrv-pricing-bg-color, #f6f6ee);
  color: var(--das-text-dark);
  padding-top: clamp(72px, 9vw, 128px);
}

.das-chapter-04 .chapter-pill {
  border-color: rgba(7, 31, 25, 0.25);
  color: #0e6b45;
}

.plan-compare {
  padding-bottom: clamp(64px, 8vw, 108px);
}

.compare-basis {
  padding: 16px 22px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary, #2ed66f);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 92%, #071f19);
  margin: 0 0 32px;
  font-size: 14px;
}

.compare-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 32px);
  margin-bottom: 44px;
}

.compare-card {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(7, 31, 25, 0.15);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 55%, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare-card.compare-best {
  border: 2px solid var(--color-primary, #2ed66f);
  box-shadow: 0 24px 48px rgba(7, 31, 25, 0.12);
  position: relative;
}

.compare-card__badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.compare-pill-star {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
}

.compare-card h3 {
  margin: 0;
}

.compare-price,
.compare-alt,
.compare-unit,
.compare-saving,
.compare-fit {
  margin: 0;
}

.compare-unit {
  font-size: 13px;
  color: var(--das-text-dark-muted);
}

.compare-card ul {
  margin: 6px 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--das-text-dark-muted);
}

.compare-card .button {
  margin-top: auto;
}

.compare-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(7, 31, 25, 0.15);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 50%, #ffffff);
  margin-bottom: 20px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--das-text-dark);
}

.compare-table caption {
  text-align: left;
  padding: 18px 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(7, 31, 25, 0.12);
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(7, 31, 25, 0.1);
  vertical-align: top;
}

.compare-table td small {
  display: block;
  margin-top: 4px;
  color: var(--das-text-dark-muted);
}

.compare-note {
  font-size: 13px;
  color: var(--das-text-dark-muted);
  margin: 0;
}

.compare-note a {
  font-weight: 700;
  color: #0e6b45;
  text-decoration: underline;
}

/* Interactive Pricing Studio V6 Scene */
.pricing-scene {
  position: relative;
  color: var(--das-text-light);
  background-color: var(--hrv-hero-bg-color, #071f19);
  padding: clamp(72px, 9vw, 128px) 0;
  overflow: hidden;
}

.pricing-scene__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pricing-scene__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
}

.pricing-scene__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 92%, transparent) 0%, color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 84%, transparent) 50%, color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 96%, transparent) 100%);
}

.passsection {
  position: relative;
  z-index: 2;
}

.passlayout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.passlayout .config {
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(246, 246, 238, 0.16);
  background: var(--hrv-product-card-bg-color, #0d2b23);
}

.passlayout .tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.passlayout .tabs button {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(246, 246, 238, 0.18);
  background: var(--hrv-button-secondary-bg-color, #12382e);
  color: var(--das-text-light);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.passlayout .tabs button.active,
.passlayout .tabs button:hover {
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  border-color: var(--color-primary, #2ed66f);
}

.packintro {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--das-text-light);
}

.sale-window {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary, #ffbb38);
}

.single-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(246, 246, 238, 0.12);
}

.single-filters[hidden],
.single-matrix[hidden] {
  display: none !important;
}

.single-filters label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--das-text-muted);
}

.single-filters select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(246, 246, 238, 0.24);
  background: var(--hrv-search-popup-form-bg-color, #071f19);
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 14px;
}

.single-filters__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--das-text-muted);
}

.pass-selections {
  display: grid;
  gap: 14px;
}

.race-row {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.12);
  background: var(--hrv-product-card-media-bg-color, #11352b);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.race-row.is-focused {
  border-color: var(--color-primary, #2ed66f);
  box-shadow: 0 0 0 2px rgba(46, 214, 111, 0.28);
}

.race-row__info strong {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}

.race-row__info span {
  font-size: 12px;
  color: var(--das-text-muted);
}

.race-row__distances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dist-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.22);
  background: transparent;
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dist-btn.active,
.dist-btn:hover {
  background: var(--color-primary, #2ed66f);
  border-color: var(--color-primary, #2ed66f);
  color: var(--das-ink);
}

.single-matrix {
  margin-top: 20px;
  overflow-x: auto;
}

.single-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.single-matrix th,
.single-matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(246, 246, 238, 0.12);
  text-align: left;
}

.passlayout .summary {
  position: sticky;
  top: 104px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(46, 214, 111, 0.38);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passlayout .summary h3 {
  margin: 0;
  font-size: 26px;
}

.passlayout .summary .total {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 900;
  color: var(--color-primary, #2ed66f);
  line-height: 1.05;
}

.summaryline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(246, 246, 238, 0.12);
}

.ticket-disclosure {
  margin: 24px 0 0;
  max-width: 82ch;
}

/* ==========================================================================
   CHAPTER 05 — ADVENTURE PASSPORT 2027
   ========================================================================== */
.passport {
  background-color: var(--hrv-passport-bg-color, #071f19);
  padding-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(72px, 10vw, 136px);
}

.section-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.passport-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.passport-heading h2 {
  margin: 0;
  line-height: 1.08;
}

.passport-heading p {
  margin: 0;
}

.passport-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.passport-feature__canvas {
  margin: 0;
}

.passport-zoom-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(246, 246, 238, 0.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hrv-product-card-media-bg-color, #11352b);
  cursor: zoom-in;
  position: relative;
}

.passport-zoom-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
}

.passport-feature__canvas figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--das-text-muted);
}

.passport-story {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.passport-story__stamp {
  display: flex;
  align-items: center;
  gap: 18px;
}

.passport-story__stamp img {
  width: 84px;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(246, 246, 238, 0.18);
}

.passport-eligibility {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(46, 214, 111, 0.38);
  background: var(--hrv-product-card-bg-color, #0d2b23);
}

.passport-rule-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-primary, #2ed66f);
}

.passport-rule {
  margin: 0 0 6px;
}

.passport-rule-note {
  margin: 0;
  font-size: 13px;
  color: var(--das-text-muted);
}

.passport-story__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.passport-brand-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #2ed66f);
}

.passport-journey {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.passport-journey li {
  padding: 26px 24px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.passport-journey h3,
.passport-journey p {
  margin: 0;
}

.passport-gallery {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  padding: 22px 26px;
}

.passport-gallery summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.passport-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.passport-gallery-grid figure {
  margin: 0;
}

.passport-gallery-grid figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--das-text-muted);
}

.passport-object-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--das-text-muted);
}

/* ==========================================================================
   CHAPTER 06 — PREPARE FOR THE TRAIL & FAQ
   ========================================================================== */
.das-chapter-06 {
  background-color: var(--hrv-prepare-bg-color, #f6f6ee);
  color: var(--das-text-dark);
  padding: clamp(72px, 9vw, 128px) 0;
}

.das-chapter-06 .chapter-pill {
  border-color: rgba(7, 31, 25, 0.25);
  color: #0e6b45;
}

.rules-section {
  margin-bottom: clamp(64px, 8vw, 108px);
}

.details-grid,
.faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.details-grid__policy-link a {
  font-weight: 800;
  color: #0e6b45;
  text-decoration: underline;
}

.trail-note {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(7, 31, 25, 0.14);
  background: color-mix(in srgb, var(--hrv-prepare-bg-color, #f6f6ee) 65%, #ffffff);
  display: flex;
  align-items: center;
  gap: 14px;
}

.trail-note p {
  margin: 0;
}

.accordion {
  display: grid;
  gap: 14px;
}

.accordion details {
  border-radius: var(--radius-md);
  border: 1px solid rgba(7, 31, 25, 0.15);
  background: rgba(255, 255, 255, 0.85);
  padding: 18px 22px;
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion-num {
  font-size: 12px;
  font-weight: 800;
  color: #0e6b45;
  margin-right: 6px;
}

.accordion-title {
  flex: 1;
}

.accordion-icon {
  font-size: 20px;
  font-weight: 600;
  color: #0e6b45;
  transition: transform 0.25s ease;
}

.accordion details[open] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 31, 25, 0.1);
}

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

.accordion-body a {
  font-weight: 700;
  color: #0e6b45;
  text-decoration: underline;
}

.inline-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #0e6b45;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   CHAPTER 07 — THE LAST PROMISE (CLOSING)
   ========================================================================== */
.closing-unified {
  position: relative;
  min-height: 76svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--hrv-promise-bg-color, #071f19);
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) 0;
}

.closing__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.closing__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 31, 25, 0.72) 0%, rgba(7, 31, 25, 0.56) 50%, rgba(5, 23, 18, 0.96) 100%);
}

.closing-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.closing-content h2 {
  margin: 0;
  line-height: 1.02;
}

.closing-tagline {
  margin: 0 0 12px;
}

.closing-status {
  margin: 8px 0 0;
}

/* ==========================================================================
   FOOTER, MODALS & AI SUPPORT DIALOG
   ========================================================================== */
.colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 5px;
}
.colors i:nth-child(1) { background: var(--das-spring); }
.colors i:nth-child(2) { background: var(--das-explorer); }
.colors i:nth-child(3) { background: var(--das-rain); }
.colors i:nth-child(4) { background: var(--das-moon); }
.colors i:nth-child(5) { background: var(--das-flowers); }
.colors i:nth-child(6) { background: var(--das-final); }

.site-footer {
  background: var(--hrv-footer-bg-color, #051712);
  color: var(--das-text-muted);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-top: 56px;
  padding-bottom: 44px;
}

.footer-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-primary, #2ed66f);
  margin: 0 0 14px;
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
}

.footer-nav a:hover,
.footer-contact-links a:hover {
  color: var(--color-primary, #2ed66f);
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.footer-bottom {
  background-color: var(--hrv-footer-bottom-bg-color, #04120e);
  border-top: 1px solid var(--hrv-footer-bottom-border-color, #16382e);
  padding-top: 20px;
  padding-bottom: 92px;
}

/* Native HTML <dialog> Modals */
.das-modal,
.das-support-dialog,
.app-dialog {
  border: 1px solid rgba(246, 246, 238, 0.18);
  border-radius: var(--radius-lg);
  background: var(--hrv-search-popup-bg-color, #0b2921);
  color: var(--das-text-light);
  max-width: min(960px, 94vw);
  width: 100%;
  max-height: 88vh;
  padding: 0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
}

.das-modal::backdrop,
.das-support-dialog::backdrop,
.app-dialog::backdrop {
  background: rgba(4, 18, 14, 0.76);
  backdrop-filter: blur(8px);
}

.das-modal__container {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.das-modal__header,
.das-support-header,
.app-dialog-header {
  padding: 20px 26px;
  border-bottom: 1px solid rgba(246, 246, 238, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.das-modal__header h2,
.das-support-header h2,
.app-dialog-header h2 {
  margin: 0;
  font-size: 22px;
}

.das-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.das-modal__select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(246, 246, 238, 0.24);
  background: var(--hrv-search-popup-form-bg-color, #071f19);
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 13px;
}

.das-modal__close,
.das-support-close,
.app-close {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(246, 246, 238, 0.22);
  background: var(--hrv-button-secondary-bg-color, #12382e);
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.das-modal__body,
.das-support-body {
  padding: 24px 26px;
  overflow-y: auto;
}

.provisional {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-secondary, #ffbb38);
  background: color-mix(in srgb, var(--color-secondary, #ffbb38) 10%, transparent);
  margin-bottom: 20px;
  font-size: 13px;
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.detail-tabs button {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.2);
  background: transparent;
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.detail-tabs button.is-active {
  background: var(--color-primary, #2ed66f);
  border-color: var(--color-primary, #2ed66f);
  color: var(--das-ink);
}

.das-chapter-modal__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: start;
}

.das-chapter-panel[hidden] {
  display: none !important;
}

.race-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
}

.race-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.race-table-wrap th,
.race-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(246, 246, 238, 0.14);
  text-align: left;
}

.das-chapter-modal__sidebar {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-product-card-bg-color, #0d2b23);
}

.story-building-blocks,
.story-chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 28px;
}

.story-building-blocks article,
.story-chapter-grid article {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-product-card-bg-color, #0d2b23);
}

.story-chapter-art {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.policy-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.policy-quick-nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(246, 246, 238, 0.2);
}

.policy-block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(246, 246, 238, 0.12);
}

/* AI Support Launcher & Dialog */
.das-support-launcher {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-primary, #2ed66f);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  color: var(--das-text-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}

.das-support-log {
  margin: 14px 0;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.14);
  background: var(--hrv-search-popup-form-bg-color, #071f19);
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.das-support-compose-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.das-support-compose-row textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(246, 246, 238, 0.22);
  background: var(--hrv-search-popup-form-bg-color, #071f19);
  color: var(--das-text-light);
  font-family: inherit;
  resize: vertical;
}

.das-support-send {
  padding: 0 20px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-primary, #2ed66f);
  color: var(--das-ink);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* Mobile App Bottom Nav */
.app-bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 98;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px;
  border-radius: 20px;
  border: 1px solid rgba(246, 246, 238, 0.16);
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 94%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.app-bottom-nav a,
.app-bottom-nav button {
  background: none;
  border: none;
  color: rgba(246, 246, 238, 0.78);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 2px;
}

.app-bottom-nav svg {
  width: 20px;
  height: 20px;
}

.app-more-links {
  padding: 16px 22px 24px;
  display: grid;
  gap: 10px;
}

.app-more-links a {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.12);
  background: var(--hrv-product-card-bg-color, #0d2b23);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-more-links small {
  display: block;
  color: var(--das-text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   v1.1.0 Motion Design System, Trail Objects & Sticky Navigation
   ========================================================================== */

/* 1. Section Anchor Offset Compensation for Fixed Sticky Header */
#chapter-00,
#journey,
#brand-teaser,
#moments,
#chapters,
#registration-timeline,
#compare-plans,
#passes,
#passport,
#before-race,
#faq,
#closing-promise {
  scroll-margin-top: 92px;
}

/* 2. Dual-State Sticky Navigation Bar (Hero Overlay -> High-Contrast Pinned) */
.site-header.site-header--over-hero:not(.is-pinned) {
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 78%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(246, 246, 238, 0.1);
}

.site-header.is-pinned {
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 95%, transparent);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(46, 214, 111, 0.24);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
}

.site-header.is-pinned .header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  transition: padding 0.28s var(--ease-out-expo);
}

.site-header.is-pinned .das-master-logo {
  height: 40px;
  transition: height 0.28s var(--ease-out-expo);
}

.site-nav {
  gap: clamp(10px, 1.25vw, 20px);
  flex-wrap: nowrap;
}

.site-nav .nav-link {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 2px;
  color: rgba(246, 246, 238, 0.78);
  transition: color 0.25s ease, transform 0.25s ease;
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--color-primary, #2ed66f);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease-out-expo);
}

.site-nav .nav-link:hover,
.site-nav .nav-link.is-active {
  color: #f6f6ee;
}

.site-nav .nav-link.is-active {
  font-weight: 700;
}

.site-nav .nav-link.is-active .nav-link__num {
  color: var(--color-secondary, #ffbb38);
  opacity: 1;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.is-active::after {
  transform: scaleX(1);
}

/* Mobile Hamburger Drawer 8-Item Active Styling */
.das-mobile-nav-item {
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.das-mobile-nav-item.is-active {
  border-color: var(--color-primary, #2ed66f) !important;
  box-shadow: inset 3px 0 0 var(--color-primary, #2ed66f);
}

.das-mobile-nav-item.is-active b {
  color: var(--color-primary, #2ed66f);
}

.das-mobile-nav-arrow {
  font-weight: 800;
  color: var(--color-primary, #2ed66f);
}

.app-more-QuickModals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 246, 238, 0.12);
}

@media (max-width: 1180px) {
  .header-navigation {
    display: none;
  }
}

/* 3. Continuous SVG Trail Path & Live Traveler Dot */
.das-contour-backdrop {
  right: 54px;
  width: 68px;
  opacity: 0.36;
}

.das-contour-topo {
  opacity: 0.35;
}

.das-contour-path {
  opacity: 0.32;
}

.das-contour-progress {
  stroke: var(--color-primary, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - ((0.06 + var(--scroll-progress, 0) * 0.94) * 1000));
  filter: drop-shadow(0 0 6px rgba(46, 214, 111, 0.55));
  transition: stroke-dashoffset 0.12s linear;
}

.das-trail-wp {
  fill: #071f19;
  stroke: rgba(246, 246, 238, 0.42);
  stroke-width: 1.5;
  transition: all 0.35s ease;
}

.das-trail-wp.is-visited {
  fill: rgba(46, 214, 111, 0.4);
  stroke: var(--color-primary, #2ed66f);
}

.das-trail-wp.is-active {
  fill: var(--color-secondary, #ffbb38);
  stroke: var(--color-primary, #2ed66f);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 8px rgba(255, 187, 56, 0.9));
}

.das-trail-traveler {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress, 0) * 90% + 4%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.12s linear;
}

.das-trail-traveler__core {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-secondary, #ffbb38);
  box-shadow: 0 0 10px var(--color-secondary, #ffbb38);
}

.das-trail-traveler__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid var(--color-primary, #2ed66f);
  animation: dasWaypointPulse 2.4s ease-out infinite;
}

@keyframes dasWaypointPulse {
  0% { transform: scale(0.75); opacity: 0.9; }
  70% { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

.das-journey-rail__active-label {
  display: block;
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-primary, #2ed66f);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(246, 246, 238, 0.14);
}

/* 4. Hero Multi-Layer Atmosphere & Scroll-Drawn Elevation Profile */
.das-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  color: var(--color-primary, #2ed66f);
}

.das-hero-lightbeams {
  position: absolute;
  inset: -15% -10%;
  background: repeating-linear-gradient(
    118deg,
    color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 0%, transparent) 0%,
    rgba(246, 246, 238, 0.032) 7%,
    color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 0%, transparent) 16%
  );
  transform: translate3d(calc(var(--hero-progress, 0) * -28px), 0, 0);
}

.das-hero-mist {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 36%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(46, 214, 111, 0.12),
    color-mix(in srgb, var(--hrv-hero-bg-color, #071f19) 0%, transparent) 72%
  );
}

.das-hero-topo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.das-hero-elevation {
  position: relative;
  z-index: 2;
  margin-top: clamp(20px, 3vw, 36px);
  color: var(--color-primary, #2ed66f);
}

.das-hero-elevation__svg {
  width: 100%;
  height: 68px;
  display: block;
}

.das-hero-elevation__active {
  stroke: var(--color-primary, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--hero-elevation-progress, 0.38) * 1000));
  filter: drop-shadow(0 0 8px rgba(46, 214, 111, 0.45));
  transition: stroke-dashoffset 0.18s ease-out;
}

.das-hero-elevation__peak {
  fill: var(--color-secondary, #ffbb38);
}

.das-hero-elevation__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(246, 246, 238, 0.66);
  padding-top: 6px;
}

.hero-scroll-cue__line {
  display: inline-block;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--color-primary, #2ed66f), transparent);
  animation: dasScrollCuePulse 2.2s ease-in-out infinite;
}

@keyframes dasScrollCuePulse {
  0%, 100% { transform: scaleY(0.65); opacity: 0.55; }
  50% { transform: scaleY(1.1); opacity: 1; }
}

/* 5. Trail Graphic Objects: Compass Reticle, Sequential Footprints, Bridges & Seals */
.das-ambient-spores {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.das-ambient-spores i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(246, 246, 238, 0.36);
  box-shadow: 0 0 8px rgba(46, 214, 111, 0.45);
  animation: dasSporeFloat 9s ease-in-out infinite;
}

.das-ambient-spores i:nth-child(1) { top: 22%; left: 18%; animation-delay: 0s; }
.das-ambient-spores i:nth-child(2) { top: 48%; left: 36%; animation-delay: 1.8s; width: 3px; height: 3px; }
.das-ambient-spores i:nth-child(3) { top: 30%; left: 54%; animation-delay: 3.4s; }
.das-ambient-spores i:nth-child(4) { top: 66%; left: 26%; animation-delay: 2.2s; width: 3px; height: 3px; }
.das-ambient-spores i:nth-child(5) { top: 18%; left: 74%; animation-delay: 4.1s; }
.das-ambient-spores i:nth-child(6) { top: 58%; left: 64%; animation-delay: 5.3s; width: 3px; height: 3px; }

@keyframes dasSporeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.22; }
  50% { transform: translate3d(10px, -16px, 0); opacity: 0.65; }
}

.das-compass-widget {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(14, 107, 69, 0.28);
  color: #0e6b45;
}

.das-compass-svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  transform: rotate(calc(var(--section-progress, 0.15) * 160deg));
  transition: transform 0.2s linear;
}

.das-compass-coords {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.12em;
}

.das-compass-coords strong {
  color: #071f19;
  font-weight: 800;
}

.das-compass-coords span {
  color: rgba(7, 31, 25, 0.68);
}

/* Sequential Runner Footprints Bridge */
.das-footprints-bridge {
  margin-top: 8px;
  margin-bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #0e6b45;
}

.das-footprints-svg {
  width: 100%;
  max-width: 820px;
  height: 68px;
}

.das-footprint-step {
  opacity: 0.14;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.das-footprints-bridge.is-revealed .das-footprint-step {
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(14, 107, 69, 0.3));
}

.das-footprints-bridge.is-revealed .das-footprint-step--1 { transition-delay: 60ms; }
.das-footprints-bridge.is-revealed .das-footprint-step--2 { transition-delay: 180ms; }
.das-footprints-bridge.is-revealed .das-footprint-step--3 { transition-delay: 300ms; }
.das-footprints-bridge.is-revealed .das-footprint-step--4 { transition-delay: 420ms; }
.das-footprints-bridge.is-revealed .das-footprint-step--5 { transition-delay: 540ms; }
.das-footprints-bridge.is-revealed .das-footprint-step--6 { transition-delay: 660ms; }

.das-footprints-caption {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #0e6b45;
}

/* ==========================================================================
   Phase 2 — Redesigned Trail Documentary Gallery (Asymmetric Editorial Grid)
   ========================================================================== */
.moments {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: clamp(24px, 3.2vw, 40px);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.das-contour-field {
  position: absolute;
  inset: -24px -16px;
  z-index: 0;
  pointer-events: none;
  color: #0e6b45;
  opacity: 0.12;
  transform: translate3d(0, calc(var(--section-progress, 0) * -18px), 0);
}

.das-contour-field svg {
  width: 100%;
  height: 100%;
}

.moments__left-col,
.momentright {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(22px, 2.8vw, 32px);
}

.moments figure,
.photo-ribbon__item {
  border: 1px solid rgba(7, 31, 25, 0.12);
  transition: transform 0.35s var(--ease-out-expo), border-color 0.35s ease, box-shadow 0.35s ease;
}

.moments__primary {
  flex: 1.15;
  display: flex;
  flex-direction: column;
}

.moments__primary img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10.6;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.65s var(--ease-out-expo);
}

.moments__secondary {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.moments__secondary img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 4.25;
  object-fit: cover;
  object-position: center 24%;
  transition: transform 0.65s var(--ease-out-expo);
}

.moments figure:hover,
.photo-ribbon__item:hover {
  border-color: var(--color-primary, #2ed66f);
  box-shadow: 0 28px 54px rgba(7, 31, 25, 0.22);
}

.moments figure:hover img,
.photo-ribbon__item:hover img {
  transform: scale(1.032);
}

.moments figure figcaption,
.photo-ribbon__item figcaption {
  transition: transform 0.3s var(--ease-out-expo), background 0.3s ease;
}

.moments figure:hover figcaption,
.photo-ribbon__item:hover figcaption {
  transform: translateY(-2px);
}

.moments__frame-meta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 96%, #000000);
  border-bottom: 1px solid rgba(46, 214, 111, 0.22);
  pointer-events: none;
}

.moments__frame-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f6f6ee;
}

.moments__frame-code i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary, #2ed66f);
  box-shadow: 0 0 6px var(--color-primary, #2ed66f);
}

.moments__frame-wp {
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 72%, transparent);
  border: 1px solid rgba(46, 214, 111, 0.35);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-primary, #2ed66f);
  transition: background-color 0.28s ease, color 0.28s ease;
}

.moments figure:hover .moments__frame-wp,
.photo-ribbon__item:hover .moments__frame-wp {
  background: var(--color-primary, #2ed66f);
  color: #071f19;
}

/* Editorial Companion Ledger (Left Column Bottom — Balances Asymmetric Grid) */
.moments__field-ledger {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(7, 31, 25, 0.14);
  background: color-mix(in srgb, var(--hrv-wild-bg-color, #f6f6ee) 55%, #ffffff);
  box-shadow: 0 18px 38px rgba(7, 31, 25, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moments__field-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #0e6b45;
}

.moments__field-ledger-range {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(14, 107, 69, 0.25);
  font-size: 10px;
}

.das-gallery-ledger__svg {
  width: 100%;
  height: 44px;
  color: #0e6b45;
}

.das-gallery-ledger__trail-active {
  stroke: #0e6b45;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.6) * 1000));
  transition: stroke-dashoffset 0.22s linear;
}

.moments__mood-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.moments__mood-pill {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(7, 31, 25, 0.1);
  background: color-mix(in srgb, var(--hrv-wild-bg-color, #f6f6ee) 80%, #ffffff);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  position: relative;
  padding-left: 22px;
}

.moments__mood-pill i {
  position: absolute;
  left: 9px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--m-color, #2ed66f);
}

.moments__mood-pill strong {
  color: #071f19;
  font-size: 11.5px;
  font-weight: 800;
}

.moments__mood-pill span {
  color: rgba(7, 31, 25, 0.66);
  font-size: 10.5px;
}

.note__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.note__top-bar .note__index {
  margin-bottom: 0;
}

.note__wp {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(14, 107, 69, 0.28);
  color: #0e6b45;
}

.note__elevation-rule {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(7, 31, 25, 0.1);
  color: #0e6b45;
}

.note__elevation-rule svg {
  width: 100%;
  max-width: 240px;
  height: 18px;
}

/* Asymmetric 3-Frame Photo Ribbon */
.photo-ribbon {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.24fr 0.88fr 1.06fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}

.photo-ribbon__item {
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px rgba(7, 31, 25, 0.12);
}

.photo-ribbon__item img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .photo-ribbon__item--2.is-revealed {
    transform: translate3d(0, 14px, 0);
  }
}

.das-gallery-exit-trail {
  margin-top: clamp(32px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #0e6b45;
}

.das-gallery-exit-trail__svg {
  width: 100%;
  max-width: 760px;
  height: 56px;
}

.das-gallery-exit-trail__active {
  stroke: #0e6b45;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.75) * 1000));
  transition: stroke-dashoffset 0.22s linear;
}

.das-gallery-exit-trail__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #0e6b45;
}

/* ==========================================================================
   Phase 4 — Pinned Storytelling Curve inside Chapter 02 Tracker
   ========================================================================== */
.chapters-sticky-tracker__curve {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(246, 246, 238, 0.1);
  color: var(--active-chapter-accent, #2ed66f);
}

.chapters-sticky-tracker__curve svg {
  width: 100%;
  height: 40px;
}

.chapters-sticky-tracker__curve-active {
  stroke: var(--active-chapter-accent, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--pinned-chapter-progress, 0.18) * 1000));
  transition: stroke-dashoffset 0.35s var(--ease-out-expo), stroke 0.35s ease;
}

.das-pinned-wp {
  fill: #071f19;
  stroke: rgba(246, 246, 238, 0.45);
  stroke-width: 1.5;
  transition: all 0.3s ease;
}

.das-pinned-wp.is-visited {
  fill: var(--active-chapter-accent, #2ed66f);
  stroke: var(--active-chapter-accent, #2ed66f);
}

.das-pinned-wp.is-active {
  fill: #ffbb38;
  stroke: var(--active-chapter-accent, #2ed66f);
  stroke-width: 2.2;
  r: 5.5px;
}

/* ==========================================================================
   Phase 3 — Redesigned Choose Your Journey / Pricing Section
   ========================================================================== */
.das-pricing-elevation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #0e6b45;
}

.das-pricing-elevation__svg {
  width: 100%;
  max-width: 720px;
  height: 40px;
}

.das-pricing-elevation__active {
  stroke: #0e6b45;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.55) * 1000));
  transition: stroke-dashoffset 0.24s ease-out;
}

.das-pricing-elevation__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #0e6b45 !important;
}

.plan-compare__head {
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.plan-compare__sub {
  padding-left: 18px;
  border-left: 2px solid rgba(14, 107, 69, 0.3);
}

.compare-basis {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(7, 31, 25, 0.12);
  border-left: 4px solid #16b857;
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 70%, #ffffff);
  margin: 0 0 34px;
}

.compare-basis__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 85%, #071f19);
  color: #0e6b45;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
}

.compare-basis__badge svg {
  width: 15px;
  height: 15px;
}

.compare-basis__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #071f19;
}

.compare-cards {
  align-items: stretch;
}

.compare-card {
  position: relative;
  padding: clamp(26px, 2.8vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(7, 31, 25, 0.14);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 38%, #ffffff);
  box-shadow: 0 16px 36px rgba(7, 31, 25, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease;
}

.compare-card:hover {
  transform: translateY(-5px);
  border-color: #0e6b45;
  box-shadow: 0 24px 48px rgba(7, 31, 25, 0.12);
}

.compare-card.compare-best {
  border: 2px solid #16b857;
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 18%, #ffffff);
  box-shadow: 0 24px 52px rgba(14, 107, 69, 0.14);
}

.compare-card__badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.compare-card__badge-row .compare-tag {
  margin: 0;
  line-height: 1.3;
}

.compare-pill-star,
.compare-pill-sub {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.compare-pill-sub {
  border: 1px solid rgba(14, 107, 69, 0.28);
  color: #0e6b45;
}

/* Trail Route & Waypoint Visualizer inside each Pricing Card */
.compare-card__route {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(7, 31, 25, 0.09);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 76%, #ffffff);
  color: #0e6b45;
}

.compare-card__route-svg {
  width: 100%;
  height: 26px;
  display: block;
}

.compare-card__route-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.9s var(--ease-out-expo) 0.25s;
}

.compare-card.is-revealed .compare-card__route-line {
  stroke-dashoffset: 0;
}

.compare-wp {
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.65);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out-expo);
}

.compare-card.is-revealed .compare-wp {
  opacity: 1;
  transform: scale(1);
}

.compare-card.is-revealed .compare-wp--1,
.compare-card.is-revealed .compare-wp--seq-1 { transition-delay: 280ms; }
.compare-card.is-revealed .compare-wp--2,
.compare-card.is-revealed .compare-wp--seq-2 { transition-delay: 410ms; }
.compare-card.is-revealed .compare-wp--3,
.compare-card.is-revealed .compare-wp--seq-3 { transition-delay: 540ms; }
.compare-card.is-revealed .compare-wp--4 { transition-delay: 640ms; }
.compare-card.is-revealed .compare-wp--5 { transition-delay: 740ms; }
.compare-card.is-revealed .compare-wp--6 { transition-delay: 840ms; }

.compare-card:hover .compare-wp {
  transform: scale(1.18);
}

.compare-card__route-caption {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0e6b45;
}

.compare-card__headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compare-saving {
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid #16b857;
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 86%, #2ed66f);
  line-height: 1.5;
}

.compare-benefits {
  margin: 4px 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 13.8px;
  line-height: 1.55;
  color: rgba(7, 31, 25, 0.82);
}

.compare-card__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 31, 25, 0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare-card__footer .button {
  width: 100%;
  justify-content: center;
}

/* 6-Chapter Elevation & Checkpoint Bridge */
.das-six-chapter-bridge {
  margin-bottom: 36px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 246, 238, 0.12);
  color: var(--color-primary, #2ed66f);
}

.das-six-chapter-bridge__svg {
  width: 100%;
  height: 76px;
  display: block;
}

.das-six-chapter-bridge__active {
  stroke: var(--color-primary, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.65) * 1000));
  transition: stroke-dashoffset 0.25s ease-out;
}

.das-six-chapter-bridge__labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(246, 246, 238, 0.78);
}

.das-six-chapter-bridge__labels span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.das-six-chapter-bridge__labels i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cp-color, #2ed66f);
  box-shadow: 0 0 8px var(--cp-color, #2ed66f);
  flex-shrink: 0;
}

.das-chapter-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

.das-chapter-connector__wp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(46, 214, 111, 0.35);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(246, 246, 238, 0.68);
}

/* Timeline SVG Spine */
.timeline-journey__svg {
  width: 100%;
  height: 20px;
  margin-top: 4px;
  color: var(--color-primary, #2ed66f);
}

.timeline-journey__svg-active {
  stroke: var(--color-primary, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--timeline-progress, 0.5) * 1000));
  transition: stroke-dashoffset 0.2s linear;
}

/* Pricing Mountain Ridge Divider */
.das-mountain-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--color-primary, #2ed66f);
}

.das-mountain-divider svg {
  width: 100%;
  max-width: 680px;
  height: 36px;
}

.das-mountain-divider span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(246, 246, 238, 0.56);
}

/* Rotating Passport Stamp Seal */
.passport-feature__canvas {
  position: relative;
}

.das-passport-seal {
  position: absolute;
  top: -18px;
  right: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  color: var(--color-secondary, #ffbb38);
}

.das-passport-seal__svg {
  width: 76px;
  height: 76px;
  transform: rotate(calc(var(--section-progress, 0.2) * 110deg));
  transition: transform 0.2s linear;
}

.das-passport-seal__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-top: 2px;
}

/* Closing Final Summit Arrival Marker */
.das-summit-arrival {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--color-primary, #2ed66f);
}

.das-summit-arrival__svg {
  width: 180px;
  height: 44px;
}

.das-summit-arrival__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-secondary, #ffbb38);
}

/* 6. Varied Section & Chapter Reveal Choreography */
[data-reveal="up"],
[data-reveal="scale"],
[data-reveal="lines"] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.72s var(--ease-out-expo), transform 0.72s var(--ease-out-expo);
}

[data-reveal="clip-up"] {
  opacity: 0;
  clip-path: inset(10% 5% 10% 5% round 24px);
  transform: translate3d(0, 28px, 0) scale(0.96);
  transition:
    opacity 0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo),
    clip-path 0.85s var(--ease-out-expo);
}

[data-reveal="frame-expand"] {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.9);
  transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo);
}

[data-reveal="clip-left"] {
  opacity: 0;
  clip-path: inset(4% 16% 4% 0% round 24px);
  transform: translate3d(-26px, 14px, 0) scale(0.97);
  transition:
    opacity 0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo),
    clip-path 0.85s var(--ease-out-expo);
}

[data-reveal="clip-right"] {
  opacity: 0;
  clip-path: inset(4% 0% 4% 16% round 24px);
  transform: translate3d(26px, 14px, 0) scale(0.97);
  transition:
    opacity 0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo),
    clip-path 0.85s var(--ease-out-expo);
}

[data-reveal="up"].is-revealed,
[data-reveal="scale"].is-revealed,
[data-reveal="lines"].is-revealed,
[data-reveal="clip-up"].is-revealed,
[data-reveal="clip-left"].is-revealed,
[data-reveal="clip-right"].is-revealed,
[data-reveal="frame-expand"].is-revealed {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0% round 24px);
  transform: translate3d(0, 0, 0) scale(1);
}

/* ==========================================================================
   Phase 5 — Motion Overdrive & Cinematic Scroll Experience (v1.3.0)
   1. Hero 7-Step Entrance Sequence & Forest Ridge Silhouette (Object E)
   2. Pinned Journey Visual Stage (6 Crossfading Chapter Frames)
   3. Chapter Stream Progress, Guide Lines & SVG Trail Connectors (Object G)
   4. Documentary Gallery Media Mask, Caption Reveal & Scroll Focus
   5. Pricing Studio 6-Chapter Route Synchronizer & Animated Price Pulse
   ========================================================================== */
@keyframes dasHeroBgReveal {
  0% { opacity: 0.25; transform: scale(1.1); filter: brightness(0.55); }
  100% { opacity: 1; transform: scale(1.03); filter: brightness(1); }
}

@keyframes dasHeroStepUp {
  0% { opacity: 0; transform: translate3d(0, 26px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes dasHeroLineReveal {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) skewY(1.5deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) skewY(0deg); }
}

.das-chapter-00 [data-hero-seq="1"] .hero__bg-img {
  animation: dasHeroBgReveal 1.35s var(--ease-out-expo) 0.04s both;
}

.das-chapter-00 [data-hero-seq="2"] {
  animation: dasHeroStepUp 1.1s var(--ease-out-expo) 0.14s both;
}

.das-chapter-00 [data-hero-seq="3"] {
  animation: dasHeroStepUp 0.85s var(--ease-out-expo) 0.24s both;
}

.das-chapter-00 [data-hero-seq="4"] .hero-line-1 {
  animation: dasHeroLineReveal 0.9s var(--ease-out-expo) 0.34s both;
}

.das-chapter-00 [data-hero-seq="4"] .hero-line-2 {
  animation: dasHeroLineReveal 0.95s var(--ease-out-expo) 0.48s both;
}

.das-chapter-00 [data-hero-seq="5"] {
  animation: dasHeroStepUp 0.95s var(--ease-out-expo) 0.6s both;
}

.das-chapter-00 [data-hero-seq="6"] {
  animation: dasHeroStepUp 0.95s var(--ease-out-expo) 0.72s both;
}

.das-chapter-00 [data-hero-seq="7"] {
  animation: dasHeroStepUp 0.95s var(--ease-out-expo) 0.86s both;
}

.das-forest-silhouette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: clamp(54px, 8vw, 96px);
  z-index: 1;
  pointer-events: none;
  color: #071f19;
  transform: translate3d(0, calc(var(--hero-progress, 0) * 18px), 0);
}

.das-forest-silhouette svg {
  width: 100%;
  height: 100%;
  display: block;
}

.das-forest-silhouette--closing {
  z-index: 1;
  opacity: 0.75;
}

.das-hero-elevation__runner {
  filter: drop-shadow(0 0 10px rgba(255, 187, 56, 0.95));
}

.herofacts > div {
  position: relative;
}

.herofacts__wp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hrv-hero-badge-bg-color, #2ed66f);
  box-shadow: 0 0 10px rgba(46, 214, 111, 0.85);
  margin-bottom: 6px;
}

/* Section 6 — Pinned Journey Visual Stage (6 Crossfading Chapter Frames) */
.chapters-sticky-tracker__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.chapters-sticky-tracker__top .chapters-sticky-tracker__number-row {
  margin: 0;
}

.chapters-sticky-tracker__top .chapters-sticky-tracker__num {
  font-size: 38px;
}

.chapters-sticky-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(246, 246, 238, 0.16);
  background: var(--hrv-product-card-media-bg-color, #11352b);
  margin-bottom: 14px;
}

.chapters-sticky-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(12% 8% 12% 8% round 12px);
  transform: scale(1.06);
  transition:
    opacity 0.62s var(--ease-out-expo),
    clip-path 0.62s var(--ease-out-expo),
    transform 0.62s var(--ease-out-expo);
  pointer-events: none;
}

.chapters-sticky-frame.is-active {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0% round 12px);
  transform: scale(1);
  z-index: 2;
}

.chapters-sticky-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chapters-sticky-frame__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 31, 25, 0.25) 0%, rgba(7, 31, 25, 0.1) 45%, rgba(7, 31, 25, 0.88) 100%);
}

.chapters-sticky-frame__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: color-mix(in srgb, var(--hrv-header-bg-color, #071f19) 82%, transparent);
  border: 1px solid var(--frame-accent, #2ed66f);
  color: #f6f6ee;
}

.chapters-sticky-frame__logo {
  position: absolute;
  left: 12px;
  bottom: 10px;
  max-width: 136px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.chapters-sticky-tracker__desc {
  margin: 0 0 12px;
  font-size: 12.8px;
  line-height: 1.55;
  color: rgba(246, 246, 238, 0.8);
}

.chapters-sticky-tracker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.chapters-sticky-tracker__pills span {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid var(--active-chapter-accent, #2ed66f);
  color: var(--active-chapter-accent, #2ed66f);
}

/* Section 5 — Chapter Stream Progress, Completed State & SVG Connectors (Object G) */
.chapters-stream__line {
  opacity: 0.24;
  width: 2px;
}

.chapters-stream__line-progress {
  display: block;
  width: 100%;
  height: calc(var(--chapters-stream-progress, 0.16) * 100%);
  background: var(--hrv-hero-badge-bg-color, #2ed66f);
  box-shadow: 0 0 12px rgba(46, 214, 111, 0.8);
  transition: height 0.15s linear;
}

.chapter-story__kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.chapter-story__status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 238, 0.18);
  color: rgba(246, 246, 238, 0.72);
  transition: all 0.3s ease;
}

.chapter-story.is-active-chapter .chapter-story__status {
  border-color: var(--chapter-color, #2ed66f);
  color: var(--chapter-color, #2ed66f);
}

.chapter-story.is-completed-chapter {
  border-color: rgba(46, 214, 111, 0.28);
}

.chapter-story.is-completed-chapter .chapter-story__status {
  border-color: rgba(46, 214, 111, 0.45);
  color: #2ed66f;
}

.chapter-story__guide-line {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hrv-product-card-bg-color, #0d2b23) 40%, rgba(246, 246, 238, 0.14));
  overflow: hidden;
}

.chapter-story__guide-line span {
  display: block;
  height: 100%;
  width: calc(var(--card-progress, 0.35) * 100%);
  background: var(--hrv-hero-badge-bg-color, #2ed66f);
  transition: width 0.18s linear;
}

.chapter-story .chapter-story__pills span {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out-expo);
}

.chapter-story.is-revealed .chapter-story__pills span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.chapter-story.is-revealed .chapter-story__pills span:nth-child(1) { transition-delay: 120ms; }
.chapter-story.is-revealed .chapter-story__pills span:nth-child(2) { transition-delay: 190ms; }
.chapter-story.is-revealed .chapter-story__pills span:nth-child(3) { transition-delay: 260ms; }
.chapter-story.is-revealed .chapter-story__pills span:nth-child(4) { transition-delay: 330ms; }
.chapter-story.is-revealed .chapter-story__pills span:nth-child(5) { transition-delay: 400ms; }

.das-chapter-connector {
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.das-chapter-connector__svg {
  width: 240px;
  height: 54px;
  display: block;
  overflow: visible;
}

.das-chapter-connector__active {
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--conn-progress, 0.65) * 1000));
  transition: stroke-dashoffset 0.2s linear;
}

/* Section 7 — Documentary Gallery Media Mask, Caption Reveal & Focus State */
.moments__media-mask {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
}

.moments__media-mask img[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04);
  transition: transform 0.45s var(--ease-out-expo);
}

.moments figure:hover .moments__media-mask img[data-parallax],
.photo-ribbon__item:hover .moments__media-mask img[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.08);
}

.das-gallery-caption {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.6s var(--ease-out-expo) 0.18s, transform 0.6s var(--ease-out-expo) 0.18s;
}

figure.is-revealed .das-gallery-caption,
.photo-ribbon__item.is-revealed .das-gallery-caption {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-gallery-frame] {
  transition:
    transform 0.4s var(--ease-out-expo),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    filter 0.4s ease;
}

[data-gallery-frame].is-gallery-focused {
  border-color: var(--color-primary, #2ed66f);
  box-shadow: 0 26px 52px rgba(7, 31, 25, 0.2);
}

[data-gallery-frame].is-gallery-dimmed:not(:hover) {
  opacity: 0.82;
  filter: saturate(0.86);
}

.das-footprints-curve--active {
  stroke: #0e6b45;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.55) * 1000));
  transition: stroke-dashoffset 0.2s linear;
}

/* Section 8 — Pricing Card Benefit Stagger & Studio 6-Chapter Route Synchronizer */
.compare-card .compare-benefits li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-out-expo);
}

.compare-card.is-revealed .compare-benefits li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.compare-card.is-revealed .compare-benefits li:nth-child(1) { transition-delay: 180ms; }
.compare-card.is-revealed .compare-benefits li:nth-child(2) { transition-delay: 260ms; }
.compare-card.is-revealed .compare-benefits li:nth-child(3) { transition-delay: 340ms; }
.compare-card.is-revealed .compare-benefits li:nth-child(4) { transition-delay: 420ms; }

.passes-route-sync {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(7, 31, 25, 0.12);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 60%, #ffffff);
}

.passes-route-sync__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0e6b45;
}

.passes-route-sync__nodes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.passes-route-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(7, 31, 25, 0.1);
  background: color-mix(in srgb, var(--hrv-pricing-bg-color, #f6f6ee) 88%, #ffffff);
  opacity: 0.42;
  transform: scale(0.97);
  transition: all 0.3s var(--ease-out-expo);
}

.passes-route-node.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--node-color, #0e6b45);
  box-shadow: 0 8px 18px rgba(7, 31, 25, 0.08);
}

.passes-route-node__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-color, #2ed66f);
  flex-shrink: 0;
}

.passes-route-node.is-active .passes-route-node__dot {
  box-shadow: 0 0 8px var(--node-color, #2ed66f);
}

.passes-route-node strong {
  font-size: 10px;
  font-weight: 900;
  color: #071f19;
}

.passes-route-node small {
  font-size: 10px;
  font-weight: 700;
  color: rgba(7, 31, 25, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.passlayout .summary #total {
  display: inline-block;
  transition: transform 0.24s var(--ease-out-expo), color 0.24s ease;
}

.passlayout .summary.is-price-updating #total {
  transform: scale(1.04);
  color: var(--color-secondary, #ffbb38);
}

/* Passport Dark Topographic Field & Closing Summit Active Line */
.das-chapter-05 {
  position: relative;
  overflow: hidden;
}

.das-contour-field--dark {
  color: var(--color-primary, #2ed66f);
  opacity: 0.1;
}

.das-summit-arrival__active {
  stroke: var(--color-primary, #2ed66f);
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 - (var(--section-progress, 0.7) * 1000));
  transition: stroke-dashoffset 0.25s ease-out;
}

.hero-line {
  display: block;
  transition: transform 0.75s var(--ease-out-expo), opacity 0.75s var(--ease-out-expo);
}

.hero-line-2 {
  transition-delay: 110ms;
}

@media (max-width: 767px) {
  .das-six-chapter-bridge__labels {
    grid-template-columns: repeat(2, 1fr);
  }
  .das-hero-elevation__meta {
    font-size: 9px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .app-more-QuickModals {
    grid-template-columns: 1fr;
  }
  .das-ambient-spores {
    display: none;
  }
  .moments__mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-ribbon .ribbon-shot--2,
  .photo-ribbon .ribbon-shot--3 {
    margin-top: 0;
  }
  .compare-basis {
    flex-direction: column;
    align-items: flex-start;
  }
  .das-pricing-elevation__meta {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  [data-reveal="up"],
  [data-reveal="scale"],
  [data-reveal="lines"],
  [data-reveal="clip-up"],
  [data-reveal="clip-left"],
  [data-reveal="clip-right"],
  [data-reveal="frame-expand"],
  .das-gallery-caption,
  .chapter-story .chapter-story__pills span,
  .compare-card .compare-benefits li,
  .das-footprint-step,
  .compare-wp {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .compare-card__route-line {
    stroke-dashoffset: 0 !important;
  }
  .das-ambient-spores {
    display: none !important;
  }
  .hero__bg-img,
  .hero-backdrop,
  .closing__bg-img,
  .das-compass-svg,
  .das-passport-seal__svg,
  .das-contour-field__svg {
    transform: none !important;
  }
}

/* ==========================================================================
   Smart Search Modal & Haravan Storefront Standards
   ========================================================================== */
.smart-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px;
}

.smart-search-modal.is-open {
  display: flex !important;
}

.smart-search-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hrv-search-popup-overlay-color, #04120e) 75%, transparent);
  backdrop-filter: blur(6px);
}

.smart-search-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--hrv-search-popup-bg-color, #0b2921);
  border: 1px solid rgba(246, 246, 238, 0.16);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 1;
}

.smart-search-input-wrap {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  gap: 10px !important;
  background: var(--hrv-search-popup-form-bg-color, #071f19) !important;
  border-bottom: 1px solid rgba(246, 246, 238, 0.12) !important;
}

.smart-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 15px !important;
  color: var(--das-text-light) !important;
  font-family: inherit !important;
}

.smart-search-input::-webkit-search-cancel-button,
.smart-search-input::-webkit-search-decoration,
.smart-search-input::-webkit-search-results-button,
.smart-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.smart-search-clear {
  background: var(--hrv-button-secondary-bg-color, #12382e) !important;
  border: none !important;
  border-radius: 9999px !important;
  width: 22px !important;
  height: 22px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--das-text-light) !important;
  flex-shrink: 0 !important;
}

.smart-search-clear.is-visible {
  display: inline-flex !important;
}

.smart-search-divider {
  width: 1px !important;
  height: 20px !important;
  background: rgba(246, 246, 238, 0.16) !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
}

.smart-search-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--hrv-button-secondary-bg-color, #12382e) !important;
  border: 1px solid rgba(246, 246, 238, 0.18) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
}

.smart-search-body {
  padding: 18px 20px 22px;
}

.search-tag-pill {
  display: inline-block;
  background: var(--hrv-search-popup-tag-bg-color, #12382e);
  border: 1px solid rgba(246, 246, 238, 0.16);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 6px 6px 0;
}

.smart-search-loading {
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
}

.smart-search-loading.is-loading {
  display: flex !important;
}

.smart-search-results[hidden],
.smart-search-empty[hidden],
.smart-search-view-all[hidden] {
  display: none !important;
}

/* Product Card & Collection Layout */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.product-card {
  background: var(--hrv-product-card-bg-color, #0d2b23);
  border: 1px solid rgba(246, 246, 238, 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card-image {
  background: var(--hrv-product-card-media-bg-color, #11352b);
  aspect-ratio: 1 / 1;
  position: relative;
}

.btn-secondary {
  background: var(--hrv-button-secondary-bg-color, #12382e);
}

/* Editor Lessons Contract */
html body [setting-type="text"]:empty,
html body [setting-type="textarea"]:empty,
html body [data-blank-wrap]:has([setting-type="text"]:empty),
html body [data-blank-wrap]:has([setting-type="textarea"]:empty),
html body [data-das-blank-wrap]:has([setting-type="text"]:empty),
html body [data-das-blank-wrap]:has([setting-type="textarea"]:empty) {
  display: none !important;
}

.hero-slider-section .slick-slide { z-index: 1 !important; pointer-events: none !important; }
.hero-slider-section .slick-slide.slick-current { z-index: 3 !important; pointer-events: auto !important; }

.shop-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.shop-layout .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
html body .shop-layout.shop-layout--nosidebar,
html body .shop-layout:not(:has(> .shop-sidebar:not([style*="display: none"]))) { grid-template-columns: minmax(0, 1fr); }
html body .shop-layout--nosidebar > .shop-sidebar { display: none !important; }
html body .shop-layout--nosidebar .shop-grid,
html body .shop-layout:not(:has(> .shop-sidebar:not([style*="display: none"]))) .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body .shop-sidebar { background-color: var(--hrv-collection-filter-bg-color, #0b2921); padding: 20px; border-radius: var(--radius-md); }
.product-grid-item[hidden], [data-filter-empty][hidden], [data-filter-pagination][hidden], [data-pagination][hidden] { display: none !important; }

/* ==========================================================================
   Responsive Breakpoints & Mobile Typography Caps (mobile-caps)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__container,
  .hero-grid,
  .sectionhead,
  .statement,
  .moments,
  .chapters-journey,
  .passlayout,
  .passport-heading,
  .passport-feature,
  .details-grid,
  .faq-grid,
  .das-chapter-modal__grid {
    grid-template-columns: 1fr;
  }

  .chapters-sticky-tracker {
    position: relative;
    top: 0;
  }

  .chapters-stream__line {
    display: none;
  }

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

  .compare-cards,
  .passport-journey,
  .passport-gallery-grid,
  .footer-main,
  .story-building-blocks,
  .story-chapter-grid {
    grid-template-columns: 1fr 1fr;
  }

  html body .shop-layout--nosidebar .shop-grid,
  html body .shop-layout:not(:has(> .shop-sidebar:not([style*="display: none"]))) .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .passes-route-sync__nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .chapters-sticky-stage {
    aspect-ratio: 16 / 9;
  }
  .das-master-logo {
    height: 36px;
  }

  .header-actions .navcta {
    display: none;
  }

  .app-welcome__title {
    font-size: 13px;
  }

  .brand-teaser,
  .chapter-story,
  .photo-ribbon,
  .compare-cards,
  .passport-journey,
  .passport-gallery-grid,
  .footer-main,
  .story-building-blocks,
  .story-chapter-grid,
  .single-filters {
    grid-template-columns: 1fr;
  }

  .brand-teaser__symbols {
    border-right: none;
    border-bottom: 1px solid rgba(7, 31, 25, 0.12);
    padding-right: 0;
    padding-bottom: 16px;
  }

  .chapter-story--even .chapter-story__media,
  .chapter-story--even .chapter-story__content {
    order: unset;
  }

  .passlayout .tabs {
    grid-template-columns: 1fr 1fr;
  }

  .herofacts,
  .hero-facts {
    grid-template-columns: 1fr;
  }

  .app-bottom-nav {
    display: grid;
  }

  .das-support-launcher {
    display: none;
  }

  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  html body .shop-layout .shop-grid,
  html body .shop-layout--nosidebar .shop-grid,
  html body .shop-layout:not(:has(> .shop-sidebar:not([style*="display: none"]))) .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mobile font caps (mobile-caps rule: must live in theme.css with html body prefix) */
  html body span.hrv-cf-hero_heading_line_1[setting-id="hero_heading_line_1"],
  html body span.hrv-cf-hero_heading_line_1,
  html body span.hrv-cf-hero_heading_line_2[setting-id="hero_heading_line_2"],
  html body span.hrv-cf-hero_heading_line_2 {
    font-size: clamp(38px, 11vw, 52px) !important;
  }

  html body h2.hrv-cf-wild_statement_title[setting-id="wild_statement_title"],
  html body h2.hrv-cf-wild_statement_title,
  html body h2.hrv-cf-chapters_title[setting-id="chapters_title"],
  html body h2.hrv-cf-chapters_title,
  html body h2.hrv-cf-timeline_title[setting-id="timeline_title"],
  html body h2.hrv-cf-timeline_title,
  html body h2.hrv-cf-pricing_title[setting-id="pricing_title"],
  html body h2.hrv-cf-pricing_title,
  html body h2.hrv-cf-passes_title[setting-id="passes_title"],
  html body h2.hrv-cf-passes_title,
  html body h2.hrv-cf-passport_title[setting-id="passport_title"],
  html body h2.hrv-cf-passport_title,
  html body h2.hrv-cf-prepare_title[setting-id="prepare_title"],
  html body h2.hrv-cf-prepare_title,
  html body h2.hrv-cf-faq_title[setting-id="faq_title"],
  html body h2.hrv-cf-faq_title {
    font-size: clamp(26px, 7.2vw, 34px) !important;
  }

  html body h2.hrv-cf-promise_title[setting-id="promise_title"],
  html body h2.hrv-cf-promise_title {
    font-size: clamp(34px, 9.5vw, 46px) !important;
  }

  html body h3.hrv-cf-chapters_item_title[setting-id],
  html body h3.hrv-cf-chapters_item_title {
    font-size: clamp(24px, 6.5vw, 30px) !important;
  }
}