/* ============================================================
   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; }

/* ---------- Photography ---------- */
/* Scene: photo beside the vignette it illustrates. */
.scene--photo {
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: stretch;
}
.scene--photo .scene-card { max-width: none; margin: 0; display: flex; align-items: center; }
.scene-photo {
  margin: 0; border-radius: var(--hrz-radius-md); overflow: hidden; box-shadow: var(--hrz-shadow-card);
}
.scene-photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 55% 50%; display: block; }

/* Turning point: the grid at dusk behind the statement, towers left visible below it. */
.crisis-section--photo {
  background:
    linear-gradient(to bottom, rgba(8,17,31,.92) 0%, rgba(8,17,31,.84) 55%, rgba(8,17,31,.35) 100%),
    url("/assets/utility-grid-sunset.jpg") center 70% / cover no-repeat,
    var(--hrz-navy);
}
.crisis-section--photo .crisis-section__inner { padding-bottom: 220px; }
.crisis-section--photo .crisis-section__body { color: var(--hrz-on-navy); }

/* SAP: the HR team's view, beside the platform pitch. */
.sap-section__top { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.sap-photo {
  margin: 0; border-radius: var(--hrz-radius-md); overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,.35);
}
.sap-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 50%; display: block; }

/* ---------- Embedded Microsoft Bookings scheduler ---------- */
/* Bookings renders single-column at panel widths and is ~2,280px tall (calendar and
   time slots start ~700px down), so size the frame to its content: visitors scroll the
   page, not a hidden inner scrollbar. Bookings needs >= 350px of width. */
.booking-wizard__frame { display: block; height: 2320px; min-height: 0; }
.booking-wizard__fallback { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--hrz-slate); }
.booking-wizard__fallback a { color: var(--hrz-orange-deep); }
/* Keep the pitch in view beside the tall scheduler on wide screens. */
@media (min-width: 981px) {
  .assessment__inner > div:first-child { position: sticky; top: 112px; }
}
/* Phones: let the frame run edge to edge (panel padding + page gutter) so it gets the full screen width. */
@media (max-width: 640px) {
  .booking-wizard__frame {
    width: calc(100% + 56px + 2 * var(--hrz-gutter));
    margin-inline: calc(-28px - var(--hrz-gutter));
    height: 2320px; border-inline: 0; border-radius: 0;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .scene--photo { grid-template-columns: 1fr; gap: 24px; }
  .scene-photo img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .sap-section__top { grid-template-columns: 1fr; gap: 40px; }
  .crisis-section--photo .crisis-section__inner { padding-bottom: 160px; }
  .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; }
}