/* vision.css — Vision quote and the four values. */

.values{background:var(--ink);color:var(--paper)}
.values .eyebrow{color:#D7B46E}
.values .lede{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.quote{font-family:var(--display);font-size:clamp(28px,3.8vw,48px);line-height:1.18;font-weight:500;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.quote em{color:#D7B46E;font-style:normal}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(48px,7vw,80px);border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
.val{padding:28px 24px 8px 0;display:grid;gap:10px;align-content:start}
.val + .val{padding-left:24px;border-left:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
.val i{font-family:var(--mono);font-style:normal;font-size:13px;color:#D7B46E}
.val b{font-family:var(--display);font-size:24px;font-weight:500}
.val span{font-size:15px;color:color-mix(in srgb,var(--paper) 70%,transparent)}
@media (max-width:900px){.val-grid{grid-template-columns:1fr 1fr}.val:nth-child(3){border-left:0;padding-left:0}.val:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}}
@media (max-width:520px){.val-grid{grid-template-columns:1fr}.val + .val{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}}

:root[data-theme="dark"] .values{background:#061116;color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .values{background:#061116;color:var(--ink)}}