/* site\assets\css\pages\who-we-help.css: Who we help, as plan.md writes it. Only system.css's tokens. Parts: hero (the
   words on navy, three framed photos side by side on one gold road, a booking landing on each in turn), trades (the
   signature, on the navy designed ground), kinds (six photo cards at the right; the words and "And many more" at the
   left), buyers (three-buyers on the warm designed ground), anyway (the groomer framed at the left, the chat in a glass
   phone over its free side, the words at the right), close (the counter, a count card landing over it). */

/* hero: warm white (the signature's navy follows it), the words short enough that the three bookings land in the first
   screen */
.who-hero { overflow: hidden; padding-block: clamp(36px, 4.4vw, 64px) clamp(40px, 5vw, 72px); background: radial-gradient(46% 40% at 50% 100%, color-mix(in srgb, var(--c-gold) 12%, transparent), transparent 72%), radial-gradient(40% 50% at 0% 10%, color-mix(in srgb, var(--c-azure) 7%, transparent), transparent 70%), var(--c-paper-alt); }
.who-hero__copy { max-width: 1000px; margin: 0 auto; text-align: center; }
.who-hero__title { font-size: var(--fs-h1); color: var(--c-ink); }
.who-hero__line { max-width: 40em; margin: 16px auto 24px; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.who-hero__cta { display: flex; flex-direction: column; align-items: center; }
/* the row: three frames on one road, the middle one a little lower; each frame's booking hangs from its foot (over the
   counter, the desk, the roof: never a face), and a stem runs from it down to the frame's node on the road */
.who-hero__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; max-width: 1180px; margin: clamp(40px, 4vw, 56px) auto 0; padding-bottom: 88px; }
.who-hero__shot { --drop: 100px; position: relative; margin: 0; }
.who-hero__shot--lawyer { --drop: 60px; margin-top: 40px; }
.who-hero__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.who-hero__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.who-hero__shot--florist .who-hero__photo { object-position: 35% 50%; }
.who-hero__shot--roofer .who-hero__photo { object-position: 60% 50%; }
.who-hero__road { position: absolute; left: 0; right: 0; bottom: 27px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-gold) 5%, var(--c-gold) 95%, transparent); }
.who-hero__shot::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px; height: calc(var(--drop) - 9px); background: color-mix(in srgb, var(--c-gold) 70%, transparent); }
.who-hero__node { position: absolute; z-index: 1; left: calc(50% - 9px); top: calc(100% + var(--drop) - 9px); width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-gold); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.who-hero__shot:has(.who-hero__card[data-kit-on]) .who-hero__node { background: var(--c-gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-gold) 22%, transparent); }
.who-hero__card { position: absolute; z-index: 2; left: 50%; bottom: -34px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 10px 16px 11px 10px; box-sizing: border-box; border-radius: var(--radius-m); background: var(--c-glass-strong); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--c-black) 85%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: var(--kit-in, 1); transform: translate(-50%, calc((1 - var(--kit-in, 1)) * 12px)); }
.who-hero__badge { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-teal); }
.who-hero__badge svg { width: 15px; height: 15px; fill: none; stroke: var(--c-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.who-hero__booked { display: grid; gap: 2px; text-align: left; }
.who-hero__booked b { font: 700 .9375rem/1.25 var(--font-ui); }
.who-hero__booked span { font-size: .8125rem; line-height: 1.3; color: color-mix(in srgb, var(--c-paper) 78%, transparent); }
.who-hero__stop { position: absolute; z-index: 3; top: -56px; right: 0; }

/* trades: the designed ground (navy, a faint field of round nodes, the gold's light in the middle), the scene full width */
.who-trades { overflow: hidden; color: var(--c-paper); }
.who-trades__ground { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(42% 46% at 50% 62%, color-mix(in srgb, var(--c-gold) 11%, transparent), transparent 72%),
  radial-gradient(36% 50% at 8% 30%, color-mix(in srgb, var(--c-azure) 8%, transparent), transparent 70%),
  radial-gradient(circle, transparent 0 2.2px, var(--c-navy-3) 2.6px 3.6px, transparent 4px) 0 0 / 38px 38px,
  var(--c-ink); }
.who-trades .section-head { margin-bottom: var(--space-6); }
.who-trades__stage { position: relative; }
.who-trades__scene { display: block; width: 100%; height: 420px; }
.who-trades__stop { position: absolute; z-index: 4; top: -54px; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); }

/* kinds: the words and "And many more" at the left, six photo cards at the right; every card opens the chat, and on
   hover or focus its photo comes a little closer and a gold edge lights */
.who-kinds__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.who-kinds__copy h2 { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem); color: var(--c-ink); }
.who-kinds__copy > p { max-width: 30ch; margin: 18px 0 0; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.who-kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.who-kinds__grid li { display: flex; }
.who-kind { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius-l); background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-m); color: var(--c-ink); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.who-kind:hover, .who-kind:focus-visible { border-color: var(--c-gold); box-shadow: 0 0 0 2px var(--c-gold), var(--shadow-l); outline: none; }
.who-kind__pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); }
.who-kind__pic img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .who-kind__pic img { transition: transform .7s var(--ease-out); }
  .who-kind:hover .who-kind__pic img, .who-kind:focus-visible .who-kind__pic img { transform: scale(1.05); }
}
.who-kind--home .who-kind__pic img { object-position: 46% 30%; }
.who-kind--outdoor .who-kind__pic img { object-position: 60% 50%; }
.who-kind--law .who-kind__pic img { object-position: 64% 25%; }
.who-kind--health .who-kind__pic img { object-position: 70% 40%; }
.who-kind--realestate .who-kind__pic img { object-position: 28% 35%; }
.who-kind--events .who-kind__pic img { object-position: 40% 50%; }
.who-kind__text { display: grid; align-content: start; gap: 6px; padding: 16px 18px 20px; }
.who-kind__name { margin: 0; font-size: 1.1875rem; line-height: 1.2; color: var(--c-ink); }
.who-kind__fields { font-size: .8125rem; line-height: 1.4; color: var(--c-ink-soft); }
.who-kind__line { margin-top: 4px; font: 600 1rem/1.4 var(--font-ui); color: var(--c-ink); }
/* the seventh card: navy and gold, the node line at its top */
.who-kind--more { gap: 10px; max-width: 380px; margin-top: var(--space-5); padding: 26px 26px 24px; background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.who-kind--more .who-kind__name { font-size: var(--fs-h3); color: var(--c-paper); }
.who-kind--more .who-kind__line { margin: 0; font-weight: 500; color: color-mix(in srgb, var(--c-paper) 84%, transparent); }
.who-kind__nodes { width: 132px; height: 16px; margin-bottom: 6px; }
.who-kind__go { display: inline-flex; align-items: center; gap: .5em; margin-top: 8px; font: 700 1rem/1.2 var(--font-ui); color: var(--c-gold); }
.who-kind__go .btn__arrow { width: 18px; height: 18px; }

/* buyers: the designed ground (warm white, a faint navy field of round nodes, the gold's light), the scene on it */
.who-buyers { overflow: hidden; background: var(--c-paper-alt); }
.who-buyers__ground { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 30% at 86% 18%, color-mix(in srgb, var(--c-gold) 14%, transparent), transparent 70%),
  radial-gradient(44% 34% at 10% 80%, color-mix(in srgb, var(--c-azure) 8%, transparent), transparent 72%),
  radial-gradient(circle, transparent 0 2.2px, color-mix(in srgb, var(--c-ink) 9%, transparent) 2.6px 3.6px, transparent 4px) 0 0 / 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--c-ink) 10%, var(--c-ink) 90%, transparent); mask-image: linear-gradient(180deg, transparent, var(--c-ink) 10%, var(--c-ink) 90%, transparent); }
