/* =============================================
   HAUS EDELWEISS — Our Story Page
   Hero from Figma: Das Edelweiss — Brand, node 1621:17119
   ============================================= */


/* ===== PAGE OVERRIDE ===== */
.page-our-story {
  background-color: var(--color-cream);
}


/* ===== HERO (full-bleed image + overlay + two text layers) =====
   Figma: 1512×988
   - "Our Story" giant title centered vertically (~200px)
   - Bottom container at y=756 with brand + subtitle + desc
   =============================================================== */
.story-hero {
  position: relative;
  z-index: 95;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* --- Background --- */
.story-hero__bg {
  position: absolute;
  inset: 0;
}

.story-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Overlay (dark + warm tint, matching home hero) --- */
.story-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

.story-hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(119, 77, 36, 0.2);
  mix-blend-mode: soft-light;
}


/* Hide entrance elements before GSAP runs to prevent FOUC */
.story-hero__title,
.story-hero__brand,
.story-hero__subtitle {
  opacity: 0;
}

/* --- Giant centered title "Our Story" ---
   Figma: 199.8px PP Eiko Medium, centered vertically in 988px hero
   200px = 12.5rem; 200/1512 ≈ 13.23vw */
.story-hero__title {
  position: relative;
  z-index: var(--z-above);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 13.23vw, 12.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  text-align: center;
  margin: 0;
}


/* --- Bottom container (brand + subtitle + desc) ---
   Figma: Container 511px wide, gap 16px, centered, 48px from bottom edge */
.story-hero__bottom {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  width: max-content;
  max-width: calc(100% - var(--container-px) * 2);
}

/* Brand label — 12px Geist, uppercase, tracking 1.44px */
.story-hero__brand {
  /* inherits .label .label--light styles */
}

/* Subtitle — 50px PP Eiko Medium, single line */
.story-hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3.125rem);
  font-weight: var(--weight-medium);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  white-space: nowrap;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .story-hero {
    min-height: 100svh;
  }

  .story-hero__subtitle {
    white-space: normal;
    font-size: var(--text-xl);
  }

  .story-hero__bottom {
    bottom: 32px;
    padding: 0 var(--container-px);
  }
}


/* ===== STORY CONTENT (text + full-bleed slider)
   Figma: node 1572:12795
   Section: flex-col, gap 120px, pt 120px
   Text area: flex-row, gap 32px, px 64px
   Slider: full-bleed, centered, slides 76.12% viewport (1151/1512), 1151×744
   ===== */
.story-content {
  padding-top: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
  background-color: var(--color-cream);
}


/* --- Text area: two columns --- */
.story-content__text-area {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  gap: 32px;
  align-items: start;
}

.story-content__col-left {
  flex: 1 0 0;
  min-width: 0;
}

.story-content__heading {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -2.34px;
  color: var(--color-rust);
  max-width: 562px;
  margin: 0;
}

.story-content__col-right {
  flex: 1 0 0;
  min-width: 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story-content__lead {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.64px;
  color: var(--color-rust);
  max-width: 454px;
  margin: 0;
}

.story-content__body-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 454px;
}

.story-content__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
  margin: 0;
}


/* --- Slider: full-bleed, centered active slide, peek sides ---
   Figma: 3 slides in a row, each 1151×744, gap 32px.
   Active slide = 76.12% viewport. Side slides peek. */
.story-content__slider-wrap {
  position: relative;
  margin-top: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
  overflow: hidden;
  height: clamp(420px, 49.21vw, 744px);
}

.story-content__swiper {
  overflow: visible;
  height: 100%;
}

.story-content__slide {
  width: 76.12%;
  height: 100% !important;
  position: relative;
  flex-shrink: 0;
}

.story-content__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --- Overlay: bottom gradient for caption readability, synced with caption --- */
.story-content__slide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 62.47%, rgba(0, 0, 0, 0.3) 84.52%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.swiper-slide-active .story-content__slide-overlay {
  opacity: 1;
  transition-delay: 500ms;
}


