/*
 * Dark page hero for pages that don't load components/kosh-page.css (About, Contact).
 * Same look as the inner-page hero there (".kp-hero" block) — copied, because loading that whole sheet
 * would also tint and recolour the rest of these pages. Keep the two in step.
 * Markup: section.kp-hero[data-dark] > .kp-hero__art + .kp-hero__watermark + .container.kp-hero__inner > .kp-hero__copy
 */
.kp-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-on-dark-2);
  padding: clamp(64px, 8vw, 110px) 0 clamp(64px, 7.5vw, 104px);
}
.kp-hero__art { position: absolute; inset: 0; pointer-events: none; }
.kp-hero__watermark {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-38%);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(90px, 10.5vw, 165px);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 861px) {
  .kp-hero__watermark { top: auto; right: var(--pad); bottom: calc(clamp(64px, 7.5vw, 104px) + 44px - .2em); transform: none; }
}
.kp-hero__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.kp-hero__copy { max-width: 640px; }
.kp-hero__copy--wide { max-width: 760px; }
.kp-hero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-on-dark-3);
  margin-bottom: 22px;
}
.kp-hero .kp-hero__hl { font-size: clamp(46px, 5.6vw, 84px); line-height: 1.04; color: #fff; }
.kp-hero .kp-hero__hl em { color: var(--color-secondary); }
.kp-hero__body { max-width: 500px; margin-top: 30px; font-size: var(--fs-body); color: var(--text-on-dark-2); }
.kp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; }
.kp-hero strong { color: #fff; }
.kp-btn-red { background: var(--color-secondary); border-color: var(--color-secondary); }
.kp-btn-red:hover { background: #fff; border-color: #fff; color: var(--text-primary); }
@media (max-width: 860px) {
  .kp-hero__inner { flex-direction: column-reverse; gap: 28px; }
  .kp-hero__watermark { top: auto; bottom: 8%; transform: none; }
}