/* The photograph keeps its original framing. Only the two copy groups fade. */
.hero-section {
  --hero-wine: #590c29;
  --hero-rose: #c42d60;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  width: calc(100% - clamp(24px, 4vw, 64px));
  max-width: 1600px;
  aspect-ratio: 2117 / 743;
  margin: clamp(12px, 1.6vw, 24px) auto 0;
  border-radius: 20px;
  background: #f0dfce;
  color: var(--hero-wine);
  box-shadow: 0 16px 42px rgb(55 27 27 / 10%);
}
.hero-section .hero-image,
.hero-section .hero-image img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-section .hero-image img { object-fit: cover; object-position: center; }
.hero-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 27% 43%, rgb(255 248 240 / 38%), transparent 42%);
}
.hero-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgb(88 45 38 / 12%); border-radius: inherit;
}
.hero-section .hero-arch {
  position: absolute; left: 6.5%; top: -4%; width: 42%; height: 107%;
  border: 1px solid rgb(204 151 78 / 65%);
  border-bottom: 0; border-radius: 50% 50% 0 0;
  mask-image: linear-gradient(#000 55%, transparent 91%);
  pointer-events: none;
}
.hero-section .hero-brand {
  position: absolute; left: 5.5%; top: 5.5%; width: 43%;
  display: flex; flex-direction: column; align-items: center;
}
.hero-section .hero-logo { display: block; width: 9.2cqw; height: 9.2cqw; object-fit: contain; }
.hero-section .hero-tag {
  margin: 1cqw 0 0; color: var(--hero-rose);
  font-family: Inter, Arial, sans-serif; font-size: 1.12cqw; font-weight: 500;
  line-height: 1.4; letter-spacing: .34em; text-indent: .34em;
  white-space: nowrap;
}
.hero-section .hero-copy {
  position: absolute; left: 5.5%; top: 41%; width: 43%; height: 42%;
  text-align: center;
}
.hero-section .hero-message {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 600ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.hero-section .hero-message[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.hero-section .hero-heading {
  margin: 0; color: var(--hero-wine);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 6.8cqw; font-weight: 500; line-height: .86;
  letter-spacing: -.045em; font-synthesis: none;
}
.hero-section .hero-heading > span { white-space: nowrap; }
.hero-section .hero-heading em {
  display: block; color: var(--hero-rose); font-weight: 500;
  margin-top: .03em; white-space: nowrap;
}
.hero-section .hero-support {
  margin: 1.12cqw auto 0; max-width: 33cqw;
  color: var(--hero-wine); font-family: Inter, Arial, sans-serif;
  font-size: 1.16cqw; font-weight: 400; line-height: 1.5; letter-spacing: .17em;
}
.hero-section .hero-support span { display: block; }
.hero-section .hero-ornament {
  position: absolute; left: 17%; bottom: 5%; width: 20%;
  display: flex; align-items: center; gap: 1cqw; color: var(--hero-rose);
  pointer-events: none;
}
.hero-section .hero-ornament::before,
.hero-section .hero-ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .72; }
.hero-section .hero-ornament svg { width: 1.8cqw; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 760px) {
  .hero-section { width: calc(100% - 24px); aspect-ratio: 1; margin-top: 12px; border-radius: 17px; }
  .hero-section::before { background: radial-gradient(ellipse at 20% 43%, rgb(255 248 240 / 26%), transparent 43%); }
  .hero-section .hero-arch { left: -2%; top: 3%; width: 51%; height: 91%; border-radius: 90% 90% 0 0 / 48% 48% 0 0; }
  .hero-section .hero-brand { left: 3.8%; top: 8%; width: 39.2%; }
  .hero-section .hero-logo { width: 18cqw; height: 18cqw; }
  .hero-section .hero-tag { margin-top: 2.5cqw; font-size: 2.05cqw; letter-spacing: .23em; text-indent: .23em; }
  .hero-section .hero-copy { left: 5%; top: 33%; width: 39%; height: 46%; text-align: left; }
  .hero-section .hero-heading { font-size: 11cqw; line-height: .88; letter-spacing: -.05em; }
  .hero-section .hero-heading > span > span { display: block; }
  .hero-section .hero-heading em { margin-top: .035em; font-size: 10.6cqw; }
  .hero-section .hero-support { margin: 2.5cqw 0 0; max-width: 35cqw; font-size: 2.7cqw; line-height: 1.5; letter-spacing: .1em; }
  .hero-section .hero-support span { display: inline; }
  .hero-section .hero-ornament { left: 5%; bottom: 15%; width: 31%; gap: 1.8cqw; }
  .hero-section .hero-ornament svg { width: 3.8cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section .hero-message { transition: none; }
  .hero-section .hero-message:first-child { opacity: 1; pointer-events: auto; }
  .hero-section .hero-message:last-child { opacity: 0; pointer-events: none; }
}