/* --- Caption: cream, bottom-left, only on active --- */
.story-content__slide-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in-out);
  z-index: var(--z-above);
}

.swiper-slide-active .story-content__slide-caption {
  opacity: 1;
  transition-delay: 500ms;
}

.story-content__diamond {
  width: 6px;
  height: 6px;
  background-color: var(--color-cream);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.story-content__caption-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.41;
}


/* --- Nav buttons: left/right sides of slider, vertically centered --- */
.story-content__nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
  z-index: var(--z-above);
  pointer-events: none;
}

.story-content__nav-btn {
  pointer-events: auto;
}

.story-content__nav-btn.btn-stamp {
  padding: 6px;
}

.story-content__nav-inner.btn-stamp__inner {
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-content__nav-arrow {
  width: 48px;
  height: 48px;
  display: block;
}

.story-content__nav-arrow--flip {
  transform: scaleX(-1);
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .story-content__text-area {
    gap: 24px;
  }

  .story-content__heading {
    font-size: var(--text-4xl);
    letter-spacing: -1.5px;
  }

  .story-content__col-right {
    padding: 0 16px;
    gap: 24px;
  }

  .story-content__lead {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }

  .story-content__slide {
    width: 80%;
  }

  .story-content__nav {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .story-content__text-area {
    flex-direction: column;
    gap: 32px;
    padding: 0 var(--container-px);
  }

  .story-content__heading {
    font-size: var(--text-3xl);
    letter-spacing: -1px;
    max-width: none;
  }

  .story-content__col-right {
    padding: 0;
    gap: 24px;
  }

  .story-content__lead,
  .story-content__body-wrap {
    max-width: none;
  }

  .story-content__slider-wrap {
    margin-top: var(--space-3xl);
  }

  .story-content__slide {
    width: 100%;
  }

  .story-content__slide-caption {
    bottom: 16px;
    left: 16px;
  }

  .story-content__nav {
    padding: 0 16px;
  }

  .story-content__nav-btn.btn-stamp {
    padding: 4px;
  }

  .story-content__nav-inner.btn-stamp__inner {
    width: 48px;
    height: 48px;
  }

  .story-content__nav-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ===== 2b. EXCEPTIONAL DESIGN — Thumbnail gallery
   Figma: node 1572:12978
   Two-panel: showcase image (left 50%) + details with thumbs (right 50%)
   ===== */
.design {
  display: flex;
  min-height: 100vh;
  background-color: #7c7e62;
}

/* --- Left panel: showcase image --- */
.design__showcase {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.design__bg {
  position: absolute;
  inset: 0;
}

.design__bg-img {
  position: absolute;
  inset: 0;
  background-color: #D1D5DB;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.design__bg-img--active {
  opacity: 1;
}

.design__bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.design__bg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(131, 45, 6, 0.2);
  mix-blend-mode: soft-light;
}

.design__bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62.47%, rgba(0, 0, 0, 0.3) 82.83%);
}

/* --- Caption: bottom-left of showcase --- */
.design__caption {
  display: none; /* TODO: re-enable when slider content is ready */
  position: absolute;
  bottom: 64px;
  left: 0;
  z-index: 2;
  align-items: first baseline;
  gap: 16px;
  color: var(--color-cream);
  padding: 0 64px;
}

.design__caption-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  line-height: 1.41;
  flex-shrink: 0;
}

.design__caption-text {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.96px;
  color: var(--color-cream);
  max-width: 322px;
  margin: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

/* --- Right panel: details --- */
.design__details {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 64px;
  justify-content: center;
  padding: 96px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Text block */
.design__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 525px;
}

.design__text .label--light {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.41;
}

.design__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.875rem);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -1.24px;
  color: var(--color-cream);
  margin: 0;
}

.design__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 472px;
}

.design__body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-sand-medium);
  margin: 0;
}

/* --- Thumbnail strip --- */
.design__thumbs {
  display: none; /* TODO: re-enable when slider content is ready */
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 525px;
}

