/* Ported from prototype/about.html */
.ahero{text-align:center;padding-block:64px 56px}
.ahero .gavel{width:120px;height:auto;display:block;margin:0 auto 18px}
.ahero h1{font-size:clamp(40px,6.4vw,92px);line-height:1.02;max-width:12ch;margin-inline:auto}
.ahero .lead{font-size:clamp(18px,1.9vw,23px);color:var(--ink-2);max-width:44ch;margin:18px auto 0}
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story h2{font-size:clamp(30px,3.8vw,48px)}
.story p{font-size:18px;color:var(--ink-2);margin-top:14px;max-width:46ch}
.quote{background:var(--night);color:var(--night-ink);border-radius:var(--r-lg);padding:40px;position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;width:420px;height:420px;left:-120px;top:-160px;background:radial-gradient(closest-side,rgba(215,21,92,.35),rgba(77,41,98,.2) 55%,transparent);pointer-events:none}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1.2;position:relative}
.quote .who{display:flex;gap:14px;align-items:center;margin-top:26px;position:relative}
.quote .av{width:52px;height:52px;border-radius:14px;background:var(--brand-gradient);display:grid;place-items:center;font-family:var(--display);font-size:22px;color:#fff}
.quote .who b{display:block}
.quote .who span{color:var(--night-ink-2);font-size:15px}
.what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.what .tile h3{font-size:24px;margin:12px 0 8px}
.what .tile p{color:var(--ink-2)}
.what .ri{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--brand-purple)}
.values{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.values .tile{display:flex;flex-direction:column;gap:10px}
/* Values sit on a mist band: the small tiles are white so they read as cards, not floating text */
.values .tile:not(.big){background:#fff}
.values .tile h3{font-size:clamp(22px,2.2vw,28px)}
.values .tile p{color:var(--ink-2);max-width:40ch}
.values .big{grid-row:span 2;background:var(--night);color:var(--night-ink)}
.values .big p{color:var(--night-ink-2)}
.values .big svg.art{margin-top:auto;width:min(100%,260px);align-self:center}
.values .wide{grid-column:span 2}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;background:var(--mist);padding:18px;border-radius:32px}
.nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.nums.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.nums.n1{grid-template-columns:1fr}.nums.n0{display:none}
.nums div{background:#fff;border-radius:var(--r-md);padding:24px}
.nums .num{font-size:clamp(32px,3.4vw,46px);color:var(--brand-purple);line-height:1;display:block}
.nums small{display:block;margin-top:10px;color:var(--ink-2);font-size:15px}
.cta{text-align:center}
.cta h2{font-size:clamp(30px,4.2vw,54px)}
.cta p{color:var(--ink-2);font-size:19px;margin:14px auto 26px;max-width:42ch}
.cta .row{justify-content:center;gap:20px}
@media (max-width:1080px){
  .story{grid-template-columns:1fr;gap:32px}
  .what{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .values .big{grid-row:auto;grid-column:span 2}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.nums.n1{grid-template-columns:1fr}
}
@media (max-width:640px){
  .values{grid-template-columns:1fr}
  .values .big,.values .wide{grid-column:auto}
  .quote{padding:28px}
}