:root {
  --hero-min-height: 420px;
}
.kb-hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-min-height);
  overflow: hidden;
  background: #0f172a;
  color: #fff;
  border-radius: 0;
  max-width: 100%;
  margin: 0;
}
.kb-hero.height-tall { min-height: 560px; }
.kb-hero.height-custom { min-height: var(--hero-min-height); }
.kb-hero.full-bleed { width: 100%; max-width: 100%; margin: 0; }
.kb-hero-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; transition: transform 0.5s ease; }
.kb-hero-slide { position: relative; min-height: var(--hero-min-height); display: grid; align-items: stretch; }
.kb-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kb-hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,var(--overlay,0.3)); }
.kb-hero-overlay { position: relative; z-index: 2; display: flex; padding: clamp(20px, 5vw, 56px); min-height: var(--hero-min-height); }
.kb-hero-overlay.top-left { align-items: flex-start; justify-content: flex-start; }
.kb-hero-overlay.top-center { align-items: flex-start; justify-content: center; }
.kb-hero-overlay.top-right { align-items: flex-start; justify-content: flex-end; }
.kb-hero-overlay.middle-left { align-items: center; justify-content: flex-start; }
.kb-hero-overlay.middle-center { align-items: center; justify-content: center; }
.kb-hero-overlay.middle-right { align-items: center; justify-content: flex-end; }
.kb-hero-overlay.bottom-left { align-items: flex-end; justify-content: flex-start; }
.kb-hero-overlay.bottom-center { align-items: flex-end; justify-content: center; }
.kb-hero-overlay.bottom-right { align-items: flex-end; justify-content: flex-end; }
.kb-hero-content { max-width: min(640px, 90vw); text-align: left; font-size-adjust: 0.52; }
.kb-hero-content.align-center { text-align: center; }
.kb-hero-content.align-right { text-align: right; }
.kb-hero-content h2 { font-size: clamp(1.6rem, 3vw, 3rem); margin: 0 0 12px; text-shadow: var(--kb-hero-heading-shadow, 0 2px 5px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.22)); }
.kb-hero-content p { font-size: clamp(1rem, 1.8vw, 1.2rem); margin: 0 0 18px; color: rgba(255,255,255,0.92); text-shadow: var(--kb-hero-text-shadow, 0 2px 5px rgba(0,0,0,0.46), 0 6px 18px rgba(0,0,0,0.2)); }
.kb-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kb-hero-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.kb-hero-btn.primary { background: var(--accent, #1f6feb); color: #fff; }
.kb-hero-btn.secondary { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.kb-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: none; background: rgba(15,23,42,0.5); color: #fff; width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; line-height: 1; font-weight: 700; }
.kb-hero-nav.prev { left: 16px; }
.kb-hero-nav.next { right: 16px; }
.kb-hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 8px; z-index: 3; }
.kb-hero-dot { width: 10px; height: 10px; border-radius: 999px; border: none; background: rgba(255,255,255,0.4); cursor: pointer; }
.kb-hero-dot.is-active { background: #fff; }

.kb-hero-content h2 {
  max-width: 22ch;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.kb-hero-nav {
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, background 180ms ease;
}
.kb-hero-nav:hover,
.kb-hero-nav:focus-visible {
  background: rgba(15,23,42,0.76);
  transform: translateY(-50%) scale(1.06);
}
.kb-hero-nav:focus-visible,
.kb-hero-dot:focus-visible {
  outline: 3px solid rgba(255,255,255,0.82);
  outline-offset: 3px;
}
.kb-hero-dot {
  width: 8px;
  height: 8px;
  transition: width 180ms ease, background 180ms ease;
}
.kb-hero-dot.is-active { width: 24px; }

@media (max-width: 640px) {
  .kb-hero-content h2 { font-size: clamp(1.65rem, 8vw, 2.15rem); }
  .kb-hero-overlay { padding: 22px 20px 54px; }
  .kb-hero-dots { bottom: 16px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-hero-track,
  .kb-hero-nav,
  .kb-hero-dot { transition: none; }
}
@media (max-width: 900px) {
  .kb-hero-nav { display: none; }
  .kb-hero.full-bleed { margin-left: 0; margin-right: 0; width: 100%; }
}