/* Who we help: plan.md "Who we help". The breadth: three businesses booked in the header, the town at dusk (the
   signature, full bleed on the night band), the six kinds in a tour, the three ways customers buy on the designed
   ground, a way in for every other business, the wide close (components.css). Tokens only. */

/* the site's rings, faint, under everything in their part */
.who-rings { position: absolute; z-index: -1; max-width: none; fill: none; stroke: var(--c-brand); stroke-width: 1.4; pointer-events: none; }
.who-rings circle { opacity: calc(.2 - var(--k) * .02); }

/* ---------- hero: the words at the left, three businesses booked at the right ---------- */
.who-hero { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 6.5rem); overflow: clip; isolation: isolate; }
.who-hero__rings { left: 20%; top: 46%; width: 1100px; height: 1100px; translate: -50% -50%; }
/* the stage wide enough that each booking card reads in two lines */
.who-hero__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.who-hero__title { max-width: 11.5em; margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--c-ink); text-wrap: balance; }
.who-hero__lead { max-width: 30em; margin: 1.25rem 0 0; font-size: clamp(1.0625rem, .95rem + .42vw, 1.25rem); line-height: 1.5; color: var(--c-ink-soft); text-wrap: pretty; }
.who-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.who-hero__note { margin: 0; }
/* three tall frames side by side, the middle one wider (the lawyer and her client both in it) and set lower; each
   one's card lands on its lower part, off the faces, a ring going out from its dot (the sequence's --kit-in) */
.who-hero__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); align-items: start; }
.who-hero__frame { position: relative; margin: 0; aspect-ratio: 9 / 17; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); }
.who-hero__frame--2 { margin-top: clamp(1.5rem, 3vw, 2.75rem); aspect-ratio: 63 / 85; }
.who-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who-hero__frame--1 .who-hero__img { object-position: 68% 30%; }
.who-hero__frame--2 .who-hero__img { object-position: 94% 40%; }
.who-hero__frame--3 .who-hero__img { object-position: 42% 50%; }
.who-hero__card { position: absolute; z-index: 2; left: .6rem; right: .6rem; bottom: .6rem; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .6rem; align-items: start; margin: 0; padding: .75rem .8rem .8rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-card); box-shadow: var(--shadow-m); opacity: min(1, calc(var(--kit-in, 1) * 2.5)); transform: translateY(calc((1 - var(--kit-in, 1)) * 14px)); }
.who-hero__dot { position: relative; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--c-on-brand) 0 3.5px, var(--c-brand) 4px 8px, color-mix(in srgb, var(--c-brand) 16%, var(--c-card)) 8.5px); }
.who-hero__dot::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c-accent); border-radius: 50%; opacity: calc((1 - var(--kit-in, 1)) * 1.4); transform: scale(calc(1 + var(--kit-in, 1) * 1.4)); }
.who-hero__job { min-width: 0; }
.who-hero__job b { display: block; font: 700 .9375rem/1.25 var(--font-ui); color: var(--c-ink); }
.who-hero__job span { display: block; margin-top: .2rem; font-size: .8125rem; line-height: 1.35; color: var(--c-ink-soft); }
/* the stop under the last frame, in sight with the three */
.who-hero__stop { position: absolute; z-index: 3; right: 0; bottom: -3.25rem; }

/* ---------- town: the signature, a real town at night full bleed, its searches ringing out over it ---------- */
.who-town { position: relative; overflow: hidden; padding-top: clamp(3rem, 5vw, 4.5rem); background: var(--c-night); color: var(--c-on-ink); container-type: inline-size; isolation: isolate; }
/* the clip covers the whole band (1 px past it), the sky behind the words; a night shade over it, deepest behind the
   words and at the foot, lighter over the town so its lights show between the pins */
.who-town__clip { position: absolute; inset: -1px; z-index: -2; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 50%; }
.who-town::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 84%, transparent) 0%, color-mix(in srgb, var(--c-night) 58%, transparent) 30%, color-mix(in srgb, var(--c-night) 22%, transparent) 62%, color-mix(in srgb, var(--c-night) 62%, transparent) 100%); }
.who-town__head { display: grid; justify-items: center; text-align: center; }
.who-town__head .h2 { max-width: 16em; text-wrap: balance; }
.who-town__line { max-width: 34em; margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--c-on-night-soft); text-wrap: pretty; }
/* the scene's host as wide as the band, over the clip (its look "over": no drawn town, no ground); its box (1000 x 560,
   or 360 x 640 under 820 px) at the scale its height gives, inside the gutters; short enough that its eight
   businesses and its stop show together on a 900 px screen */
