.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); width: min(100% - 3rem, var(--content)); min-height: 630px; align-items: center; gap: clamp(2rem, 6vw, 6rem); margin: auto; padding-block: clamp(3rem, 7vw, 6rem); }
.hero__content { min-width: 0; }
.hero h1 { max-width: 610px; margin-bottom: 1.5rem; }
.hero h1 em { color: var(--gold); font-weight: 400; }
.hero p:not(.eyebrow) { max-width: 470px; margin-bottom: 2rem; color: var(--muted); }
.hero-carousel-shell { width: min(100%, 560px); min-width: 0; height: clamp(440px, 47vw, 560px); justify-self: center; }
.hero-carousel-shell .v-application, .hero-carousel-shell .v-application__wrap { min-height: 0 !important; background: transparent !important; color: inherit !important; }
.hero-carousel-shell .v-application, .hero-carousel-shell .v-application__wrap, .hero-carousel-shell .hero-carousel { width: 100%; height: 100%; }
.hero-carousel { position: relative; overflow: hidden; touch-action: pan-y; border: 1px solid rgb(139 106 54 / 18%); border-radius: 30px; background: var(--surface-deep); box-shadow: var(--shadow); }
.hero-carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.hero-carousel__viewport, .hero-carousel__viewport .v-window, .hero-carousel__viewport .v-window__container, .hero-carousel__viewport .v-window-item { height: 100% !important; }
.hero-carousel__viewport { border-radius: inherit; }
.hero-carousel__slide { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; color: #fff; }
.hero-carousel__image, .hero-carousel__shade { position: absolute; inset: 0; display: block; }
.hero-carousel__image { background-repeat: no-repeat; background-size: cover; transform: scale(1.01); transition: transform 700ms ease; }
.hero-carousel__shade { background: linear-gradient(180deg, rgb(25 19 13 / 5%) 24%, rgb(25 19 13 / 78%) 100%); }
.hero-carousel__caption { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: grid; gap: .35rem; padding: clamp(1.5rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.5rem) 4.6rem; }
.hero-carousel__caption small { font-size: .66rem; font-weight: 700; letter-spacing: .2em; }
.hero-carousel__caption strong { max-width: 420px; font: 400 clamp(2rem, 4vw, 3.5rem)/1.05 var(--serif); letter-spacing: -.03em; }
.hero-carousel__caption > span { width: max-content; margin-top: .25rem; border-bottom: 1px solid rgb(255 255 255 / 70%); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-carousel__controls { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.2rem; display: flex; align-items: center; gap: .75rem; }
.hero-carousel__controls > button { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; background: rgb(25 19 13 / 42%); color: #fff; font-size: 1rem; backdrop-filter: blur(6px); transition: background 200ms ease, border-color 200ms ease; }
.hero-carousel__controls > button:hover, .hero-carousel__controls > button:focus-visible { border-color: #fff; background: rgb(25 19 13 / 72%); }
.hero-carousel__dots { display: flex; align-items: center; gap: .35rem; }
.hero-carousel__dots button { width: .48rem; height: .48rem; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.hero-carousel__dots button.is-active { background: #fff; }
.hero-carousel__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-carousel__status { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.hero-carousel__fallback { display: grid; width: 100%; height: 100%; place-items: center; margin: 0 !important; padding: 2rem; border-radius: 30px; background: var(--surface); color: var(--muted); text-align: center; }
.collection-section { border-top: 1px solid var(--line); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.collection-card { display: flex; min-height: 350px; flex-direction: column; justify-content: end; padding: 1.5rem; color: #fff; isolation: isolate; position: relative; overflow: hidden; }
.collection-card::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(20 16 12 / 76%)); content: ""; }
.collection-card span, .collection-card small { font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; }
.collection-card strong { margin: .3rem 0 .8rem; font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--serif); }
.story { margin-bottom: clamp(4rem, 9vw, 8rem); padding: clamp(3rem, 8vw, 7rem); background: var(--surface); text-align: center; }
.story h2, .story > p:not(.eyebrow) { max-width: 650px; margin-inline: auto; }
.story > p:not(.eyebrow) { color: var(--muted); }
.story a { display: inline-block; margin-top: 1rem; border-bottom: 1px solid var(--gold); font-size: .8rem; }

@media (hover: hover) { .hero-carousel__slide:hover .hero-carousel__image { transform: scale(1.035); } }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: auto; gap: 2.5rem; }.hero-carousel-shell { height: clamp(400px, 52vw, 480px); }.collection-grid { grid-template-columns: 1fr 1fr; }.collection-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 680px) { .hero { grid-template-columns: 1fr; width: min(100% - 2rem, var(--content)); padding-block: 3rem 4rem; }.hero-carousel-shell { width: 100%; height: min(105vw, 400px); }.hero-carousel { border-radius: 24px; }.hero-carousel__caption { padding: 1.5rem 1.3rem 4.3rem; }.hero-carousel__caption strong { font-size: clamp(1.8rem, 9vw, 2.6rem); }.collection-grid { grid-template-columns: 1fr; }.collection-card, .collection-card:last-child { grid-column: auto; min-height: 310px; }.story { padding-inline: 1.5rem; } }
@media (max-width: 375px) { .hero h1 { font-size: 2.55rem; }.hero-carousel-shell { height: 330px; }.hero-carousel__controls { right: 1rem; bottom: 1rem; }.hero-carousel__controls > button { width: 2.15rem; height: 2.15rem; } }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__image { transition: none; }
}