/* ==========================================================================
   Our commitment and Why us (Alex, 2026-11-11): two sections below Why now
   and above the free proof of concept.
   Our commitment: a black panel with "We win when you win." beside a
   straight-line graph of your results (up) against our compensation (across).
   Why us: on white beneath it, three photographs with a reason under each, then the places we have worked
   and studied as a band of logos under a centered title.
   After the mood board's line drawings and the dimensioned blueprints on Cosmos.
   ========================================================================== */

.wy { padding: 0 0 clamp(88px, 10vw, 156px); background: var(--bg); color: var(--ink); }
.wy-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wy h3 { margin: 0; font: inherit; }
.wy ul, .wy ol { margin: 0; padding: 0; list-style: none; }
.wy p { margin: 0; text-wrap: pretty; }

/* the black panel */
.wy-dark { padding: clamp(28px, 4vw, 64px); background: #000; color: #fff; }
.wy-dark .kick svg { color: #fff; }
.wy-dark-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.wy-dark-lead { display: grid; gap: 22px; justify-items: start; }
.wy-lede { max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.wy-lede--end { margin-top: -6px !important; }   /* the closing line, as its own paragraph, in the same color as the one above (Alex, 2026-11-11) */

/* the graph: a straight line, your results against our compensation.
   A soft shade under the line and one marked point with guides to both axes;
   the line draws in when the graph scrolls into view. No grid lines and no
   extra points (Alex, 2026-11-11). */
.wy-dia { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; overflow: visible; }   /* its box is cropped to the drawing, so it centers in the panel */
.d-tick line { stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.d-ax { stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.d-axh { fill: rgba(255, 255, 255, .6); }
.d-guide { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.d-line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.d-arrow { fill: #fff; }
.d-pt { fill: #fff; }
.d-halo { fill: rgba(255, 255, 255, .16); }
.d-t { fill: #fff; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .06em; }

/* the draw-in (only when the script is running and motion is allowed) */
.wy-js .wy-dia .d-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.5s cubic-bezier(.3, .6, .2, 1) .15s; }
.wy-js .wy-dia .d-area, .wy-js .wy-dia .d-arrow, .wy-js .wy-dia .d-pt, .wy-js .wy-dia .d-halo, .wy-js .wy-dia .d-guide { opacity: 0; transition: opacity .6s ease; }
.wy-js .wy-dia.in .d-line { stroke-dashoffset: 0; }
.wy-js .wy-dia.in .d-area { opacity: 1; transition-delay: .9s; }
.wy-js .wy-dia.in .d-arrow { opacity: 1; transition-delay: 1.5s; }
.wy-js .wy-dia.in .d-pt, .wy-js .wy-dia.in .d-halo, .wy-js .wy-dia.in .d-guide { opacity: 1; transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .wy-js .wy-dia .d-line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .wy-js .wy-dia .d-area, .wy-js .wy-dia .d-arrow, .wy-js .wy-dia .d-pt, .wy-js .wy-dia .d-halo, .wy-js .wy-dia .d-guide { opacity: 1; transition: none; }
}

/* ---------- Why us: on white, below Our commitment ---------- */
.wu { padding: 0 0 clamp(88px, 10vw, 156px); background: var(--bg); color: var(--ink); }
.wu ol, .wu ul { margin: 0; padding: 0; list-style: none; }
.wu h3 { margin: 0; font: inherit; }
.wu p { margin: 0; text-wrap: pretty; }
/* three photographs, each reason beneath its photo (chosen by Alex from five designs, 2026-11-11;
   after the black and white architecture grids on Cosmos and the mood board). Square, not tall,
   so the photos take less height (Alex, 2026-11-11). */
.wu .how-head { margin-bottom: clamp(36px, 4.2vw, 64px); }
.wu-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.wu-ph { aspect-ratio: 1 / 1; margin-bottom: 18px; overflow: hidden; background: #E9E9E6; }
.wu-ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.wu-n { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #61635C; }
.wu-shot h3 { margin-top: 8px; font-family: var(--logo); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -.026em; text-wrap: balance; }
.wu-shot p { margin-top: 8px; max-width: 38ch; font-size: 15.5px; line-height: 1.5; color: #61635C; }

/* the logos, as a band at the bottom of Why us */
.wy-band { margin-top: clamp(34px, 3.6vw, 56px); }   /* close under the photo cards, no dividing line (Alex, 2026-11-11) */
.wy-band-t { margin-top: clamp(22px, 2.4vw, 34px) !important; text-align: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: #61635C; }   /* the title sits beneath the logos */
.wy-logos { --lk: 1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 16px; }
.wy-logos li { position: relative; display: inline-flex; align-items: center; }
.wy-logos img { display: block; width: auto; height: calc(24px * var(--lk)); filter: grayscale(1) brightness(0); opacity: .86; }
.wy-logos .lg-bain img { height: calc(20px * var(--lk)); }
.wy-logos .lg-hemut img { height: calc(24px * var(--lk)); }
.wy-logos .lg-gl img { height: calc(18px * var(--lk)); }
.wy-logos .lg-sp img { height: calc(28px * var(--lk)); }
.wy-logos .lg-usc img { height: calc(34px * var(--lk)); }
.wy-logos .lg-ng img { height: calc(27px * var(--lk)); }
.wy-logos .lg-hkust img { height: calc(32px * var(--lk)); }
.wy-logos .lg-bocconi img { height: calc(27px * var(--lk)); }
/* the Y Combinator batch, small and centered beneath its logo */
.wy-tag { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); font-family: "Geist Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .05em; line-height: 1; white-space: nowrap; color: #61635C; }

/* 1101 to 1279px (an iPad on its side, a small laptop): the one-row band no longer fits at full size, so the logos scale down a little */
@media (min-width: 1101px) and (max-width: 1279px) {
  .wy-logos { --lk: .86; gap: 14px; }
}
@media (max-width: 1100px) {
  .wy-logos { flex-wrap: wrap; justify-content: center; gap: 34px 44px; }
}
@media (max-width: 900px) {
  .wy-dark-top { grid-template-columns: minmax(0, 1fr); }
}
/* the three photo cards stay side by side on tablets and only stack on phones */
@media (max-width: 680px) {
  .wu-shots { grid-template-columns: minmax(0, 1fr); }
  .wu-ph { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .d-t { font-size: 21px; }   /* the graph shrinks on phones, so its two labels grow to stay readable */
}