.who-buyers__stage { position: relative; max-width: 1100px; margin-inline: auto; }
.who-buyers__scene { display: block; width: 100%; }
.who-buyers__stop { position: absolute; z-index: 4; top: -54px; right: 0; }

/* anyway: the groomer framed at the left, the chat in a glass phone over its free side (the blue wall), the words at the
   right */
.who-anyway__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.who-anyway__copy h2 { color: var(--c-ink); }
.who-anyway__copy p { max-width: 34ch; margin: 18px 0 30px; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.who-anyway__cta { display: flex; flex-direction: column; align-items: flex-start; }
.who-anyway__pic { position: relative; height: 580px; }
.who-anyway__frame { position: absolute; top: 40px; bottom: 40px; left: 0; right: 15%; overflow: hidden; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.who-anyway__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 45% 50%; }
.who-anyway__phone { position: absolute; z-index: 2; right: 0; top: 50%; display: flex; flex-direction: column; width: 300px; height: 540px; padding: 16px 14px; box-sizing: border-box; border-radius: 38px; background: var(--c-glass-strong); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: var(--shadow-l); transform: translateY(-50%); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.who-anyway__app { display: flex; align-items: center; gap: 10px; margin: 0; padding: 2px 6px 12px; border-bottom: 1px solid var(--c-glass-line); }
.who-anyway__app img { width: 36px; height: 36px; border-radius: 50%; }
.who-anyway__app > span { display: grid; gap: 2px; }
.who-anyway__app b { font: 700 1rem/1.2 var(--font-ui); }
.who-anyway__app span span { font-size: .8125rem; color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.who-anyway__chat { display: flex; flex: 1; flex-direction: column; gap: 10px; padding-top: 14px; }
.who-anyway__msg { margin: 0; opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.who-anyway__msg--us { align-self: flex-start; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--c-paper) 13%, transparent); font: 500 .9375rem/1.35 var(--font-ui); }
.who-anyway__picks { display: flex; gap: 6px; }
.who-anyway__picks span { display: grid; place-items: center; min-width: 44px; padding: 8px 10px; box-sizing: border-box; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-paper) 34%, transparent); font: 700 .875rem/1 var(--font-ui); }
.who-anyway__picks span[data-kit-on] { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.who-anyway__msg--me { align-self: flex-end; padding: 9px 16px; border-radius: 16px 16px 4px 16px; background: var(--c-azure); color: var(--c-ink); font: 700 .9375rem/1.3 var(--font-ui); }
.who-anyway__msg--typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 14px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--c-paper) 13%, transparent); }
.who-anyway__msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--c-paper) 72%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .who-anyway__msg--typing i { animation: who-dot 1s var(--ease-in-out) infinite; }
  .who-anyway__msg--typing i:nth-child(2) { animation-delay: .15s; }
  .who-anyway__msg--typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes who-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.who-anyway__read { display: grid; gap: 8px; min-width: 200px; }
