/* ============================================================
   JDMS for Utilities — additive styles on top of style.css
   ============================================================ */

/* This page's hero visual is a static campaign photo, not a video link. */
.video-card { cursor: default; }

/* Headline spans the full hero width, above the two-column content row. */
.hero__headline { padding-top: 88px; }
.hero__grid { padding-top: 40px; }

@media (max-width: 980px) {
  .hero__headline { padding-top: 56px; }
  .hero__grid { padding-top: 32px; }
}

/* ---------- Scene callout (the hot-open vignette) ---------- */
.scene { max-width: var(--hrz-container); margin: 0 auto; padding: 0 var(--hrz-gutter); }
.scene-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 48px;
  border-left: 3px solid var(--hrz-orange);
  background: var(--hrz-bone);
  border-radius: 0 var(--hrz-radius-md) var(--hrz-radius-md) 0;
}
.scene-card p {
  margin: 0;
  font-family: var(--hrz-font-italic);
  font-style: italic;
  font-size: 21px;
  line-height: 1.65;
  color: var(--hrz-graphite);
  text-wrap: pretty;
}

/* ---------- Rising tension ---------- */
.tension { max-width: var(--hrz-container); margin: 96px auto 0; padding: 0 var(--hrz-gutter); }
.tension__intro { max-width: 680px; }
.tension__title {
  margin: 20px 0 0; font-family: var(--hrz-font-display); font-weight: 700;
  font-size: 42px; line-height: 1.2; letter-spacing: -.02em; color: var(--hrz-ink); text-wrap: balance;
}
.tension-list { display: grid; gap: 0; margin-top: 48px; }
.tension-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--hrz-mist); font-size: 18px; line-height: 1.55; color: var(--hrz-graphite);
}
.tension-item:last-child { border-bottom: 1px solid var(--hrz-mist); }
.tension-item__mark { color: var(--hrz-orange); font-weight: 700; }
.tension-item strong { color: var(--hrz-ink); }

/* ---------- Crisis / turning point (centered navy statement) ---------- */
.crisis-section { background: var(--hrz-navy); color: var(--hrz-on-navy); margin-top: 96px; }
.crisis-section__inner { max-width: 900px; margin: 0 auto; padding: 96px var(--hrz-gutter); text-align: center; }
.crisis-section .eyebrow { color: var(--hrz-orange-glow); }
.crisis-section__title {
  margin: 26px 0 0; font-family: var(--hrz-font-display); font-weight: 700;
  font-size: 42px; line-height: 1.22; letter-spacing: -.02em; color: var(--hrz-paper); text-wrap: balance;
}
.crisis-section__body {
  margin: 24px 0 0; font-size: 19px; line-height: 1.65; color: var(--hrz-on-navy-soft);
  max-width: 68ch; margin-left: auto; margin-right: auto; text-wrap: pretty;
}

/* ---------- Pain -> solution mapping ---------- */
.solutions { max-width: var(--hrz-container); margin: 96px auto 0; padding: 0 var(--hrz-gutter); }
.solutions__intro { max-width: 720px; }
.solutions__title {
  margin: 20px 0 0; font-family: var(--hrz-font-display); font-weight: 700;
  font-size: 44px; line-height: 1.2; letter-spacing: -.02em; color: var(--hrz-ink); text-wrap: balance;
}
.solution-grid { display: grid; gap: 24px; margin-top: 56px; }
.solution-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--hrz-mist); border-radius: var(--hrz-radius-md); overflow: hidden;
}
.solution-card__problem, .solution-card__fix { padding: 28px 32px; }
.solution-card__problem { background: var(--hrz-bone); }
.solution-card__fix { background: var(--hrz-paper); }
.solution-card__label {
  font-family: var(--hrz-font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
.solution-card__problem .solution-card__label { color: var(--hrz-slate); }
.solution-card__fix .solution-card__label { color: var(--hrz-orange); }
.solution-card__text { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--hrz-graphite); }
.solution-card__problem .solution-card__text { color: var(--hrz-slate); }
.solution-card__fix .solution-card__text { color: var(--hrz-ink); }

/* ---------- Proof band ---------- */
.proof { max-width: var(--hrz-container); margin: 96px auto 0; padding: 0 var(--hrz-gutter); }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.proof__title {
  margin: 20px 0 0; font-family: var(--hrz-font-display); font-weight: 700;
  font-size: 36px; line-height: 1.2; letter-spacing: -.02em; color: var(--hrz-ink); text-wrap: balance;
}
.proof-list { display: grid; gap: 18px; margin-top: 22px; }
.proof-item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--hrz-graphite); }
.proof-item span:first-child { color: var(--hrz-orange); font-weight: 700; }
.proof-badges { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; background: var(--hrz-bone); border-radius: var(--hrz-radius-md); padding: 48px; }
.proof-badges img { height: 64px; width: auto; display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .solution-card { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: 1fr; }
  .proof-badges { padding: 32px; gap: 24px; }
}

@media (max-width: 640px) {
  .tension__title, .solutions__title { font-size: 30px; }
  .crisis-section__title { font-size: 28px; }
  .crisis-section__body { font-size: 17px; }
  .scene-card { padding: 28px; }
  .scene-card p { font-size: 18px; }
  .proof__title { font-size: 26px; }
}