/* The original campaign artwork supplies the products, yellow field and launch seal.
   Its left-hand text stays outside the visible image crop; page copy remains HTML. */
.hero {
  background:radial-gradient(ellipse 35% 85% at 6% 40%,#77433380,transparent),#542016;
  overflow:hidden;
}
.hero::after { height:30px; z-index:2; }
.hero-grid {
  width:min(100%,1920px);
  display:grid;
  grid-template-columns:36.458333% 63.541667%;
  aspect-ratio:16/9;
  height:auto;
  min-height:0;
  padding:0;
  gap:0;
  align-items:stretch;
}
.hero-copy {
  align-self:center;
  max-width:none;
  width:100%;
  padding:7% 5% 9% 12%;
  text-align:center;
}
.hero-brands { width:100%; gap:clamp(12px,1.3vw,25px); margin-bottom:clamp(20px,2.2vw,42px); }
.hero-brands .brand-kobber-image { width:70%; height:auto; aspect-ratio:2.68; }
.hero-brands img { width:85%; height:auto; }
.hero h1 .hero-kicker { font-size:clamp(18px,2.48vw,47px); line-height:1.15; letter-spacing:-.025em; }
.hero-lettering { width:100%; margin:clamp(8px,1vw,19px) auto 0; }
.hero-description { font-size:clamp(19px,2.38vw,45px); line-height:1.17; margin-top:clamp(12px,1.5vw,28px); letter-spacing:-.025em; }
.hero-campaign-visual { position:relative; min-width:0; overflow:hidden; background:#ffcf00; }
.hero-campaign-art {
  position:absolute;
  top:0;
  right:0;
  width:157.37705%;
  max-width:none;
  height:100%;
  object-fit:fill;
}
@media (min-width:1921px) {
  .hero { background:linear-gradient(90deg,#542016 50%,#ffcf00 50%); }
}
@media (min-width:701px) and (max-width:900px) {
  .hero-copy { padding-block:6% 9%; }
  .hero-brands { gap:10px; margin-bottom:18px; }
  .hero h1 .hero-kicker { font-size:clamp(16px,2.48vw,22px); }
  .hero-description { font-size:clamp(17px,2.38vw,22px); margin-top:12px; }
}
@media (max-width:700px) {
  .hero-grid { display:flex; flex-direction:column; width:100%; aspect-ratio:auto; }
  .hero-copy { max-width:410px; padding:30px 28px 28px; margin:auto; }
  .hero-brands { gap:12px; margin-bottom:22px; }
  .hero-brands .brand-kobber-image { width:160px; height:auto; }
  .hero-brands img { width:208px; }
  .hero h1 .hero-kicker { font-size:clamp(20px,5.2vw,25px); letter-spacing:-.02em; }
  .hero-lettering { max-width:310px; margin-top:10px; }
  .hero-description { font-size:clamp(22px,5.6vw,27px); line-height:1.2; margin-top:13px; }
  .hero-campaign-visual { width:100%; aspect-ratio:1220/1080; border-radius:36% 0 0 0 / 8% 0 0 0; }
  .hero-campaign-art { width:157.37705%; }
  .hero::after { height:22px; }
  .product-copy h2,.product-coco h2,.product-zero h2,
  .section-title,.faq-grid h2,.buy-inner>h2 {
    text-wrap:balance;
    line-height:1.12;
  }
  .buy-product h3 { text-wrap:balance; line-height:1.15; }
  .product-description { text-wrap:pretty; }
  .buy-product .button { white-space:nowrap; }
}
@media (max-width:360px) {
  .hero-copy { padding:26px 24px; }
  .hero-brands .brand-kobber-image { width:145px; }
  .hero-brands img { width:190px; }
  .hero h1 .hero-kicker { font-size:19px; }
  .hero-description { font-size:21px; }
  .buy-product { grid-template-columns:minmax(0,42%) minmax(0,58%); }
  .buy-product .button { font-size:13px; padding-inline:8px; }
}