/* Final hero — selected Version 2 */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 116px);
  margin: 0;
  padding: clamp(80px, 8vw, 130px) max(4vw, calc((100vw - 1480px) / 2)) 72px;
  display: block;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(24,23,22,.86) 0%, rgba(24,23,22,.58) 42%, rgba(24,23,22,.04) 68%, rgba(24,23,22,0) 100%),
    url("./assets/ss-bg.png") center / cover no-repeat #181716;
  overflow: hidden;
}
.hero::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(24,23,22,.68) 0%, rgba(24,23,22,.46) 42%, rgba(24,23,22,.04) 65%, rgba(24,23,22,0) 100%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 4;
  width: min(780px, 49vw);
  max-width: none;
}
.hero .eyebrow { color: var(--accent-text); font-size: 13px; letter-spacing: .26em; }
.hero h1 {
  max-width: 820px;
  color: #fff;
  font-family: var(--font-headline) !important;
  font-size: clamp(58px, 6.4vw, 108px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: .86;
}
.hero h1 em { color: var(--accent-text); }
.hero__lead {
  max-width: 690px;
  color: #fff;
  font-family: var(--font-subtext) !important;
  font-size: clamp(28px, 2.35vw, 42px);
  line-height: 1.08;
}
.hero__aside {
  max-width: 620px;
  color: #f4e7e1;
  font-family: var(--font-para) !important;
  font-size: 16px;
  line-height: 1.75;
}
.hero .button--wine {
  min-width: 220px;
  color: #181716;
  background: var(--accent-button) !important;
  border-color: var(--accent-button) !important;
}
.hero .button--dark { color: #181716; background: var(--accent-button); border-color: var(--accent-button); }
.hero .button--dark:hover,
.hero .button--wine:hover,
.hero .button--outline:hover {
  color: #fff;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.hero .text-link:hover {
  color: var(--accent-text);
  background: transparent !important;
  border-color: transparent !important;
}
.hero .button--hero-secondary {
  color: #fff;
  background: transparent;
  border: 0;
  text-decoration-color: #fff;
}
.hero .text-link { color: #fff; border-color: transparent; }
.hero .micro, .hero__scope { color: #aaa19b; }
.hero-stamp { right: 4%; bottom: 11%; color: #181716; background: #f2dfdc; }
.hero__scope { z-index: 5; bottom: 22px; left: max(4vw, calc((100vw - 1480px) / 2)); }


@media (max-width: 800px) {
  .hero { min-height: auto; padding: 62px 16px 0; display: flex; flex-direction: column; background-position: center top; }
  .hero::before { background: linear-gradient(180deg, rgba(24,23,22,.94) 0%, rgba(24,23,22,.86) 47%, rgba(24,23,22,.24) 70%, rgba(24,23,22,.18) 100%); }
  .hero__copy { width: 100%; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(48px, 13vw, 68px); }
  .hero-stamp { right: 12px; bottom: 26px; }
  .hero__scope { position: relative; z-index: 5; bottom: auto; left: auto; order: 3; margin: 22px 0; color: #aaa19b; }
}

/* Hard hero overrides: keep these last so base/mobile CSS cannot win. */
body .hero {
  min-height: calc(100svh - 84px) !important;
  padding-top: clamp(60px, 6vw, 96px) !important;
  padding-bottom: clamp(48px, 5vw, 72px) !important;
  background:
    linear-gradient(90deg, rgba(24,23,22,.82) 0%, rgba(24,23,22,.48) 36%, rgba(24,23,22,.02) 58%, rgba(24,23,22,0) 100%),
    url("./assets/ss-bg.png") center / cover no-repeat #181716 !important;
}
body .hero::before {
  background: linear-gradient(90deg, rgba(24,23,22,.56) 0%, rgba(24,23,22,.28) 36%, rgba(24,23,22,0) 58%, rgba(24,23,22,0) 100%) !important;
}
body .hero .eyebrow {
  margin-bottom: 22px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
}
body .hero .eyebrow::before {
  display: none !important;
  content: none !important;
}
body .hero__copy {
  width: min(780px, 49vw) !important;
}
body .hero h1,
body .hero h1 em {
  font-family: var(--font-headline) !important;
  letter-spacing: -0.06em !important;
}
body .hero h1 {
  max-width: 760px !important;
  margin: 0 0 18px !important;
  font-size: clamp(52px, 5.55vw, 96px) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  text-transform: uppercase !important;
}
body .hero h1 span {
  display: block;
}
body .hero h1 .accent-line {
  color: var(--accent-text);
  font-family: var(--font-subtext) !important;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.04em !important;
  text-transform: lowercase;
}
body .hero__lead {
  font-family: var(--font-subtext) !important;
  max-width: 720px !important;
  margin-top: 0 !important;
  font-size: clamp(27px, 2.1vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
body .hero__aside {
  max-width: 650px !important;
  margin-top: 24px !important;
  margin-bottom: 34px !important;
  font-family: var(--font-para) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}
body .hero__actions {
  gap: 34px !important;
  align-items: center !important;
}
body .hero .button--wine,
body .site-header .desktop-cta {
  color: #181716 !important;
  background: var(--accent-button) !important;
  border-color: var(--accent-button) !important;
}
body .hero .button--wine:hover,
body .site-header .desktop-cta:hover {
  color: #fff !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
body .hero .button--wine {
  min-width: 285px !important;
  min-height: 60px !important;
  padding: 14px 30px !important;
  justify-content: center !important;
  gap: 18px !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
}
body .hero .button--wine span {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-block !important;
  flex: 0 0 26px !important;
  color: transparent !important;
  background: #000 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
}
body .hero .button--wine span::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 9px !important;
  content: "" !important;
  background: #fff !important;
  border: 0 !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  transform: translate(-42%, -50%) !important;
}
body .hero .text-link.button--hero-secondary {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-decoration: underline !important;
  text-underline-offset: 7px !important;
}
body .hero .text-link.button--hero-secondary:hover {
  color: var(--accent-text) !important;
}
body .hero .text-link.button--hero-secondary span {
  display: none !important;
}

@media (max-width: 800px) {
  body .hero {
    min-height: 100svh !important;
    padding: 42px 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #181716 !important;
  }

  body .hero::before {
    display: none !important;
    content: none !important;
  }

  body .hero::after {
    position: relative;
    z-index: 1;
    width: calc(100% + 36px);
    height: 72svh;
    min-height: 560px;
    margin: 18px -18px 0;
    display: block;
    flex: 0 0 auto;
    content: "";
    background:
      linear-gradient(180deg, #181716 0%, rgba(24,23,22,.78) 9%, rgba(24,23,22,0) 28%, rgba(24,23,22,.04) 66%, #181716 100%),
      url("./assets/sec1-mobile.png") 88% top / 126% auto no-repeat;
    pointer-events: none;
  }

  body .hero__copy {
    z-index: 3;
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }

  body .hero .eyebrow {
    margin-bottom: 18px !important;
    font-size: 8px !important;
    letter-spacing: .2em !important;
    line-height: 1.5 !important;
  }

  body .hero h1 {
    max-width: 100% !important;
    margin-bottom: 18px !important;
    font-size: clamp(43px, 12.9vw, 62px) !important;
    line-height: .88 !important;
  }

  body .hero__aside {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  body .hero__lead {
    max-width: 100% !important;
    font-size: clamp(22px, 6.4vw, 29px) !important;
  }

  body .hero__actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body .hero .button--wine {
    width: min(100%, 285px) !important;
    min-height: 56px !important;
  }

  body .hero .text-link.button--hero-secondary {
    width: min(100%, 285px) !important;
    align-self: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    text-align: center !important;
  }
}