/* D-057 graphic type scale: one set of sizes for every graphic on the site, a step below the website's text (body 16,
   lead 18) so graphics read as detailed product UI. UI: meta 12 (labels, subtitles, pills, captions, footers), sub 13
   (secondary lines), text 14 (rows, chips), title 15 (titles, emphasis). Season Mix: head 20 (document and panel
   titles), figures 24 / 32 / 40. Micro 10 is only for map tiles. Type never scales with the frame; narrow frames drop
   detail instead. */
:where(.zc, .z4-art) li { font-size: inherit; } /* the site-wide li { font-size: 1rem } must not reach graphics */
:root { --g-micro: 10px; --g-meta: 12px; --g-sub: 13px; --g-text: 14px; --g-title: 15px; --g-head: 20px; --g-fig-s: 24px; --g-fig: 32px; --g-fig-l: 40px; }

/* Zamp product UI cards (D-052), the Design System v4 "Product UI card" for every graphic outside the homepage.
   Type is product-sized and fixed (title 14/500, text 13, meta 12, table head 11, figures in Season Mix 22–40) so a
   graphic reads like the real app, not a poster. Layout comes from the frame (hero 11:10, feature card 4:3 or full),
   and container queries drop secondary columns on narrow frames instead of shrinking text. Renderer: lib/ui-cards.mjs. */