.who-town__stage { position: relative; }
.who-town__scene { display: block; width: 100%; height: calc(min(500px, (100cqi - 2 * var(--gutter)) * .56) + 3rem); padding-block: 1.5rem; }
@container (width < 820px) { .who-town__scene { height: calc(min(440px, 100cqi - 2 * var(--gutter)) * 16 / 9 + 3rem); } }
/* at the town's top corner, over the footage beside the first row, in sight with the businesses */
.who-town__stop { position: absolute; z-index: 2; top: 1rem; right: var(--gutter); }

/* ---------- kinds: the tour, its tabs at the left, the kind of business at work at the right ---------- */
.who-kinds { position: relative; padding-block: var(--section-y); }
.who-kinds__head { max-width: 46rem; }
.who-tour { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: stretch; margin-top: clamp(2rem, 4vw, 3rem); }
.who-tour__tabs { display: flex; flex-direction: column; gap: .3rem; }
.who-tour__tab { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .85rem; align-items: start; overflow: hidden; padding: .8rem 1rem .9rem; border: 1px solid transparent; border-radius: var(--radius-m); background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.who-tour__tab:hover { border-color: var(--c-line); background: var(--c-card); }
.who-tour__tab[aria-selected="true"] { border-color: var(--c-line); background: var(--c-card); box-shadow: var(--shadow-m); }
.who-tour__tab:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
/* the site's ring: hollow, then ember with a glow when its tab is chosen */
.who-tour__ring { width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-brand) 45%, transparent); }
.who-tour__tab[aria-selected="true"] .who-tour__ring { background: radial-gradient(circle, var(--c-on-brand) 0 3px, var(--c-brand) 3.5px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.who-tour__text b { display: block; font: 750 1.0625rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.who-tour__text span { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.4; color: var(--c-ink-soft); }
.who-tour__fill { position: absolute; left: 0; bottom: 0; width: calc(var(--kit-fill, 0) * 100%); height: 3px; background: var(--c-accent); }
.who-tour__tab:not([aria-selected="true"]) .who-tour__fill { display: none; }
.who-tour__stage { position: relative; min-height: clamp(480px, 42vw, 580px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); isolation: isolate; }
.who-tour__panel { position: absolute; inset: 0; }
.who-tour__panel:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -6px; border-radius: var(--radius-l); }
.who-tour__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the kind's best-known fields on a solid cream card at its lower left */
.who-tour__card { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; max-width: min(380px, calc(100% - 2.5rem)); padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-card); box-shadow: var(--shadow-l); }
.who-tour__card-title { display: flex; align-items: center; gap: .6rem; margin: 0; font: 750 1.125rem/1.2 var(--font-display); color: var(--c-ink); }
.who-tour__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, var(--c-on-brand) 0 3px, var(--c-brand) 3.5px 7px, color-mix(in srgb, var(--c-brand) 16%, var(--c-card)) 7.5px); }
.who-tour__fields { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.who-tour__fields li { padding: .3rem .7rem; border-radius: 999px; background: var(--c-brand-light); font: 700 .875rem/1.2 var(--font-ui); color: var(--c-brand-text); }
/* the last tab: the rings on night, a line and the main button */
.who-tour__panel--more { display: grid; place-items: center; overflow: hidden; }
.who-tour__panel--more[hidden] { display: none; }
.who-tour__rings { z-index: 0; left: 50%; top: 50%; width: 1000px; height: 1000px; translate: -50% -50%; stroke: var(--c-accent); }
.who-tour__rings circle { opacity: calc(.42 - var(--k) * .045); }
.who-tour__more { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5rem; max-width: 30rem; padding: 2rem; text-align: center; }
.who-tour__more-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--c-on-ink); text-wrap: balance; }
.who-tour__more-title .voice { color: var(--c-brand-on-ink); }
.who-tour__stop { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; }

/* ---------- buyers: a customer at a boutique's counter, and beside her the three ways customers buy, stacked (the
   focused buyer open), on sand with a warm light and the rings ---------- */
