/* who-we-help.css: the Who we help page ("the breadth"). The header is the arsenal composition motif-window as it
   stands; the wall is this site's scene busy-wall on the navy designed ground. Only the tokens of system.css. */
@import url("../arsenal/motif-window.css");

/* ---------- hero: the diamond window beside the headline, the clients picker in the action box ---------- */
.wwh-hero .motif-window__h { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); }
/* each clip lies 1 px past the stage on every side (kit.md, "Video"), so no paper line shows at its edge */
.wwh-hero .motif-window__media { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
/* the picker is its own white card: it reads the same on the paper and over the footage once the window opens */
.wwh-hero__act { width: min(100%, 460px); }
/* on a phone the copy stands clear of the call bar at the screen's foot, so the picker's note shows whole */
@container motif-window (width < 760px) {
  .wwh-hero .motif-window__copy { bottom: 92px; }
}
.wwh-hero .wwh-hero__stop { position: absolute; z-index: 4; top: calc(var(--header-h) + 16px); right: var(--gutter); }

/* ---------- wall: the trades and one week, full bleed on the navy ground ---------- */
.wwh-wall { padding-block: clamp(80px, 9vw, 120px) clamp(64px, 7vw, 96px); overflow: clip; }
.wwh-wall__head { max-width: 760px; margin-inline: auto; text-align: center; }
.wwh-wall .wwh-wall__scene { width: 100%; height: 540px; margin-top: clamp(32px, 4vw, 48px); }
.wwh-wall__stop { position: absolute; top: 24px; right: var(--gutter); }

/* ---------- kinds: six tabs, each a kind and its fields; a large photo of that kind at work and what one client means ---------- */
.wwh-kinds__head { max-width: 640px; }
.wwh-kinds__in { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.wwh-kinds__tabs { display: grid; gap: 4px; }
.wwh-kinds__tab { position: relative; display: grid; gap: 4px; width: 100%; padding: 14px 18px 14px 22px; border: 0; border-left: 3px solid var(--c-line); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.wwh-kinds__tab::before { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: calc(var(--kit-fill, 0) * 100%); background: var(--c-accent); }
.wwh-kinds__tab[aria-selected="true"]::before { height: max(calc(var(--kit-fill, 0) * 100%), 0%); }
.wwh-kinds__tab b { display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.wwh-kinds__tab span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-soft); }
.wwh-kinds__tab:hover { background: color-mix(in srgb, var(--c-paper) 70%, transparent); }
.wwh-kinds__tab[aria-selected="true"] { background: var(--c-paper); box-shadow: var(--shadow-s); border-left-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); }
.wwh-kinds__tab[aria-selected="true"] b::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); }
.wwh-kinds__tab:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.wwh-kinds__more { margin: 14px 0 0 25px; }
.wwh-kinds__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.wwh-kinds__panel { position: absolute; inset: 0; }
.wwh-kinds__panel[hidden] { display: none; }
.wwh-kinds__panel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wwh-kinds__panel:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }
/* the card sits on each photo's clear side: the lawn, the yard, the shelves, the room, the floor, the table's end */
.wwh-kinds__card { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: flex-start; gap: 12px; max-width: min(320px, calc(100% - 44px)); margin: 0; padding: 16px 20px 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); color: var(--c-ink); font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.wwh-kinds__card svg { flex: none; width: 13px; height: 13px; margin-top: 5px; fill: var(--c-accent); }
.wwh-kinds__panel--events .wwh-kinds__card { left: auto; right: 22px; }
/* the tabs' stop sits on the band, off the photos, where it never lands on a face */
.wwh-kinds { position: relative; }
.wwh-kinds__stop { position: absolute; top: 24px; right: var(--gutter); }

/* ---------- buyers: the three customers, on the white designed ground ---------- */
.wwh-buyers { padding-block: var(--section-y); }
.wwh-buyers__pic { position: relative; margin-top: clamp(32px, 4vw, 48px); }
.wwh-buyers__pic .wwh-buyers__scene { width: 100%; overflow: visible; }
.wwh-buyers__stop { position: absolute; top: -50px; right: 0; }

/* ---------- plan: the words on the left; an owner's own desk, the free plan landing on its clear side ---------- */
.wwh-plan { overflow-x: clip; } /* the plan's stamp, laid out wide before it lands, never widens the page */
.wwh-plan__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 72px); align-items: center; }
.wwh-plan__copy .section-line { margin-bottom: 28px; }
.wwh-plan__pic { position: relative; margin-bottom: 40px; }
.wwh-plan__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.wwh-plan__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 40%; }
.wwh-plan__pic .wwh-plan__scene { position: absolute; z-index: 1; right: -28px; bottom: -40px; width: 340px; height: 340px; overflow: visible; }
/* the paper keeps a clear foot for its stamp, so the stamp lands under the last line, never on a line's words */
.wwh-plan__pic .wwh-plan__scene .es-paper { padding-bottom: 64px; }
.wwh-plan__stop { position: absolute; z-index: 2; top: 14px; left: 14px; }

/* ---------- anyway: a business the six don't name, the chat building its plan over the photo ---------- */
.wwh-anyway__pic { position: relative; max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0; }
.wwh-anyway__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.wwh-anyway__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* the chat over the shop's clear right half (its window and shelves), wholly on the photo */
.wwh-anyway__pic .wwh-anyway__scene { position: absolute; z-index: 1; right: 7%; bottom: 28px; width: 290px; height: 368px; overflow: visible; }
.wwh-anyway__stop { position: absolute; z-index: 2; top: 14px; right: 14px; }
.wwh-anyway__go { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; margin-top: 44px; text-align: center; }
.wwh-anyway__go .cta-row { justify-content: center; }
.wwh-anyway__go .link-arrow { white-space: normal; }

.wwh-nowrap { white-space: nowrap; }

/* ---------- narrower ---------- */
@media (max-width: 1099.98px) {
  .wwh-kinds__in { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .wwh-kinds__list { order: 0; }
  .wwh-kinds__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .wwh-plan__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .wwh-plan__pic { max-width: 720px; }
}
@media (max-width: 819.98px) {
  .wwh-wall .wwh-wall__scene { height: 640px; }
}
@media (max-width: 699.98px) {
  .wwh-kinds__tabs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wwh-kinds__tab { padding: 11px 14px 11px 18px; }
  .wwh-kinds__tab b { font-size: 1rem; }
  .wwh-kinds__tab span { font-size: 0.875rem; }
  .wwh-kinds__stage { aspect-ratio: 4 / 3; }
  .wwh-kinds__card { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 14px; font-size: 1rem; }
  .wwh-kinds__panel--events .wwh-kinds__card { right: 12px; }
  /* on a phone each card stands wholly on its photo: the photo fills the whole picture behind it, framed on its
     clear side (the desk's rack, the shop's window and shelves), and the card sits over that */
  .wwh-plan__pic { margin-bottom: 0; padding: 64px 12px 48px; }
  .wwh-plan__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .wwh-plan__media img { object-position: 96% 50%; }
  .wwh-plan__pic .wwh-plan__scene { position: relative; right: auto; bottom: auto; width: min(340px, 100%); height: 330px; margin: 0 auto; }
  .wwh-anyway__pic { padding: 64px 0 28px; }
  .wwh-anyway__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .wwh-anyway__media img { object-position: 86% 50%; }
  .wwh-anyway__pic .wwh-anyway__scene { position: relative; right: auto; bottom: auto; width: min(290px, calc(100% - 40px)); margin: 0 auto; }
  .wwh-anyway__go { margin-top: 36px; }
}