/* LOB Hero */
.upside-lobhero { padding: 0; overflow: hidden; }
.upside-lobhero.surf-care { background: linear-gradient(180deg, var(--hero-care-from) 0%, var(--hero-care-to) 100%); }
.upside-lobhero.surf-white { background: linear-gradient(180deg, #fff 0%, var(--light) 100%); }
.upside-lobhero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center;
  padding-top: 72px;
  padding-bottom: 84px;
}
.upside-lobhero-lede { font-size: 18.5px; max-width: 480px; margin: 24px 0 32px; }
.upside-lobhero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.upside-lobhero-art { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.upside-lobhero-img { width: 100%; min-height: 280px; }
.upside-lobhero-chip {
  position: absolute; top: 18px; right: 6px; background: #fff; color: var(--dark);
  font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: 0 10px 26px rgba(9, 76, 138, .14);
}
/* No hero image (or it failed to load) → single column, drop the empty art panel. */
.upside-lobhero-inner:not(:has(.upside-lobhero-art img)) { grid-template-columns: 1fr; }
.upside-lobhero-art:not(:has(img)) { display: none; }

@media (max-width: 1199px) {
  .upside-lobhero-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; padding-bottom: 60px; }
  .upside-lobhero-art { order: -1; min-height: 200px; }
}