/* Cinematic problem scene with the user-supplied background and progressive cards. */
.problem-experience{--px-navy:#072957;--px-deep:#031a3d;--px-cyan:#30c9ec;--px-muted:#58718c;--px-root-height:705px;--px-revealed:0;position:relative;isolation:isolate;color:#102e51}
.problem-experience *{box-sizing:border-box}
.problem-experience .problem-track{position:relative;min-height:1500px}
.problem-experience .problem-stage{position:sticky;top:16px;width:100%;height:min(720px,calc(var(--px-root-height) - 32px));min-height:480px;display:flex;flex-direction:column}
.problem-experience .problem-scene-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 2px 14px;flex:none}
.problem-experience .problem-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--px-muted)}
.problem-experience .problem-scene-guide{display:flex;gap:12px;align-items:center;color:var(--px-muted);font-size:11px;letter-spacing:.02em}
.problem-experience .problem-scene-guide>span{font-size:18px;color:#126bcc}
.problem-experience .problem-scene{position:relative;isolation:isolate;margin:0;min-height:0;flex:1;border-radius:8px;overflow:hidden;background:#10344d;border:1px solid #7391a4;box-shadow:0 22px 60px #031a3d1c}
.problem-experience .problem-clinical-scene{display:block;width:100%;height:100%;object-fit:cover}
.problem-experience .problem-person{transform-origin:50% 91%;animation:px-breath 6s ease-in-out infinite;animation-play-state:paused}
.problem-experience.is-in-view .problem-person{animation-play-state:running}
.problem-experience .problem-scene-caption{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:95%;border-radius:0;padding:11px 15px;background:#041c32c9;color:#f3f8fc;font-size:11px;letter-spacing:.02em;border-top:1px solid #d5ebed66;line-height:1.45;text-align:center;backdrop-filter:blur(8px)}
.problem-experience .problem-scene-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#30c9ec;box-shadow:0 0 0 4px #30c9ec20}
.problem-experience .problem-signals{position:absolute;inset:62px 25px 95px;list-style:none;padding:0;margin:0;pointer-events:none}
.problem-experience .problem-signal{position:absolute;width:26%;max-width:325px;min-height:114px;display:flex;align-items:flex-start;gap:11px;padding:18px 18px 18px 15px;border:1.5px solid #e6f0f9e6;border-radius:11px;background:linear-gradient(120deg,#030c16ed,#06182aeb);box-shadow:0 10px 28px #0000003d,inset 0 1px #ffffff14;color:#fff;backdrop-filter:blur(12px);pointer-events:auto}
.problem-experience .problem-signal-number{font-size:10px;font-weight:700;line-height:20px;color:#84d7e7;flex:none;width:20px;border-top:2px solid #30c9ec;padding-top:4px}
.problem-experience .problem-signal h3{font-family:inherit;font-size:clamp(14px,1.2vw,19px);font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:0 0 8px;color:#fff}
.problem-experience .problem-signal p{font-size:clamp(11px,.9vw,13px);line-height:1.45;letter-spacing:0;margin:0;color:#c8dae6}
.problem-experience .problem-signal--1{left:2%;top:0;--px-tilt:-2deg}
.problem-experience .problem-signal--2{right:1%;top:4%;--px-tilt:2deg}
.problem-experience .problem-signal--3{left:0;top:37%;--px-tilt:-1.5deg}
.problem-experience .problem-signal--4{right:0;top:41%;--px-tilt:-2deg}
.problem-experience .problem-signal--5{left:1%;top:75%;--px-tilt:1deg}
.problem-experience .problem-signal--6{right:1%;top:78%;--px-tilt:-1deg}
.problem-experience .problem-signal--6 .problem-signal-number{border-top-color:#b3d256}
.problem-experience .problem-signal{transform:rotate(var(--px-tilt))}
.problem-experience.is-enhanced .problem-signal{opacity:0;transform:translate3d(0,26px,0) rotate(0) scale(.97);transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.problem-experience.is-enhanced .problem-signal.is-visible{opacity:1;transform:translate3d(0,0,0) rotate(var(--px-tilt)) scale(1)}
.problem-experience .problem-progress{display:flex;align-items:center;gap:16px;flex:none;height:36px;padding:11px 3px 0;font-size:10px;letter-spacing:.025em;color:var(--px-muted)}
.problem-experience .problem-progress-track{height:2px;background:#58718c29;flex:1;overflow:hidden}
.problem-experience .problem-progress-track i{display:block;width:100%;height:100%;background:#126bcc;transform-origin:left;transform:scaleX(calc(var(--px-revealed) / 6));transition:transform .35s ease}
.problem-experience .problem-progress-count{font-variant-numeric:tabular-nums;color:#126bcc}
.problem-experience .problem-closing{text-align:center;margin:38px auto 0;max-width:700px;font-size:clamp(17px,2vw,25px);line-height:1.5;font-weight:400;letter-spacing:-.025em;color:var(--px-muted)}
.problem-experience .problem-closing strong{color:#072957;font-weight:500}
@keyframes px-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(1.8px) scale(1.003)}}
@media(min-width:861px) and (max-height:760px){.problem-experience .problem-stage{min-height:420px}.problem-experience .problem-signal{min-height:96px;padding:12px;gap:8px}.problem-experience .problem-signal h3{font-size:13px;margin-bottom:5px}.problem-experience .problem-signal p{font-size:11px;line-height:1.35}.problem-experience .problem-signals{inset:47px 18px 92px}.problem-experience .problem-scene-caption{bottom:12px;font-size:9px;padding:8px 12px}}
@media(max-width:1050px) and (min-width:861px){.problem-experience .problem-signal{width:28%;padding:13px 12px;gap:7px}.problem-experience .problem-signal-number{width:16px}.problem-experience .problem-signal h3{font-size:13px}.problem-experience .problem-signal p{font-size:11px}}
@media(max-width:860px){
  .problem-experience .problem-track{min-height:0}
  .problem-experience .problem-stage{position:relative;top:auto;height:auto;min-height:0;display:block}
  .problem-experience .problem-scene-heading{padding:0 0 12px;gap:10px}
  .problem-experience .problem-eyebrow{font-size:9px;letter-spacing:.1em}
  .problem-experience .problem-scene-guide{font-size:10px;gap:5px}
  .problem-experience .problem-scene{height:420px;border-radius:7px}
  .problem-experience .problem-clinical-scene{width:760px;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}
  .problem-experience .problem-scene-caption{bottom:12px;font-size:10px;padding:9px 10px;max-width:94%;white-space:normal;line-height:1.4;justify-content:center;text-align:center}
  .problem-experience .problem-signals{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0}
  .problem-experience .problem-signal{position:relative;inset:auto;width:auto;max-width:none;min-height:122px;padding:18px 15px;gap:10px;border-color:#546b80;box-shadow:0 6px 24px #031a3d0a;backdrop-filter:none;background:#051e37;--px-tilt:0deg}
  .problem-experience .problem-signal h3{font-size:15px;line-height:1.3}
  .problem-experience .problem-signal p{font-size:13px;line-height:1.55}
  .problem-experience .problem-progress{display:none}
  .problem-experience .problem-closing{margin-top:28px;font-size:20px}
}
@media(max-width:520px){.problem-experience .problem-signals{grid-template-columns:1fr;gap:10px}.problem-experience .problem-signal{min-height:0;padding:18px 16px}.problem-experience .problem-signal h3{font-size:17px;margin-bottom:6px}.problem-experience .problem-signal p{font-size:13px}.problem-experience .problem-scene{height:380px}.problem-experience .problem-clinical-scene{width:670px}.problem-experience .problem-scene-heading{align-items:flex-start}.problem-experience .problem-scene-guide{max-width:90px;text-align:right}.problem-experience .problem-closing{font-size:19px}}
@media(prefers-reduced-motion:reduce){.problem-experience .problem-track{min-height:0}.problem-experience .problem-stage{position:relative;top:auto}.problem-experience.is-enhanced .problem-signal{opacity:1;transform:none;transition:none}.problem-experience .problem-progress-track i{transition:none}.problem-experience .problem-scene-guide{visibility:hidden}.problem-experience .problem-person{animation:none}}

/* The background was supplied for direct use by the user. */
.problem-experience .problem-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.problem-experience .problem-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,#031a3d80); pointer-events:none; }
.problem-experience .problem-scene-caption { z-index:1; }
.problem-experience .problem-signal { backdrop-filter:none; background:#041321f5; }
.problem-experience.is-enhanced .problem-signal { transition:opacity .85s ease,transform 1.05s cubic-bezier(.16,1,.3,1); }
@media(max-width:860px) { .problem-experience .problem-photo { object-position:center; } }
@media(prefers-reduced-motion:reduce) { .problem-experience.is-enhanced .problem-signal { transition:none; } }