/* About Us page only. Loaded by app/routes/about-us.tsx through its `links`
 * export, never globally, and every selector is scoped under `.tp`.
 * Ported from the approved team page (Oct 10 2026); sizes are rem so the
 * accessibility text-size setting scales this page like the rest of the site, and the
 * font families come from main.css's tokens so the readable-font setting applies here too. */
.tp{--p:#2A6BD6;--pd:#1F54AC;--ps:#EAF2FC;--n:#0F2447;--ink:#15213a;--mut:#5b6678;--line:#dfe6f2;--bg:#F5F7FA}
.tp{font-family:var(--font-body,'Open Sans',Arial,sans-serif);color:var(--ink);line-height:1.6;font-size:1.0625rem}
.tp h1,.tp h2,.tp h3{font-family:var(--font-display,Montserrat,Arial,sans-serif);color:var(--n);margin:0;line-height:1.15;letter-spacing:normal}
.tp p{margin:0 0 14px}
.tp a{color:var(--pd)}
.tp .tp-eyebrow{font:700 1.1875rem var(--font-display,Montserrat,Arial,sans-serif);letter-spacing:.04em;color:var(--ink);margin:0 0 12px}
.tp .role{font:700 0.875rem var(--font-display,Montserrat,Arial,sans-serif);color:var(--p);margin:4px 0 12px}
.tp .tp-hero{padding:56px 0 64px;background:var(--bg);border-top:6px solid var(--p);border-bottom:1px solid var(--line)}
.tp .tp-hero .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.tp .tp-hero h1{font-size:2.875rem;font-weight:800;margin-bottom:22px}
.tp .tp-hero p{font-size:1.1875rem;color:var(--ink)}
.tp .facts{background:#fff;border-radius:14px;border-left:4px solid var(--p);padding:10px 28px;box-shadow:0 10px 30px rgba(15,36,71,.08)}
.tp .facts div{padding:14px 0;border-bottom:1px solid var(--line)}
.tp .facts div:last-child{border-bottom:0}
.tp .facts b{display:block;font:800 2.125rem var(--font-display,Montserrat,Arial,sans-serif);color:var(--n);line-height:1.1}
.tp .facts span{color:var(--mut);font-size:0.9375rem}
.tp .lead{padding:64px 0}
.tp .lead h2{font-size:1.875rem;font-weight:800;margin-bottom:8px}
.tp .lead .sub{color:var(--mut);margin-bottom:34px}
.tp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px}
.tp .card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;margin-bottom:18px}
.tp .card h3{font-size:1.375rem;font-weight:800}
.tp .card p{font-size:1rem}
.tp .blue{color:var(--p)}
@media(max-width:1040px){.tp .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.tp .tp-hero .grid,.tp .cards{grid-template-columns:1fr}.tp .tp-hero h1{font-size:2.125rem}}
/* Reflow at 320 px with the text-size and spacing preferences on: cells never grow past the viewport and a long word wraps. */
.tp .tp-hero .grid>div,.tp .card{min-width:0}
.tp h1,.tp h2,.tp h3,.tp .facts b{overflow-wrap:anywhere}
/* The text-spacing preference sets letter-spacing on body; these two set their own, so they opt in. */
html[data-a11y-spacing] .tp h1,html[data-a11y-spacing] .tp h2,html[data-a11y-spacing] .tp h3,html[data-a11y-spacing] .tp .tp-eyebrow,html[data-a11y-spacing] .tp .role,html[data-a11y-spacing] .tp .facts b{letter-spacing:.12em}
html[data-a11y-spacing] .tp,html[data-a11y-spacing] .tp p{line-height:1.8}
/* The high-contrast preference swaps the site tokens; About's own tokens follow it. */
html[data-a11y-contrast] .tp{--ink:#000;--n:#000;--mut:#000;--line:#000;--bg:#fff;--p:#0A46A8;--pd:#06306F}
html[data-a11y-contrast] .tp .facts{box-shadow:none;border:2px solid #000}