/* =====================================================================
   Brand pages (2026-10-22): /about/, /how-it-works/, /contact/, /lenders/.
   The homepage and /mortgage/ grammar (2px ink rule opening each list,
   hairlines between rows, Public Sans 800 headings, numbered steps, a
   ledger of facts) carried to the four older pages. Loaded through
   $page['css']. Tokens come from site.css; nothing here overrides it.
   ===================================================================== */

.page-brand ::selection{background:#cfe3f4;color:var(--ink-deep)}
.page-brand li,.page-brand dd,.page-brand dt,.page-brand p{text-wrap:pretty}
.page-brand h1,.page-brand h2,.page-brand h3{text-wrap:balance}

/* ================================================================ hero */
.pg-hero{padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,64px)}
.pg-hero__grid{display:grid;gap:28px}
@media (min-width:1000px){
    .pg-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(48px,6vw,88px);align-items:start}
    .pg-hero__side{padding-top:10px}
}
.pg-hero h1{
    max-width:17ch;
    font-size:clamp(2.05rem,5.3vw,3.25rem);font-weight:800;letter-spacing:-.032em;line-height:1.07;color:var(--ink);
}
.pg-lede{margin-top:18px;max-width:56ch;font-size:clamp(1.03rem,1.6vw,1.15rem);line-height:1.65;color:var(--ink-soft)}
.pg-lede + .pg-lede{margin-top:12px}
.pg-lede a{color:var(--accent);text-underline-offset:3px}
.pg-hero__act{margin-top:26px}