.design__thumb {
  flex: 1 1 0;
  aspect-ratio: 145 / 89;
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

.design__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #D1D5DB;
  display: block;
}

.design__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Active thumbnail: gray base + multiply image + sage color blend + number */
.design__thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
  pointer-events: none;
}

.design__thumb-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #8b8b8b;
  mix-blend-mode: multiply;
}

.design__thumb-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #5a5c47;
  mix-blend-mode: color;
}

.design__thumb-overlay span {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.41;
}

.design__thumb--active .design__thumb-overlay {
  opacity: 1;
}

/* --- Quote block --- */
.design__quote {
  border-left: 1px solid rgba(244, 241, 222, 0.3);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 525px;
  margin: 0;
}

.design__quote-text {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-cream);
  max-width: 525px;
  margin: 0;
}

.design__quote-cite {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-sand-medium);
}


/* ===== DESIGN SECTION — Responsive ===== */
@media (max-width: 1024px) {
  .design__details {
    padding: 64px;
    gap: 48px;
  }

  .design__heading {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  }

  .design__caption {
    padding: 0 48px;
    bottom: 48px;
  }
}

@media (max-width: 768px) {
  .design {
    flex-direction: column;
    min-height: auto;
  }

  .design__showcase {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .design__details {
    flex: 0 0 auto;
    padding: 48px var(--container-px);
    gap: 40px;
  }

  .design__text,
  .design__thumbs,
  .design__quote {
    max-width: none;
  }

  .design__body {
    max-width: none;
  }

  .design__caption {
    padding: 0 var(--container-px);
    bottom: 32px;
  }

  .design__caption-text {
    font-size: 1.25rem;
  }

  .design__heading {
    font-size: var(--text-3xl);
  }
}


/* ===== 3. OUR PHILOSOPHY — Move at your own pace
   Figma: node 1572:12779
   ===== */
.philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-5xl);
}

.philosophy__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-5xl) var(--container-px);
  text-align: center;
}

.philosophy__header .label {
  font-size: 12px;
  letter-spacing: 1.44px;
  color: var(--color-rust);
}

.philosophy__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -1.56px;
  color: var(--color-rust);
}

.philosophy__content {
  background-color: var(--color-cream);
  width: 100%;
}

.philosophy__grid {
  display: grid;
  grid-template-columns: 678fr 674fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.philosophy__image {
  aspect-ratio: 678 / 868;
  overflow: hidden;
}

.philosophy__image img,
.philosophy__image > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.philosophy__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding-left: var(--space-xl);
}

.philosophy__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.philosophy__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.64px;
  color: var(--color-rust);
  max-width: 404px;
}

.philosophy__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
  max-width: 441px;
}

.philosophy__bottom {
  display: grid;
  grid-template-columns: 1fr minmax(0, 319px);
  gap: var(--space-xl);
  align-items: end;
}

.philosophy__promise {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: flex-end;
  min-width: 0;
}

.philosophy__promise-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -0.78px;
  color: var(--color-rust);
}

.philosophy__promise-quote {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
}

.philosophy__thumb {
  height: 214px;
  overflow: hidden;
}

.philosophy__thumb img,
.philosophy__thumb > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .philosophy__grid {
    grid-template-columns: 1fr 1fr;
  }

  .philosophy__image {
    aspect-ratio: unset;
  }

  .philosophy__heading {
    max-width: none;
  }

  .philosophy__body {
    max-width: none;
  }

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

  .philosophy__thumb {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .philosophy__grid {
    grid-template-columns: 1fr;
  }

  .philosophy__image {
    aspect-ratio: 16 / 10;
  }

  .philosophy__info {
    padding-left: 0;
    gap: var(--space-3xl);
  }

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

  .philosophy__thumb {
    height: 200px;
  }
}


