/* Scene 04: P2 what HRM is. Cover plus definition split. Scoped to #scene-4. */
#scene-4 .state-layer { width: 100%; height: 100%; }

/* State 0: cover. Copy sits right so the worker on the left reads clearly. */
#scene-4 .s04-cover { position: relative; width: 100%; height: 100%; background: #07090e; }
#scene-4 .s04-cover-photo { position: absolute; inset: 0; overflow: hidden; }
#scene-4 .s04-cover-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 42%; display: block; }
#scene-4 .s04-cover-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,9,14,0.04) 0%, rgba(7,9,14,0.30) 46%, rgba(7,9,14,0.80) 100%),
    linear-gradient(0deg, rgba(7,9,14,0.66) 0%, rgba(7,9,14,0) 46%);
}
#scene-4 .s04-cover-copy {
  position: absolute; z-index: 2;
  left: 690px; right: 84px; bottom: 88px;
}
#scene-4 .s04-cover-copy .kicker { margin-bottom: 14px; }
#scene-4 .s04-cover-copy .headline { font-size: 66px; line-height: 1.06; margin-bottom: 0; }

/* State 1: photo left half, definition and cards right. */
#scene-4 .s04-split { width: 100%; height: 100%; display: grid; grid-template-columns: 45% 55%; }
#scene-4 .s04-photo { position: relative; height: 100%; overflow: hidden; background: #05070b; }
#scene-4 .s04-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; }
#scene-4 .s04-copy { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
#scene-4 .s04-copy .kicker { margin-bottom: 10px; }
#scene-4 .s04-copy .headline { font-size: 40px; line-height: 1.1; margin-bottom: 12px; }
#scene-4 .s04-copy .dek { font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
#scene-4 .s04-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
#scene-4 .s04-card {
  border: 1px solid rgba(244,240,232,0.14);
  background: var(--panel-hi);
  padding: 14px 18px 13px;
  display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start;
}
#scene-4 .s04-card .tag { grid-row: span 2; margin: 2px 0 0; font-family: var(--mono); font-size: 13px; color: var(--gold); }
#scene-4 .s04-card h4 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin-bottom: 4px; }
#scene-4 .s04-card p { font-size: 14.5px; line-height: 1.4; color: var(--muted); }