:root{--paper:#FBFAF8;--ink:#15191E;--red:#901913;--mute:#5B6470;--line:#E6E3DD}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",-apple-system,Segoe UI,sans-serif;font-size:17px;line-height:1.5}
h1,h2,h3{font-family:"Bricolage Grotesque",Georgia,serif;line-height:1.1;margin:0 0 .4em}h1{font-size:clamp(2rem,6vw,3.4rem)}h2{font-size:clamp(1.5rem,4vw,2.2rem)}h3{font-size:1.15rem}
.mono{font-family:"Spline Sans Mono",ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
a{color:var(--ink)}.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
/* Header is deliberately solid with no backdrop-filter. A blurred backdrop on a
   position:sticky element is a known repaint-flicker source on iOS Safari while
   scrolling, worse under Low Power Mode. Reported by an agent on a real phone on
   2026-09-13. The background was already 95% opaque so the blur was barely
   visible; going solid costs nothing and removes the most likely cause. */
header{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}.nav a.logo{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;text-decoration:none;font-size:1.05rem}
.nav ul{display:none;gap:22px;list-style:none;margin:0;padding:0}.nav ul a{text-decoration:none;font-size:.95rem}@media(min-width:820px){.nav ul{display:flex}}
.btn{display:inline-block;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;border:2px solid var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}.btn.ghost{background:transparent}
.hero{padding:56px 0 36px}.hero p.lead{font-size:1.15rem;max-width:640px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 10px}
.fine{font-size:.85rem;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:10px 0 40px}@media(min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:1.6rem}.stat span{color:var(--mute);font-size:.9rem}
section{padding:36px 0}.card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.grid{display:grid;gap:16px}@media(min-width:720px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}ol.steps li{position:relative;padding-left:52px;margin-bottom:18px}ol.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:"Spline Sans Mono",monospace;color:var(--red);font-weight:700}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}@media(min-width:720px){.team{grid-template-columns:repeat(4,1fr)}}.team .card{padding:16px}.team .ph{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;background:#EFEDE8;border-radius:10px;margin-bottom:10px;display:block}
/* Operations row: same card, about three quarters the size, centred as a group. */
.team.ops{margin:0 auto 6px}
@media(min-width:720px){.team.ops{grid-template-columns:repeat(3,calc(((100% - 3*14px)/4)*0.75));justify-content:center;max-width:none}}
.headshot{width:100%;height:auto;max-width:320px;aspect-ratio:4/5;object-fit:cover;border-radius:14px;display:block;margin:14px 0}
.review{border-left:3px solid var(--red);padding:6px 0 6px 16px;margin:14px 0}
footer{border-top:1px solid var(--line);padding:34px 0 90px;font-size:.85rem;color:var(--mute)}footer a{color:var(--mute)}
.sticky{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--line);z-index:20}.sticky a{flex:1;text-align:center;padding:12px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid var(--ink)}.sticky a.red{background:var(--red);border-color:var(--red);color:#fff}@media(min-width:820px){.sticky{display:none}}
.placeholder{background:#EFEDE8;border:1px dashed #BBB;border-radius:12px;padding:18px;color:var(--mute);font-size:.9rem}
label{display:block;margin:10px 0 4px;font-weight:600}input,select,textarea{width:100%;padding:12px;border:1px solid #BBB;border-radius:10px;font:inherit}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--mute);margin:12px 0}.check input{width:auto;margin-top:4px}

/* Logo. Nav uses the house mark beside the wordmark text, because the supplied
   lockup is stacked at 612x418 and a full wordmark would be far too tall for the
   nav bar. The footer has the room for the full lockup. */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .logo-mark{width:34px;height:34px;display:block;flex:0 0 auto}
.footer-logo{width:170px;height:auto;display:block;margin:0 0 14px}
/* Equal Housing Opportunity mark, added 2026-09-23 on Jon's item 2. Inline with
   the sentence rather than a block, and inherits the footer text colour. */
.eho{display:inline-block;vertical-align:-2px;margin-left:2px;opacity:.85}
/* The referral heading's second sentence, 2026-09-24 on Jon's report that the
   two halves "run together as one block". He was right, and the cause was not
   subtle: the .l2 class had been in the markup since the heading was split in
   two, but NO RULE WAS EVER WRITTEN FOR IT. A class with no rule is decoration.
   The span rendered inline and the sentences ran on.

   display:block gives the line of its own, the margin gives the half line of
   space he asked for, and em units mean it scales with the heading on a phone
   as well as a desktop. Do not swap this for a <br>: the script on that page
   rewrites the FIRST span via textContent for a referred visitor, and the two
   spans are what keep that rewrite away from this sentence. */
.l2{display:block;margin-top:.45em}

/* FAQ accordions, ported from the July build. */
.faq{margin:10px 0 26px}
.faq details{border-bottom:1px solid var(--line)}
/* Padding lives on the summary, not the details. On the details it makes the
   row look right while leaving the actual tap target 26px tall. */
.faq summary{padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--red);transition:transform .2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-top:10px;color:var(--mute);max-width:70ch}
.section-head{margin:0 0 14px}

/* Ported photos. */
.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border-radius:14px}
.shot.award img{max-width:300px;margin:0 auto 14px}

/* ---- Mobile navigation ----
   Before this, .nav ul was display:none below 820px with no alternative, so on a
   phone the only navigation was the sticky Text/Call/Apply bar and every content
   page was unreachable. The button below opens the same list as a panel. */
.nav .menu{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;margin:0;background:none;border:0;cursor:pointer}
.nav .menu span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav .menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav .menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav .menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav ul.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:64px;
  background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0 10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08)}
.nav ul.open li{border-top:1px solid var(--line)}
.nav ul.open li:first-child{border-top:0}
.nav ul.open a{display:block;padding:14px 20px;font-size:1rem}
.nav ul.open .btn{margin:10px 20px 2px;display:inline-block}
@media(min-width:820px){.nav .menu{display:none}.nav ul.open{position:static;flex-direction:row;
  box-shadow:none;border:0;padding:0;background:none}}

/* 18. The application paragraph was the lightest text on the page and the hardest
   to read on a phone. Same size, body-text colour. */
.apply-note{color:var(--ink)}

/* Card headings are h2 so the document outline does not skip a level, and
   this holds them at the size they have always been rendered at. */
.card h2{font-size:1.15rem}

/* Skip link: off screen until focused, so keyboard users can jump the nav. */
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* Checklist card: the first group heading sat 7px under the card title while
   every later one sat 17px under the list above it, so "Everyone" read as part
   of "Document checklist" rather than as its own group. The later gaps come from
   the list's bottom margin; the first heading had only the h2's own margin. This
   matches the first gap to the rest. Measured at 390px on 2026-09-18. */
#checklist > h2{margin-bottom:17px}

/* Referral page heading. Jon asked for the break after the first sentence so
   "Let's get you pre-approved." starts its own line, and for "pre-approved" to
   stay whole. The two spans give the break at every width; the non-breaking
   hyphen in the markup stops the mid-word split that showed on a phone. */
.hero h1 > span{display:block}