/* ===== 5. DISCOVER — Adventures nearby (map)
   Figma: node 1572:12918
   Text on left (z-indexed above), map placeholder positioned right.
   Map area: 1254×884 in Figma at 1512 wide → ~83% width.
   ===== */
.discover {
  position: relative;
  background-color: var(--color-cream);
  overflow: hidden;
}

.discover__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5xl) var(--container-px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(500px, 65vw, 980px);
}

.discover__heading {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -2.34px;
  color: var(--color-rust);
  max-width: 700px;
}

.discover__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 439px;
}

.discover__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.96px;
  color: var(--color-rust);
}

.discover__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
}

.discover__map {
  position: absolute;
  top: -32px;
  right: -28px;
  width: 83%;
  aspect-ratio: 1254 / 884;
}

.discover__map > div,
.discover__map > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .discover__content {
    min-height: 500px;
    gap: var(--space-3xl);
  }

  .discover__heading {
    max-width: 50%;
  }

  .discover__map {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .discover {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .discover__map {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1254 / 884;
    order: -1;
  }

  .discover__content {
    min-height: auto;
    gap: var(--space-3xl);
  }

  .discover__heading {
    max-width: none;
  }
}


/* ===== 6. ACTIVITIES — 6-card grid + summary
   Figma: node 1572:12955
   3×2 grid of image cards (440×690), gap 32×33, centered summary below.
   ===== */
.activities {
  background-color: var(--color-cream);
  padding: 0 var(--container-px) var(--space-5xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4xl);
}

.activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 33px 32px;
  width: 100%;
  max-width: calc(440px * 3 + 32px * 2);
  margin: 0 auto;
}

.activities__card {
  position: relative;
  aspect-ratio: 440 / 690;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2xl);
}

.activities__card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.activities__card-bg > div,
.activities__card-bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activities__card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 37%, rgba(0, 0, 0, 0.4) 78%);
  z-index: 1;
}

.activities__card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(119, 77, 36, 0.2);
  mix-blend-mode: soft-light;
  z-index: 2;
}

.activities__card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.activities__card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -1.2px;
  color: var(--color-cream);
}

.activities__card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-cream);
  max-width: 242px;
  text-wrap: pretty;
}

.activities__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 583px;
}

.activities__summary {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
  text-align: center;
}

@media (max-width: 1024px) {
  .activities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .activities__card {
    padding: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .activities__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .activities__card {
    aspect-ratio: 3 / 4;
    padding: var(--space-xl);
  }

  .activities {
    padding-bottom: var(--space-3xl);
    gap: var(--space-3xl);
  }
}


/* ===== 7. DESIGN FEATURE — Bavarian soul, modern form
   Figma: node 1572:12978
   Two equal halves: left image with overlay + caption, right text content.
   Height: 987px in Figma at 1512w.
   Background: #7C7E62 (olive/sage).
   ===== */
.design-feature {
  display: flex;
  min-height: clamp(500px, 45vw + 200px, 987px);
  background-color: #7c7e62;
}

.design-feature__left {
  flex: 1 0 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4xl);
}

.design-feature__left-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.design-feature__left-bg > div,
.design-feature__left-bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-feature__left-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(131, 45, 6, 0.2);
  mix-blend-mode: soft-light;
  z-index: 1;
}

.design-feature__left-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62%, rgba(0, 0, 0, 0.3) 83%);
  z-index: 2;
}

.design-feature__left-caption {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 var(--space-lg);
  align-items: end;
  color: var(--color-cream);
}

.design-feature__left-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  line-height: 1.41;
  align-self: start;
  padding-top: 0.35em;
}

.design-feature__left-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.96px;
  max-width: 322px;
}

.design-feature__right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5xl) var(--space-5xl);
  overflow: hidden;
}

.design-feature__right-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 525px;
}

.design-feature__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  color: var(--color-cream);
}

.design-feature__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.875rem);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -1.24px;
  color: var(--color-cream);
}

.design-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 472px;
}

.design-feature__body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-sand-medium);
}