.who-anyway__read i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(var(--c-gold), var(--c-gold)) 0 0 / calc(var(--kit-fill, 1) * 100%) 100% no-repeat, color-mix(in srgb, var(--c-paper) 16%, transparent); }
.who-anyway__found { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c-teal) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c-teal) 40%, transparent); font: 500 .875rem/1.35 var(--font-ui); }
.who-anyway__found b { font-weight: 700; }
.who-anyway__tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-teal); }
.who-anyway__tick svg { width: 13px; height: 13px; fill: none; stroke: var(--c-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.who-anyway__plan { padding: 11px 14px 13px; border-radius: 16px; background: var(--c-paper); color: var(--c-ink); }
.who-anyway__plan small { display: block; margin-bottom: 4px; font: 700 .8125rem/1 var(--font-ui); color: var(--c-brand-text); }
.who-anyway__plan p { margin: 0; font: 600 .9375rem/1.35 var(--font-ui); }
.who-anyway__stop { position: absolute; z-index: 3; top: -18px; right: 0; }

/* close: the counter full-bleed, the words at its foot, the count card landing over the wall between the two */
.close { display: flex; align-items: flex-end; min-height: min(90svh, 880px); }
.close__wrap { width: 100%; text-align: center; }
.close h2 { font-size: var(--fs-h1); color: var(--c-paper); }
.close__line { max-width: 560px; margin: 16px auto 28px; font-size: 1.1875rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.close__cta { display: flex; flex-direction: column; align-items: center; }
.who-close .close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 24%, transparent) 0%, color-mix(in srgb, var(--c-ink) 8%, transparent) 30%, color-mix(in srgb, var(--c-ink) 70%, transparent) 60%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
.who-close__photo { object-position: 50% 30%; }
.who-close__count { position: absolute; z-index: 2; left: 41%; top: 26px; width: 270px; transform: translateX(-50%); }
.who-close__card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: var(--radius-m); background: var(--c-glass-strong); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--c-black) 85%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.who-close__card span { font: 600 .9375rem/1.3 var(--font-ui); color: color-mix(in srgb, var(--c-paper) 86%, transparent); }
.who-close__card b { font: 800 2rem/1 var(--font-display); color: var(--c-gold); font-variant-numeric: tabular-nums; }
.who-close__chip { position: absolute; right: -12px; bottom: -18px; padding: 8px 13px; border-radius: 999px; background: var(--c-gold); color: var(--c-ink); font: 700 .875rem/1 var(--font-ui); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--c-black) 70%, transparent); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)) scale(calc(.9 + var(--kit-in, 1) * .1)); }
.who-close__stop { position: absolute; z-index: 3; top: 26px; left: calc(41% + 152px); }