/* hero side: a short ruled ledger of facts or a jump list */
.pg-facts{border-top:2px solid var(--ink)}
.pg-facts > div{padding:13px 0 15px;border-bottom:1px solid var(--line)}
.pg-facts dt{font-size:.9rem;line-height:1.4;color:var(--muted)}
.pg-facts dd{margin:3px 0 0;font-size:1.0625rem;font-weight:600;line-height:1.45;color:var(--ink)}
.pg-facts dd a{color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.pg-facts dd span{display:block}

.pg-jump{list-style:none;border-top:2px solid var(--ink)}
.pg-jump__h{margin-bottom:8px;font-size:.95rem;font-weight:700;line-height:1.4;color:var(--ink)}
.pg-jump li{border-bottom:1px solid var(--line)}
.pg-jump a{
    display:flex;align-items:center;min-height:48px;padding:10px 0;
    font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink);
    text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:4px;
    transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.pg-jump a:hover{color:var(--accent);text-decoration-color:currentColor}
.pg-jump a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.pg-prod{list-style:none;border-top:2px solid var(--ink)}
.pg-prod li{display:flex;flex-direction:column;padding:13px 0 15px;border-bottom:1px solid var(--line)}
.pg-prod strong{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.pg-prod span{margin-top:2px;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}

/* ============================================================ sections */
.pg-sec{padding:clamp(48px,6.5vw,80px) 0}
.pg-sec--wash{background:var(--wash);border-block:1px solid var(--line)}
.pg-sec--rule{padding-top:0}
.pg-sec--rule > .container > .pg-split{border-top:1px solid var(--line);padding-top:clamp(48px,6.5vw,80px)}
.pg-sec--last{padding-bottom:clamp(32px,4vw,48px)}

/* heading column + content column, as on the homepage sections */
.pg-split{display:grid;gap:22px}
@media (min-width:1000px){
    .pg-split{grid-template-columns:minmax(0,18.5rem) minmax(0,1fr);column-gap:clamp(48px,6vw,88px);align-items:start}
    .pg-split__head{position:sticky;top:96px}
}
.pg-split__head h2{
    max-width:20ch;font-size:clamp(1.5rem,3.1vw,1.95rem);font-weight:800;letter-spacing:-.025em;line-height:1.16;color:var(--ink);
}
.pg-split__head p{margin-top:12px;max-width:42ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-soft)}
.pg-split__head a{color:var(--accent);text-underline-offset:3px}

/* plain prose */
.pg-prose{max-width:64ch}
.pg-prose p{font-size:1.0625rem;line-height:1.72;color:var(--ink-soft)}
.pg-prose p + p{margin-top:16px}
.pg-prose a{color:var(--accent);text-underline-offset:3px}
.pg-prose strong{color:var(--ink);font-weight:700}

/* ledger: term on the left, plain sentence on the right */
.pg-ledger{border-top:2px solid var(--ink)}
.pg-ledger > div{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.pg-ledger dt{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.pg-ledger dd{margin:4px 0 0;max-width:62ch;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.pg-ledger dd + dd{margin-top:8px}
.pg-ledger a{color:var(--accent);text-underline-offset:3px}
@media (min-width:760px){
    .pg-ledger > div{display:grid;grid-template-columns:13rem minmax(0,1fr);column-gap:28px}
    .pg-ledger dt{grid-row:span 3}
    .pg-ledger dd{margin:0}
    .pg-ledger dd + dd{margin-top:8px}
}

/* numbered steps */
.pg-steps{list-style:none;counter-reset:pg;border-top:2px solid var(--ink)}
.pg-steps > li{
    counter-increment:pg;display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:12px;
    padding:18px 0 20px;border-bottom:1px solid var(--line);
}
.pg-steps > li::before{
    content:counter(pg);grid-row:span 3;
    font-size:1.55rem;font-weight:800;line-height:1.1;color:var(--accent-logo);font-variant-numeric:tabular-nums;
}
.pg-steps h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.pg-steps p{margin-top:4px;max-width:62ch;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.pg-steps p + p{margin-top:8px}
.pg-steps a{color:var(--accent);text-underline-offset:3px}

.pg-after{margin-top:22px;max-width:62ch;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.pg-after a{color:var(--accent);font-weight:600;text-underline-offset:3px}

/* contact routes: one row per subject line */
.pg-routes{list-style:none;border-top:2px solid var(--ink)}
.pg-routes > li{display:grid;gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--line)}
@media (min-width:760px){
    .pg-routes > li{grid-template-columns:13rem minmax(0,1fr);column-gap:28px;align-items:start}
    .pg-routes__go{grid-column:2}
}
.pg-routes h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.pg-routes p{max-width:62ch;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.pg-routes__go{display:flex;flex-wrap:wrap;column-gap:22px;margin-top:2px}
.pg-routes__go a{
    display:inline-flex;align-items:center;min-height:44px;
    font-size:.97rem;font-weight:600;color:var(--accent);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.pg-routes__go a:hover{text-decoration-thickness:2px}
.pg-routes__go a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* address block */
.pg-address{font-style:normal;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.pg-address strong{font-weight:700}

/* small link row under a section */
.pg-links{display:flex;flex-wrap:wrap;column-gap:24px;list-style:none;margin-top:18px}
.pg-links a{
    display:inline-flex;align-items:center;min-height:44px;
    font-size:.97rem;font-weight:600;color:var(--accent);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.pg-links a:hover{text-decoration-thickness:2px}
.pg-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* primary button: ink pill, colour change only on hover */
.pg-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
    padding:14px 28px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
    font-size:1rem;font-weight:600;text-align:center;text-decoration:none;
    transition:background .15s var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.pg-btn svg{flex:0 0 auto;width:18px;height:18px}
.pg-btn:hover{background:var(--ink-deep)}
.pg-btn:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
@media (max-width:479px){.pg-btn{width:100%}}
.pg-hero__note{margin-top:12px;font-size:.92rem;line-height:1.5;color:var(--muted)}

/* "Keep reading" (partials/related.php) on these pages: no nudge, no lift */
.page-brand .rel{padding-top:clamp(40px,5vw,56px)}
.page-brand .ix__a:hover svg,.page-brand .rel__btn:hover svg{transform:none}
.page-brand .rel__btn:hover{transform:none}

@media (prefers-reduced-motion:reduce){
    .pg-jump a,.pg-btn{transition:none}
}