.design-feature__thumbs {
  display: flex;
  gap: 16px;
  align-items: center;
}

.design-feature__thumb {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 145 / 89;
  position: relative;
  overflow: hidden;
}

.design-feature__thumb > div,
.design-feature__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-feature__thumb--active {
  flex: 0 0 auto;
  width: 100px;
  aspect-ratio: 100 / 61;
}

.design-feature__thumb-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--color-cream);
  z-index: 1;
}

.design-feature__quote {
  border-left: 1px solid rgba(244, 241, 222, 0.3);
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.design-feature__quote-text {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.96px;
  color: var(--color-cream);
  max-width: 395px;
}

.design-feature__quote-cite {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-sand-medium);
  font-style: normal;
}

@media (max-width: 1024px) {
  .design-feature__right {
    padding: var(--space-3xl);
  }
}

@media (max-width: 768px) {
  .design-feature {
    flex-direction: column;
  }

  .design-feature__left {
    min-height: 400px;
  }

  .design-feature__right {
    padding: var(--space-3xl) var(--container-px);
  }

  .design-feature__right-inner {
    max-width: none;
  }

  .design-feature__heading {
    font-size: var(--text-3xl);
  }

  .design-feature__thumbs {
    gap: 8px;
  }

  .design-feature__thumb--active {
    width: 72px;
  }
}


/* ===== 8. GLIMPSE — A glimpse into life at Haus Edelweiss
   Figma: node 1572:13000 — 1512 × 1149
   Autolayout (vertical, center-aligned):
     padding-top: 120px
     gap: 56px  (between header block and gallery)
     padding-bottom: 120px

   Header block (1572:13001) — 1512 × 349:
     Text group (1572:13002): gap 32px (label → heading)
     Gap to button: 40px

   Gallery (1572:13006) — 1512 × 504:
     Slides 440×440 at y=64 (64px top padding, flush bottom)
     Gap between slides: 32px
   ===== */
.glimpse {
  background-color: var(--color-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

.glimpse__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  padding: 0 var(--container-px);
  width: 100%;
}

.glimpse__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.glimpse .label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 1.44px;
  text-transform: uppercase;
  line-height: 1.41;
  color: var(--color-rust);
}

.glimpse__heading {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -2.34px;
  color: var(--color-rust);
  max-width: 772px;
}


/* --- Marquee: continuous scroll, 440×440 square slides, 32px gap ---
   Container 504px tall; slides at y=64 → 64px padding-top, slides flush bottom.
   ------------------------------------------------------------------- */
.glimpse__marquee {
  width: 100%;
  overflow: hidden;
  height: 504px;
  padding-top: 64px;
  box-sizing: border-box;
}

.glimpse__track {
  display: flex;
  gap: 32px;
  width: max-content;
  height: 440px;
}

.glimpse__slide img,
.glimpse__slide > div {
  width: 440px;
  height: 440px;
  object-fit: cover;
  display: block;
}

@keyframes glimpse-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .glimpse {
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 40px;
  }

  .glimpse__heading {
    font-size: var(--text-4xl);
    letter-spacing: -1.5px;
  }

  .glimpse__marquee {
    height: 424px;
    padding-top: 64px;
  }

  .glimpse__track {
    height: 360px;
  }

  .glimpse__slide img,
  .glimpse__slide > div {
    width: 360px;
    height: 360px;
  }
}

@media (max-width: 768px) {
  .glimpse {
    padding-top: 60px;
    padding-bottom: 60px;
    gap: 32px;
  }

  .glimpse__header {
    gap: 32px;
  }

  .glimpse__text {
    gap: 24px;
  }

  .glimpse__heading {
    font-size: var(--text-3xl);
    letter-spacing: -1px;
  }

  .glimpse__marquee {
    height: 304px;
    padding-top: 24px;
  }

  .glimpse__track {
    gap: 16px;
    height: 280px;
  }

  .glimpse__slide img,
  .glimpse__slide > div {
    width: 280px;
    height: 280px;
  }
}