/* Campaign lettering is an independent transparent asset; the surrounding copy remains live text. */
:root { --header-height: 0px; }
html { scroll-padding-top: 20px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero-grid { grid-template-columns:44% 56%; height:760px; min-height:0; }
.hero-copy { width:100%; max-width:480px; text-align:center; padding:30px 0 55px; }
.hero-brands { display:flex; flex-direction:column; align-items:center; gap:18px; width:max-content; margin:0 auto 29px; }
.hero-brands .brand-kobber-image { width:204px; height:76px; background:#fff; }
.hero-brands img { width:260px; height:auto; }
.hero h1 { font-size:inherit; line-height:1; letter-spacing:0; white-space:normal; }
.hero h1 .hero-kicker { color:#fffaf0; font-size:27px; font-weight:900; line-height:1.12; letter-spacing:-.02em; white-space:nowrap; }
.hero-lettering { width:100%; height:auto; margin:14px auto 0; }
.hero-description { font-size:29px; line-height:1.16; letter-spacing:-.02em; margin-top:17px; font-weight:800; }
.hero-description strong { color:var(--yellow); font-weight:900; }
.hero-actions { justify-content:center; gap:12px; margin-top:24px; }
.hero-actions .button { font-size:15px; min-height:48px; padding:13px 20px; }
.hero-products { align-self:stretch; }
.hero-coco { height:82%; top:17%; left:-2%; }
.hero-zero { height:85%; top:15%; left:40%; }
.hero-food-scene { width:127%; left:-12%; bottom:-6%; }
.hero-pack { filter:drop-shadow(3px 8px 5px #21090235) drop-shadow(12px 18px 16px #21090218); }
@media (min-width:1600px) {
  .hero-grid { height:800px; }
  .hero-coco { height:80%; top:19%; left:-4%; }
  .hero-zero { height:83%; top:17%; left:39%; }
}
@media (min-width:901px) and (max-width:1199px) {
  .hero-grid { height:670px; }
  .hero-copy { padding:28px 0 44px; }
  .hero-brands { gap:14px; margin-bottom:25px; }
  .hero-brands .brand-kobber-image { width:172px; height:64px; }
  .hero-brands img { width:220px; }
  .hero h1 .hero-kicker { font-size:23px; }
  .hero-description { font-size:25px; }
  .hero-actions { gap:8px; margin-top:20px; }
  .hero-actions .button { font-size:12px; padding:12px 16px; min-height:44px; }
  .hero-coco { height:75%; top:24%; left:-5%; }
  .hero-zero { height:78%; top:22%; left:37%; }
}
@media (min-width:601px) and (max-width:900px) {
  .hero-grid { height:580px; }
  .hero-copy { padding:24px 0 40px; }
  .hero-brands { gap:13px; margin-bottom:23px; }
  .hero-brands .brand-kobber-image { width:145px; height:54px; }
  .hero-brands img { width:184px; }
  .hero h1 .hero-kicker { font-size:19px; }
  .hero-lettering { margin-top:10px; }
  .hero-description { font-size:21px; margin-top:13px; }
  .hero-actions { gap:7px; margin-top:18px; }
  .hero-actions .button { font-size:10px; padding:11px 12px; min-height:44px; }
  .hero-coco { height:72%; top:27%; left:-9%; }
  .hero-zero { height:75%; top:25%; left:33%; }
  .hero-food-scene { width:130%; left:-15%; bottom:-4%; }
}
@media (max-width:600px) {
  .hero { background-size:auto 100%; background-position:35% center; }
  .hero-grid { display:flex; height:auto; min-height:0; padding-top:0; }
  .hero-copy { padding:32px 24px 0; max-width:400px; }
  .hero-brands { gap:15px; margin-bottom:27px; }
  .hero-brands .brand-kobber-image { width:175px; height:65px; }
  .hero-brands img { width:222px; }
  .hero h1 .hero-kicker { font-size:clamp(20px,5.6vw,26px); }
  .hero-lettering { margin-top:12px; }
  .hero-description { font-size:clamp(22px,6vw,27px); margin-top:14px; }
  .hero-actions { gap:8px; margin-top:22px; }
  .hero-actions .button { font-size:12px; min-height:46px; padding:12px 15px; }
  .hero-products { height:385px; align-self:center; margin-top:6px; }
  .hero-coco { height:83%; top:10%; left:0; }
  .hero-zero { height:86%; top:10%; left:30%; }
  .hero-food-scene { width:105%; left:-4%; bottom:-7%; }
}
@media (max-width:360px) {
  .hero-copy { padding:27px 21px 0; }
  .hero-brands { margin-bottom:23px; }
  .hero-brands .brand-kobber-image { width:155px; height:58px; }
  .hero-brands img { width:200px; }
  .hero-actions .button { font-size:10px; padding:12px 13px; }
  .hero-products { height:345px; }
}