/* Home: the parts that are new in the overture. Tokens only, no hex values. */

/* intro paragraph, three spray phrases */
.hm-intro { margin: 0; max-width: 34em; font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; letter-spacing: -0.01em; color: var(--wit-ink); text-wrap: pretty; }
.hm-intro .spray { font-weight: var(--fw-regular); }

.hm-h2 { margin: 20px 0 0; }
.hm-sub { max-width: 52ch; }
.hm-lead { margin: 24px 0 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--wit-ink-soft); }
.hm-actions { margin: 32px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.card .overline { margin: 0; }

/* work: five tiles, the photo always visible but dimmed, lighter on hover */
.hm-tiles { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.hm-note { margin: 40px 0 0; max-width: 700px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--wit-ink-soft); }
.tile--dim { aspect-ratio: auto; min-height: 276px; }
.tile--dim img { filter: none; }
.tile--dim::after { background: var(--wit-ink); mix-blend-mode: normal; opacity: 0.5; }
.tile--dim::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; z-index: 0; background-image: linear-gradient(to top, color-mix(in srgb, var(--wit-ink) 80%, transparent), transparent); pointer-events: none; }
.tile--dim:hover img { filter: none; }
.tile--dim:hover::after { opacity: 0.12; }
.tile--dim .tile__tag { top: 24px; bottom: auto; left: 24px; }
.tile--dim .tile__name { left: 24px; bottom: 28px; font-size: clamp(24px, 2.4vw, 32px); }
.tile--dim .tile__name::after { content: ""; display: block; width: 100%; min-width: 48px; height: 4px; margin-top: 10px; background: var(--wit-spray-full); }
@media (hover: none) {
  .tile.tile--dim img { filter: none; }
  .tile.tile--dim::after { opacity: 0.5; }
}

/* who you work with: text and a white card */
.hm-who { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .hm-who { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.hm-card { background: var(--wit-white); border: 1px solid var(--wit-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: clamp(24px, 3vw, 36px); }
.hm-card__who { display: flex; align-items: center; gap: 20px; }
.hm-card__img { flex: none; width: 80px; height: 80px; border-radius: var(--radius-pill); object-fit: cover; }
.hm-card__img--init { display: flex; align-items: center; justify-content: center; background: var(--wit-ink); color: var(--wit-white); font-family: var(--font-display); font-weight: var(--fw-thin); font-size: 30px; letter-spacing: -0.02em; }
.hm-card__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--wit-ink); }
.hm-card__role { margin: 4px 0 0; font-size: 15px; color: var(--wit-ink-muted); }
.hm-card__label { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--wit-line); }
.hm-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hm-chip { padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; }
.hm-chip--cyan { background: var(--wit-cyan-wash); color: var(--wit-cyan-deep); }
.hm-chip--violet { background: var(--wit-violet-wash); color: var(--wit-violet-deep); }
.hm-chip--pink { background: var(--wit-pink-wash); color: var(--wit-pink-deep); }
.hm-chip--coral { background: var(--wit-coral-wash); color: var(--wit-coral-deep); }
.hm-chip--lime { background: var(--wit-lime-wash); color: var(--wit-lime-deep); }

/* ideas */
.hm-statement { margin: 24px 0 0; max-width: 20em; font-family: var(--font-display); font-weight: var(--fw-thin); font-size: clamp(32px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--wit-ink); text-wrap: balance; }
.hm-essays { margin-top: 48px; display: grid; gap: 32px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px) { .hm-essays { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acard__read { margin-top: 4px; }

/* how we work: five rows */
.hm-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; border-top: 1px solid var(--wit-line); }
.hm-steps .step { padding-block: 20px; border-bottom: 1px solid var(--wit-line); }