/* Only the entrance section is changed. All selectors are scoped to #hero. */
#hero.bozdan-showroom-hero {
  display: flex;
  align-items: center;
  min-height: min(900px, 100svh);
  padding: 124px 0 34px;
  isolation: isolate;
  background: radial-gradient(ellipse at 76% 42%, #eee4d5 0, #f7f3ec 40%, #fbf9f5 74%);
}

#hero .hero-layout {
  --hero-gutter: clamp(24px, 3.3vw, 64px);
  --hero-bleed: calc(var(--hero-gutter) + max(0px, calc(50vw - 900px)));
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding: 38px var(--hero-gutter);
}

#hero .hero-copy {
  position: relative;
  min-width: 0;
  z-index: 1;
}

#hero .hero-copy h1 {
  font-size: clamp(48px, 5.35vw, 96px);
  margin-bottom: 28px;
}

#hero .hero-copy > p {
  max-width: 470px;
  margin-bottom: 30px;
}

#hero .hero-actions {
  gap: 12px;
}

#hero .hero-actions a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 15px 24px;
}

#hero .hero-facts {
  gap: clamp(20px, 2vw, 34px);
  margin-top: 38px;
}

#hero .hero-facts b {
  display: inline-block;
  margin-bottom: 3px;
}

#hero .hero-visual {
  position: relative;
  z-index: 0;
  min-width: 0;
  align-self: center;
  margin-left: -30%;
  margin-right: calc(0px - var(--hero-bleed));
}

#hero .hero-showroom {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  /* Keep the original image intact; blend its edges into the hero with CSS. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .06) 8%, rgba(0, 0, 0, .55) 19%, #000 31%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 98%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .06) 8%, rgba(0, 0, 0, .55) 19%, #000 31%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 98%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#hero .hero-showroom img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

#hero .hero-order {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  margin: 26px auto 0;
  padding-top: 19px;
  border-top: 1px solid rgba(168, 97, 55, .24);
}

#hero .hero-order-number {
  flex: 0 0 auto;
  font-size: clamp(26px, 2.5vw, 38px);
  font-variant-numeric: tabular-nums;
}

#hero .hero-order-copy {
  min-width: 0;
}

#hero .hero-order-copy > div:first-child {
  margin-top: 0;
  font-size: 14px;
}

#hero .hero-order-copy > div:last-child {
  margin-top: 4px;
  max-width: 255px;
  line-height: 1.55;
}

@media (min-width: 1800px) {
  #hero .hero-copy > p { max-width: 500px; }
}

@media (max-width: 1199px) and (min-width: 1024px) {
  #hero .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  #hero .hero-copy h1 { font-size: 5.05vw; }
  #hero .hero-actions a { padding-inline: 17px; font-size: 14px; }
  #hero .hero-copy > p { font-size: 16px; }
  #hero .hero-order { gap: 14px; }
}

@media (max-width: 1023px) {
  #hero.bozdan-showroom-hero { min-height: 0; padding-top: 120px; padding-bottom: 36px; }
  #hero .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 26px; }
  #hero .hero-copy { max-width: 680px; }
  #hero .hero-copy h1 { font-size: clamp(48px, 9vw, 80px); }
  #hero .hero-copy > p { max-width: 580px; }
  #hero .hero-visual { margin-inline: calc(0px - var(--hero-gutter)); }
  #hero .hero-showroom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 98%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 98%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  #hero .hero-order { max-width: calc(100% - var(--hero-gutter) - var(--hero-gutter)); }
  #hero .hero-order-number { font-size: 32px; }
}

@media (max-width: 639px) {
  #hero.bozdan-showroom-hero { padding-top: 106px; padding-bottom: 18px; }
  #hero .hero-layout { --hero-gutter: 22px; gap: 22px; padding: 24px var(--hero-gutter); }
  #hero .hero-copy > div:first-child { font-size: 9px; letter-spacing: .16em; margin-bottom: 25px; }
  #hero .hero-copy h1 { font-size: clamp(42px, 11.6vw, 66px); margin-bottom: 24px; }
  #hero .hero-copy > p { font-size: 16px; line-height: 1.7; margin-bottom: 25px; }
  #hero .hero-actions { gap: 10px; }
  #hero .hero-actions a { padding: 14px 18px; min-height: 50px; font-size: 13px; }
  #hero .hero-facts { gap: 20px; margin-top: 30px; font-size: 12px; }
  #hero .hero-facts b { font-size: 15px; }
  #hero .hero-order { margin-top: 19px; gap: 14px; padding-top: 16px; }
  #hero .hero-order-number { font-size: 27px; }
  #hero .hero-order-copy > div:first-child { font-size: 12px; }
  #hero .hero-order-copy > div:last-child { font-size: 10px; max-width: 190px; }
}

@media (max-width: 359px) {
  #hero .hero-layout { --hero-gutter: 18px; }
  #hero .hero-actions { flex-direction: column; align-items: flex-start; }
  #hero .hero-facts { gap: 16px; }
}