/*
 * founders: two direct lines. The calm moment on the page: nothing moves
 * except the "Direct line" stickers landing (Sticker Slap).
 * Until a portrait is uploaded each card is a bone "business card": the house
 * lockup, the name huge in ink, a rule, then the number and buttons printed on
 * the card itself. On phones it tightens into a compact name plate.
 * Photo cards keep the 4:5 portrait with the number and buttons below.
 */

/* Stickers rotate past the card edge; never let them widen the page on phones. */
.founders { overflow-x: clip; }

.founders__head { row-gap: 0; }
.founders__intro { grid-column: 1 / -1; }
.founders__title { margin-top: 18px; max-width: 10em; }
.founders__line { margin-top: clamp(20px, 2.4vw, 32px); color: var(--fg-soft); }
.founders__hours {
  display: inline-block;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--fg-soft);
}

.founders__cards {
  margin-top: clamp(48px, 7vw, 104px);
  row-gap: clamp(56px, 9vw, 88px);
  align-items: start;
}
.founder { grid-column: 1 / -1; min-width: 0; }

/* ---------- the card (shared) ---------- */

.founder__card {
  position: relative;
  border-radius: 4px;
  container-type: inline-size;
  box-shadow: var(--shadow-print);
}

.founder__slot {
  position: absolute;
  z-index: 2;
  top: 6cqi;
  right: -12px;
}
.founder--even .founder__sticker { --rot: -5deg; }

.founder__role { display: block; margin-bottom: 14px; }

.founder__num {
  margin-top: 22px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.founder-actions .btn-call { flex: 1 1 0; min-width: 0; justify-content: center; }
@media (min-width: 768px) {
  .founder-actions .btn-call { flex: 0 0 auto; min-width: 132px; justify-content: flex-start; }
}

/* ---------- photo card: 4:5 portrait, name on a scrim ---------- */

.founder__card--photo { aspect-ratio: 4 / 5; background: var(--bone); }
.founder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.founder__card--photo::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, rgba(17, 17, 16, 0), rgba(17, 17, 16, .55));
  pointer-events: none;
}
.founder__card--photo .founder__id {
  position: absolute;
  z-index: 1;
  left: 7.5cqi;
  right: 7.5cqi;
  bottom: 6.5cqi;
  color: var(--paper);
}
.founder__card--photo .founder__role { color: rgba(238, 237, 232, .82); }
.founder__card--photo .founder__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 96%;
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* ---------- typographic card: the business card ---------- */

.founder__card--type {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 22px;
  background: var(--bone);
  color: var(--ink);
}

/* The house lockup, top left. */
.founder__brand {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  isolation: isolate;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(.9375rem, 3.4cqi, 1.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  white-space: nowrap;
}
.founder__mark {
  position: relative;
  z-index: -1;
  width: .62em;
  height: .27em;
  margin-left: -.30em;
  overflow: visible;
}
.founder__mark .dot { fill: var(--ink); }
.founder__card--type .founder__slot { top: 14px; right: -10px; }

.founder__card--type .founder__id { margin-top: auto; padding-top: 40px; }
.founder__card--type .founder__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(2.4rem, 19cqi, 7.5rem);
  line-height: .86;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Rule, then the number and the two buttons. Stacked on narrow cards. */
.founder__line {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}
.founder__line .founder__num { margin-top: 0; }
.founder__line .founder-actions { margin-top: 0; flex-wrap: nowrap; }
.founder__line .founder-actions .btn-call { flex: 1 1 0; min-width: 0; justify-content: center; }
/* Wide enough: number left, buttons right, on one line. */
@container (min-width: 440px) {
  .founder__line { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .founder__line .founder-actions .btn-call { flex: 0 0 auto; justify-content: flex-start; }
}

/* ---------- layouts ---------- */

@media (max-width: 767px) {
  .founder { width: 86vw; max-width: 100%; justify-self: start; }
  .founder--even { justify-self: end; }
  .founder__slot { right: -8px; }
  /* Name plates sit close: they read as a pair, not two pages. */
  .founders__cards:has(.founder--type) { row-gap: 28px; }
}
@media (min-width: 768px) {
  .founders__intro { grid-column: 1 / span 6; }
  .founder--odd { grid-column: 1 / span 4; }
  .founder--even { grid-column: 5 / span 4; margin-top: 80px; }
  .founder__card--type {
    aspect-ratio: 4 / 3;
    padding: clamp(26px, 2.6vw, 38px);
  }
  .founder__card--type .founder__slot { top: clamp(18px, 6cqi, 30px); right: -12px; }
  .founder__card--type .founder__name { font-size: clamp(2.4rem, 20cqi, 7.5rem); }
  .founder__line { margin-top: 5cqi; padding-top: 4.5cqi; }
}
@media (min-width: 1024px) {
  .founders__intro { grid-column: 1 / span 8; }
  /* The pair meets in the middle. A portrait card is capped so card, number and buttons fit one screen. */
  .founder--photo { width: min(100%, calc((100svh - 56px - 250px) * .8)); }
  .founder--type { width: min(100%, 560px); }
  .founder--odd { grid-column: 2 / span 5; justify-self: end; }
  .founder--even { grid-column: 7 / span 5; justify-self: start; }
}