/* Homepage-only proportions. Other pages and sections retain their styles. */
.hero .hero-intro {
  padding-block: 18px;
  gap: 7%;
}

.hero .hero-intro .eyebrow {
  margin-bottom: 12px;
  font-size: 9px;
}

.hero h1 {
  font-size: clamp(40px, 3.65vw, 60px);
}

.hero .hero-links { margin-top: 18px; }

/* One shared frame and fitting mode for all four photographs. */
.hero .carousel-stage,
.hero .carousel-bar,
.hero .carousel-image-note {
  width: calc(100% - 96px);
  max-width: 1240px;
  margin-inline: auto;
}

.hero .carousel-stage {
  height: clamp(500px, 35vw, 580px);
  max-height: 620px;
  aspect-ratio: auto;
  background: var(--cream);
}

.hero .slide img {
  object-fit: contain;
  object-position: 50% 50%;
}

/* Reserve the same caption line on every slide to prevent layout movement. */
.hero .carousel-image-note {
  min-height: 20px;
  margin-top: 6px;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: .035em;
  color: var(--muted);
}

.hero .carousel-bar { padding-block: 8px; }

.collection.section-space { padding-block: 40px 96px; }

.collection .section-heading,
.collection .collection-grid {
  width: 100%;
  max-width: 1148px;
  margin-inline: auto;
}

.collection .section-heading {
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  margin-bottom: 36px;
}

.collection h2 { font-size: clamp(38px, 3.6vw, 56px); }
.collection .section-intro h3 { margin-bottom: 12px; }
.collection .section-intro p { font-size: 13px; line-height: 1.75; }
.collection .section-intro .text-link { margin-top: 12px; }

.collection .collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 28px;
}

.collection .collection-image {
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.collection .collection-image img {
  object-fit: contain;
  transform: none;
  transition: none;
}

.collection .card-caption { margin-top: 16px; }
.collection .card-caption h3 { font-size: 25px; }
.collection .card-caption span { font-size: 21px; }

@media (max-width: 850px) {
  .hero .hero-intro { gap: 5%; }
  .hero .carousel-stage { height: 460px; }
  .collection .section-heading { gap: 28px; }
  .collection .collection-grid { gap: 36px 24px; }
  .collection .card-caption h3 { font-size: 22px; }
}

@media (max-width: 700px) {
  .hero .hero-intro { padding-block: 22px; gap: 14px; }
  .hero .hero-intro .eyebrow { font-size: 8px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 42px); }
  .hero .hero-links { margin-top: 12px; }
  .hero .carousel-stage { height: clamp(360px, 100vw, 420px); }
  .hero .carousel-bar { padding-block: 8px; }

  .hero .carousel-stage,
  .hero .carousel-bar,
  .hero .carousel-image-note { width: calc(100% - 36px); }
  .hero .carousel-image-note { font-size: 9px; }

  .collection.section-space { padding-block: 40px 64px; }
  .collection .section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
  .collection h2 { font-size: 38px; }
  .collection .section-intro h3 { font-size: 23px; }
  .collection .collection-grid { grid-template-columns: 1fr; max-width: 560px; gap: 34px; }
  .collection .card-caption { margin-top: 13px; }
  .collection .card-caption h3 { font-size: 23px; }
}