.who-buyers { position: relative; padding-block: var(--section-y); overflow: clip; isolation: isolate; background: radial-gradient(60% 60% at 72% 55%, color-mix(in srgb, var(--c-gold) 14%, transparent), transparent 70%), var(--c-paper-alt); }
.who-buyers__rings { left: 72%; top: 55%; width: 1500px; height: 1500px; translate: -50% -50%; }
.who-buyers__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* both faces in the square: the owner at a quarter across, her customer at four fifths */
.who-buyers__frame { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); }
.who-buyers__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.who-buyers__title { max-width: 13em; margin: 0; text-wrap: balance; }
.who-buyers__deck { position: relative; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* as tall as the stack at its tallest (the open compare card: 754 px from 820 px wide, more on a narrow phone, measured
   through the loop), so nothing around it moves as another buyer opens */
.who-buyers__scene { display: block; width: 100%; min-height: max(755px, calc(1605px - 213vw)); }
/* on the stack's top corner, in sight while it plays */
.who-buyers__stop { position: absolute; z-index: 2; top: -14px; right: -14px; }

/* ---------- anyway: the words at the left; "I run a ..." on a cream card over an owner at his laptop ---------- */
.who-anyway { position: relative; padding-block: var(--section-y); }
.who-anyway__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.who-anyway__words .head__line { max-width: 30rem; }
.who-anyway__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.who-anyway__note { margin: 0; }
.who-anyway__b2b { max-width: 30rem; margin: 1.1rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--c-ink-soft); }
.who-anyway__link { font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: .18em; }
/* the photo laid so his face sits right of center; the card over its left half, clear of him */
.who-anyway__stage { position: relative; }
.who-anyway__frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); }
.who-anyway__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; }
.who-anyway__card { position: absolute; z-index: 2; left: 1rem; top: 50%; width: min(390px, 56%); translate: 0 -50%; padding: .5rem; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-card); box-shadow: var(--shadow-l); }
.who-anyway__scene { display: block; width: 100%; height: 340px; }
.who-anyway__stop { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; }

/* ---------- close: the wide close over a salon owner's new booking ---------- */
.who-close .close__bg { object-position: 50% 20%; }
.who-close__go { display: grid; justify-items: center; gap: .9rem; }
.who-close__note { justify-content: center; color: var(--c-on-night-soft); }
.who-close__note span::before { background: var(--c-accent); }

/* ---------- below 1000 px: one column; the tour's tabs a row that scrolls ---------- */
@media (max-width: 999.98px) {
  .who-hero__in, .who-anyway__in, .who-buyers__in { grid-template-columns: 1fr; }
  /* buyers: the headline, the photo, then the stack over the photo's lower part, under the faces */
  .who-buyers__side { display: contents; }
  .who-buyers__title { order: -1; }
  .who-buyers__frame { width: min(560px, 100%); }
  .who-buyers__deck { z-index: 1; width: min(560px, calc(100% - 1.5rem)); margin: calc(-.4 * min(560px, 100vw - 2 * var(--gutter))) auto 0; }
  .who-buyers__in { row-gap: clamp(1.5rem, 4vw, 2.25rem); justify-items: center; }
  .who-buyers__title { justify-self: start; }
  .who-hero__stage { width: min(640px, 100%); }
  .who-tour { grid-template-columns: 1fr; }
  .who-tour__tabs { flex-direction: row; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
  .who-tour__tab { flex: 0 0 auto; grid-template-columns: 18px auto; align-items: center; gap: .6rem; padding: .65rem .95rem; border-color: var(--c-line); background: var(--c-card); scroll-snap-align: start; }
  .who-tour__text span { display: none; }
  .who-tour__ring { width: 18px; height: 18px; margin: 0; }
  .who-anyway__stage { width: min(680px, 100%); }
}
/* the call bar shows under 900 px: the stops below a part stand clear of it */
@media (max-width: 899.98px) { .who-hero__stop { bottom: -3rem; } }
@media (max-width: 699.98px) {
  /* three rows: each business's photo beside its booking, so each card's words stay whole and no card covers a face */
  .who-hero__stage { grid-template-columns: 1fr; gap: .75rem; }
  .who-hero__frame, .who-hero__frame--2 { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: .85rem; margin: 0; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .who-hero__img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-m); box-shadow: var(--shadow-m); }
  .who-hero__card { position: relative; left: auto; right: auto; bottom: auto; }
  /* the stop on the first booking's corner, in the first screen */
  .who-hero__stop { top: -14px; right: -6px; bottom: auto; }
  .who-tour__stage { min-height: 470px; }
  .who-tour__card { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
  .who-anyway__frame { aspect-ratio: 4 / 5; }
  .who-anyway__img { object-position: 46% 30%; }
  .who-anyway__card { position: relative; left: auto; top: auto; width: auto; translate: none; margin: -42% .75rem 0; }
  .who-anyway__scene { height: 330px; }
}