/* Bright workshop: product presentation on a raised workbench. */
.hero {
  height: auto;
  min-height: 0;
  margin-top: 76px;
  aspect-ratio: 1920 / 819;
  background: #f7f8f9;
}
.hero-camera { inset: 0; mask-image: none; background: #f7f8f9; }
.hero-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-shade { display: none; }
.hero-copy {
  left: 5.5%;
  right: auto;
  top: 14%;
  width: 43%;
}
.hero-copy > .eyebrow {
  font-size: 12px;
  letter-spacing: .16em;
  color: #c5cbd0;
}
.hero h1 {
  font-family: Barlow, Arial, sans-serif;
  margin-top: clamp(18px, 1.45vw, 28px);
  font-size: clamp(42px, 4.8vw, 100px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
}
.hero h1 span { font-weight: inherit; }
.hero-intro {
  margin-top: clamp(16px, 1.35vw, 26px);
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.5;
}
.hero-copy > .shop-button {
  min-height: 44px;
  margin-top: clamp(18px, 1.35vw, 26px);
  padding: 12px 20px;
  gap: 28px;
  font-size: 14px;
}
/* A separate copy area keeps the products visible on narrow screens. */
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    margin-top: 76px;
    aspect-ratio: auto;
  }
  .hero-copy {
    position: relative;
    order: 0;
    inset: auto;
    width: auto;
    padding: 36px 6% 28px;
  }
  .hero-copy > .eyebrow { font-size: 12px; }
  .hero h1 { font-size: clamp(34px, 8.4vw, 72px); margin-top: 20px; }
  .hero-intro { font-size: 16px; margin-top: 20px; }
  .hero-copy > .shop-button { margin-top: 22px; }
  .hero-camera {
    position: relative;
    order: 1;
    inset: auto;
    width: 100%;
    aspect-ratio: 1.7;
    overflow: hidden;
  }
  .hero-photo { object-position: right center; }
}

@media (max-width: 800px) { .hero { margin-top: 68px; } }