/* ==========================================================================
   The Hmong Inc. — Sponsors & Donors, v1 draft
   The money page. Two jobs: THANK the 2026 supporters (a wall of their real
   logos) and CONVERT the next ones (the arch is the proof, the phone is the
   close). Unique devices: the photographed 2026 arch banner as a full-bleed
   proof strip, a real-logo wall on white tiles, and a contact close where the
   phone number is set in display type — this client sells by phone.

   Light register, shared type scale (.d1/.d2/.d4/body). No colored band (Home
   owns green, the New Year owns crimson). Extends styles.css; tokens :root.
   ========================================================================== */

/* --- breadcrumb + page head ----------------------------------------------- */
.crumb {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--secondary); display: flex; gap: .55rem; align-items: center; margin: 0 0 1.6rem;
}
.crumb a { color: var(--secondary); text-decoration: none; }
.crumb a:hover { color: var(--green-ink); }
.crumb span { color: var(--hair-strong); }
.crumb b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--ink); }

.shead { padding-block: clamp(52px, 7vw, 104px) clamp(38px, 4.5vw, 64px); }
.shead__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
@media (max-width: 900px) { .shead__grid { grid-template-columns: 1fr; gap: 2rem; } }
.shead .d1 { font-size: clamp(2.75rem, 6.4vw, 5.4rem); }
.shead__side { color: var(--secondary); max-width: 36ch; }
.shead__ctas { display: flex; gap: .8rem 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; align-items: center; }

/* --- proof strip: the real 2026 arch banner ------------------------------- */
.proof { position: relative; background: var(--ink); }
.proof img { width: 100%; height: clamp(180px, 24vw, 340px); object-fit: cover; display: block; }
.proof figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(12px, 1.6vw, 20px) 0;
  background: linear-gradient(to top, rgba(8,10,12,.78), rgba(8,10,12,0));
  color: rgba(255,255,255,.94);
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .8rem; letter-spacing: .04em;
}

/* --- the wall: real logos on white tiles ---------------------------------- */
.wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.wall__tile {
  background: var(--card); border-radius: 4px;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
  display: grid; grid-template-rows: 1fr auto; gap: 1rem; justify-items: center;
  min-height: 190px;
}
.wall__logo { display: grid; place-items: center; }
.wall__logo img { max-width: min(200px, 100%); max-height: 96px; width: auto; height: auto; object-fit: contain; }
.wall__name {
  margin: 0; text-align: center;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); line-height: 1.4;
}
.wall__name span { display: block; margin-top: .25rem;
  font-variation-settings: "wdth" 100, "wght" 500; letter-spacing: .12em; font-size: .64rem; color: var(--secondary); }
.wall__note { margin-top: 1.6rem; }

/* --- why + what it covers -------------------------------------------------- */
.pitch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 84px); align-items: start; }
@media (max-width: 880px) { .pitch { grid-template-columns: 1fr; gap: 2.2rem; } }
.pitch__covers h3 {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 1rem;
}
.pitch__covers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pitch__covers li { position: relative; padding-left: 1.2rem; color: var(--secondary); font-size: 1.02rem; line-height: 1.5; }
.pitch__covers li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pitch__covers li b { color: var(--ink); font-weight: 600; }

/* --- the close: phone number in display type ------------------------------- */
.close__wrap { max-width: 62ch; }
.close__tel {
  display: inline-block; text-decoration: none; margin-top: 1.4rem;
  font-family: var(--display); font-variation-settings: "wdth" 64, "wght" 900;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -.02em;
  color: var(--green-ink); font-variant-numeric: lining-nums tabular-nums;
}
.close__tel:hover { color: var(--ink); }
.close__sub { margin-top: 1.3rem; color: var(--secondary); }
.close__ctas { display: flex; gap: .8rem 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; align-items: center; }