/* Homepage people story (#people). On wide screens the hero composer travels into this stage. */
.web-intro-panel { position: relative; background: var(--web-base); }
.web-people { position: relative; background: var(--web-base); }
.web-people__pin { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; padding: 176px 0 56px; }
.web-people__pin::before { content: ""; position: absolute; z-index: -1; inset: 152px max(16px, calc((100% - 1400px) / 2)) 24px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 36px; background: linear-gradient(145deg, #f5f8fc, #dde7f3); box-shadow: 0 20px 48px rgba(49, 68, 98, .08), inset 0 1px 0 #fff; pointer-events: none; }
.web-people:not(.is-pinned) .web-people__pin { min-height: 0; }
.web-people__layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 32px clamp(36px, 4.4vw, 64px); align-items: end; width: min(1320px, calc(100% - 64px)); }
.web-people__heading { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 900px; text-align: center; }
.web-people__heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--web-section-title-size); font-weight: 400; letter-spacing: -.055em; line-height: 1; text-wrap: balance; }
.web-people__heading h2 > span { display: inline-block; white-space: nowrap; }
.web-people__heading > p { max-width: 640px; margin: 18px auto 0; color: var(--web-muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.web-people__side { min-width: 0; }
.web-people__side > p { max-width: 420px; margin: 14px 0 0; color: var(--web-muted); font-size: 16px; line-height: 1.55; }
.web-people__context { position: relative; }

.web-people__tabs { display: flex; align-items: center; gap: 8px; width: min(404px, 100%); margin: 16px auto 0; }
.web-people__tabs button { display: flex; flex: 0 0 52px; align-items: center; min-width: 0; height: 56px; overflow: hidden; padding: 9px 7px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 12px; color: var(--web-ink); background: var(--surface-field); box-shadow: 0 12px 26px rgba(61, 77, 102, .09), inset 0 1px 1px rgba(255, 255, 255, .92); font: 650 12px/1.15 var(--sans); text-align: left; cursor: pointer; transition: flex-basis .32s ease, background-color .32s ease, box-shadow .32s ease; }
.web-people__tabs button[aria-pressed="true"] { flex-basis: calc(100% - 180px); padding: 9px; gap: 8px; background: rgba(255, 255, 255, .78); box-shadow: 0 16px 32px rgba(61, 77, 102, .12), inset 0 1px 1px #fff; }
.web-people__tab-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: 9px; background: var(--surface-raised-high); box-shadow: var(--shadow-raised-sm); }
.web-people__tab-icon img, .web-people__tab-icon svg { width: 28px; height: 28px; object-fit: contain; opacity: .82; }
.web-people__tab-name { min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
.web-people__tabs button[aria-pressed="true"] .web-people__tab-name { opacity: 1; transition: opacity .18s ease .16s; }
.web-people__tabs button:focus-visible { outline: 2px solid var(--focus-ring, #3d6cf4); outline-offset: 3px; }

.web-people__dock { display: none; height: var(--dock-h, 160px); margin-top: 36px; }
.web-people__ask { margin: 36px 0 0; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 20px; color: var(--web-ink); background: var(--surface-field); box-shadow: var(--shadow-field); font: 400 15px/1.5 var(--sans); }

.web-people__stage { position: relative; }
.wp-scene { display: none; row-gap: 24px; }
.wp-scene.is-active,
html:not(.js) .wp-scene:first-child { display: grid; }
.wp-scene figure,
.web-people__context figure { position: relative; isolation: isolate; display: flex; flex-direction: column; margin: 0; }
.web-people__context .wp-source { display: none; }
.web-people__context .wp-source.is-active,
html:not(.js) .web-people__context .wp-source:first-child { display: flex; }
.web-people__context figure > img,
.wp-scene figure > img,
.wp-scene figure > video { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 26px 60px rgba(18, 30, 56, .18), 0 2px 6px rgba(18, 30, 56, .07); }
.wp-scene figcaption,
.web-people__context figcaption { order: -1; align-self: center; max-width: 100%; margin-bottom: 10px; padding: 6px 11px; border-radius: 999px; color: var(--web-ink); background: rgba(255, 255, 255, .88); box-shadow: 0 2px 8px rgba(18, 30, 56, .12); font: 500 12px/1.25 var(--sans); text-align: center; overflow-wrap: anywhere; backdrop-filter: blur(10px); }
.wp-source { width: min(320px, 100%); }
.wp-source--page { width: 156px; }
.wp-conversation { width: 100%; }
.wp-result { width: 100%; }

.wp-scene .wp-result--site > img { border-radius: 0 0 16px 16px; }
.wp-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 16px 16px 0 0; background: #f3f5f9; }
.wp-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3d8e2; }
.wp-bar b { margin-left: 8px; padding: 3px 10px; border-radius: 999px; color: var(--web-muted); background: #fff; font: 500 10.5px/1 var(--sans); }

.wp-conversation__body { display: grid; gap: 12px; color: var(--web-ink); font: 400 14px/1.5 var(--sans); }
.wp-conversation__body p { margin: 0; padding: 4px 0; }
.wp-conversation__body .wp-conversation__user { justify-self: end; max-width: 90%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--surface-inset, #eef2f8); }
.wp-outgoing { margin: 0; padding: 12px 14px; border-radius: 16px 16px 4px 16px; color: var(--web-ink); background: var(--surface-inset, #eef2f8); font: 400 14px/1.5 var(--sans); }
.web-people__context .wp-source:not(.wp-conversation).is-active { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 10px 24px; align-items: end; width: 100%; }
.web-people__context .wp-source > figcaption { grid-column: 1; grid-row: 1; justify-self: center; margin: 0; }
.web-people__context .wp-source > img { grid-column: 1; grid-row: 2; }
.web-people__context .wp-outgoing { grid-column: 2; grid-row: 1 / 3; }
/* A response reads down one axis: a sentence, its visual, then the next thought. */
.wp-response { display: grid; justify-items: start; align-content: center; gap: 18px; width: 100%; color: var(--web-ink); font: 400 15px/1.5 var(--sans); }
.wp-response p { margin: 0; }
.wp-response__lead { font-weight: 500; }
.wp-response__note { color: var(--web-muted); }
.wp-response .wp-result { max-width: 100%; }
.wp-response .wp-result figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-response__points { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.wp-response__points li::marker { color: var(--web-muted); font-size: .8em; }
.wp-response--paper { gap: 16px; }
.wp-scene .wp-paper-explanation { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 2px; }
.wp-scene .wp-paper-explanation > img { width: 176px; max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(18, 30, 56, .05); }
.wp-scene .wp-paper-explanation figcaption { display: grid; gap: 10px; order: 0; padding: 0; margin: 0; color: var(--web-muted); background: none; border-radius: 0; box-shadow: none; font: inherit; text-align: left; backdrop-filter: none; }
.wp-paper-explanation .wp-response__lead { color: var(--web-ink); }
/* Pinned mode: one sticky stage, scenes placed by the script. */
.wp-layer { position: sticky; top: 0; z-index: 4; height: 100svh; margin-bottom: -100svh; pointer-events: none; }
.wp-layer > [data-home-composer-mount] { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: auto; will-change: transform; }
.web-people.is-pinned { height: 600svh; }
.web-people.is-pinned .web-people__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.web-people.is-pinned .web-people__layout { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.web-people.is-pinned .web-people__heading { opacity: var(--people-heading-opacity, 1); }
.web-people.is-pinned .web-people__side { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.web-people.is-pinned .web-people__context { flex: 1; min-height: 0; container-type: size; }
.web-people.is-pinned .web-people__dock { display: block; }
.web-people.is-pinned .web-people__ask { display: none; }
.web-people.is-pinned .web-people__stage { height: 100%; min-height: 0; container-type: size; }
.web-people.is-pinned .wp-scene { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.web-people.is-pinned .wp-source,
.web-people.is-pinned .wp-response { margin: 0; opacity: var(--o, 0); transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1)); will-change: transform, opacity; }
.web-people.is-pinned .wp-source { position: absolute; bottom: 0; left: 0; display: flex; z-index: 1; pointer-events: none; transform-origin: 0 100%; }
.web-people.is-pinned .wp-source:not(.wp-conversation) { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 10px 24px; align-items: end; width: 100%; }
.web-people.is-pinned .wp-source > img { width: auto; height: auto; max-width: 100%; max-height: min(190px, calc(100cqh - 40px)); }
.web-people.is-pinned .wp-response { max-height: 100%; transform-origin: 50% 50%; }
.web-people.is-pinned .wp-result { width: min(100%, calc((100cqh - 100px) * 16 / 9)); }
.web-people.is-pinned .wp-scene--designers .wp-result { width: min(100%, calc((100cqh - 100px) * 900 / 795)); }
.web-people.is-pinned .wp-scene--builders .wp-result { width: min(100%, calc((100cqh - 126px) * 16 / 9)); }
.web-people.is-pinned .wp-source.is-active,
.web-people.is-pinned .wp-scene.is-active figure { pointer-events: auto; }

@media (max-width: 1080px) {
  .web-people__layout { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .wp-response { font-size: 14px; }
  .wp-scene .wp-paper-explanation { gap: 16px; }
  .wp-scene .wp-paper-explanation > img { width: 140px; }
}

@media (max-height: 800px) {
  .web-people.is-pinned .web-people__pin { padding-bottom: 40px; }
  .web-people.is-pinned .wp-response--paper { gap: 12px; font-size: 14px; }
  .web-people.is-pinned .wp-response__points { gap: 4px; }
  .web-people.is-pinned .wp-paper-explanation > img { width: 132px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .wp-scene .wp-paper-explanation { grid-template-columns: 1fr; gap: 14px; }
  .wp-scene .wp-paper-explanation > img { width: 132px; }
}

@media (max-width: 999px) {
  .web-people__pin { min-height: 0; padding: 152px 0 64px; }
  .web-people__pin::before { inset: 128px 8px 40px; border-radius: 28px; }
  .web-people__layout { grid-template-columns: 1fr; gap: 24px; width: calc(100% - 32px); }
  .web-people__heading > p,
  .web-people__context,
  .web-people__ask,
  .wp-response__note,
  .wp-scene .wp-paper-explanation { display: none; }
  .web-people__tabs { gap: 6px; margin-top: 0; }
  .web-people__tabs button { flex-basis: 44px; padding: 9px 3px; }
  .web-people__tabs button[aria-pressed="true"] { flex-basis: calc(100% - 150px); padding: 9px; }
  .wp-response { font-size: 14px; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .web-people__tabs button, .web-people__tab-name { transition: none !important; }
}