.zc, .zc * { box-sizing: border-box; }
.zc { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; background: #f6f5f3; font: 400 var(--g-text)/1.45 var(--z-font-body); color: #000; -webkit-font-smoothing: antialiased; }
.zc--hero { aspect-ratio: 11 / 10; }
.header_image-wrapper > .zc { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.zc--product { background: #183e3d; }
.zc--photo { background: #ddd6cc; }

/* Placement: the card bleeds off the frame like a crop of the real app. */
.zc-card { position: absolute; z-index: 1; background: #fff; box-shadow: 0 0 0 1.5px #e6e1da, 0 24px 60px rgba(0, 0, 0, .1); }
.zc--full .zc-card { left: 0; right: 8%; top: 0; bottom: 0; height: fit-content; margin-block: auto; } /* vertically centred in the frame */
.zc--half .zc-card { left: 8%; right: 8%; top: 10%; }
.zc--hero .zc-card { left: 9%; right: 0; top: 12%; }
.zc--int .zc-card { left: 10%; right: 0; top: 0; bottom: 0; height: fit-content; margin-block: auto; }
.zc--int .zc-toast--bl { left: 3%; bottom: auto; top: 64%; }
.zc--photo .zc-card--float { left: 6%; bottom: 6%; width: min(320px, 72%); top: auto; right: auto; }
.zc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z5-card .zc { background: transparent; }
.z5-card .zc--photo { background: #ddd6cc; }

/* Header: forest icon tile, Season Sans 500 title, muted subtitle, status + overflow on the right. */
.zc-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e6e1da; }
.zc-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: #183e3d; color: #fff; }
.zc-ico svg { width: 16px; height: 16px; }
.zc-ico--logo { background: #fff; box-shadow: inset 0 0 0 1px #e6e1da; }
.zc-ico--logo img { width: 20px; height: 20px; object-fit: contain; }
.zc-h__t { min-width: 0; flex: 1; }
.zc-h__t b { display: block; font: 500 var(--g-title)/1.3 var(--z-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-h__t small { display: block; margin-top: 1px; font-size: var(--g-meta); line-height: 1.35; color: #838383; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-h__end { flex: none; display: flex; align-items: center; gap: 10px; }
.zc-more { display: grid; place-items: center; width: 24px; height: 24px; color: #c8bfb1; } .zc-more svg { width: 14px; height: 14px; fill: currentColor; }

/* Pills: the only rounded shape. Mint = done or handled; yellow = needs attention; live has a dot. */
.zc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 500 var(--g-meta)/1.3 var(--z-font-body); white-space: nowrap; color: #183e3d; }
.zc-pill svg { width: 11px; height: 11px; }
.zc-pill--done, .zc-pill--live { background: #afecdb; }
.zc-pill--attn { background: #ffec72; color: #000; }
.zc-pill--live i { width: 6px; height: 6px; border-radius: 50%; background: #183e3d; }
.zc-res { display: inline-grid; } .zc-res > * { grid-area: 1 / 1; } .zc-res__a { opacity: 0; }

/* Toolbar and tabs */
.zc-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #f0ece6; }
.zc-search { display: inline-flex; align-items: center; gap: 6px; min-width: 140px; padding: 5px 10px; box-shadow: inset 0 0 0 1px #e6e1da; font-size: var(--g-meta); color: #838383; }
.zc-search svg { width: 12px; height: 12px; }
.zc-filter { padding: 5px 10px; box-shadow: inset 0 0 0 1px #e6e1da; font-size: var(--g-meta); color: #323232; white-space: nowrap; }
.zc-filter.is-on { background: #f6f5f3; color: #000; }
.zc-tabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid #e6e1da; }
.zc-tabs span { padding: 11px 0 10px; font-size: var(--g-text); color: #838383; box-shadow: inset 0 -2px 0 transparent; }
.zc-tabs span.is-on { color: #000; font-weight: 500; box-shadow: inset 0 -2px 0 #183e3d; }

/* Table: label left, numbers right (tabular), status pill right, hairlines in the border token. */
.zc-table { width: 100%; border-collapse: collapse; }
.zc-table .is-num, .zc-kpi b { font-variant-numeric: tabular-nums; } /* tabular only on figures: Season Sans widens spaces under tnum */
.zc-table th { padding: 10px 18px 8px; text-align: left; font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .04em; text-transform: uppercase; color: #838383; border-bottom: 1px solid #e6e1da; white-space: nowrap; }
.zc-table td { padding: 10px 18px; border-bottom: 1px solid #f0ece6; font-size: var(--g-text); white-space: nowrap; vertical-align: middle; }
.zc-table td.is-lead { font-weight: 500; }
.zc-table td.is-lead b { display: block; font-weight: 500; } .zc-table td.is-lead small { display: block; margin-top: 1px; font-size: var(--g-meta); font-weight: 400; color: #838383; }
.zc-table :is(th, td).is-num { text-align: right; }
.zc-table :is(th, td):last-child { text-align: right; }
.zc-f { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px; font-size: var(--g-meta); color: #838383; background: #fafaf9; border-top: 1px solid #f0ece6; }

/* KPI tiles and the metric */
.zc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 14px 18px 4px; }
.zc-kpi { padding: 10px 12px; background: #fafaf9; box-shadow: inset 0 0 0 1px #e6e1da; min-width: 0; }
.zc-kpi small { display: block; font-size: var(--g-meta); color: #838383; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-kpi b { display: block; margin-top: 4px; font: 400 var(--g-fig-s)/1.1 var(--z-font-heading); letter-spacing: -.01em; color: #183e3d; white-space: nowrap; }
.zc-metric { display: flex; align-items: baseline; gap: 12px; padding: 18px 18px 6px; }
.zc-metric b { font: 400 var(--g-fig-l)/1 var(--z-font-heading); letter-spacing: -.02em; color: #000; }
.zc-metric span { font-size: var(--g-text); color: #838383; }
.zc-chart { padding: 10px 18px 6px; }
.zc-bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 112px; border-bottom: 1px solid #e6e1da; }
.zc-bars i { flex: 1; height: var(--h); background: #dce9e4; }
.zc-bars i.is-on { background: #183e3d; }
.zc-bars b { position: absolute; left: 0; right: 0; bottom: var(--t); border-top: 1px dashed #000; }
.zc-bars b span { position: absolute; right: 0; top: -20px; padding-left: 6px; background: #fff; font: 500 var(--g-meta)/1 var(--z-font-body); }
.zc-axis { display: flex; gap: 6px; padding-top: 6px; } .zc-axis span { flex: 1; text-align: center; font-size: var(--g-meta); color: #838383; }

/* Map */
.zc-map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-auto-rows: 22px; gap: 3px; padding: 16px 18px 8px; }
.zc-map span { display: grid; place-items: center; background: #f6f5f3; color: #838383; font: 500 var(--g-micro)/1 var(--z-font-body); }
.zc-map span.is-reg { background: #183e3d; color: #fff; } .zc-map span.is-near { background: #ffec72; color: #000; }
.zc-map span.is-ca { box-shadow: inset 0 0 0 1px #e6e1da; background: #fff; }
.zc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 18px 14px; font-size: var(--g-meta); color: #323232; }
.zc-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: #f6f5f3; box-shadow: inset 0 0 0 1px #e6e1da; }
.zc-legend i.is-reg { background: #183e3d; box-shadow: none; } .zc-legend i.is-near { background: #ffec72; box-shadow: none; }
.zc-legend b { font-weight: 500; color: #000; margin-left: 2px; }

/* Rules (automation) and the run log */
.zc-rules { display: grid; gap: 10px; padding: 16px 18px; }
.zc-rule { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.zc-rule__k { padding-top: 7px; font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .04em; text-transform: uppercase; color: #838383; }
.zc-rule__v { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-src, .zc-hub, .zc-out { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; box-shadow: inset 0 0 0 1px #e6e1da; font-size: var(--g-text); white-space: nowrap; background: #fff; }
.zc-src img { width: 16px; height: 16px; object-fit: contain; } .zc-src i { display: grid; color: #183e3d; } .zc-src i svg { width: 14px; height: 14px; }
.zc-src small, .zc-out small { color: #838383; font-size: var(--g-meta); }
.zc-hub i { display: grid; place-items: center; width: 18px; height: 18px; background: #183e3d; color: #afecdb; font: 400 var(--g-meta)/1 var(--z-font-heading); font-style: normal; }
.zc-out { background: #fafaf9; } .zc-out svg { width: 12px; height: 12px; color: #183e3d; }
.zc-log { border-top: 1px solid #f0ece6; }
.zc-log div { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 18px; border-bottom: 1px solid #f0ece6; font-size: var(--g-meta); }
.zc-log time { color: #838383; } .zc-log span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fields (notice, document), thread, signature */
.zc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 6px 18px; }
.zc-fields div { padding: 10px 0; border-bottom: 1px solid #f0ece6; }
.zc-fields div:nth-child(odd) { padding-right: 12px; }
.zc-fields dt { font-size: var(--g-meta); color: #838383; } .zc-fields dd { margin: 2px 0 0; font-size: var(--g-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-fields--rows { grid-template-columns: 1fr; }
.zc-fields--rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; }
.zc-fields--rows dt { font-size: var(--g-text); color: #323232; } .zc-fields--rows dd { margin: 0; }
.zc-thread { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.zc-msg div { min-width: 0; } .zc-msg p { max-width: 36ch; }
.zc-msg { display: flex; gap: 10px; min-width: 0; }
.zc-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #183e3d; color: #afecdb; font: 400 var(--g-text)/1 var(--z-font-heading); }
.zc-msg b { display: block; font-size: var(--g-meta); font-weight: 500; } .zc-msg p { margin: 3px 0 0; padding: 8px 10px; background: #f6f5f3; font-size: var(--g-text); line-height: 1.4; }
.zc-sign { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: var(--g-meta); color: #838383; background: #fafaf9; border-top: 1px solid #f0ece6; }
.zc-stamp { position: absolute; z-index: 2; right: 10%; bottom: 12%; display: grid; place-items: center; gap: 2px; width: 92px; height: 92px; border: 2px solid #183e3d; background: rgba(175, 236, 219, .92); color: #183e3d; transform: rotate(-8deg); }
.zc-stamp b { font: 400 var(--g-title)/1 var(--z-font-heading); } .zc-stamp small { font: 500 var(--g-micro)/1 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; }

/* Code */
.zc-code { margin: 0; padding: 14px 18px; background: #0d0d0d; color: #e6e1da; font: 400 var(--g-meta)/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; }
.zc-code span { display: block; } .zc-code em { font-style: normal; color: #afecdb; } .zc-code u { text-decoration: none; color: #c8bfb1; }
.zc-resp { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: var(--g-text); }
.zc-resp__k { font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .04em; text-transform: uppercase; color: #838383; }
.zc-resp > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Person card rows */
.zc-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0ece6; font-size: var(--g-text); }
.zc-rows div:last-child { border-bottom: 0; } .zc-rows span { color: #323232; } .zc-rows b { font-weight: 500; }

/* Toast: one per graphic, square, same ring and a smaller shadow. */
.zc-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 14px 10px 10px; background: #fff; box-shadow: 0 0 0 1.5px #e6e1da, 0 16px 40px -12px rgba(0, 0, 0, .18); }
.zc-toast i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: #183e3d; color: #fff; }
.zc-toast i svg { width: 13px; height: 13px; } .zc-toast i.is-wait { background: #ffec72; color: #000; }
.zc-toast b { display: block; font: 500 var(--g-text)/1.3 var(--z-font-body); } .zc-toast small { display: block; font-size: var(--g-meta); color: #838383; }
.zc-toast--tr { top: 5%; right: 4%; } .zc-toast--bl { left: 3%; bottom: 8%; }
.zc--full .zc-toast--tr { right: 2%; top: 6%; }

/* Marks on the product-hero field */
.zc-marks i { position: absolute; background: rgba(175, 236, 219, .06); }
.zc-marks i:nth-child(1) { top: 0; right: 0; width: 72px; height: 72px; } .zc-marks i:nth-child(2) { top: 72px; right: 72px; width: 36px; height: 36px; background: rgba(175, 236, 219, .1); } .zc-marks i:nth-child(3) { top: 0; left: 0; width: 36px; height: 36px; }

/* Narrow frames keep the type size and drop detail instead. */
@container (max-width: 560px) {
  .zc-table :is(th, td):nth-child(2):not(:last-child) { display: none; }
  .zc-bar .zc-filter + .zc-filter { display: none; }
  .zc-table :is(th, td) { padding-left: 14px; padding-right: 14px; }
  .zc-h, .zc-bar, .zc-f, .zc-rules, .zc-fields, .zc-thread, .zc-sign, .zc-resp, .zc-code { padding-left: 14px; padding-right: 14px; }
  .zc-kpis { padding-left: 14px; padding-right: 14px; } .zc-kpi:nth-child(n+3) { display: none; }
  .zc-log div:nth-child(n+3) { display: none; }
  .zc--hero .zc-card { left: 6%; right: 0; top: 10%; }
  .zc--half .zc-card { left: 5%; right: 5%; top: 8%; }
  .zc-toast { max-width: 230px; }
}
@container (max-width: 420px) {
  .zc-toast, .zc-stamp { display: none; }
  .zc-thread { flex-direction: column; align-items: flex-start; }
  .zc-search { min-width: 0; } .zc-table :is(th, td):nth-child(3):not(:last-child) { display: none; }
  .zc-log, .zc-more { display: none; }
  .zc--product .zc-toast, .zc--int .zc-toast { display: none; }
  .zc-map { grid-auto-rows: 18px; gap: 2px; } .zc-map span { font-size: var(--g-micro); }
  .zc-stamp { width: 72px; height: 72px; bottom: 6%; } .zc-stamp b { font-size: var(--g-meta); }
  .zc-metric b { font-size: var(--g-fig); }
}

/* Feature cards and heroes host the frame (replaces the .zr rules of D-046/D-047). */
.z5-card--half .zc { aspect-ratio: 4 / 3; }
.z5-card--full .z5-card__art { align-self: stretch; }
.z5-card--full .zc { position: absolute; inset: 48px 0 0 0; width: auto; height: auto; aspect-ratio: auto; }
.z5-card--half .z5-card__art:has(> .zc) { margin-left: 0; }
@media (max-width: 980px) { .z5-card--full .zc { position: relative; inset: auto; aspect-ratio: 4 / 3; } .z5-card--full .z5-card__art:has(> .zc) { margin-left: 0; }
  .zc--full .zc-card { left: 5%; right: 5%; top: 8%; bottom: auto; margin: 0; height: auto; } /* stacked: top-aligned, bleeds off the foot */ }

/* Motion: entrance once (site-v4.js adds .is-on at 35% visibility); reduced motion shows the final frame. */
@media (prefers-reduced-motion: no-preference) {
  .zc [data-in] { opacity: 0; transform: translateY(16px); }
  .zc.is-on [data-in] { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
  .zc .zc-res__a { opacity: 1; } .zc .zc-res__b { opacity: 0; transform: scale(.9); }
  .zc.is-on .zc-res__a { opacity: 0; transition: opacity .2s; transition-delay: calc(900ms + var(--r) * 320ms); }
  .zc.is-on .zc-res__b { opacity: 1; transform: none; transition: opacity .2s, transform .35s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(900ms + var(--r) * 320ms); }
  .zc .zc-toast { opacity: 0; transform: translateY(10px); }
  .zc.is-on .zc-toast { opacity: 1; transform: none; transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--t, 2.4s); }
  .zc .zc-bars i { transform: scaleY(0); transform-origin: bottom; }
  .zc.is-on .zc-bars i { transform: none; transition: transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(400ms + var(--i) * 50ms); }
  .zc .zc-map span.is-reg, .zc .zc-map span.is-near { background: #f6f5f3; color: #838383; }
  .zc.is-on .zc-map span.is-reg { background: #183e3d; color: #fff; transition: background .3s, color .3s; transition-delay: calc(600ms + var(--s) * 80ms); }
  .zc.is-on .zc-map span.is-near { background: #ffec72; color: #000; transition: background .3s; transition-delay: calc(600ms + var(--s) * 80ms); }
  .zc .zc-stamp { opacity: 0; transform: rotate(-8deg) scale(1.4); }
  .zc.is-on .zc-stamp { opacity: 1; transform: rotate(-8deg); transition: opacity .2s 1.2s, transform .4s cubic-bezier(.3, 1.5, .5, 1) 1.2s; }
}
.zc .zc-res__b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zc .zc-res__a { opacity: 0; } }

/* People hero (D-053, revised): the campaign photograph sits inside the hero's media column at 5:4 (not full bleed),
   copy centred against it. The feature's UI is one cluster on the side away from the subject: the product card hangs
   off the photo's lower corner, the KPI tile overlaps the card's upper inner corner, the toast its inner edge.
   Overlays keep product-size type. Motion: photo settles from a slow push-in, the cluster rises in sequence, rows
   resolve, the bar fills, then the cluster drifts a few pixels on long offset loops. */
html body .z-hb.z-hb--people .header_content { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; column-gap: clamp(48px, 6vw, 96px) !important; align-items: center !important; }
html body .z-hb.z-hb--people .header_content > .header_content-left { align-self: center !important; }
html body .z-hb.z-hb--people .decor_wrap { display: none !important; } /* the graph corner crowded the framed photo */
html body .z-hb.z-hb--people .header_image-wrapper.z-hero-art { aspect-ratio: 5 / 4 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: transparent !important; margin-bottom: 32px; }
.header_image-wrapper > .zc--people, .zc--people { overflow: visible; background: transparent; container-type: inline-size; }
.zc-pp__media { position: absolute; inset: 0; overflow: hidden; background: #ddd6cc; }
.zc-pp__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zc-pp__group { position: absolute; z-index: 2; bottom: -40px; width: 340px; }
.zc-pp__group--l { left: -48px; }
.zc-pp__group--r { right: -48px; }
.zc-pp__at { position: relative; }
.zc-pp__at--kpi, .zc-pp__at--toast { position: absolute; }
/* KPI tile and toast form a column beside the card: tile flush with the card's top, toast flush with its foot. */
.zc-pp__group--l .zc-pp__at--kpi { left: calc(100% + 12px); top: 0; }
.zc-pp__group--r .zc-pp__at--kpi { right: calc(100% + 12px); top: 0; }
.zc-pp__group--l .zc-pp__at--toast { left: calc(100% + 12px); bottom: 0; }
.zc-pp__group--r .zc-pp__at--toast { right: calc(100% + 12px); bottom: 0; }
.zc--people .zc-card { position: relative; inset: auto; box-shadow: 0 0 0 1.5px rgba(230, 225, 218, .9), 0 24px 60px -12px rgba(24, 62, 61, .28); }
.zc-pp__main { width: 100%; }
.zc-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0ece6; }
.zc-list__t { min-width: 0; }
.zc-list__t b { display: block; font: 500 var(--g-text)/1.3 var(--z-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-list__t small { display: block; font-size: var(--g-meta); line-height: 1.35; color: #838383; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-pp__main .zc-f { border-top: 0; }
.zc-pp__kpi { display: grid; gap: 4px; width: 224px; padding: 14px 16px; }
.zc-pp__kpi > small { font: 500 var(--g-meta)/1.3 var(--z-font-body); letter-spacing: .04em; text-transform: uppercase; color: #838383; }
.zc-pp__kpi > b { font: 400 var(--g-fig)/1.15 var(--z-font-heading); letter-spacing: -.01em; color: #000; white-space: nowrap; }
.zc-pp__kpi > span:last-child { font-size: var(--g-meta); line-height: 1.35; color: #838383; }
.zc-pp__bar { display: block; height: 6px; margin: 6px 0 4px; background: #f0ece6; overflow: hidden; }
.zc-pp__bar i { display: block; width: var(--v); height: 100%; background: #183e3d; }
.zc-pp__bar.is-warn i { background: #ffec72; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.zc--people .zc-toast { position: relative; inset: auto; width: 248px; }
.zc-pp__av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* Stacked (under 992px): copy above, frame full container width; the cluster tucks inside the frame's foot. */
@media (max-width: 991px) {
  html body .z-hb.z-hb--people .header_content { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; }
  html body .z-hb.z-hb--people .header_image-wrapper.z-hero-art { aspect-ratio: 4 / 3 !important; }
  .zc-pp__group { bottom: -24px; } .zc-pp__group--l { left: 16px; } .zc-pp__group--r { right: 16px; }
}
@media (max-width: 560px) { html body .z-hb.z-hb--people .header_image-wrapper.z-hero-art { aspect-ratio: 4 / 5 !important; } }
@container (max-width: 568px) { .zc-pp__at--toast { display: none; } }
@container (max-width: 540px) { .zc-pp__at--kpi { display: none; } }
@container (max-width: 420px) {
  .zc-pp__group { width: min(340px, calc(100cqw - 32px)); bottom: 16px; }
  .zc-pp__at--kpi { display: none; } .zc--people .zc-h__end .zc-pill { display: none; }
  .zc-list > div, .zc--people .zc-h, .zc--people .zc-f { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .zc--people .zc-pp__photo { transform: scale(1.08); transform-origin: 50% 40%; }
  .zc--people.is-on .zc-pp__photo { transform: none; transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
  .zc--people.is-on .zc-pp__kpi[data-in] { transition-delay: .5s; }
  .zc--people .zc-pp__bar i { width: 0; }
  .zc--people.is-on .zc-pp__bar i { width: var(--v); transition: width 1.4s cubic-bezier(.2, .7, .2, 1) 1.1s; }
  .zc--people.is-on .zc-pp__group { animation: zc-drift 7s ease-in-out 3.4s infinite alternate; }
  .zc--people.is-on .zc-pp__at--kpi { animation: zc-drift 5.5s ease-in-out 3.9s infinite alternate-reverse; }
  .zc--people .zc-pill--live i { animation: zc-pulse 2.4s ease-out infinite; }
}
@keyframes zc-drift { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes zc-pulse { 0% { box-shadow: 0 0 0 0 rgba(24, 62, 61, .45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(24, 62, 61, 0); } }

/* D-075 People heroes, tablet and phone (user, 2026-10-29: "make sure the image underneath doesn't get buried"). The
   overlay cards are unchanged; below 1200px they no longer sit over two-thirds of the photo. The photo keeps its full
   frame and the card group overlaps only its bottom 96px, then continues below it. Photos are composed with faces and
   the work in the upper half (docs/project/IMAGERY.md), which also clears the desktop cards (they start 56% down). */
@media (max-width: 1199px) {
  html body .z-hb.z-hb--people .header_image-wrapper.z-hero-art:has(> .zc--people) { aspect-ratio: auto !important; height: auto !important; }
  html body .z-hb--people .zc--people { position: relative !important; inset: auto !important; height: auto !important; display: flex; flex-direction: column; }
  html body .z-hb--people .zc--people .zc-pp__media { position: relative !important; inset: auto !important; aspect-ratio: 5 / 4; }
  html body .z-hb--people .zc--people .zc-pp__group { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; max-width: 420px; margin: -96px 16px 0; }
}
@media (max-width: 560px) { html body .z-hb--people .zc--people .zc-pp__media { aspect-ratio: 4 / 5; } }
@media (max-width: 1199px) {
  /* A right-anchored group keeps its side cards (KPI, toast) to its left, so it stays right-aligned. */
  html body .z-hb--people .zc--people .zc-pp__group--r { margin-left: auto; margin-right: 16px; }
}

/* D-080 Zamp people in graphics: an overlapping avatar stack in place of a card's icon tile when the card is the team,
   a small face beside "Your specialist" / "Tax team" cells, and a face on toasts that report the team's work. */
.zc-avs { display: inline-flex; flex: none; padding-left: 8px; }
.zc-avs img { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.zc-h .zc-avs { margin-right: 2px; }
.zc-who { display: inline-flex; align-items: center; gap: 6px; }
.zc-who__av { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; }
.zc-toast__av { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
[class*="tone-dark"] .zc-avs img, .zc-card--dark .zc-avs img { box-shadow: 0 0 0 2px #183e3d; }
.zc-avs img { width: 24px; height: 24px; margin-left: -7px; }
.zc-h .zc-h__t { min-width: 0; }