/* Homepage V5 (D-024). Loaded on / after home-v4.css.
   People-first managed service, the Zamp Commitment as its own section, the customer-stories header rebuilt as
   the proof block (figures moved out of the hero), and platform cards with a visible frame. */
.z5-managed, .z5-managed *, .z5-commit, .z5-commit * { box-sizing: border-box; }

/* ── Managed service: the team, then what the team does ─────────────── */
.z5-managed { background: var(--z3-green); color: #fff; }
.z5-team { position: relative; margin: 0; }
.z5-team > img { display: block; width: 100%; height: auto; aspect-ratio: 2560 / 1096; object-fit: cover; object-position: 50% 45%; background: #0f2c2b; }
.z5-team__card { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: flex-start; gap: 16px; max-width: 460px; padding: 20px 24px 22px 20px; background: #fff; color: #000; box-shadow: 0 24px 48px -20px #0000004d; }
.z5-team__card img { display: block; flex: 0 0 48px; width: 48px; height: 48px; }
.z5-team__card b { display: block; font: 400 22px/1.25 var(--z-font-heading); letter-spacing: -.01em; }
.z5-team__card span { display: block; margin-top: 6px; font: 400 15px/1.5 var(--z-font-body); color: var(--z3-body); }
.z5-jobs { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z3-gap); }
.z5-jobs li { padding: 32px 24px 0 0; border-top: 1px solid #ffffff40; }
.z5-jobs img { display: block; width: 48px; height: 48px; border: 1px solid #ffffff38; }
.z5-jobs h3 { margin: 24px 0 10px; color: #fff; }
.z5-jobs p { margin: 0; max-width: 26rem; color: #cfe3dc !important; }

/* ── The Zamp Commitment ───────────────────────────────────────────── */
.z5-commit { background: var(--z3-warm); }
.z5-commit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--z3-gap); align-items: center; }
.z5-commit__copy { grid-column: 1 / span 7; }
.z5-commit__copy h2 { margin: 0; color: #000; }
.z5-commit__statement { margin: 28px 0 0; max-width: 24ch; font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1.25 var(--z-font-heading); letter-spacing: -.01em; color: var(--z3-body); text-wrap: balance; }
.z5-commit__copy .z3-link { margin-top: 28px; }
.z5-seal { grid-column: 9 / -1; padding: 32px; background: var(--z3-green); color: #fff; }
.z5-seal__mark { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid #ffffff2e; font: 500 13px/1 var(--z-font-body); color: var(--z3-mint); }
.z5-seal__mark img { display: block; width: 72px; height: auto; }
.z5-seal__k { margin: 28px 0 8px; font: 500 14px/1.3 var(--z-font-body); color: #cfe3dc; }
.z5-seal ul { list-style: none; margin: 0; padding: 0; }
.z5-seal li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ffffff2e; font: 400 32px/1.1 var(--z-font-heading); letter-spacing: -.015em; color: #fff; }
.z5-seal li i { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; background: var(--z3-mint); color: var(--z3-green); }
.z5-seal li svg { width: 15px; height: 15px; }
.z5-seal__foot { margin: 20px 0 0; font: 400 14px/1.4 var(--z-font-body); color: #cfe3dc; }

/* ── Customer stories header = proof block ─────────────────────────── */
.z5-proof__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--z3-gap); align-items: end; }
.z5-proof__main { grid-column: 1 / span 8; }
.z5-proof__main .z3-tag { margin-bottom: 24px; }
.z5-proof__main h2 { margin: 0; max-width: 19ch; text-wrap: balance; }
.z5-proof__aside { grid-column: 9 / -1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 24px; }
.z5-proof__aside .z-story-nav { margin: 0; }
.z5-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 56px 0 0; border-top: 1px solid var(--z3-rule); border-bottom: 1px solid var(--z3-rule); }
.z5-figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 28px 24px 32px; }
.z5-figures > div:first-child { padding-left: 0; }
.z5-figures > div + div { border-left: 1px solid var(--z3-rule); }
.z5-figures dd { margin: 0; font: 400 clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem)/1 var(--z-font-heading); letter-spacing: -.02em; color: #000; }
.z5-figures dt { font: 400 15px/1.4 var(--z-font-body); color: var(--z3-body); }

/* ── Platform cards: a visible frame and an inset graphic ──────────── */
.z4-feat .z3-feat__card { outline: 1px solid #e0dbd2; outline-offset: -1px; }
.z4-feat .z3-feat__card:hover { outline-color: #000; }
.z4-feat .z4-art { margin: auto 12px 12px; background: #f1efea; }
.z4-feat .z3-feat__item--wide .z4-art { margin: 12px 12px 12px 0; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .z5-team > img { aspect-ratio: 16 / 9; }
  .z5-team__card { position: relative; left: auto; bottom: auto; max-width: none; margin: -32px 16px 0; }
  .z5-jobs { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .z5-jobs li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; }
  .z5-jobs img { grid-row: span 2; }
  .z5-jobs h3 { margin: 0 0 6px; }
  .z5-commit__copy, .z5-seal { grid-column: 1 / -1; }
  .z5-seal { max-width: 480px; }
  .z5-proof__main, .z5-proof__aside { grid-column: 1 / -1; }
  .z5-proof__aside { justify-content: space-between; }
  .z5-figures { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .z5-figures > div, .z5-figures > div:first-child { padding: 22px 16px 26px 0; }
  .z5-figures > div + div { border-left: 0; }
  .z5-figures > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--z3-rule); }
  .z5-figures > div:nth-child(n+3) { border-top: 1px solid var(--z3-rule); }
  .z4-feat .z3-feat__item--wide .z4-art { margin: 0 12px 12px; }
}
@media (max-width: 600px) {
  .z5-team > img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
  .z5-team__card { margin: -24px 12px 0; padding: 18px; }
  .z5-team__card b { font-size: 20px; }
  .z5-seal { padding: 24px; }
  .z5-seal li { font-size: 26px; }
  .z5-figures dd { font-size: 2.25rem; }
  .z4-feat .z4-art { margin: auto 8px 8px; }
}
.z5-proof__aside .margin-bottom { display: none; }
/* Stories slider: hard clip at the grid line (the gradient mask left a sub-pixel edge). */
body:has(.z3-hero) .customer-industry-component .swiper { -webkit-mask-image: none; mask-image: none; clip-path: inset(-40px 0 -40px var(--z3-g)); }
.z5-team__card, .z5-team__card * { text-align: left !important; }
