.hero {
  isolation: isolate;
  margin: 0 auto;
  max-width: var(--wide);
  min-height: calc(100svh - 10rem);
  overflow: hidden;
  padding: clamp(2.5rem, 8vw, 8rem) var(--page-padding) clamp(3rem, 7vw, 6rem);
  position: relative;
}

.hero::before {
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
  height: min(78vw, 65rem);
  position: absolute;
  right: -34vw;
  top: 4rem;
  width: min(78vw, 65rem);
  z-index: -1;
}

.hero-copy { max-width: 45rem; position: relative; z-index: 2; }

.eyebrow {
  font-size: clamp(.86rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}

.hero h1 {
  color: var(--espresso);
  font: 900 clamp(5rem, 19vw, 17rem) /.9 var(--display);
  letter-spacing: -.04em;
  margin: 0;
  max-width: 9ch;
  text-wrap: balance;
}

.hero-strip {
  background: var(--caramel);
  color: var(--cream);
  display: inline-block;
  font: 900 clamp(3.6rem, 13vw, 11rem) /.9 var(--display);
  letter-spacing: -.025em;
  margin: .15em 0 .4em;
  padding: .02em .16em .08em;
  transform: rotate(-4deg);
}

.hero-story {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  max-width: 28rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.button {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.1rem;
  text-decoration: none;
}

.button-labels {
  display: grid;
  line-height: 1.1;
  overflow: hidden;
}

.button-labels > span { grid-area: 1 / 1; }
.button-labels > span:last-child { transform: translateY(110%); }

.button:focus-visible .button-labels > span { transform: none; }
.button:focus-visible .button-labels > span:last-child { visibility: hidden; }

.button-primary { background: var(--espresso); color: var(--cream); }

.button-outline { border: 1px solid var(--espresso); }

.hero-art { margin: 2rem 0 0 auto; max-width: 54rem; position: relative; width: min(100%, 54rem); }

.hero-art-main { border-radius: 50% 50% 2rem 2rem; overflow: hidden; transform: rotate(3deg); }

.hero-art-main img { aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }

.hero-product {
  border: 5px solid var(--oat);
  border-radius: 50%;
  box-shadow: 0 1rem 2rem rgb(49 23 14 / 18%);
  object-fit: cover;
  position: absolute;
  width: 28%;
}

.hero-product-cake { left: -4%; top: -6%; transform: rotate(-10deg); }
.hero-product-bites { bottom: -9%; right: 4%; transform: rotate(9deg); }
.hero-product-chocolate { right: -5%; top: 10%; transform: rotate(-8deg); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button-labels > span,
  .carousel-arrow-icon { transition: transform 140ms ease; }
  .button:hover .button-labels > span:first-child { transform: translateY(-100%); }
  .button:hover .button-labels > span:last-child { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button-labels > span { transform: none !important; }
  .button-labels > span:last-child { visibility: hidden; }
}