/* Only this hero changes. The full reference scene is a single opaque image. */
.hero.hero--reference {
  width: min(880px, 100%);
  margin-inline: auto;
  overflow: visible;
  padding: 0;
  background: #000;
}
.hero--reference::before,
.hero--reference::after {
  inset: 8px 2.31%;
  border: 1px solid #d8b37252;
  z-index: 3;
}
.hero--reference::after {
  inset: 13px 3.53%;
  border-color: #d8b37224;
}
.hero--reference .hero-grid { display: block; width: 100%; }
.hero--reference .hero-intro {
  position: relative;
  z-index: 4;
  isolation: isolate;
  border: 0;
  padding: 32px 10.8% 0;
  text-align: center;
}
.hero--reference .hero-flourish {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  width: 100%;
  height: clamp(140px, 48vw, 300px);
  overflow: visible;
  color: #d4ad6b;
  opacity: .44;
  pointer-events: none;
}
.hero--reference .hero-intro > :not(.hero-flourish) { position: relative; z-index: 1; }
.hero--reference h1 { font-size: clamp(3rem, 14.65vw, 5rem); }
.hero--reference .hero-intro .hero-motto { margin-bottom: 8px; }
.hero--reference .hero-scene { position: relative; container-type: inline-size; width: 100%; border: 0; }
.hero--reference .hero-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  text-align: center;
  pointer-events: none;
}
.hero--reference .hero-description {
  position: absolute;
  top: 1.5%;
  inset-inline: 10.8%;
  max-width: none;
  margin: 0;
  color: #d5d6d0;
  font-size: clamp(.8rem, 3.4vw, 1.9rem);
  font-size: clamp(.8rem, 3.4cqw, 1.9rem);
  line-height: 1.68;
  pointer-events: auto;
}
.hero--reference .hero-actions {
  position: absolute;
  top: 13.26%;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3cqw, 26px);
  margin: 0;
}
.hero--reference .hero-actions a { pointer-events: auto; }
.hero--reference .hero-actions .button {
  width: clamp(188px, 47.3cqw, 416px);
  min-width: 0;
  min-height: clamp(45px, 11cqw, 97px);
  gap: clamp(17px, 4.1cqw, 36px);
  padding: 10px 18px;
  background: linear-gradient(110deg, #edca8c, #d1a057);
  border-color: #f0d6a69c;
  border-width: .8px;
  border-radius: 28px;
  color: #15120c;
  font-size: clamp(.92rem, 3.4vw, 1.9rem);
  font-size: clamp(.92rem, 3.4cqw, 1.9rem);
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: inset 0 1px 0 #ffffff48, 0 5px 16px #8d672b29;
}
.hero--reference .hero-actions .button:hover {
  background: #f0d6a6;
  border-color: #f0d6a6;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #ffffff58, 0 9px 22px #8d672b38;
}
.hero--reference .hero-actions .line-icon { width: clamp(23px, 4.6cqw, 40px); height: clamp(23px, 4.6cqw, 40px); }
.hero--reference .hero-actions .text-link {
  justify-content: center;
  min-width: clamp(153px, 38.4cqw, 338px);
  min-height: clamp(39px, 9cqw, 79px);
  padding: 5px 0;
  gap: clamp(14px, 3cqw, 26px);
  border: 0;
  color: #e2c98f;
  font-size: clamp(.875rem, 3.4vw, 1.9rem);
  font-size: clamp(.875rem, 3.4cqw, 1.9rem);
}
.hero--reference .hero-actions .text-link span { font-size: 1.35em; line-height: 1; }
.hero--reference .hero-art { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; }
.hero--reference .hero-art img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.hero--reference .hero-art figcaption {
  position: absolute;
  top: 78.6%;
  inset-inline: 0;
  bottom: auto;
  z-index: 2;
  padding: 0 28px;
  color: #dedbd1;
  font: italic 500 clamp(1rem, 4.08vw, 2.25rem)/1.5 var(--serif);
  font-size: clamp(1rem, 4.08cqw, 2.25rem);
  text-align: center;
}
.hero--reference .hero-art .care-strip {
  position: absolute;
  right: 0;
  bottom: clamp(18px, 4.5cqw, 34px);
  left: 0;
  z-index: 2;
  border: 0;
  background: transparent;
}
.hero--reference .hero-art .care-strip-inner {
  display: flex;
  width: 100%;
  max-width: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(5px, 1.5cqw, 12px) clamp(12px, 3.2cqw, 26px);
  margin: 0;
  padding: 0 3%;
  list-style: none;
  box-sizing: border-box;
}
.hero--reference .hero-art .care-strip-inner li {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1cqw, 8px);
  color: #e8dfcf;
  font-size: clamp(.58rem, 1.8cqw, .82rem);
  letter-spacing: .02em;
  line-height: 1.35;
  text-shadow: 0 1px 3px #000;
}
.hero--reference .hero-art .care-strip-inner svg {
  width: clamp(12px, 2.2cqw, 17px);
  height: clamp(12px, 2.2cqw, 17px);
  flex: 0 0 auto;
  color: #dfb86f;
}
@media (max-width: 600px) {
  .hero--reference .hero-art .care-strip-inner li:last-child { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .hero--reference .hero-intro { padding-inline: 8.5%; }
  .hero--reference .hero-description { inset-inline: 8.5%; font-size: .75rem; line-height: 1.6; }
  .hero--reference .hero-art .care-strip-inner { gap: 5px 11px; }
}