@font-face{font-family:Lexend;font-weight:300;src:url("/accessum-score-v204-20261006/assets/lexend-light.ttf") format("truetype")}
@font-face{font-family:Lexend;font-weight:400;src:url("/accessum-score-v204-20261006/assets/lexend-regular.ttf") format("truetype")}
@font-face{font-family:Lexend;font-weight:500;src:url("/accessum-score-v204-20261006/assets/lexend-medium.ttf") format("truetype")}
html,body{overflow-x:clip}
.lbl,.num span,.final-closing .lbl{font-size:17px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
.num.cb span{position:relative;padding-bottom:14px;white-space:nowrap}
.num.cb span::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:4px;background:var(--plum)}
.num.cb{min-height:0}
h1,h2,h3,.ms .lede28,.ms .closer,.ms .pull{text-wrap:balance}
main h2{margin-bottom:var(--gap-body)!important}
.ms .src{display:block;font-size:15px;line-height:1.45;font-weight:300;color:#5c5d70;margin:16px 0 0}
/* ===== hero (still photograph; the film rule applies only where a film exists) ===== */
.hero img.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:-2}
@media (min-width:913px){.hero h1{max-width:720px!important}}
.hero .hero-shade{background:linear-gradient(90deg,rgba(15,18,48,.86) 0%,rgba(15,18,48,.74) 40%,rgba(15,18,48,.28) 70%,rgba(15,18,48,0) 100%)}
.hero p.an{margin-bottom:0;max-width:40ch}
@media (min-width:913px){.hero h1{font-size:58px!important}}
.hero .hero-note{font-size:15px;line-height:1.4;color:#c9cbe0;margin:14px 0 0}
.btn-out{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border:1px solid currentColor;font-size:16px;font-weight:400;letter-spacing:.02em;text-decoration:none;transition:background 200ms ease,color 200ms ease}
.btn-out::before,.btn-out::after{display:none!important}
.hero .btn-out{color:#fff;margin-top:var(--gap-cta)}
.hero .btn-out:hover,.hero .btn-out:focus-visible{background:#fff;color:var(--navy)}
#closing .btn-out{color:var(--plum)}
#closing .btn-out:hover,#closing .btn-out:focus-visible{background:var(--plum);color:#fff}
@media (max-width:912px){
  .hero{min-height:max(640px,calc(100svh - 56px))!important;display:flex;flex-direction:column;justify-content:flex-end}
  .hero .hero-content{padding-bottom:32px!important;margin-top:auto}
  .hero .hero-shade{background:linear-gradient(180deg,rgba(15,18,48,.70) 0%,rgba(15,18,48,.70) 36%,rgba(15,18,48,.9) 60%)} /* v2.0.4: 70% navy over the bright window so white hero text holds */
  .hero img.hero-still{object-position:40% 20%}
  .hero p.an{font-size:19px}
}
/* ===== chapter scene (house) ===== */
.ms .scene{display:grid;grid-template-columns:422px 1fr;column-gap:88px;align-items:start;margin:0}
.ms .scene .photo{height:auto;aspect-ratio:3/4;min-height:0;align-self:start;margin:0}
.ms .scene .photo>img{width:100%;height:100%;object-fit:cover}
.ms .scene .copy{max-width:none}
@media (min-width:913px){.ms.photo-right .scene{grid-template-columns:1fr 422px}.ms.photo-right .scene .photo{order:2}
  .ms .scene.half,.ms.photo-right .scene.half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ms .scene.half .photo{aspect-ratio:4/3;min-height:0;height:auto;align-self:start}
.ms .lede28{font-size:28px;line-height:1.25;font-weight:300;color:var(--navy);letter-spacing:-.02em;max-width:30ch;margin:0 0 var(--gap-body)}
.ms .scene .copy>p.body,.ms p.body{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0 0 var(--gap-body);max-width:none}
.ms .pull{font-size:28px;line-height:1.25;font-weight:400;color:var(--navy);letter-spacing:-.02em;max-width:none;margin:64px 0 var(--gap-unit)}
.ms .closer{font-size:28px;line-height:1.25;font-weight:400;color:var(--navy);letter-spacing:-.02em;max-width:34ch;margin:64px auto 0;text-align:center}
@media (min-width:913px){.ms .closer{max-width:none!important;white-space:nowrap;text-wrap:nowrap}}
@media (min-width:913px) and (max-width:1279px){#conversation .closer{white-space:normal;text-wrap:balance;max-width:34ch!important}} /* v2.0.4: the one closer that overran the viewport at 1000 may wrap on tablet; one line from 1280 */
.ms .recog{margin-top:var(--gap-unit)}
.ms .recog p{font-size:19px;line-height:1.5;font-weight:400;color:var(--navy);max-width:none;margin:0 0 10px}
.ms .recog p:last-child{margin-bottom:0}
.ms .scene .copy>p.body+p.body{margin-top:0}
.ms .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px}
.ms .pair>p{border-top:4px solid var(--plum);padding-top:20px;font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0}
.ms .pair>p b{font-weight:400;color:var(--navy)}
.tlink{font-size:16px}
.ms .reads .tlink,.rel .reads .tlink{display:inline-block;min-height:44px;line-height:44px}
.ms .reads{margin-top:16px}
@media (max-width:1255px){.ms .scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}.ms .scene .photo{min-height:420px}}
@media (min-width:913px) and (max-width:1255px){.ms .scene.half .photo{aspect-ratio:auto;align-self:stretch;min-height:0}.ms .scene.half .photo>img{width:100%;height:100%;object-fit:cover}}
@media (max-width:912px){.ms .scene,.ms .pair{grid-template-columns:minmax(0,1fr)!important;row-gap:var(--gap-unit)}.ms .scene .photo{min-height:0;aspect-ratio:3/4;height:auto}.ms .scene.half .photo{aspect-ratio:4/3}.ms .lede28{font-size:24px}.ms .pull{font-size:24px;margin-top:48px}.ms .closer{font-size:24px}.num.cb span{white-space:normal}main h2{font-size:32px}}
/* ===== 01 · the reading (anchor chapter: opens on the figure, not a photo — figure chapter = anchor composition) ===== */
#reading .open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px;align-items:start}
#reading .open .copy{max-width:none}
#reading .open p.body{margin-bottom:0}
#reading .open .right{display:block;padding-top:68px}
#reading .goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px;margin-top:var(--gap-unit)}
#reading .goal>div{border-top:4px solid var(--plum);padding-top:20px}
#reading .goal .caps{font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--plum);margin:0 0 12px}
#reading .goal .q{font-size:21px;line-height:1.35;font-weight:300;letter-spacing:-.015em;color:var(--navy);margin:0 0 6px}
#reading .goal .ans{font-size:19px;line-height:1.6;font-weight:400;color:var(--navy);margin:0}
@media (max-width:1255px){#reading .goal{column-gap:40px}}
@media (max-width:912px){#reading .goal{grid-template-columns:1fr;row-gap:32px}}
@media (min-width:913px){#reading .open .copy{order:2}#reading .open .right{order:1}}
#reading .fig{margin:var(--gap-figure) 0 0;box-shadow:0 22px 50px rgba(20,23,55,.22),0 4px 10px rgba(20,23,55,.08);background:#f6f1ea}
#reading .fig svg{display:block;width:100%;height:auto;font-family:Lexend,Arial,sans-serif}
#reading .fig-phone,.counts .fig-phone{display:none}
#reading .four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:88px;row-gap:40px;margin-top:var(--gap-unit)}
#reading .four>div{border-top:4px solid var(--plum);padding-top:20px}
#reading .four h3{font-size:21px;line-height:1.3;font-weight:400;letter-spacing:-.015em;color:var(--navy);margin:0 0 8px}
#reading .four p{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0}
@media (max-width:1255px){#reading .open{column-gap:40px}}
/* below 1100 the desktop editions would render their caps under 15px (11 × column/800); the redrawn phone editions take over at a capped width */
@media (max-width:1255px){#reading .fig-desk,.counts .fig-desk{display:none}#reading .fig-phone,.counts .fig-phone{display:block;max-width:420px}} /* v2.0.4: switch at 1256 (was 1100), the page's existing layout breakpoint. Below it the column is narrower than 1100 (gutter 5.4vw) and the desktop editions' smallest rendered text falls under 15px: reading 11 units × column/800; what-counts 12 units × (column−96)/800 */
@media (max-width:912px){#reading .open{grid-template-columns:1fr;row-gap:var(--gap-body)}#reading .open .right{padding-top:0}#reading .four{grid-template-columns:1fr;row-gap:32px}#reading .fig-phone,.counts .fig-phone{max-width:none}}
/* ===== 02 · what counts (ivory band, self-contained unit) ===== */
.band.counts{background:var(--ivory)}
.counts .wrap>.lbl{margin-bottom:var(--gap-caps)}
.counts h2{max-width:none}
.counts .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px}
.counts .two p{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0}
.counts .two p b{font-weight:400;color:var(--navy)}
.counts .fig{margin:var(--gap-figure) 0 0;background:#fff;padding:40px 48px}
@media (max-width:912px){.counts .fig{padding:24px 0}}
.counts .fig svg{display:block;width:100%;height:auto;font-family:Lexend,Arial,sans-serif}
.counts .after{font-size:19px;line-height:1.6;font-weight:400;color:var(--navy);margin:var(--gap-unit) auto 0;max-width:640px;text-align:center;text-wrap:balance}
@media (max-width:1255px){.counts .two{column-gap:40px}}
@media (max-width:912px){.counts .two{grid-template-columns:1fr;row-gap:var(--gap-body)}}
/* ===== 04 · the conversation (six stages, 2×3 on a shared grid) ===== */
.stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:88px;row-gap:40px;margin-top:64px}
.stages>div{border-top:4px solid var(--plum);padding-top:20px}
.stages h3{font-size:21px;line-height:1.3;font-weight:400;letter-spacing:-.015em;color:var(--navy);margin:0 0 8px}
.stages h3 i{font-style:normal;font-size:15px;font-weight:500;letter-spacing:.12em;color:var(--plum);margin-right:14px;vertical-align:2px}
.stages p{font-size:19px;line-height:1.6;font-weight:300;color:var(--ink);margin:0}
@media (max-width:912px){.stages{grid-template-columns:1fr;row-gap:32px;margin-top:48px}}
/* ===== one relationship (navy band, centered) ===== */
.band.rel{background:var(--navy);color:#fff}
.rel .rel-c{max-width:720px;margin:0 auto;text-align:center}
.rel .lbl{color:#cdb6c6;margin:0 0 var(--gap-caps)}
.rel .frame-line{font-size:40px;line-height:1.12;font-weight:300;color:#fff;letter-spacing:-.025em;margin:0 0 var(--gap-body)}
.rel p.body{font-size:19px;line-height:1.6;color:#d9dbe8;margin:0 auto;max-width:640px}
.rel .reads{margin-top:16px}
.rel .tlink{color:#fff}
@media (max-width:912px){.rel .frame-line{font-size:32px}.rel .reads .tlink{line-height:1.4;padding:10px 0 12px}}
/* ===== closing (house) ===== */
#closing .closing-answer{font-size:28px;line-height:1.25;letter-spacing:-.02em;font-weight:400;color:var(--navy);max-width:34ch;margin:16px auto 0;text-wrap:balance}
#closing .closing-answer + div > p:first-child{margin-top:40px;margin-bottom:0;font-size:19px;line-height:1.6}
#closing .closing-cta{margin:48px auto 0;display:flex;width:max-content}
#closing .mail{font-size:16px;margin:16px auto 0;text-align:center}
#closing .mail .tlink{display:inline;margin:0;padding:0;min-height:0;line-height:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--plum)}
#closing .mail .tlink::before,#closing .mail .tlink::after{content:none!important;display:none!important}
#closing .scope{font-size:15px;line-height:1.6;color:var(--muted);max-width:56ch;margin:40px auto 0}
@media (max-width:912px){#closing h2{font-size:32px!important}}
.hdr nav a{font-size:15px}
.ftr,.ftr *{font-size:15px}


@media (min-width:913px) and (max-width:1255px){.hero h1{font-size:46px!important;max-width:640px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}