@media (max-width: 1100px) {
  .who-kinds__in { grid-template-columns: minmax(0, 1fr); }
  .who-kinds__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 12px 40px; align-items: end; }
  .who-kinds__copy > h2, .who-kinds__copy > p { grid-column: 1; }
  .who-kind--more { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .who-close__count { width: 240px; }
  .who-close__card { padding: 12px 14px; }
  .who-close__stop { left: calc(41% + 136px); }
  /* anyway: the words, then the photo with her face in its top third, then the phone over its lower half, at the right
     over the wall */
  .who-anyway__in { grid-template-columns: minmax(0, 1fr); }
  .who-anyway__copy { order: -1; }
  .who-anyway__pic { height: auto; }
  .who-anyway__frame { position: relative; top: auto; bottom: auto; right: auto; height: 620px; }
  .who-anyway__photo { object-position: 53% 50%; }
  .who-anyway__phone { position: relative; right: auto; top: auto; margin: -330px 24px 0 auto; transform: none; }
  .who-anyway__stop { top: auto; bottom: 552px; right: 24px; }
}

/* the phone: three slim frames in a row with the road through them, the three bookings stacked under it */
@media (max-width: 700px) {
  .who-hero__row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 12px; margin-top: 72px; padding-bottom: 0; }
  .who-hero__shot { display: contents; }
  .who-hero__shot::after { display: none; }
  .who-hero__frame { grid-row: 1; aspect-ratio: 3 / 4; border-radius: var(--radius-m); }
  .who-hero__shot--florist .who-hero__frame, .who-hero__shot--florist .who-hero__node { grid-column: 1; }
  .who-hero__shot--lawyer .who-hero__frame, .who-hero__shot--lawyer .who-hero__node { grid-column: 2; }
  .who-hero__shot--roofer .who-hero__frame, .who-hero__shot--roofer .who-hero__node { grid-column: 3; }
  .who-hero__shot--florist .who-hero__photo { object-position: 17% 50%; }
  .who-hero__shot--lawyer .who-hero__photo { object-position: 8% 50%; }
  .who-hero__shot--roofer .who-hero__photo { object-position: 85% 50%; }
  .who-hero__road { position: relative; grid-row: 2; grid-column: 1 / -1; align-self: center; bottom: auto; }
  .who-hero__node { position: relative; grid-row: 2; justify-self: center; left: auto; top: auto; }
  .who-hero__card { position: relative; grid-column: 1 / -1; left: auto; bottom: auto; width: auto; max-width: none; transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
  .who-hero__shot--florist .who-hero__card { grid-row: 3; }
  .who-hero__shot--lawyer .who-hero__card { grid-row: 4; }
  .who-hero__shot--roofer .who-hero__card { grid-row: 5; }
  .who-hero__stop { top: -58px; } /* under the button's note, never over it */

  .who-trades__scene { height: 400px; }

  .who-kinds__copy { display: block; }
  .who-kind--more { max-width: none; margin-top: var(--space-4); }
  .who-kinds__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .who-kind:not(.who-kind--more) { flex-direction: row; border-radius: var(--radius-m); }
  .who-kind__pic { flex: none; width: 112px; aspect-ratio: auto; }
  .who-kind__text { padding: 14px 16px 15px; gap: 4px; }
  .who-kind__name { font-size: 1.0625rem; }
  .who-kind__line { margin-top: 2px; font-size: .9375rem; }

  .who-buyers__scene { min-height: 800px; } /* its tallest turn (the comparison open), so nothing under it moves */

  .who-anyway__phone { margin-inline: auto; }
  .who-anyway__stop { right: 12px; }

  .who-close__photo { object-position: 6% 50%; }
  .who-close__count { left: 16px; top: 20px; width: 230px; transform: none; }
  .who-close__card span { font-size: .875rem; }
  .who-close__card b { font-size: 1.75rem; }
  .who-close__stop { top: 20px; left: auto; right: 16px; }
}