- , no button, no aria-expanded,
no focus/expanded states, no tag-detail markup. Rest treatment (1.5px
navy outline, gold numeral span) unchanged. */
.cf-photo-split__tag {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 16px;
border-radius: var(--radius-full);
background: var(--color-bg-card);
border: 1.5px solid var(--color-navy-700);
font-family: var(--font-body);
text-align: left;
cursor: default;
max-width: 100%;
flex-shrink: 0;
}
.cf-photo-split__tag-row {
display: flex;
align-items: baseline;
gap: 6px;
}
.cf-photo-split__tag-num {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
color: var(--color-gold-700);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cf-photo-split__tag-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-heading);
white-space: nowrap;
}
.cf-photo-split__tag:hover {
background: var(--color-bg-tint);
border-color: var(--color-navy-900);
}
.cf-photo-split__link {
font-size: var(--fs-body);
font-weight: 600;
color: var(--color-link);
}
.cf-photo-split__link:hover { color: var(--color-navy-700); }
.pan-slow { animation: pan-slow 24s ease-in-out infinite; }
@keyframes pan-slow {
0%, 100% { transform: scale(1.02) translateX(0); }
50% { transform: scale(1.06) translateX(-1%); }
}
/* ================= Four-steps cards (V4) =================
Home "Four steps, one contract"; the same white-card-on-paper device
used by How It Works "The four steps". Four-up at 1440, one-up under
1024 (kit vocabulary: step-card, step-stage, step-number). */
.cf-steps__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
max-width: 640px;
margin: 0 auto 56px;
}
.cf-steps__intro-heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-text-heading);
}
.cf-steps__intro-body {
margin: 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-text-secondary);
}
.cf-steps {
/* page-align fix, 2026-09-09 (item 2): removed max-width:1160 +
margin-inline:auto -- this element always carries .cf-container too
(index.html: `
`), and both
classes set max-width/margin on the same element, so this narrower
cap was overriding .cf-container's 1440 and re-centering the grid
independently of the nav's column. It now just inherits
.cf-container's sizing. */
}
.cf-steps__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
@media (max-width: 1023px) {
/* homephone.html "FOUR STEPS: single column, stacked one-up" --
dc-derived-134 (gap 20px); adapt.md is step 6, but this shared
device ships stacked now so it never renders four cramped columns
between 390 and 1024. */
.cf-steps__grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 767px) {
.step-stage { height: 160px; }
}
.step-card {
background: var(--color-bg-card);
border: 1px solid var(--color-navy-100);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(30, 41, 102, 0.14); }
.step-stage {
position: relative;
height: 188px;
overflow: hidden;
background: var(--color-paper);
}
.step-stage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.step-card:hover .step-stage img { transform: scale(1.03); }
.cf-steps__body {
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
gap: 10px;
}
.step-number {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
color: var(--color-accent-text);
transition: color 200ms ease;
}
.cf-steps__title {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
color: var(--color-text-heading);
}
.cf-steps__desc {
margin: 0;
font-size: 0.9375rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
/* ================= Closing CTA (V5) =================
Every page ends here: horizon photograph, drifting cloud layers, grain
overlay, mark + heading + lede + button. */
.cf-closing-cta {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: clamp(56px, 4vw + 40px, 96px) clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
.cf-closing-cta__sky {
position: absolute;
inset: -4% -4%;
width: 108%;
height: 108%;
object-fit: cover;
}
.cloud-a { animation: cloud-drift-a 40s ease-in-out infinite alternate; }
.cloud-b { animation: cloud-drift-b 40s ease-in-out infinite alternate; opacity: 0.35; mix-blend-mode: soft-light; }
@keyframes cloud-drift-a { from { transform: translateX(-2%) scale(1.02); } to { transform: translateX(2%) scale(1.02); } }
@keyframes cloud-drift-b { from { transform: translateX(2%) scale(1.08); } to { transform: translateX(-2%) scale(1.08); } }
.cf-closing-cta__grain { position: absolute; inset: 0; pointer-events: none; }
.cf-closing-cta__content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
max-width: 560px;
}
.cf-closing-cta__mark { width: 36px; height: 36px; }
.cf-closing-cta__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h1);
line-height: 1.05;
color: var(--color-navy-900);
}
.cf-closing-cta__lede {
margin: 0;
font-size: var(--fs-body-lg);
color: var(--color-text-secondary);
}
/* ================= Closing horizon frame (column fix, 2026-09-08/09) =====
"Ready when you are" used to bleed the sky photos + grain full-bleed
edge to edge (.cf-closing-cta above has padding-inline but no max-width,
and absolutely-positioned descendants ignore an ancestor's own padding
for sizing purposes). The two sky s and the grain div sit
inside this .cf-closing-cta__frame wrapper (markup in every page's
closing CTA section: Home, How It Works, For Attorneys, FAQ, About),
clipped to a rounded rectangle whose left/right match .cf-container,
the same formula the hero uses. Relocated here from 30-home.css
(2026-09-09) so all five pages share one rule instead of Home alone.
Copy (mark, heading, lede, button) is untouched per page; .cf-closing-
cta__content already has position:relative above, only needs a
z-index here to guarantee it paints above the frame. ================= */
.cf-closing-cta__frame {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
border-radius: var(--radius-md);
z-index: 0;
}
.cf-closing-cta__content {
z-index: 1;
}
@media (min-width: 768px) {
.cf-closing-cta__frame {
left: calc(max(0px, (100vw - 1440px) / 2) + clamp(20px, 4vw, 64px));
right: calc(max(0px, (100vw - 1440px) / 2) + clamp(20px, 4vw, 64px));
}
}
@media (max-width: 767px) {
.cf-closing-cta__frame {
left: 20px;
right: 20px;
border-radius: var(--radius-sm);
}
}
/* ================= Disclosure panel =================
The four-statement checklist beside the Home hero form and on Apply;
the non-recourse statement on Disclosures. */
.cf-disclosure-panel {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 4px;
}
.disclosure-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 6px 8px;
border-radius: 8px;
transition: background-color 200ms ease;
}
.disclosure-row:hover { background-color: var(--color-sky-tint); }
.disclosure-row__icon { flex-shrink: 0; margin-top: 2px; }
.disclosure-row__text { font-size: var(--fs-body); color: var(--color-text-primary); }
/* ================= Form card + cf-input ================= */
.cf-form-card {
position: relative;
background: var(--color-bg-card);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 16px;
box-sizing: border-box;
}
.cf-form-card__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
color: var(--color-text-heading);
}
.cf-form-card__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.cf-input {
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-default);
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--color-text-primary);
background: var(--color-bg-card);
width: 100%;
box-sizing: border-box;
}
.cf-input:focus-visible {
outline: none;
border-color: var(--color-navy-500);
/* step 9 polish: navy-100's box-shadow ring measured 1.2:1 against the
white/paper input surface -- WCAG 2.4.11 needs 3:1 for a non-text
focus indicator, and the ring was effectively invisible. navy-500
(already the border color on focus) clears 8.7:1. */
box-shadow: 0 0 0 3px var(--color-navy-500);
}
.cf-form-card__actions {
display: flex;
align-items: center;
gap: 24px;
padding-top: 4px;
}
@media (max-width: 767px) {
/* homephone.html "form card, below the image, full width" --
dc-derived: padding 24px 20px, gap 14px; inputs single column gap
10px; button full width, call link centered below it, not side by
side. */
.cf-form-card { padding: 24px 20px; gap: 14px; }
.cf-form-card__grid { grid-template-columns: 1fr; gap: 10px; }
.cf-form-card__actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.cf-form-card__actions .btn-primary { width: 100%; }
.cf-form-card__call { text-align: center; }
}
.cf-form-card__call {
font-size: 0.9375rem;
color: var(--color-link);
font-weight: 500;
}
/* ================= Statement (V11) =================
A full-width gradient hero used with no photograph: Disclosures hero,
How It Works "This is not a loan", and (craft, no artboard) 404. */
.cf-statement {
position: relative;
background: var(--gradient-hero);
padding: clamp(54px, 5.4vw + 27px, 94px) clamp(20px, 4vw, 64px); /* section-separation pass, 2026-09-10: ~1/3 cut */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
box-sizing: border-box;
overflow: hidden;
}
.cf-statement__eyebrow { position: relative; }
.cf-statement__heading {
position: relative;
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.5rem, 2.1rem + 2vw, 4rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--color-text-heading);
max-width: 820px;
}
.cf-statement__lede {
position: relative;
margin: 0;
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--color-text-secondary);
max-width: 560px;
}
.cf-statement__actions {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
padding-top: 12px;
}
/* page-align fix, 2026-09-09 (item 6): .cf-pill's own base rule
(00-base.css) sets align-self:flex-start for left-aligned hero
layouts (page-hero, apply-hero). .cf-statement is a centered hero
(align-items:center) -- Disclosures is the only page that puts a
.cf-pill inside it, and the base align-self was pulling the pill to
the left edge while the h1 centered, per the page-align audit.
Scoped override restores the band's own intended centering. */
.cf-statement .cf-pill {
align-self: center;
}
/* ================= Stat band (V14) =================
About "Cherokee funds it. Gain services it." -- navy-900 section,
four stats, closing gain lock-up card. */
.cf-stat-band {
background: var(--color-bg-inverse-deep);
/* page-align fix, 2026-09-09 (item 4): padding-inline removed --
.cf-stat-band__intro gets its own padding-inline just below (keeping
its edge protection; its 680px centered width is intentional and NOT
a defect) and .cf-stat-band__grid below that gets full .cf-container
treatment so it reaches the nav's column, which this section's own
padding-inline (far short of the nav's inset at wide viewports) could
not give it. */
padding-block: clamp(56px, 4vw + 40px, 96px);
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
text-align: center;
box-sizing: border-box;
}
.cf-stat-band__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 680px;
padding-inline: clamp(20px, 4vw, 64px); /* page-align fix, 2026-09-09: replaces the edge protection the section's own padding-inline used to give it */
box-sizing: border-box;
}
.cf-stat-band__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 2.75rem;
line-height: 1.1;
color: var(--color-paper);
}
.cf-stat-band__lede {
margin: 0;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-navy-100);
}
.cf-stat-band__grid {
/* page-align fix, 2026-09-09 (item 4): max-width raised from 1200 to
1440 with margin-inline:auto + its own padding-inline/box-sizing,
matching .cf-container's math -- this bare band now lands on the
nav's column edges. */
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 48px;
max-width: 1440px;
width: 100%;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
@media (max-width: 767px) {
/* no HomePhone counterpart (this device is not on Home); a 2x2 stack
rather than four cramped columns at 390 -- flagged for lane C
(About) review, no artboard reference for this exact width. */
.cf-stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
.cf-stat-band__item { display: flex; flex-direction: column; gap: 8px; }
.cf-stat-band__number {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h1);
color: var(--color-accent);
line-height: 1;
}
.cf-stat-band__label { font-size: 0.9375rem; color: var(--color-navy-100); }
/* ================= Gain lock-up =================
The "a Gain company" endorsement, footer (--light) and stat band
(--dark, boxed white card). Teal is reserved for this lock-up only. */
.cf-gain-lockup { display: flex; flex-direction: column; gap: 12px; }
.cf-gain-lockup--dark {
padding: 28px;
background: var(--color-white);
border-radius: var(--radius-md);
display: inline-flex;
}
.cf-gain-lockup__logo { height: 40px; width: auto; }
/* Footer lockup (--light) matches the nav logo's height exactly
(10-chrome.css .cf-nav__logo) -- same asset (cherokee-logo.svg,
not the taller stacked cherokee-logo-endorsed.svg used by the About
stat band's --dark lockup, untouched here), same crop, so the footer
reads as the same form as the nav instead of a bigger, inconsistent
lockup. The "a Gain company" endorsement moves to a real text tag
below it (.cf-gain-lockup__tag) instead of being baked into the SVG. */
.cf-gain-lockup--light .cf-gain-lockup__logo { height: 30px; }
@media (max-width: 767px) {
.cf-gain-lockup--light .cf-gain-lockup__logo { height: 24px; }
}
.cf-gain-lockup__tag--teal { color: var(--color-endorsement); font-size: 0.875rem; font-weight: 600; }
.cf-gain-lockup--light .cf-gain-lockup__tag {
font-size: 0.8125rem;
font-weight: 400;
color: var(--color-text-secondary);
}
/* ================= FAQ groups / jump ================= */
.cf-faq-groups { display: flex; flex-direction: column; gap: 56px; }
.cf-faq-jump {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.jump-link {
padding: 10px 0;
font-size: var(--fs-body-nav);
font-weight: 600;
color: var(--color-text-heading);
transition: color 200ms ease;
}
.jump-link:hover { color: var(--color-navy-700); }
.cf-faq-group__heading {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.875rem;
color: var(--color-text-heading);
}
.cf-faq-group__list { border-top: 1px solid var(--color-border-default); }
.faq-row { padding: 22px 0; border-bottom: 1px solid var(--color-border-default); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.faq-q-text { font-size: 1.0625rem; font-weight: 500; color: var(--color-text-primary); }
.faq-a { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); max-width: 620px; }
/* ================= Lane C promote patch: fact-note utility =================
Updated placeholder convention (step 4, lanes C/D): the cf-fact mark shows
only the owner chip (data-owner via ::after, above); the full note text
reads to assistive tech and the page's own text content via this
visually-hidden span, and to sighted users via the mark's title tooltip.
Commented, appended -- never overwrites Lane A content above. */
.cf-fact-note {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ================= Lane C promote patch: photo-split mobile width fix =================
Found on About (this lane) and confirmed on Home (index.html, already
shipped): cf-photo-split's desktop rule sets align-items: center; the
mobile override (max-width: 767px) switches to flex-direction: column
but never resets align-items, so a stretch cross-axis becomes a center
cross-axis. cf-photo-split__media has no in-flow content (its ![]()
is
position: absolute), so its auto width collapses to 0 under
align-items: center -- every mobile photo-split image on the site
currently renders at width 0 (verified via getBoundingClientRect on
both Home hero photo-splits and this page's two). One-line fix,
scoped to the existing mobile breakpoint, appended rather than
editing Lane A's rule above. */
@media (max-width: 767px) {
.cf-photo-split { align-items: stretch; }
}
/* ==== 25-signature.css ==== */
/* The photo and SVG share the same 1536 x 1024 coordinate space and
centered cover crop. Keep them together at every responsive size. */
.cf-photo-zoom {
position: absolute;
inset: 0;
}
.cf-photo-zoom picture,
.cf-photo-zoom img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.cf-sig-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: multiply;
}
.cf-signature-ink,
.cf-signature-finish {
fill: none;
stroke: var(--color-navy-700);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .88;
}
.cf-signature-finish { stroke-width: 1.5; opacity: .7; }
/* Default is the completed signature, including when JavaScript is off. */
@media (prefers-reduced-motion: no-preference) {
.b-js .cf-sig-overlay .cf-signature-ink,
.b-js .cf-sig-overlay .cf-signature-finish {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.b-js .cf-sig-overlay.is-inview .cf-signature-ink {
animation: cf-signature-write 1600ms ease-in-out 200ms forwards;
}
.b-js .cf-sig-overlay.is-inview .cf-signature-finish {
animation: cf-signature-write 360ms ease-out 1800ms forwards;
}
}
@keyframes cf-signature-write { to { stroke-dashoffset: 0; } }
/* ==== 30-home.css ==== */
/* 30-home.css -- Home page overrides. Hero replaced 2026-09-08 with
approved preview variant D3 (next/previews/hero-d3.html + the D3 rules
from next/previews/hero-variants.css): photo hero, one white card
("Four things to know"), no form in the hero. The form moved to a new
full-width section at the bottom of the page (#apply-form, the ported
"apply band" device). Lane A owns this file. No hex or font-family
literal outside css/tokens.css. */
/* ================= Hero base (cf-heroA): photo hero shared box model,
copy column, headline, body, actions, call link. ================= */
/* Padding-block re-tuned 2026-09-09 with the 650->560px height cut below:
top/bottom split biased (104/56, was 84/72) so that after the flex
centering added in the desktop query further down splits the box's
remaining slack evenly, the button row lands with ~110-115px of water
above the hero's bottom edge at 1280/1440/1920 (measured), not the
~125-135px a plain 50/50 split of the old padding would give -- and
nowhere near the ~350px gap the un-centered 650px box left. */
.cf-heroA {
position: relative;
overflow: hidden;
box-sizing: border-box;
padding-block: clamp(64px, 8vw, 104px) clamp(40px, 4vw, 56px);
}
.cf-heroA__media { position: absolute; inset: 0; z-index: 0; }
.cf-heroA__media picture, .cf-heroA__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 78%;
display: block;
}
.cf-heroA__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
var(--color-paper) 0%,
var(--color-paper) 26%,
color-mix(in srgb, var(--color-paper) 78%, transparent) 40%,
color-mix(in srgb, var(--color-paper) 22%, transparent) 58%,
color-mix(in srgb, var(--color-paper) 0%, transparent) 72%
);
}
.cf-heroA__scrim--right-clear {
background: linear-gradient(
90deg,
var(--color-paper) 0%,
var(--color-paper) 25%,
color-mix(in srgb, var(--color-paper) 50%, transparent) 40%,
color-mix(in srgb, var(--color-paper) 0%, transparent) 50%
);
}
.cf-heroA__copy { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.cf-heroA__headline {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.75rem, 2.1rem + 2.4vw, var(--fs-display));
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--color-text-heading);
}
.cf-heroA__body {
margin: 0;
font-size: var(--fs-body-lg);
line-height: 1.65;
color: var(--color-text-secondary);
max-width: 480px;
}
.cf-heroA__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cf-heroA__call { font-size: var(--fs-body-nav); color: var(--color-link); font-weight: 500; }
.cf-heroA__call:hover { color: var(--color-navy-700); }
/* column fix, 2026-09-08 (E2, approved -- see site/shots/column-variants/):
the photo used to bleed to the window's right edge. It now stops at
the column (right == the nav's Apply-button right, same edge the logo
sits on), with its two right corners rounded to match the "Four things
to know" card; the left edge, the readability scrim/fade, and all copy
are untouched (E1's fully-framed hero was rejected). 24px of air opens
between the nav hairline and the photo top so the new corner has room
to read as a corner. Desktop/tablet only -- the mobile hero below
(a plain full-width band above the copy) is untouched. */
@media (min-width: 768px) {
.cf-heroA__media {
right: calc(max(0px, (100vw - 1440px) / 2) + clamp(20px, 4vw, 64px));
top: 24px;
overflow: hidden;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
}
/* Vertical centering, 2026-09-09: at 650px min-height the copy/card block
(a normal-flow child; .cf-heroA__media is absolute and out of flow) sat
at the top of the box and left all the slack below it -- ~350px of dead
water under the button row at a ~2000px window. Centering the single
flow child on the block axis puts that slack evenly above and below
instead, so it reads as the room the shorter 560px box makes, not as a
copy block floating over empty space. Desktop/tablet only, matches the
heroA__media desktop query above; mobile hero (block, 767px query below)
is untouched. */
@media (min-width: 768px) {
.cf-heroA {
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 767px) {
.cf-heroA { min-height: 0; display: block; padding-block: 0; }
.cf-heroA__media {
position: relative;
inset: auto;
height: 220px;
}
.cf-heroA__scrim { display: none; }
.cf-heroA__copy { max-width: none; }
.cf-heroA__headline { font-size: 2.5rem; }
}
/* ================= Hero D3: photo crop + one card, four points =================
Photo replaced 2026-09-08 with candidate A (hero-horizon-wide): composed
for this hero's aspect at generation time (sun in the right third,
horizon ~62%), so a plain cover needs no zoom -- unlike the old
hero-horizon-1600.webp treatment (230-280% background-size, a 1600px+
position bump) this replaces. Tiered by viewport so mobile does not
download the 1536 tier. */
.cf-heroD__media {
background-repeat: no-repeat;
}
.cf-heroD__media--d3 {
background-image: url('/img/hero-horizon-wide-1536.webp');
background-size: cover;
background-position: center center;
}
.cf-heroD__media picture, .cf-heroD__media img { display: none; }
@media (max-width: 599px) {
.cf-heroD__media--d3 { background-image: url('/img/hero-horizon-wide-800.webp'); }
}
@media (min-width: 600px) and (max-width: 1099px) {
.cf-heroD__media--d3 { background-image: url('/img/hero-horizon-wide-1200.webp'); }
}
@media (min-width: 768px) {
.cf-heroD3 { min-height: 560px; }
}
.cf-heroD3__content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: clamp(32px, 5vw, 56px);
align-items: start;
}
.cf-heroD3__card {
background: var(--color-bg-card);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: 32px 36px;
box-sizing: border-box;
}
.cf-heroD3__card-heading {
margin: 0 0 20px;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
color: var(--color-text-heading);
}
.cf-heroD3__card-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cf-heroD3__card-item { display: flex; align-items: flex-start; gap: 10px; }
.cf-heroD3__card-item span { font-size: var(--fs-body); color: var(--color-text-primary); }
@media (max-width: 1023px) {
.cf-heroD3__content { grid-template-columns: 1fr; }
.cf-heroD3__card { margin-top: 24px; }
}
/* column fix, 2026-09-08 (E2, approved): with the photo's right edge now
on the column (above), the card landed flush on the photo's edge --
0px of daylight. .cf-heroD3__content is a .cf-container, so its own
padding-right is the same clamp() the photo's right edge uses;
overriding padding-right only (never padding-inline -- the headline's
left edge stays on the column, untouched) adds a further, fixed inset
on top of that shared clamp value so the card sits inboard of the
frame instead of on it. Mobile is unaffected -- the card stacks below
the headline there (the 1023px rule above), not beside a right-pulled
photo. */
@media (min-width: 1280px) {
.cf-heroD3__content { padding-right: calc(clamp(20px, 4vw, 64px) + 48px); }
}
@media (min-width: 768px) and (max-width: 1279px) {
.cf-heroD3__content { padding-right: calc(clamp(20px, 4vw, 64px) + 32px); }
}
/* Static navy check glyph (hero only): replaces the old scroll-triggered
circle + check-draw icon so the proof points are legible with no JS. */
.cf-checkitems__icon {
flex-shrink: 0;
margin-top: 2px;
width: 18px;
height: 18px;
}
/* ================= Shared image breathe animation (also used by
for-attorneys.html and how-it-works.html hero images) ================= */
.breathe { animation: breathe 20s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* ================= Apply form, bottom of page (#apply-form) =================
Ported from the preview "apply band" device: form card left, note +
phone right, full width tint section immediately above the footer. */
.cf-apply-band__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.cf-apply-band__form { width: 100%; max-width: 620px; box-sizing: border-box; }
.cf-apply-band__side { display: flex; flex-direction: column; gap: 12px; }
.cf-apply-band__note {
margin: 0;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-text-secondary);
}
.cf-apply-band__phone {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-h3);
color: var(--color-text-heading);
}
.cf-apply-band__phone:hover { color: var(--color-navy-500); }
@media (max-width: 767px) {
.cf-apply-band__grid { display: flex; flex-direction: column; align-items: stretch; }
.cf-apply-band__side { order: 2; }
}
/* Closing horizon frame (.cf-closing-cta__frame/.cf-closing-cta__content
z-index) relocated to 20-components.css on 2026-09-09 -- it is now a
shared rule used by every page's closing CTA (Home, How It Works, For
Attorneys, FAQ, About), not a Home-only override. See that file for the
full comment and the rule itself. */
/* ================= Four steps: hover-expand cards (rebuild) =================
Rebuilt 2026-09-09 per Saul: "i was expecting for each card to grow when
hovering. also, i think you would add layers like in how it works."
Replaces Option A (Apply fixed at 1.6x width, approved earlier same day
-- see git history) with a row where all four cards are equal width at
rest and ANY card grows to ~1.6x flex share on hover or keyboard focus.
js/motion.js initStepsHover toggles the .is-active class (default on
card 1/Apply at load, so the row has a focal point before any hover)
and computes the rail dot's pixel position; every visual consequence of
.is-active lives here. Layered treatment borrowed from How It Works'
"The four steps" (31-how-it-works.css .cf-hiw-sticky__row.is-active /
.cf-hiw-sticky__rail-dot): pale tint on the active card's text area, a
thin rail above the row with a gold dot that slides to sit over the
active card. */
.cf-steps__grid--hover {
display: flex;
gap: 28px;
/* flex-start, not stretch: only the active card should read taller
(its image area and type scale up); the other three keep their own
natural height rather than being force-stretched to match it, which
would pad them with dead white space below their copy. */
align-items: flex-start;
}
.cf-steps__grid--hover .step-card {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
transform: translateY(0);
transition:
flex-grow 450ms cubic-bezier(0.33, 1, 0.68, 1),
transform 450ms cubic-bezier(0.33, 1, 0.68, 1),
box-shadow 450ms cubic-bezier(0.33, 1, 0.68, 1);
}
.cf-steps__grid--hover .step-card.is-active { flex-grow: 1.6; }
.cf-steps__grid--hover .step-card:not(.is-active) { flex-grow: 0.8; }
.cf-steps__grid--hover .step-card.is-active {
transform: translateY(-6px);
box-shadow: 0 20px 44px rgba(30, 41, 102, 0.18);
}
.cf-steps__grid--hover .step-stage {
height: auto;
aspect-ratio: 4 / 3.4;
transition: aspect-ratio 450ms cubic-bezier(0.33, 1, 0.68, 1);
}
.cf-steps__grid--hover .step-card.is-active .step-stage { aspect-ratio: 4 / 2.4; }
.cf-steps__grid--hover .cf-steps__body {
transition: background-color 450ms ease;
}
.cf-steps__grid--hover .step-card.is-active .cf-steps__body {
background: var(--color-bg-tint);
}
.cf-steps__grid--hover .step-number,
.cf-steps__grid--hover .cf-steps__title {
transition: font-size 450ms cubic-bezier(0.33, 1, 0.68, 1);
}
.cf-steps__grid--hover .step-card.is-active .step-number {
font-size: 4.5rem;
line-height: 0.9;
display: block;
margin-bottom: 6px;
}
.cf-steps__grid--hover .step-card.is-active .cf-steps__title { font-size: var(--fs-h1); }
.cf-steps__grid--hover .step-card.is-active .cf-steps__desc { font-size: var(--fs-body-lg); max-width: 34ch; }
/* Rail: thin bar above the row, gold dot slides to sit over the active
card (same device family as How It Works' .cf-hiw-sticky__rail-dot,
driven here by pixel --rail-left/--rail-width from initStepsHover
instead of a scroll --progress fraction). */
.cf-steps__rail {
position: relative;
height: 28px;
margin: 0 0 20px;
}
.cf-steps__rail-line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background: var(--color-border-default);
transform: translateY(-50%);
}
.cf-steps__rail-dot {
--rail-left: 0px;
--rail-width: 120px;
position: absolute;
top: 50%;
left: var(--rail-left);
width: var(--rail-width);
height: 3px;
border-radius: var(--radius-full);
background: var(--color-gold-500);
box-shadow: 0 0 0 4px var(--color-gold-100);
transform: translateY(-50%);
transition:
left 450ms cubic-bezier(0.33, 1, 0.68, 1),
width 450ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* 768-1023: 2x2 grid, equal cards. Hover growth stays on (cheap: a
multi-line flex container distributes flex-grow per line, so the
hovered card grows only within its own row of two). */
@media (min-width: 768px) and (max-width: 1023px) {
.cf-steps__grid--hover { flex-wrap: wrap; }
.cf-steps__grid--hover .step-card { flex: 1 1 calc(50% - 14px); }
}
/* Mobile: 2-up like How It Works "Who qualifies" (cf-photo-grid), no
hover behavior, Apply not enlarged -- the rail (a hover-only device)
is hidden and every is-active visual consequence above is neutralized. */
@media (max-width: 767px) {
.cf-steps__rail { display: none; }
.cf-steps__grid--hover {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.cf-steps__grid--hover .step-card {
flex: none;
transform: none;
box-shadow: var(--shadow-card);
}
.cf-steps__grid--hover .step-stage { aspect-ratio: 4 / 3.4; }
.cf-steps__grid--hover .step-card.is-active .step-stage { aspect-ratio: 4 / 3.4; }
.cf-steps__grid--hover .step-card.is-active {
transform: none;
box-shadow: var(--shadow-card);
}
.cf-steps__grid--hover .step-card.is-active .cf-steps__body { background: transparent; }
.cf-steps__grid--hover .step-card.is-active .step-number {
font-size: 1.375rem;
line-height: normal;
margin-bottom: 0;
display: inline;
}
.cf-steps__grid--hover .step-card.is-active .cf-steps__title { font-size: 1.375rem; }
.cf-steps__grid--hover .step-card.is-active .cf-steps__desc { font-size: 0.9375rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.cf-steps__grid--hover .step-card,
.cf-steps__grid--hover .step-stage,
.cf-steps__grid--hover .cf-steps__body,
.cf-steps__grid--hover .step-number,
.cf-steps__grid--hover .cf-steps__title,
.cf-steps__rail-dot {
transition: none !important;
}
}
/* ================= Section-separation pass, 2026-09-10: Four Steps =========
Four Steps moves from .cf-section--white to .cf-section--navy (same
treatment family as For Attorneys' .cf-atty-need) so Home has one dark
band between the two photo-split sections. The step-card itself stays a
white/cream card (unchanged, 20-components.css), so its own internal
text tokens already work on their own white ground -- only the section's
own bare-on-navy elements (intro heading/body, rail line, the "See the
full steps" link) need light tokens to avoid navy-on-navy. Scoped to
.cf-home so this never leaks to a future non-Home .cf-section--navy. */
.cf-home .cf-section--navy .cf-steps__intro-heading { color: var(--color-paper); }
.cf-home .cf-section--navy .cf-steps__intro-body { color: var(--color-navy-100); }
.cf-home .cf-section--navy .cf-steps__rail-line { background: var(--color-navy-500); }
.cf-home .cf-section--navy .cf-photo-split__link { color: var(--color-gold-500); }
.cf-home .cf-section--navy .cf-photo-split__link:hover { color: var(--color-navy-100); }
/* ================= Move 1: closing band tagline, italic serif =================
Approved mock: options-mocks/option-c-navy-band.html ("Option C -- navy
rhythm-break band, oversized italic serif"). Copy is unchanged --
.cf-closing-cta__lede is shared by every page's closing CTA
(20-components.css), so this restyle is scoped to Home only via the
.cf-home body class (index.html front-matter body_class). Sizes/line-
height/color lifted from the mock's .band-line rule; the hairline is a
new decorative div (aria-hidden, no copy) matching the mock's .band-rule.
Render check (screenshot, 2026-09-09): the mock's cream-on-navy text sits
on a solid --color-navy-900 section; Home's actual closing CTA is the
closing-clouds sky photo (pale/warm, not navy), so cream text at this
size read as nearly invisible against it -- a real contrast failure, not
a stylistic call. Fix: .cf-closing-cta__tagline-band wraps the hairline
+ lede in the mock's actual navy panel (the "navy band" the mock is
named for), sized to the copy rather than full-bleed, so the heading and
mark above it -- already legible on the photo -- are untouched. */
.cf-home .cf-closing-cta__tagline-band {
background: var(--color-navy-900);
border-radius: var(--radius-md);
padding: clamp(28px, 3vw, 40px) clamp(24px, 4vw, 56px);
margin-top: 4px;
}
.cf-home .cf-closing-cta__hairline {
width: 64px;
height: 2px;
background: var(--color-gold-500);
margin: 0 auto 20px;
}
.cf-home .cf-closing-cta__lede {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
line-height: 1.15;
color: var(--color-paper);
max-width: 18ch;
margin-inline: auto;
}
/* ================= Move 2: photo drift on the "Money paid to you" photo ====
Approved. Slow parallax on the ribbon-and-seal photo only (the paid-to-you
image beside the three chips) -- a small rAF scroll handler in
js/motion.js (initPhotoDrift) sets --drift (px) on this wrapper as the
section crosses the viewport, translating it up to ~24px total over the
scroll range. The wrapper is scaled 1.08 inside the existing
.cf-photo-split__media overflow-hidden frame so the drift never exposes
an edge; .cf-photo-split__media img (20-components.css) still positions
the ![]()
absolute/cover inside this wrapper, and the img's own
.pan-slow keyframe animation is untouched -- the two transforms live on
different elements and compose independently. prefers-reduced-motion:
motion.js skips the scroll listener entirely, so --drift stays at its
default 0px (no drift; the static 1.08 scale is unaffected). */
.cf-photo-drift {
position: absolute;
inset: 0;
--drift: 0px;
transform: translateY(var(--drift)) scale(1.08);
will-change: transform;
}
.cf-photo-drift picture,
.cf-photo-drift img {
width: 100%;
height: 100%;
}
/* ==== 31-how-it-works.css ==== */
/* 31-how-it-works.css -- Lane B, step 4. Page-scoped devices for
/how-it-works, plus two shared pieces reused by 32-for-attorneys.css
(site.css is one concatenated stylesheet, so anything declared here is
available globally; the page prefix on selectors is what keeps scope
readable, not file boundaries): .sr-only, .cf-page-hero (V1 hero split,
identical on both pages), and --fs-lede (the 1.0625rem body size shared
by "Who qualifies", "Not available in every state" and Attorneys' "What
we need from your firm" intro -- design/build/styles.css dc-derived-135
on both artboards). No hex or font-family literal outside css/tokens.css.
New-device names follow design/kit/README.md's cf- vocabulary
(cf-sticky-list -> cf-hiw-sticky, cf-state-map -> cf-hiw-map__state-map,
cf-horizon-timeline -> cf-hiw-timeline, cf-photo-grid). */
/* ================= sr-only utility =================
Screen-reader-only text for the cf-fact note (title= is not reliably
announced); standard clip-based pattern, no layout impact. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ================= Shared: --fs-lede =================
dc-derived-135, 1.0625rem at 1440. No Home/HomePhone counterpart;
lower bound derived proportionally from body-lg's own ratio
(1/1.125 = 0.889), same method 00-base.css used for h3/h4 -- flagged
in GATE-rows.md. */
:root {
--fs-lede: clamp(0.9375rem, 0.891rem + 0.19vw, 1.0625rem);
--fs-h2-tight: clamp(1.6875rem, 1.479rem + 0.857vw, 2.25rem); /* dc-derived-95, "Who qualifies" */
--fs-h3-tight: clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem); /* dc-derived-218, "Case types we fund" */
--fs-hero-headline: clamp(2.6rem, 2.173rem + 1.752vw, 3.75rem); /* both pages' hero h1, identical 3.75rem literal */
}
/* ================= cf-closing-cta__sky box-model fix =================
20-components.css sets inset:-4% -4% AND width/height:108% on the same
replaced ![]()
-- an over-constrained box (all four inset sides plus
width/height declared) that this lane's own render confirmed leaves a
~58px paper-colored gap at the right edge at 1440 (Chromium does not
resolve the over-constraint the way the spec note for replaced
elements implies). Both pages in this lane use the closing CTA, so
this is fixed here rather than left broken -- an equal-specificity
override, 31-how-it-works.css loading after 20-components.css in
css/site.css's concatenation order, without touching the lane-A-owned
file. Exact fill (inset 0 / 100% / 100%, no ambiguity) plus a resting
transform: scale(1.08) reproduces the same 4% overhang the drift
animation needs, purely via transform, which never participates in
box-model over-constraint; the existing keyframes still take over
during animation and are unchanged. */
.cf-closing-cta__sky {
inset: 0;
width: 100%;
height: 100%;
transform: scale(1.08);
}
/* ================= cf-fact in a headline (removed, step 4 fix pass) =====
This lane rule used to give .cf-fact a non-zero font-size inside an h1
so the ::after chip's old em-based size (00-base.css) had a non-zero
basis to resolve against -- the only reason h1 contexts rendered the
chip while every other context collapsed it to an invisible dot.
00-base.css now sizes the chip in rem, so the chip is correct with no
help from this file, and this override is gone rather than left as a
second, now-redundant source of truth for the same value. */
/* ================= cf-page-hero (V1, hero variant) =================
Shared by How It Works and For Attorneys: grain overlay, eyebrow pill,
headline, body, one CTA, breathing image. Distinct from the mid-page
cf-photo-split (no grain/eyebrow/CTA there) though both derive from the
same V1 device family per design/4-pages/PLAN.md. */
.cf-page-hero {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 4vw, 64px);
align-items: center;
max-width: 1440px; /* page-align fix, 2026-09-09: this hero had no
centering term at all, only the padding-inline below, so it read
correct only at exactly 1440px viewport and drifted up to 240px off
the nav's column at wider widths. */
margin-inline: auto;
padding: clamp(56px, 4vw + 40px, 96px) clamp(20px, 4vw, 64px);
box-sizing: border-box;
overflow: hidden;
}
.cf-page-hero__grain {
position: absolute;
inset: 0;
filter: url(#grain-filter);
pointer-events: none;
}
.cf-page-hero__copy {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
}
.cf-page-hero__headline {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-hero-headline);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--color-text-heading);
max-width: 600px;
text-wrap: balance;
}
.cf-page-hero__body {
margin: 0;
font-size: var(--fs-body-lg);
line-height: 1.65;
color: var(--color-text-secondary);
max-width: 480px;
}
.cf-page-hero__cta { align-self: flex-start; margin-top: 4px; }
.cf-page-hero__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 480px;
}
.cf-page-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
/* no HomePhone counterpart for this hero device; stacked per the
cf-photo-split mobile precedent (image full-bleed on top). */
.cf-page-hero {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.cf-page-hero__copy { padding: 40px 20px 32px; gap: 18px; }
.cf-page-hero__media {
/* explicit width: its only child is position:absolute (for
object-fit: cover), so it contributes no intrinsic width to a
flex item and the box collapses to 0 without this -- confirmed
in this lane's own 390 render (same latent bug shape as
.cf-photo-split__media, fixed below for the shared component). */
width: 100%;
min-height: 0;
height: 260px;
border-radius: 0;
order: -1;
}
}
/* ================= The four steps: V6 sticky numbered list =================
Navy ground, 2026-09-10: moved off sky-tint onto the same
.cf-section--navy class Home's "Four steps, one contract" band uses
(added on the section element in the markup), so the shell background
and color come from 00-base.css and this file only carries the
text-color/highlight overrides needed to stay legible on navy. */
.cf-hiw-sticky {
padding-block: clamp(37px, 2.7vw + 27px, 59px);
/* page-align fix, 2026-09-09 (item 4): padding-inline removed -- the
heading and grid below each carry their own padding-inline instead
(see .cf-hiw-sticky__heading and .cf-hiw-sticky__grid) so they keep
the same edge protection this section used to give them, without
doubling up when nested inside a .cf-container elsewhere. */
box-sizing: border-box;
}
.cf-hiw-sticky__heading {
/* page-align fix, 2026-09-09 (item 4): the section above lost its
padding-inline; this heading is a bare child (no .cf-container
wrapper in the markup), so it needs its own inline padding to land
on the column instead of the viewport edge. */
padding-inline: clamp(20px, 4vw, 64px);
box-sizing: border-box;
margin: 0 0 48px;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-text-heading);
text-align: center;
}
.cf-hiw-sticky__grid {
max-width: 1200px;
margin: 0 auto;
padding-inline: clamp(20px, 4vw, 64px); /* page-align fix, 2026-09-09: replaces the edge protection the section's own padding-inline used to give it */
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 64px;
align-items: stretch;
}
.cf-hiw-sticky__list {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
}
/* -- Move 2, 2026-09-09: scroll-linked rail + dot for the four steps.
Mobile-first here on purpose (the rest of this file is desktop-first
with max-width overrides): base rules below are the <=1023 vertical
rail beside the stacked list -- the same breakpoint that already
stacks .cf-hiw-sticky__grid to one column above -- then the
min-width:1024 block below swaps it to a horizontal bar above the
rows. js/motion.js writes one JS-set --progress (0 to 1) per frame;
each breakpoint maps that same number onto its own axis. */
.cf-hiw-sticky__rail {
position: absolute;
left: 2px;
top: 4px;
bottom: 4px;
width: 16px;
pointer-events: none;
}
.cf-hiw-sticky__rail-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border-default);
transform: translateX(-50%);
}
.cf-hiw-sticky__rail-dot {
--progress: 0;
position: absolute;
left: 50%;
top: calc(var(--progress, 0) * 100%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-gold-500);
box-shadow: 0 0 0 4px var(--color-gold-100);
transform: translate(-50%, -50%);
}
/* the 200ms snap transition is opt-in via this class (motion.js), not a
default -- normal scroll tracking has to move 1:1 with the frame, only
the "settle onto a step" moment gets an eased transition. */
.cf-hiw-sticky__rail-dot.is-snapped { transition: left 200ms ease, top 200ms ease; }
@media (max-width: 1023px) {
/* rows keep their own step-1..4 layout; the rail just needs room to its
left so the dot never sits under the row copy. */
.cf-hiw-sticky__list { padding-left: 28px; }
}
@media (min-width: 1024px) {
.cf-hiw-sticky__rail {
/* fix, 2026-09-09: was position:static, which does not establish a
containing block -- the absolutely-positioned rail-dot below fell
through to .cf-hiw-sticky__list (the next positioned ancestor,
several rows tall) and resolved its top:50%/left:% against that,
detaching the dot from this 28px bar and dragging it down through
the row copy as scroll progressed. relative keeps the exact same
static-flow layout (flex child, same box) while giving the dot the
correct 28px-tall containing block. */
position: relative;
width: auto;
height: 28px;
margin: 0 0 12px;
}
.cf-hiw-sticky__rail-line {
left: 0;
right: 0;
top: 50%;
bottom: auto;
width: auto;
height: 2px;
transform: translateY(-50%);
}
.cf-hiw-sticky__rail-dot {
top: 50%;
left: calc(var(--progress, 0) * 100%);
transform: translate(-50%, -50%);
}
}
.cf-hiw-sticky__row {
border-radius: var(--radius-md);
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
transition: background-color 200ms ease;
}
.cf-hiw-sticky__row.is-active { background: var(--color-bg-tint); }
.cf-hiw-sticky__num {
font-family: var(--font-display);
font-size: var(--fs-hiw-num, clamp(1rem, 0.907rem + 0.381vw, 1.25rem));
/* step 9 polish: text-muted (neutral-500) on white measured 4.49:1,
just under WCAG AA at this size; PRODUCT.md already rules
neutral-500 out for small body copy. text-secondary is the
documented next step up (neutral-700) and keeps the same
inactive-vs-accent-on-activate visual relationship. */
color: var(--color-text-secondary);
transition: color 200ms ease;
}
.cf-hiw-sticky__row.is-active .cf-hiw-sticky__num {
/* step 9 polish: accent-text (gold-700) on white/paper is 3.8:1 at this
size (~16-20px, not bold) -- fails WCAG AA (4.5:1); no token pairing
against paper/white clears it for gold at small sizes (checked the
full palette). navy-900 keeps the active/inactive distinction
(vs. text-secondary on the inactive rows) at full compliance. */
color: var(--color-navy-900);
}
.cf-hiw-sticky__title {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
color: var(--color-text-secondary);
}
.cf-hiw-sticky__row.is-active .cf-hiw-sticky__title { color: var(--color-text-heading); }
.cf-hiw-sticky__body {
margin: 0;
font-size: var(--fs-body);
color: var(--color-text-secondary);
line-height: 1.55;
}
.cf-hiw-sticky__media {
position: sticky;
top: 40px;
align-self: stretch;
background: var(--color-sky-tint);
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
min-height: 460px;
box-sizing: border-box;
}
.cf-hiw-sticky__media picture {
position: absolute;
inset: 0;
display: block;
opacity: 0;
transition: opacity 300ms ease;
}
.cf-hiw-sticky__media picture.is-active { opacity: 1; }
.cf-hiw-sticky__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-hiw-sticky__row-media { display: none; }
/* Navy legibility overrides, 2026-09-10: .cf-hiw-sticky__num and __title
above set an explicit dark color on their base rule and an explicit
darker color again on .is-active (navy-900 / text-heading), both of
which read fine on the old sky-tint ground but go invisible on navy.
Scoped to .cf-hiw-sticky.cf-section--navy with the same class chain
repeated for the .is-active descendant so each override outranks the
rule it is fixing regardless of the two files' load order. */
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__heading { color: var(--color-paper); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__num { color: var(--color-navy-100); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__row.is-active .cf-hiw-sticky__num { color: var(--color-paper); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__title { color: var(--color-navy-100); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__row.is-active .cf-hiw-sticky__title { color: var(--color-paper); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__body { color: var(--color-navy-100); }
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__row.is-active {
background: color-mix(in srgb, var(--color-paper) 12%, transparent);
}
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__rail-line {
background: color-mix(in srgb, var(--color-paper) 24%, transparent);
}
.cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__media { background: var(--color-navy-700); }
@media (max-width: 1023px) {
/* V6 explicitly degrades to a stacked list under 1024 (BUILD-BRIEF).
Every row keeps its own large visual (PRODUCT.md principle 2). */
.cf-hiw-sticky__grid { grid-template-columns: 1fr; gap: 0; }
.cf-hiw-sticky__media { display: none; }
.cf-hiw-sticky__row-media {
display: block;
margin-top: 12px;
border-radius: var(--radius-lg);
overflow: hidden;
height: 200px;
}
.cf-hiw-sticky__row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-hiw-sticky__row { padding: 20px 4px; }
}
/* ================= This is not a loan: V11 statement =================
Reuses 20-components.css .cf-statement; the artboard's literal heading
size (4.25rem / max-width 780px / navy-900) is larger than the shared
component's default cap (4rem), so it is overridden here, scoped by
.cf-hiw-statement, rather than edited in the shared file. */
.cf-hiw-statement .cf-statement__heading {
font-size: clamp(2.75rem, 2.193rem + 2.286vw, 4.25rem);
line-height: 1.04;
max-width: 780px;
color: var(--color-navy-900);
}
.cf-hiw-statement .cf-statement__lede { max-width: 480px; font-size: 1.25rem; }
/* -- Two columns on cream, 2026-09-10: copy left / contract-seal photo
right, replacing the centered single-column layout and the faint
cherokee-mark watermark (removed from the markup). .cf-statement's own
rule (20-components.css, shared with Disclosures and 404) centers
everything in a column; this override is scoped to the
.cf-statement.cf-hiw-statement combination so those other pages are
untouched. Stacks under 1024px, photo on top, per brief (a tighter
breakpoint than the shared .cf-photo-split's 767px, so this is its own
page-scoped grid rather than a reuse of that component). */
.cf-statement.cf-hiw-statement {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(32px, 4vw, 64px);
text-align: left;
max-width: 1440px;
margin-inline: auto;
}
.cf-hiw-statement__copy {
position: relative;
width: 100%;
max-width: 560px;
text-align: left;
display: flex;
flex-direction: column;
gap: 20px;
}
.cf-hiw-statement__media {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
min-height: 420px;
box-shadow: var(--shadow-elevated);
}
.cf-hiw-statement__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1023px) {
.cf-statement.cf-hiw-statement {
display: flex;
flex-direction: column;
gap: 32px;
}
.cf-hiw-statement__media { order: -1; min-height: 280px; width: 100%; }
.cf-hiw-statement__copy { max-width: 100%; }
}
.cf-hiw-statement__lede--drop::first-letter {
float: left;
font-family: var(--font-display);
font-weight: 400;
font-size: 6.75rem;
line-height: 0.78;
padding-right: 14px;
padding-top: 4px;
color: var(--color-navy-900);
}
.cf-hiw-statement__lede--drop {
/* own BFC contains the float so its height clears the drop cap before
the pull quote starts -- no overlap regardless of paragraph length. */
overflow: hidden;
}
.cf-hiw-statement__quote {
margin: 40px 0;
padding: 0;
border: 0;
}
.cf-hiw-statement__quote-rule {
display: block;
width: 56px;
height: 2px;
background: var(--color-gold-500);
margin-bottom: 20px;
}
.cf-hiw-statement__quote p {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.5rem, 2.2rem + 1vw, 3rem);
line-height: 1.15;
color: var(--color-navy-900);
}
@media (max-width: 767px) {
.cf-hiw-statement__lede--drop::first-letter { font-size: 3.75rem; padding-right: 8px; }
.cf-hiw-statement__quote { margin: 28px 0; }
}
/* ================= Who qualifies + Case types we fund: V7 photo grid =================
Fix, 2026-09-09 (Saul flagged the section at 1440, circled): three
defects, one pass. (1) .cf-hiw-qualify carried no .cf-section class and
this rule set only a background -- no padding-block at all, so the
grid sat flush against the statement above and ran straight into the
navy timeline band below with zero bottom air. Given the section's own
padding-block, matching .cf-section's scale (00-base.css) since this
section never had a shared-shell class to inherit it from. (2) the
intro column was align-items:start + position:sticky against a grid
roughly 2x its own height -- on a short two-paragraph intro with
nothing to scroll past, that just reads as top-pinned in a lot of dead
space. Switched to align-items:center and dropped the sticky (no
scroll benefit at this content length; center handles the balance).
(3) cards were almost all photo (height:168px, a wide letterbox sliver
of a much taller 1200x800 source) with a cramped 16px/20px label strip
-- object-fit:cover at that aspect crops to whatever vertical band the
math lands on per image, which is why the four came out on different
horizons (two read flat, two caught the sunset glow). Moved to
aspect-ratio:4/3, which crops horizontally instead of vertically at
these image proportions (1.5:1 source into a 1.333:1 box) and shows
each photo's full height, including its horizon glow, at the same
relative position across all four -- object-position tuning off the
table without opening the images themselves. Label got real padding,
moved up to the card-title size + weight already established by
.step-card__title / .cf-steps__title elsewhere on this page family
(1.375rem, --font-display, 400) instead of a bespoke 1.1875rem, and
the card gained the same border + radius + shadow as .step-card
(20-components.css) for cross-page consistency. No supporting sentence
exists in the copy for any of the four case types, so per the "label
only, more padding" fallback: no line was invented. */
.cf-hiw-qualify {
background: var(--color-paper);
padding-block: clamp(37px, 2.7vw + 27px, 64px); /* section-separation pass, 2026-09-10 */
box-sizing: border-box;
}
.cf-hiw-qualify__grid {
/* page-align fix, 2026-09-09 (item 2): max-width:1280/margin:0 auto
removed -- this element already carries .cf-container in the
markup (max-width:1440, margin-inline:auto), and the 1280 cap here
was overriding it via later cascade order, shrinking + re-centering
the grid 80px inside the nav's column at both widths. */
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 64px;
align-items: center;
}
.cf-hiw-qualify__intro {
display: flex;
flex-direction: column;
gap: 20px;
}
.cf-hiw-qualify__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2-tight);
line-height: 1.1;
color: var(--color-text-heading);
}
.cf-hiw-qualify__body { margin: 0; font-size: var(--fs-lede); line-height: 1.65; color: var(--color-text-secondary); }
.cf-hiw-qualify__divider { height: 1px; background: var(--color-border-default); margin: 8px 0; }
.cf-hiw-qualify__subheading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3-tight);
color: var(--color-text-heading);
}
.cf-hiw-qualify__subbody { margin: 0; font-size: var(--fs-body-nav); line-height: 1.6; color: var(--color-text-secondary); }
.cf-photo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.cf-photo-grid__card {
border: 1px solid var(--color-navy-100);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
background: var(--color-bg-card);
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.cf-photo-grid__card picture { display: block; }
.cf-photo-grid__card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
.cf-photo-grid__label {
display: block;
padding: 20px 22px 24px;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
line-height: 1.2;
color: var(--color-text-heading);
}
@media (max-width: 1023px) {
.cf-hiw-qualify__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
/* two-up at mobile, matching the site's other four-item card grid's
mobile fallback (.cf-stat-band__grid, 20-components.css: repeat(4)
collapses to repeat(2) at this same 767px breakpoint) rather than a
single tall column of photo cards. */
.cf-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-photo-grid__label {
padding: 12px 10px 14px;
font-size: 1rem;
line-height: 1.25;
}
}
/* ================= What happens at settlement: V10 horizon timeline ================= */
.cf-hiw-timeline {
position: relative;
background: var(--color-bg-inverse-deep);
padding-block: 64px 75px; /* section-separation pass, 2026-09-10: ~1/3 cut from 96/112 */
/* page-align fix, 2026-09-09 (item 4): padding-inline removed --
.cf-hiw-timeline__intro and .cf-hiw-timeline__rail below each get
their own padding-inline now so the rail can reach the nav's
column while the intro keeps the same edge protection it had. */
min-height: 640px;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.cf-hiw-timeline__glow {
position: absolute;
inset: 0;
background: radial-gradient(120% 70% at 50% 105%, rgba(201, 151, 62, 0.28) 0%, rgba(201, 151, 62, 0) 60%);
pointer-events: none;
}
.cf-hiw-timeline__intro {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding-inline: clamp(20px, 4vw, 64px);
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.cf-hiw-timeline__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-paper);
}
.cf-hiw-timeline__lede {
margin: 0;
font-size: var(--fs-lede);
line-height: 1.65;
color: var(--color-navy-100);
max-width: 640px;
}
.cf-hiw-timeline__rail {
position: relative;
/* page-align fix, 2026-09-09 (item 4): max-width raised from 1120 to
1440 and given its own padding-inline + box-sizing so this bare band
(no .cf-container in the markup) reaches the nav's column edges, now
that the parent .cf-hiw-timeline section's own padding-inline has
been removed above. */
max-width: 1440px;
margin: 48px auto 0; /* change 6, 2026-09-10: was 96px, ~200px of empty
navy read between the intro copy and the rail once padding-block and
the glow were accounted for; 48px is the intended breathing room. */
width: 100%;
padding-inline: clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
.cf-hiw-timeline__svg { display: block; width: 100%; height: auto; }
/* scripts/check_tokens.sh bans font-family in HTML outright (even a
var() value) -- the marker digits' font-family moved off the inline
SVG style= into this class. */
.cf-hiw-timeline__digit { font-family: var(--font-display); fill: var(--color-paper); }
.cf-hiw-timeline__digit {
/* step 9 polish: no base fill meant SVG's initial black fill rendered
digits 1-3 on their navy-700 rail circles -- ~1.3:1, effectively
invisible (detector low-contrast). */
fill: var(--color-paper);
}
.cf-hiw-timeline__digit--active { fill: var(--color-navy-900); }
.cf-hiw-timeline__labels {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 28px;
text-align: center;
}
.cf-hiw-timeline__label {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-timeline-label, clamp(0.9375rem, 0.821rem + 0.476vw, 1.25rem));
color: var(--color-paper);
}
.cf-hiw-timeline__note { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-navy-100); }
@media (max-width: 767px) {
.cf-hiw-timeline { padding-top: 72px; padding-bottom: 72px; min-height: 0; }
.cf-hiw-timeline__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.cf-hiw-timeline__rail { margin-top: 56px; }
}
/* ================= Not available in every state: V9 state map ================= */
.cf-hiw-map { background: var(--color-paper); }
.cf-hiw-map__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
.cf-hiw-map__intro {
max-width: 640px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.cf-hiw-map__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-text-heading);
}
.cf-hiw-map__body { margin: 0; font-size: var(--fs-lede); line-height: 1.65; color: var(--color-text-secondary); }
.cf-state-map {
/* page-align fix, 2026-09-09 (item 4 / cf-hiw-map__inner audit row):
max-width:1180 + margin:0 auto removed -- this element is already
nested inside .cf-hiw-map__inner, which itself carries .cf-container
(max-width:1440, margin-inline:auto, own padding-inline) in the
markup and is already correctly positioned on the nav's column; this
redundant inner cap was the actual cause of both the
.cf-hiw-map__inner and .cf-state-map audit rows (same underlying
defect, one fix). */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.cf-state-map__svg { width: 100%; height: auto; min-height: 320px; }
.state-shape { fill: var(--color-paper); stroke: var(--color-border-default); stroke-width: 1.2; cursor: pointer; transition: stroke-width 150ms ease; }
.state-shape.limited { fill: var(--color-navy-100); }
.state-shape.unavailable { fill: var(--color-navy-700); }
.state-shape:hover, .state-shape:focus-visible { stroke: var(--color-accent-text); stroke-width: 2.4; outline: none; }
.cf-state-map__status {
min-height: 1.4em;
margin: 0;
font-size: var(--fs-body-nav);
font-weight: 600;
color: var(--color-text-heading);
}
.cf-state-map__legend { display: flex; gap: 32px; align-items: center; font-size: var(--fs-body-sm); color: var(--color-text-secondary); flex-wrap: wrap; justify-content: center; }
.cf-state-map__legend-item { display: flex; align-items: center; gap: 10px; }
.cf-state-map__swatch { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.cf-state-map__swatch--available { background: var(--color-paper); border: 1.2px solid var(--color-border-default); }
.cf-state-map__swatch--limited { background: var(--color-navy-100); }
.cf-state-map__swatch--unavailable { background: var(--color-navy-700); }
@media (max-width: 767px) {
.cf-state-map__svg { min-height: 220px; }
}
/* Who qualifies, tighten (2026-09-10): tint ground so the boundary above
is visible, gold rule as the anchor, smaller label bar. */
.cf-hiw-qualify { background: var(--color-sky-tint); padding-block-start: 64px; }
.cf-hiw-qualify__intro::before {
content: '';
display: block;
width: 56px;
height: 2px;
margin-bottom: 20px;
background: var(--color-gold-500);
}
.cf-hiw-qualify .cf-photo-grid { gap: 20px; }
.cf-hiw-qualify .cf-photo-grid__label { padding: 14px 20px; font-size: 1.125rem; line-height: 1.2; }
/* Who qualifies restack (2026-09-10): the two-column split (0.85fr intro /
1.15fr photo grid, base rule in the section above) left the intro's two
short paragraphs occupying half the section height next to a ~780px-tall
2x2 photo grid -- half the section read empty. Intro promoted to a
full-width band above the cards (align-self:start dropped, it no longer
has a second column to align against); the divider/subheading/second
paragraph are gone from the markup, folded into one body paragraph, so
only a max-width for readable measure is added here. Photo grid becomes
a single row of four at desktop (>=1024px); the base rule's 2-column
grid already covers tablet (768-1023) and the 767px-down media query
below still owns the 2-up mobile case untouched. Intro-to-grid gap and
the intro's own heading-to-body gap tightened (40->24, 20->16) to bring
total section height at 1440 from 936px down into the 550-620px band
Saul asked for, now content sets the height rather than a fixed grid. */
.cf-hiw-qualify__grid {
grid-template-columns: 1fr;
align-items: stretch;
gap: 24px;
}
.cf-hiw-qualify__intro { gap: 16px; }
.cf-hiw-qualify__body { max-width: 68ch; }
@media (min-width: 1024px) {
.cf-hiw-qualify .cf-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ==== 32-for-attorneys.css ==== */
/* 32-for-attorneys.css -- Lane B, step 4. Page-scoped devices for
/for-attorneys. Hero reuses .cf-page-hero (defined in
31-how-it-works.css, both pages' hero is 3.75rem identically); "Payoff
at settlement" reuses 20-components.css .cf-photo-split unmodified
(image-left, copy-right, matching the derived artboard's DOM order and
its plain img with no pan-slow class); "The payoff is in the contract"
V11 statement reuses .cf-statement unmodified too (its 3.75rem heading
is within the shared component's own 4rem cap, no override needed).
No hex or font-family literal outside css/tokens.css. */
/* ================= What we need from your firm: V14 navy band =================
Rebuilt 2026-09-09 (contrast pass): the pale-blue band + white card read
flat next to the site's other sections, so this moves to the same
full-bleed navy device the site already uses for its dark sections
(.cf-section--navy / .cf-stat-band, background var(--color-bg-inverse-deep),
00-base.css / 20-components.css) -- cream heading, muted navy-100 body,
gold-500 numerals and hairlines (measured 5.1:1 on navy-900, clears AA for
this size). No card on the right: the three items sit directly on the
band, separated by a hairline, the same "no boxed content on a dark
section" pattern the About stat band uses for its numbers. */
.cf-atty-need {
position: relative;
background: var(--color-bg-inverse-deep);
color: var(--color-text-inverse);
padding-block: clamp(37px, 2.7vw + 27px, 64px); /* section-separation pass, 2026-09-10 */
box-sizing: border-box;
}
.cf-atty-need__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.cf-atty-need__intro { display: flex; flex-direction: column; gap: 20px; }
.cf-atty-need__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-paper);
}
.cf-atty-need__body { margin: 0; font-size: var(--fs-lede); line-height: 1.65; color: var(--color-navy-100); }
.cf-atty-need__list {
display: flex;
flex-direction: column;
}
.cf-atty-need__item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 0;
border-bottom: 1px solid var(--color-accent);
}
.cf-atty-need__item:last-child { border-bottom: none; }
.cf-atty-need__num {
flex-shrink: 0;
min-width: 2.25ch;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.75rem;
line-height: 1.2;
color: var(--color-accent);
}
.cf-atty-need__item-title {
margin: 0 0 6px;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.25;
color: var(--color-paper);
}
.cf-atty-need__item-desc { margin: 0; font-size: var(--fs-body-nav); line-height: 1.5; color: var(--color-navy-100); }
@media (max-width: 1023px) {
.cf-atty-need__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
.cf-atty-need__item { padding: 20px 0; gap: 16px; }
}
/* ================= cf-photo-split__media box-model fix (mobile) =================
20-components.css's mobile rule for .cf-photo-split__media sets
height:260px but no width; its only child (img) is position:absolute
for object-fit: cover and contributes no intrinsic width, so under
the mobile flex-column layout the media box collapses to 0 width --
this page's own "The payoff is in the contract from day one" section
confirmed the bug (contract-seal.jpg invisible at 390). Same-
specificity override, loads after 20-components.css, without editing
the lane-A-owned file; the fix is global (site.css is one stylesheet)
so it also corrects Home's two cf-photo-split sections at mobile. */
@media (max-width: 767px) {
.cf-photo-split__media { width: 100%; }
}
/* ==== 33-faq.css ==== */
/* 33-faq.css -- FAQ (/faq). Lane C, step 4. Hero reuses cf-statement
(20-components.css); the accordion is a new device (cf-faq-layout,
cf-faq-sidebar, cf-faq-media) built on the kit's cf-faq-groups /
cf-faq-jump / faq-row / faq-q / faq-a vocabulary (already in
20-components.css). No hex or font-family literal outside
css/tokens.css. */
/* --- Headline-unpicked note line, under the h1, above the lede --- */
.cf-fact-line {
position: relative;
margin: 0;
font-size: var(--fs-body-sm);
}
/* --- Accordion section layout: 360px sticky sidebar + groups --- */
.cf-faq-layout {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 64px;
align-items: start;
}
@media (max-width: 1023px) {
/* No FAQ phone artboard: stacked single column, sidebar no longer
sticky, media matches the photo-split mobile treatment (full-bleed,
no radius) -- flagged for review, GATE-rows. */
.cf-faq-layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
.cf-faq-sidebar {
position: sticky;
top: 32px;
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 28px;
}
@media (max-width: 1023px) {
.cf-faq-sidebar { position: static; }
}
.cf-faq-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
height: 420px;
}
.cf-faq-media picture { display: block; height: 100%; }
.cf-faq-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
.cf-faq-media { height: 260px; border-radius: var(--radius-md); }
}
/* --- Jump nav: kit's cf-faq-jump wrapper, stacked in the sidebar --- */
.cf-faq-jump {
flex-direction: column;
align-items: flex-start;
gap: 4px;
border-top: 1px solid var(--color-border-default);
padding-top: 20px;
}
.cf-faq-jump__label {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
color: var(--color-text-secondary);
padding-bottom: 8px;
}
.cf-faq-jump .jump-link:last-child {
color: var(--color-navy-700);
}
/* --- Groups + native details/summary rows --- */
.faq-row summary {
list-style: none;
cursor: pointer;
}
.faq-row summary::-webkit-details-marker,
.faq-row summary::marker {
display: none;
content: "";
}
.faq-row summary:focus-visible {
outline: 3px solid var(--color-navy-500);
outline-offset: 4px;
}
/* Plus/minus indicator, CSS-drawn (two bars that collapse to one on
[open], replacing the artboard's per-row SVG so one rule serves every
row instead of a duplicated icon per question). */
.faq-q-icon {
position: relative;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.faq-q-icon::before,
.faq-q-icon::after {
content: "";
position: absolute;
background: var(--color-neutral-700);
transition: transform 200ms ease, opacity 200ms ease;
}
.faq-q-icon::before {
top: 50%;
left: 0;
width: 16px;
height: 1.4px;
transform: translateY(-50%);
}
.faq-q-icon::after {
top: 0;
left: 50%;
width: 1.4px;
height: 16px;
transform: translateX(-50%);
}
details[open] > summary .faq-q-icon::before { background: var(--color-navy-700); }
details[open] > summary .faq-q-icon::after { opacity: 0; }
.faq-a { padding-bottom: 4px; }
/* ==== 34-disclosures.css ==== */
/* 34-disclosures.css -- Disclosures (/disclosures). Lane C, step 4. Hero
reuses cf-statement, the non-recourse section reuses cf-photo-split and
cf-disclosure-panel (20-components.css). New devices: cf-disc-map
(US state map, real per-state paths lifted from the artboard) and
cf-disc-list (native details/summary state notices, replacing the
artboard's static collapsed divs). No hex or font-family literal
outside css/tokens.css; the map's fills/strokes are set here via CSS
classes with var(), never as raw SVG presentation attributes. */
.cf-disc-states__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
max-width: 640px;
margin: 0 auto 56px;
}
.cf-disc-states__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: 1.1;
color: var(--color-text-heading);
}
.cf-disc-states__lede {
margin: 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-text-secondary);
}
.cf-disc-map-layout {
/* page-align fix, 2026-09-09 (item 2): removed max-width:1280 +
margin:0 auto -- this re-centered/narrowed the grid independently of
its .cf-container parent (which already caps at 1440 and centers),
leaving it ~57px short of the column at 1440 per the audit
(measurements.md: widest-L delta 58, widest-R delta -58). It now
inherits the parent's full column width. */
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
@media (max-width: 1023px) {
/* No Disclosures phone artboard: map stacks above the state list. */
.cf-disc-map-layout { grid-template-columns: 1fr; gap: 40px; }
}
.cf-disc-map {
box-sizing: border-box;
min-height: 480px;
display: flex;
flex-direction: column;
gap: 20px;
}
.cf-disc-map__svg { width: 100%; height: auto; min-height: 480px; }
.state-shape { fill: var(--color-paper); stroke: var(--color-border-default); stroke-width: 1.2; }
.state-shape.limited { fill: var(--color-accent); }
.state-shape.unavailable { fill: var(--color-navy-700); }
.cf-disc-map__legend {
display: flex;
gap: 24px;
justify-content: center;
font-size: 0.8125rem;
color: var(--color-text-secondary);
margin: 0;
padding: 0;
list-style: none;
}
.cf-disc-map__legend-item { display: flex; align-items: center; gap: 8px; }
.cf-disc-map__swatch { width: 10px; height: 10px; border-radius: var(--radius-full); display: inline-block; }
.cf-disc-map__swatch--limited { background: var(--color-accent); }
.cf-disc-map__swatch--unavailable { background: var(--color-navy-700); }
/* --- State notices: native details/summary, faq-q-icon shared with
33-faq.css (same plus/minus device, different row width). --- */
.cf-disc-list { display: flex; flex-direction: column; }
.cf-disc-row {
border-bottom: 1px solid var(--color-border-default);
padding: 18px 0;
}
.cf-disc-row summary {
list-style: none;
cursor: pointer;
}
.cf-disc-row summary::-webkit-details-marker,
.cf-disc-row summary::marker {
display: none;
content: "";
}
.cf-disc-row summary:focus-visible {
outline: 3px solid var(--color-navy-500);
outline-offset: 4px;
}
.cf-disc-row__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.cf-disc-row__name { font-size: 1rem; font-weight: 600; color: var(--color-text-heading); }
.cf-disc-row__body { margin: 10px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-secondary); }
.cf-disc-list__footnote {
margin: 20px 0 0;
font-size: var(--fs-body-sm);
color: var(--color-text-secondary);
}
/* ==== 35-about.css ==== */
/* 35-about.css -- About (/about). Lane C, step 4. Hero and Leadership
reuse cf-photo-split, the stat band reuses cf-stat-band and
cf-gain-lockup (20-components.css). New device: cf-about-contact (V16
contact card over a hairline map, navy-100 hairlines, gold pin). No
hex or font-family literal outside css/tokens.css. */
.cf-fact-line { position: relative; margin: 0; font-size: var(--fs-body-sm); }
.cf-about-leadership__name {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
color: var(--color-text-primary);
font-family: var(--font-display);
}
/* Founder story, 2026-09-10: the section's copy column grew from one
name line to ~200 words + a pull quote. Reuses .cf-photo-split__body
sizing (font-size-lg/1.65/text-secondary) per the copy brief, one rule
below rather than restyling .cf-photo-split__body itself (Home and For
Attorneys still use the shorter body treatment unmodified). The section
also gets align-items: stretch (desktop default is center, see
20-components.css .cf-photo-split) so the photo column's height tracks
the now-taller copy column instead of stopping at its own min-height
and leaving a gap beside the photo at 1280px; mobile already stretches
via the shared 767px override. */
.cf-about-leadership {
align-items: stretch;
}
.cf-about-leadership__story {
margin: 0;
font-size: var(--fs-body-lg);
line-height: 1.65;
color: var(--color-text-secondary);
max-width: 520px;
}
.cf-about-leadership__quote {
margin: 4px 0 0;
padding-left: 28px;
border-left: 3px solid var(--color-accent);
font-family: var(--font-display);
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
line-height: 1.4;
color: var(--color-text-heading);
max-width: 520px;
}
.cf-about-leadership__quote::before { content: "\201C"; }
.cf-about-leadership__quote::after { content: "\201D"; }
/* --- Contact card over hairline map (V16) --- */
.cf-about-contact {
position: relative;
background: var(--color-sky-tint);
padding: clamp(64px, 8vw + 32px, 120px) clamp(20px, 4vw, 64px);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
min-height: 520px;
}
.cf-about-contact__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.cf-about-contact__hairlines {
stroke: var(--color-navy-100);
stroke-width: 1.5;
fill: none;
}
.cf-about-contact__pin-base,
.cf-about-contact__pin { fill: var(--color-accent); }
.cf-about-contact__pin { opacity: 0.9; }
.cf-about-contact__pin-dot { fill: var(--color-white); }
.cf-about-contact__card {
position: relative;
padding: clamp(32px, 3vw + 16px, 48px) clamp(28px, 4vw, 56px);
display: flex;
flex-direction: column;
gap: 20px;
max-width: 440px;
box-sizing: border-box;
text-align: center;
align-items: center;
}
.cf-about-contact__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 2rem;
color: var(--color-text-heading);
}
.cf-about-contact__body {
margin: 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-text-secondary);
}
.cf-about-contact__card .btn-primary { margin-top: 4px; }
/* ==== 36-apply.css ==== */
/* 36-apply.css -- Apply (/apply) and ApplyConfirm (/apply/thank-you), step 4
lane D. Page rules only; shared devices (cf-form-card, cf-input,
cf-disclosure-panel, cf-card) come from 20-components.css (lane A).
No hex or font-family literal outside css/tokens.css. */
/* --- sr-only: promote candidate for 00-base.css. A generic visually-
hidden utility, first needed here so the cf-fact mark's owner chip
("Legal", "Sales", "Saul") stays the only VISIBLE text while the full
placeholder note still reaches assistive tech (title attributes are
not reliably announced). Standard clip-rect pattern, never display:
none (that would drop it from the accessibility tree too). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ================= Hero eyebrow + headline =================
design/build/apply.html: padding 56px 64px 8px, max-width 720px. The
headline is unpicked (option 1); cf-apply-hero__headline-note holds
the Saul fact mark below it, never inside the h1. */
.cf-apply-hero {
/* page-align fix, 2026-09-09 (item 5): max-width:720 removed -- this
element carries .cf-container in the markup (max-width:1440,
margin-inline:auto) which this rule was overriding via later cascade
order, capping + re-centering the whole hero at 720px instead of
letting it span the column while only the headline text below reads
narrow. The 720px reading measure moves onto
.cf-apply-hero__headline (and its note) instead, so the headline
itself still wraps at 720px but starts flush at the column's left
edge (nav logo left), matching how-it-works/for-attorneys' page-hero. */
display: flex;
flex-direction: column;
gap: 14px;
padding-block: clamp(40px, 3vw + 24px, 56px) 8px;
box-sizing: border-box;
}
.cf-apply-hero__headline {
margin: 0;
/* page-align fix, 2026-09-09 (item 5): max-width:720 added here -- this
is the reading-measure cap the comment above always intended once it
moved off .cf-apply-hero itself, but the rule was never added, so
the headline was wrapping at whatever width the (now column-width)
.cf-apply-hero gave it. */
max-width: 720px;
font-family: var(--font-display);
font-weight: 400;
/* artboard literal: 3rem at 1440 (below the 3.25rem h1 token -- this
page's headline runs one step under a full page h1); lower bound
proportional to the h1 token's own min/max ratio (2.25/3.25), no
HomePhone counterpart to read directly. Flagged in GATE-rows.md. */
font-size: clamp(2.0625rem, 1.7143rem + 1.429vw, 3rem);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--color-text-heading);
}
.cf-apply-hero__headline-note { margin: 0; max-width: 720px; }
/* ================= V15: two-column form section =================
design/build/apply.html: grid minmax(0,1.1fr) minmax(0,.9fr), gap 56px,
padding 40px 64px 112px. */
.cf-apply-form-section {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(32px, 4vw, 56px);
align-items: start;
padding-block: clamp(32px, 3vw + 16px, 40px) clamp(56px, 6vw + 24px, 112px);
box-sizing: border-box;
}
.cf-apply-form-section__col {
display: flex;
flex-direction: column;
gap: clamp(20px, 2vw, 28px);
}
/* --- Tabs: role=tablist/tab built by js/apply.js on top of two stacked
panels. Static markup has no ARIA tab
attributes and no [hidden] on either panel, so both forms render
stacked with their own headings when JavaScript does not run. --- */
.cf-apply-tabs__list {
display: flex;
gap: 8px;
border-bottom: 1px solid var(--color-border-default);
margin-bottom: 24px;
}
.cf-apply-tabs__tab {
padding: 14px 4px;
margin-bottom: -1px;
background: none;
border: none;
border-bottom: 2px solid transparent;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
color: var(--color-text-secondary);
}
.cf-apply-tabs__tab + .cf-apply-tabs__tab { margin-left: 24px; }
.cf-apply-tabs__tab[aria-selected="true"] {
font-weight: 600;
color: var(--color-text-heading);
border-bottom-color: var(--color-gold-500);
}
.cf-apply-tabs__panel + .cf-apply-tabs__panel { margin-top: 24px; }
/* --- Form: fields, toggle, checkbox, submit, consent. cf-form-card,
cf-input and .btn-primary come from 20-components.css / 00-base.css;
this file adds only the pieces the shared devices do not cover. --- */
.cf-apply-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.cf-apply-form__toggle {
margin: 0;
padding: 0;
border: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.cf-apply-form__toggle-legend {
padding: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.cf-apply-form__toggle-row { display: flex; gap: 10px; }
.cf-apply-form__toggle-btn {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border-default);
color: var(--color-text-secondary);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
}
.cf-apply-form__toggle-btn input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.cf-apply-form__toggle-btn:has(input:checked) {
border-color: var(--color-navy-700);
background: var(--color-navy-700);
color: var(--color-white);
font-weight: 600;
}
.cf-apply-form__toggle-btn:has(input:focus-visible) {
outline: 3px solid var(--color-navy-500);
outline-offset: 2px;
}
.cf-apply-form__checkbox {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.cf-apply-form__checkbox input {
width: 16px;
height: 16px;
accent-color: var(--color-gold-500);
margin: 0;
}
.cf-apply-form__checkbox-note { color: var(--color-text-secondary); }
.cf-apply-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.cf-apply-form__submit {
width: 100%;
margin-top: 4px;
}
.cf-apply-form__consent {
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
/* ================= Form hardening: step 7 =================
Field wrapper (input/select + its error slot), the alert-role error
summary, the status-role duplicate notice, and the in-flight submit
state. No hex/rgb literal outside tokens.css: the palette has no
dedicated error color, so invalid states use --color-gold-700 (the
deep gold, already the site's one AAA-checked accent, 5.0:1 on white
per tokens.css) for the border and message text -- paired with the
error text itself, never color alone. */
.cf-apply-form__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-apply-form__field-error {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-gold-700);
}
.cf-apply-form__field--error .cf-input {
border-color: var(--color-gold-700);
box-shadow: 0 0 0 1px var(--color-gold-700);
}
.cf-apply-form__errors {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-gold-700);
background: var(--color-gold-100);
}
.cf-apply-form__errors ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-apply-form__errors a,
.cf-apply-form__errors .cf-apply-form__notice-text {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-navy-900);
line-height: 1.4;
}
.cf-apply-form__errors .cf-apply-form__notice-text { display: block; }
.cf-apply-form__notice {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-navy-500);
background: var(--color-navy-100);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-navy-900);
line-height: 1.4;
}
.cf-apply-form__submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* ================= Right column: image, disclosure card, note ======= */
.cf-apply-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
height: 340px;
}
.cf-apply-media picture { position: absolute; inset: 0; }
.cf-apply-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-apply-disclosure {
padding: 28px 30px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
}
.cf-apply-disclosure__heading {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem; /* unmapped literal, artboard-verbatim; no token between h3 (1.75rem) and h4 (1.125rem) -- same gap noted in design/kit/README.md for --fs-body-nav */
color: var(--color-text-heading);
}
.cf-apply-no-attorney {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 4px 0;
}
.cf-apply-no-attorney__heading {
margin: 0;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-heading);
}
.cf-apply-no-attorney__body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-text-secondary);
}
@media (max-width: 767px) {
/* HomePhone order: form stacks first, panel second. DOM order already
places the form column first, so a single-column grid keeps it. */
.cf-apply-form-section { grid-template-columns: 1fr; gap: 40px; }
.cf-apply-form__row { grid-template-columns: 1fr; gap: 10px; }
.cf-apply-form__toggle-row { flex-direction: row; }
.cf-apply-media { height: 220px; }
}
/* ================= ApplyConfirm (V16) =================
design/build/applyconfirm.html: gradient section, min-height 720px,
card width 560px, centered. */
.cf-apply-confirm {
position: relative;
min-height: 640px;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(56px, 6vw + 24px, 96px) clamp(20px, 4vw, 64px);
box-sizing: border-box;
background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-sky-tint) 55%, var(--color-navy-100) 100%);
}
.cf-apply-confirm__card {
position: relative;
width: 100%;
max-width: 560px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevated);
overflow: hidden;
box-sizing: border-box;
}
.cf-apply-confirm__media {
position: relative;
height: 260px;
overflow: hidden;
}
.cf-apply-confirm__media picture { position: absolute; inset: 0; }
.cf-apply-confirm__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-apply-confirm__badge {
position: absolute;
left: 24px;
bottom: 24px;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-card);
}
.cf-apply-confirm__body {
padding: 36px 40px 44px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.cf-apply-confirm__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h1);
line-height: 1.05;
color: var(--color-text-heading);
}
.cf-apply-confirm__lede {
margin: 0;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-text-secondary);
max-width: 440px;
}
.cf-apply-confirm__link {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-link);
padding-top: 4px;
}
@media (max-width: 480px) {
.cf-apply-confirm__body { padding: 28px 24px 36px; }
}
/* ==== 37-legal.css ==== */
/* 37-legal.css -- Privacy (/privacy) and Terms (/terms). Lane C, step 4.
Both are shells on the Disclosures V11 statement hero (cf-statement,
20-components.css); PLAN.md gives no artboard or copy.md section for
either, so the body is the one placeholder mark and nothing else.
cf-legal__mark mirrors 39-404.css's cf-404__mark so the shell still
carries a large visual per PRODUCT.md Design Principle 2 rather than
reading as text-only. No hex or font-family literal outside
css/tokens.css. */
.cf-legal__mark {
position: relative;
width: 56px;
height: 56px;
}
.cf-footer__legal a { color: inherit; text-underline-offset: 4px; }
/* ==== 38-adapt.css ==== */
/* 38-adapt.css -- Step 6 (adapt), coder-agent. All 44 shots (11 routes x
390/768/1024/1440) reviewed against BUILD-BRIEF's responsive rules. Two
classes of defect found and fixed here, site-wide, without touching any
lane-owned file's markup or (for Apply) its CSS:
1. Touch targets under 44px. Every plain inline text link (nav, footer
nav, photo-split CTAs, phone link, "Talk to us", the logo link) and
every native disclosure header (, FAQ + Disclosures) had a
hit box sized to its own line-height only -- 23 to 29px tall, some
also under 44px wide. Fixed everywhere with the invisible
padding + equal-and-opposite negative margin technique: the click
box grows, the visible text/logo does not move, so no visual
regression at any of the four widths (confirmed by re-render).
2. Home's four-steps grid (V4, cf-steps__grid) jumped straight from
1 column (<1024px) to 4 columns (>=1024px), so at 1024 the card
body copy wrapped into ~20-character lines, under the ~40-character
minimum this pass measures against. Added a 2-column tier for
768-1279px; unchanged below 768 and at 1440 (still matches the
artboard, which is 1440-only).
No hex, rgb() or font-family literal outside css/tokens.css. */
/* ---------- Touch targets: header + footer nav, logo link ----------
Selector updated 2026-09-08 for the full-bleed nav refactor (10-chrome.css):
the logo now sits inside .cf-nav__inner, not as a direct child of
.cf-nav -- same invisible padding + equal-and-opposite negative margin
technique, same visual result. */
.cf-nav__inner > a:first-child {
display: inline-flex;
position: relative;
padding: 10px 10px;
margin: -10px -10px;
}
.cf-nav__link {
display: inline-flex;
align-items: center;
position: relative;
padding: 11px 10px;
margin: -11px -10px;
}
.cf-footer__links a {
display: inline-flex;
align-items: center;
position: relative;
padding: 11px 10px;
margin: -11px -10px;
}
/* ---------- Touch targets: Home photo-split CTA links, phone link ---- */
.cf-photo-split__link {
display: inline-flex;
align-items: center;
position: relative;
padding: 11px 0;
margin: -11px 0;
}
.cf-form-card__call {
display: inline-flex;
align-items: center;
position: relative;
padding: 11px 0;
margin: -11px 0;
}
/* ---------- Touch targets: For Attorneys "Talk to us" ---------------- */
.btn-text {
display: inline-flex;
align-items: center;
position: relative;
padding: 11px 8px;
margin: -11px -8px;
}
/* ---------- Touch targets: FAQ + Disclosures accordion headers ------- */
.faq-q {
padding: 9px 0;
margin: -9px 0;
}
.cf-disc-row__head {
padding: 9px 0;
margin: -9px 0;
}
/* ---------- Touch targets: Apply page (CSS-only lane; markup and
36-apply.css stay untouched per the parallel form lane) ------------- */
.cf-apply-form__checkbox {
padding: 11px 0;
margin: -11px 0;
}
.cf-apply-confirm__link {
display: inline-flex;
align-items: center;
position: relative;
padding: 12px 0;
margin: -12px 0;
}
/* ---------- Home four-steps grid: 2-column tier at 768-1279px -------- */
@media (min-width: 768px) and (max-width: 1279px) {
.cf-steps__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
}
/* ==== 39-404.css ==== */
/* 39-404.css -- 404 page (craft: no artboard). Reuses the V11 statement
device (cf-statement, 20-components.css) with the closing-cta mark as
the section's large visual, per PRODUCT.md Design Principle 2. Lane A
owns this file. No hex or font-family literal outside css/tokens.css. */
.cf-404__mark {
position: relative;
width: 56px;
height: 56px;
}
/* ==== 90-cinematic.css ==== */
:root{--cin-ink:#203349;--cin-paper:#f8f9fa;--cin-accent:#4760be;--cin-type:1;--cin-overlay:.22}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--cin-paper);color:var(--cin-ink)}
.cinematic h1,.cin-process h2,.cin-attorney h2{font-family:Manrope,sans-serif;font-weight:400;letter-spacing:-.055em}
.cinematic .cf-nav{position:absolute;inset:0 0 auto;z-index:20;background:transparent;border:0;box-shadow:none;color:white}
.cinematic .cf-nav__inner{max-width:none;padding:0 4vw;height:104px}.cinematic .cf-nav__logo{filter:brightness(0) invert(1);width:226px;height:auto}
.cinematic .cf-nav__link{color:#fff}.cinematic #nav-rule,.cinematic #nav-sentinel{display:none}
.cinematic .cf-nav .btn-primary{background:var(--cin-accent);color:#fff;border-color:transparent;border-radius:40px;box-shadow:none}
.cinematic .cf-nav__menu-btn{color:#fff;border-color:#ffffff66}.cinematic .cf-nav__menu-panel{position:absolute;top:90px;z-index:30;background:var(--cin-ink);color:white}.cinematic .cf-nav__menu-panel a{color:white}
.cin-hero{height:100svh;min-height:740px;max-height:1150px;position:relative;overflow:hidden;background:#203349;color:#fff}
.cin-landscape,.cin-shade{position:absolute;inset:0}.cin-landscape img{width:100%;height:100%;object-fit:cover;object-position:center 63%;animation:cin-arrive 6s ease-out both;will-change:transform}
.cin-shade{background:linear-gradient(180deg,rgba(10,24,40,.46),rgba(10,24,40,var(--cin-overlay)) 42%,transparent 65%,rgba(10,24,40,.48))}
.cin-hero-copy{position:relative;text-align:center;z-index:2;padding:155px 24px 0;margin:auto;max-width:1050px}
.cin-hero h1{color:white;font-size:clamp(46px,5.1vw,82px);font-size:calc(clamp(46px,5.1vw,82px)*var(--cin-type));line-height:1.07;margin:0 0 22px;text-wrap:balance}
.cin-hero-copy p{font-size:19px;line-height:1.55;color:#fff;margin:0 auto 27px;max-width:560px}
.cin-actions{display:flex;align-items:center;justify-content:center;gap:28px}.cin-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:50px;background:var(--cin-accent);color:white;text-decoration:none;font-size:15px;font-weight:600;box-shadow:0 5px 20px #1023301a}.cin-button:hover{filter:brightness(1.12)}.cin-phone{color:white;text-decoration:none;font-size:14px;padding:14px 0;border-bottom:1px solid #ffffff77}
.cin-hero-bottom{position:absolute;bottom:30px;left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:center;z-index:2}.cin-hero-bottom a{color:white;text-decoration:none;font-size:13px;display:flex;gap:20px;align-items:center}.cin-hero-bottom button{color:white;border:1px solid #ffffff66;border-radius:30px;padding:10px 15px;background:#20334980;font-size:12px;min-height:44px;cursor:pointer}
.cin-wrap{width:min(1240px,88%);margin:auto}
.cin-attorney h2{font-size:clamp(34px,3.5vw,52px);line-height:1.14;margin:0 0 32px}.cin-attorney p{font-size:17px;line-height:1.8;color:#495b6a;margin:0}.cin-text-link{font-size:14px;color:var(--cin-ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid #b9c4cf}.cin-text-link:hover{border-color:var(--cin-ink)}
.cin-process{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center;padding-bottom:130px}.cin-process-art{height:690px;position:relative;border-radius:8px;overflow:hidden;background:#71859b}.cin-process-art>img{height:100%;width:100%;object-fit:cover;object-position:60% center}.cin-process-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#1023309c)}.cin-process h2{font-size:48px;line-height:1.12;margin:0 0 36px}
.cin-attorney{background:#e9eef2;padding:100px 0}.cin-attorney-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.cin-attorney p{font-size:15px}.cin-attorney .cin-text-link{margin-top:24px}.cin-attorney img{width:100%;height:550px;object-fit:cover;border-radius:8px}
.cinematic .cf-footer{background:#203349}
[data-cin-style="editorial"] .cin-hero-copy{text-align:left;max-width:none;padding-left:8%;padding-top:185px}[data-cin-style="editorial"] .cin-hero-copy p{margin-left:0}[data-cin-style="editorial"] .cin-actions{justify-content:flex-start}[data-cin-style="editorial"] .cin-hero h1{font-family:'Instrument Serif',serif;font-size:calc(clamp(56px,6vw,92px)*var(--cin-type));letter-spacing:-.035em}[data-cin-style="editorial"] .cin-shade{background:linear-gradient(90deg,#172e48b8,transparent 90%)}
[data-cin-style="passage"] .cin-hero-copy{padding-top:165px}[data-cin-style="passage"] .cin-hero h1{font-family:'Instrument Serif',serif;font-size:calc(clamp(56px,6vw,92px)*var(--cin-type));letter-spacing:-.035em}
.cin-review-toggle{position:fixed;right:20px;bottom:20px;z-index:1000;background:white;color:#203349;padding:12px 18px;border:1px solid #cbd3dc;border-radius:30px;box-shadow:0 6px 30px #0002;min-height:44px;cursor:pointer}.cin-review{position:fixed;right:20px;bottom:78px;z-index:1000;background:#fff;color:#203349;border:1px solid #cbd3dc;border-radius:12px;padding:22px;width:310px;max-height:70svh;overflow:auto;box-shadow:0 12px 60px #0003;font:14px Manrope,sans-serif}.cin-review h2{font:600 18px Manrope,sans-serif;margin:0 0 8px}.cin-review p{font-size:12px;color:#546477;line-height:1.6}.cin-review label{display:block;margin:18px 0 6px}.cin-review select,.cin-review input[type=range]{width:100%;min-height:36px}.cin-review select{padding:8px;border:1px solid #cbd3dc;background:white;color:#203349;border-radius:6px}.cin-review button{min-height:40px;padding:6px 12px;margin-top:18px;background:#edf1f5;border:0;border-radius:6px;cursor:pointer}.cin-review [hidden]{display:none}
:focus-visible{outline:3px solid #a88838;outline-offset:5px}.cin-hero :focus-visible{outline-color:white}.cin-paused .cin-landscape img{animation-play-state:paused}
@keyframes cin-arrive{from{transform:scale(1.045)}to{transform:scale(1)}}
@media(min-width:1700px){.cin-hero-copy{padding-top:180px}}
@media(max-width:950px){.cinematic .cf-nav__inner{height:88px}.cinematic .cf-nav__logo{width:185px}.cinematic .cf-nav__links{display:none}.cinematic .cf-nav__menu-btn{display:block}.cin-process{gap:6%;grid-template-columns:1fr 1fr}.cin-process-art{height:620px}.cin-process h2{font-size:40px}.cin-attorney-grid{gap:6%}}
@media(max-width:600px){.cin-hero{height:92svh;min-height:690px;max-height:900px}.cinematic .cf-nav__inner{padding:0 6%;gap:12px}.cinematic .cf-nav__logo{width:157px}.cinematic .cf-nav .btn-primary{display:none}.cinematic .cf-nav__menu-btn{margin-left:auto}.cin-hero-copy{padding:145px 6% 0}.cin-hero h1{font-size:calc(47px*var(--cin-type));line-height:1.06}.cin-hero-copy p{font-size:16px;line-height:1.6;margin-bottom:26px}.cin-landscape img{object-position:65% center}.cin-actions{flex-direction:column;gap:12px}.cin-button{min-width:190px}.cin-phone{font-size:13px;padding:7px 0;min-height:44px}.cin-hero-bottom{left:6%;right:6%;bottom:22px}.cin-process{grid-template-columns:1fr;gap:38px;padding-bottom:65px}.cin-process-art{height:460px}.cin-process h2{font-size:38px;margin-bottom:24px}.cin-attorney{padding:65px 0}.cin-attorney-grid{grid-template-columns:1fr;gap:36px}.cin-attorney h2{font-size:36px}.cin-attorney img{height:350px}.cin-review{right:12px;width:min(310px,calc(100vw - 24px))}[data-cin-style="editorial"] .cin-hero-copy{padding:140px 6% 0}[data-cin-style="editorial"] .cin-actions{align-items:flex-start}[data-cin-style="editorial"] .cin-hero h1,[data-cin-style="passage"] .cin-hero h1{font-size:calc(56px*var(--cin-type))}[data-cin-style="passage"] .cin-hero-copy{padding-top:140px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cin-landscape img{animation:none!important;will-change:auto}}
/* Contrast and finishing adjustments after screenshot review. */
.cinematic .cf-footer,.cinematic .cf-footer__contact,.cinematic .cf-footer__legal,.cinematic .cf-gain-lockup__tag,.cinematic .cf-footer__links a{color:#dbe4ed}
.cinematic .cf-footer .cf-gain-lockup__logo{filter:brightness(0) invert(1)}
.cinematic .cf-nav__menu-btn{background:transparent;min-width:60px;min-height:44px;border:1px solid #ffffff80;border-radius:30px}
.cinematic h1,.cin-process h2,.cin-attorney h2{letter-spacing:-.045em}
/* Cinematic scene: slow camera drift, two atmospheric depth planes. */
.cin-landscape{transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.02);transition:transform 1.8s cubic-bezier(.2,.65,.3,1)}
.cin-landscape img{animation:none}
.cin-motion-ready .cin-landscape img{animation:cin-camera 28s ease-in-out infinite alternate}
.cin-mist{position:absolute;pointer-events:none;inset:28% -20% 15%;opacity:0;filter:blur(22px);mix-blend-mode:screen;background:radial-gradient(ellipse at 20% 45%,#cbd6e750 0%,transparent 42%),radial-gradient(ellipse at 68% 55%,#b6cadc55 0%,transparent 45%);transform:translateX(-4%)}
.cin-motion-ready .cin-mist-back{opacity:.4;animation:cin-mist-far 38s ease-in-out infinite alternate}
.cin-motion-ready .cin-mist-front{inset:42% -30% 13%;opacity:.22;filter:blur(35px);animation:cin-mist-near 29s ease-in-out infinite alternate-reverse}
.cin-paused .cin-mist,.cin-paused .cin-landscape img,.cin-offscreen .cin-mist,.cin-offscreen .cin-landscape img{animation-play-state:paused}
.cin-paused .cin-landscape{transform:scale(1.02)}
@keyframes cin-camera{from{transform:scale(1)}to{transform:scale(1.065) translate3d(-.5%,.3%,0)}}
@keyframes cin-mist-far{from{transform:translate3d(-4%,1%,0)}to{transform:translate3d(7%,-2%,0)}}
@keyframes cin-mist-near{from{transform:translate3d(4%,1%,0)}to{transform:translate3d(-7%,3%,0)}}
@media(max-width:600px){.cin-motion-ready .cin-landscape img{animation:none}.cin-motion-ready .cin-mist{display:none}.cin-landscape{transform:none;transition:none}#cin-motion{display:none}}
@media(prefers-reduced-motion:reduce){.cin-motion-ready .cin-mist{display:none}.cin-landscape{transform:none!important;transition:none}.cin-motion-ready .cin-landscape img{animation:none!important}}
.cinematic .cf-nav__apply-full{display:inline-flex;align-items:center;gap:12px}.cinematic .cf-nav .btn-arrow{flex-shrink:0}
/* ==== 92-voyage.css ==== */
/* Cherokee / Open Ground. Proposed tokens measured and adapted from the live reference. */
:root{--v-night:#181923;--v-surface:#272a37;--v-paper:#f7f7f4;--v-ink:#262835;--v-muted:#595c69;--v-iris:#535feb;--v-ice:#d0e2e4;--v-line:#d0d1d9;--v-ease:cubic-bezier(.22,1,.36,1);--v-feedback:160ms;--v-panel:420ms;--v-material:850ms}
.voyage{background:var(--v-paper);--cin-paper:var(--v-paper);--cin-ink:var(--v-ink);--cin-accent:var(--v-iris)}
.voyage .cf-nav{position:fixed;height:76px;transition:background var(--v-panel),color var(--v-panel);z-index:90}.voyage .cf-nav__inner{height:76px}.voyage .cf-nav__logo{width:202px}.voyage .cf-nav__link{font-size:14px}.voyage .cf-nav .btn-primary{min-height:42px;padding:9px 20px;font-size:14px}.voyage .cf-nav .btn-arrow{display:none}.voyage .cf-nav.nav-solid{background:var(--v-night)}.voyage .cf-nav.nav-light{background:#f7f7f4f5;color:var(--v-ink);border-bottom:1px solid #2628350d}.voyage .cf-nav.nav-light .cf-nav__link,.voyage .cf-nav.nav-light .cf-nav__menu-btn{color:var(--v-ink)}.voyage .cf-nav.nav-light .cf-nav__logo{filter:none}
.voyage .cin-hero h1{font-size:calc(clamp(40px,4.4vw,64px)*var(--cin-type));letter-spacing:-.035em;line-height:1.12}.voyage .cin-hero-copy{padding-top:150px}.voyage .cin-hero-copy p{font-size:18px}.voyage .cin-hero{max-height:none;min-height:680px}.v-journey{position:relative;background:var(--v-night)}
.v-scroll-ready .v-journey{height:265svh}.v-scroll-ready .v-journey>.cin-hero{position:sticky;top:0;height:100svh;min-height:0}.v-scroll-ready .cin-landscape{transform:scale(var(--v-zoom,1));transform-origin:66% 72%;transition:none}.v-scroll-ready .cin-landscape img{animation:none!important}.v-scroll-ready .cin-hero-copy{opacity:var(--v-copy,1);transform:translateY(var(--v-copy-y,0px));will-change:opacity,transform}.v-scroll-ready .cin-shade{background:linear-gradient(#14233450,#14233415 55%,#18192370);box-shadow:inset 0 0 0 100vw rgba(24,25,35,var(--v-dark,0))}.v-scroll-ready .cin-hero-bottom>a{opacity:var(--v-copy,1)}
.voyage .cin-attorney h2{font-size:42px;letter-spacing:-.03em}.voyage .cin-attorney{background:#ebeef0}.voyage .cin-attorney-grid{grid-template-columns:1fr 1.2fr;gap:8%}.voyage .cin-process-art{height:620px}.voyage .cin-process-art>img{transition:opacity var(--v-panel),transform var(--v-material) var(--v-ease)}.voyage .cin-process-art.is-transitioning>img{opacity:.5;transform:scale(1.04)}
@media(max-width:800px){.voyage .cin-attorney-grid{grid-template-columns:1fr}.voyage .cin-attorney h2{font-size:34px}}
@media(max-width:600px){.voyage .cf-nav__logo{width:160px}.voyage .cin-hero-copy{padding-top:140px}.voyage .cin-hero h1{font-size:calc(40px*var(--cin-type));line-height:1.12}.voyage .cin-hero{min-height:690px}.v-scroll-ready .v-journey{height:185svh}.voyage .cin-process-art{height:430px}}
@media(prefers-reduced-motion:reduce){.v-scroll-ready .v-journey{height:auto}.v-scroll-ready .v-journey>.cin-hero{position:relative;height:92svh;min-height:690px}.v-scroll-ready .cin-landscape{transform:none}.v-scroll-ready .cin-hero-copy{opacity:1;transform:none}.voyage .cf-nav,.voyage .cin-process-art>img{transition:none}}
.voyage .cin-wrap{width:min(1184px,88%)}
.voyage .cf-nav__menu-panel{position:fixed;top:76px;z-index:89}.voyage .cf-nav.nav-light .cf-nav__menu-btn{border-color:#26283588}
/* ==== 94-human-story.css ==== */
/* Meaningful scenes: the process follows reading position, never intercepts scroll. */
.voyage .v-process-story{display:block;padding-bottom:100px}
.v-process-heading{margin-bottom:40px;max-width:700px}.v-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#535b69}.v-process-heading h2{font:400 clamp(36px,4vw,54px)/1.1 Manrope,sans-serif;letter-spacing:-.045em;margin:18px 0}.v-process-heading>p{color:#536272;font-size:17px}
.v-process-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:9%;align-items:start}.v-process-visual{display:none}.v-process-chapter{padding:40px 0;border-top:1px solid #c6ced5;scroll-margin-top:110px}.v-chapter-number{font-size:12px;letter-spacing:.08em;color:#526173}.v-process-chapter h3{font:400 clamp(32px,3.4vw,48px)/1.12 Manrope,sans-serif;letter-spacing:-.04em;margin:22px 0}.v-process-chapter p{font-size:18px;line-height:1.7;color:#46586a;max-width:370px;margin:0}.v-chapter-image{width:100%;height:auto;display:block;margin-top:28px;border-radius:8px}.v-process-chapters{grid-column:1/-1}.v-process-story>.cin-text-link{margin-top:32px}
.v-scroll-ready .v-process-visual{display:block;position:sticky;top:110px}.v-scroll-ready .v-process-chapters{grid-column:auto}.v-scroll-ready .v-process-chapter{min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding:55px 0;transition:border-color .4s}.v-scroll-ready .v-process-chapter.is-active{border-color:#535feb}.v-scroll-ready .v-chapter-image{display:none}.voyage .v-process-story .cin-process-art{height:min(70svh,680px);min-height:400px;border-radius:10px;isolation:isolate;background:#c9c2b7}.voyage .v-process-story .cin-process-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 650ms ease,transform 1200ms cubic-bezier(.22,1,.36,1)}.voyage .v-process-story .cin-process-art>img.is-active{opacity:1;transform:scale(1)}.v-process-story .cin-process-art:after{z-index:1;background:linear-gradient(transparent 45%,#111923c9)}.v-process-story .cin-process-art-caption{z-index:2;bottom:54px;left:32px;font-size:clamp(30px,3.5vw,46px)}.v-process-story .v-process-label{background:#202937de;border-color:#ffffff55;left:24px;top:24px}.v-process-progress{position:absolute;z-index:2;bottom:28px;left:32px;right:32px;display:flex;gap:7px}.v-process-progress span{height:2px;flex:1;background:#ffffff50;transition:background .4s}.v-process-progress span.is-active{background:#fff}
.v-attorney-scene{margin:0;position:relative;border-radius:10px;overflow:hidden;align-self:center;background:#d7c9b6;isolation:isolate}.v-attorney-scene img{display:block;width:100%;height:560px;object-fit:cover;object-position:50% 50%}.v-attorney-scene:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#18202d99);z-index:1}.v-attorney-scene figcaption{position:absolute;left:28px;bottom:28px;z-index:2;color:white;font:400 24px/1.2 Manrope,sans-serif;letter-spacing:-.03em}
@media(max-width:800px){.v-process-layout{display:block}.v-process-heading{margin-bottom:28px}.v-scroll-ready .v-process-visual{top:88px;z-index:5;padding-bottom:18px;background:var(--v-paper)}.voyage .v-process-story .cin-process-art{height:38svh;min-height:230px;max-height:380px}.v-scroll-ready .v-process-chapter{min-height:57svh;padding:40px 0;justify-content:center}.v-process-chapter h3{font-size:34px;margin:16px 0}.v-process-chapter p{font-size:16px}.v-process-story .cin-process-art-caption{font-size:30px;left:22px;bottom:40px}.v-process-progress{left:22px;right:22px;bottom:22px}.v-process-story .v-process-label{left:16px;top:16px;padding:7px 12px;font-size:11px}.v-attorney-scene{margin-top:24px}.v-attorney-scene img{height:auto;aspect-ratio:1.05;object-fit:cover}.v-attorney-scene figcaption{font-size:22px;left:22px;bottom:22px}}
@media(prefers-reduced-motion:reduce){.v-scroll-ready .v-process-visual{display:none}.v-scroll-ready .v-process-chapters{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px}.v-scroll-ready .v-process-chapter{min-height:0;display:block;transition:none}.v-scroll-ready .v-chapter-image{display:block}.voyage .v-process-story .cin-process-art>img{transition:none}}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.v-scroll-ready .v-process-chapters{display:block}}
/* ==== 96-still-life.css ==== */
/* Direction B: legal still life, selected by Saul. */
.voyage .v-demo-stage{background:radial-gradient(ellipse at 35% 30%,#536371,#253749 65%,#182733)}
.voyage .v-demo-halo{display:none}
.voyage .v-sheet-back{background:repeating-linear-gradient(90deg,#213a50,#213a50 2px,#263e53 3px);border:1px solid #536a7b;border-radius:4px;transform:translate(20px,12px) rotate(6deg);opacity:1}
.voyage .v-sheet-main{background:linear-gradient(120deg,#fcf8ec,#e5dece);border-radius:2px}
.voyage .v-sheet-seal{border:0;border-radius:0;border-bottom:1px solid #86919a;width:100%;text-align:right;display:block}
.voyage .v-demo-stage[data-promise-state="3"] .v-sheet-back{transform:translate(-94px,14px) rotateY(-36deg) rotate(-4deg);opacity:1}
.voyage .v-demo-stage[data-promise-state="2"] .v-sheet-main{transform:translateY(-20px) rotate(0) scale(1.04)}
.voyage .v-process-story .cin-process-art>img{transform:translateY(14px) scale(1.04);transition:opacity 650ms ease,transform 1100ms cubic-bezier(.22,1,.36,1)}
.voyage .v-process-story .cin-process-art>img.is-active{transform:translateY(0) scale(1)}
.voyage .cin-attorney{background:#e7e9e8}
@media(prefers-reduced-motion:reduce){.voyage .v-process-story .cin-process-art>img,.voyage .v-sheet{transition:none;transform:none}}
.v-scroll-ready .v-signature path{stroke-dasharray:100;stroke-dashoffset:var(--v-signature-offset,100)}
/* ==== 98-sitewide.css ==== */
/* Direction B: one identity across marketing, intake and utility routes. */
.b-site{--color-paper:#f7f7f4;--color-bg-primary:#f7f7f4;--color-text-primary:#262835;--color-text-heading:#262835;--color-text-secondary:#526173;--color-navy-900:#203449;--color-bg-inverse-deep:#203449;--color-navy-700:#29475d;--color-gold-500:#535feb;--color-sky-tint:#e7e9e8;--color-border-default:#cbd0d4;--color-link:#334fab;--color-cta-primary-bg:#535feb;--color-cta-primary-text:#fff;--color-cta-secondary-border:#33475b;--font-body:Manrope,sans-serif;--font-display:'Instrument Serif',serif;--radius-lg:10px;--radius-md:8px;--shadow-elevated:none;background:#f7f7f4;color:#262835}
.b-site .cf-container{max-width:1312px;padding-inline:clamp(22px,4.5vw,64px)}
.b-site:not(.voyage) .cf-nav{height:76px;background:#f7f7f4f5;border-bottom:1px solid #26283512;backdrop-filter:blur(12px)}
.b-site .cf-nav__inner{height:76px;padding-block:0;gap:20px}
.b-site .cf-nav__logo{width:202px;height:auto}
.b-site .cf-nav__links{gap:28px;font-size:14px}
.b-site .cf-nav .btn-primary,.b-site .btn-primary{background:#535feb;color:#fff;border:1px solid transparent;box-shadow:none;min-height:46px;padding:12px 24px;font-weight:600;font-size:14px;border-radius:32px}
.b-site .btn-primary:hover{background:#414cc7;color:#fff;transform:none}
.b-site .cf-nav .btn-primary{min-height:42px;padding:9px 19px;white-space:nowrap}
.b-site .cf-nav .btn-arrow{display:none}.b-site .cf-nav__apply-short{display:none}.b-site .cf-nav__apply-full{display:inline}
.b-site #nav-rule,.b-site #nav-sentinel{display:none}
.b-site .cf-nav__menu-panel{top:76px;z-index:89;background:#f7f7f4;color:#262835;padding:28px 6vw}
.b-site .cf-nav__menu-panel-links{font:400 30px/1.3 Manrope,sans-serif;max-width:1184px;width:100%;margin:0 auto}
.b-site .cf-nav__menu-panel-links a{color:#262835;border-bottom:1px solid #cbd0d4;padding:18px 0}
.b-site .cf-nav__menu-btn{border:1px solid #64717f;border-radius:30px;background:transparent;color:inherit;padding:9px 16px;min-height:44px}
.b-site .cf-footer{background:#203449;color:#f7f7f4;padding:70px 0 40px;border:0}
.b-site .cf-footer__grid{grid-template-columns:1fr 1fr;gap:60px}.b-site .cf-footer__links{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px}
.b-site .cf-footer__links a,.b-site .cf-footer__contact,.b-site .cf-footer__contact a,.b-site .cf-footer__legal,.b-site .cf-gain-lockup__tag{color:#dbe2e8}
.b-site .cf-footer .cf-gain-lockup__logo{filter:brightness(0) invert(1);max-width:230px}.b-site .cf-footer__legal{border-top:1px solid #ffffff30;padding-top:25px;font-size:12px;line-height:1.8}
.b-site:not(.voyage) h1{font:400 clamp(42px,4.8vw,66px)/1.07 'Instrument Serif',serif;letter-spacing:-.025em;text-wrap:balance;max-width:720px}
.b-site:not(.voyage) h2{font:400 clamp(30px,3vw,43px)/1.17 Manrope,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.b-site:not(.voyage) h3{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.02em}
.b-site .cf-pill{background:none;border:0;border-radius:0;padding:0;font:500 13px/1.5 Manrope,sans-serif;letter-spacing:0;color:#526173;text-transform:none}
.b-site:not(.voyage) .cf-page-hero,.b-site:not(.voyage) .cf-photo-split{width:min(1184px,88%);padding:88px 0;margin-inline:auto;gap:8%;grid-template-columns:1fr 1.08fr;overflow:visible}
.b-site:not(.voyage) .cf-page-hero__copy{gap:24px}.b-site .cf-page-hero__grain{display:none}
.b-site .cf-page-hero__media,.b-site .cf-photo-split__media{min-height:520px;border-radius:10px;box-shadow:none}
.b-site .cf-page-hero__body,.b-site .cf-photo-split__body{font-size:17px;line-height:1.75;max-width:540px}
.b-site .b-phone-link{font-size:14px;color:#33475b;text-decoration:underline;text-underline-offset:5px;align-self:flex-start;padding:8px 0}
.b-site .cf-photo-zoom,.b-site .cf-photo-zoom picture{position:absolute;inset:0}
.b-site .cf-photo-split__media img,.b-site .cf-page-hero__media img{animation:none;transform:none;object-position:center}
.b-site .cf-statement{padding:90px max(6%,calc((100vw - 1184px)/2));background:#f7f7f4}
.b-site .cf-statement__heading{max-width:800px}.b-site .cf-statement__lede{max-width:720px;font-size:17px;line-height:1.75}
.b-site .cf-section{padding-block:88px}.b-site .cf-hiw-statement__mark,.b-site .cf-legal__mark,.b-site .cf-404__mark{display:none}
.b-site .cf-closing-cta{min-height:420px;background:#203449}.b-site .cf-closing-cta__frame{opacity:.55}.b-site .cf-closing-cta__sky{animation:none!important;transform:none;object-fit:cover}.b-site .cf-closing-cta__grain,.b-site .cf-closing-cta__mark{display:none}
.b-site .cf-closing-cta__content{padding:90px 24px;gap:24px}.b-site .cf-closing-cta__heading{color:white!important;font-size:clamp(38px,4vw,54px)}.b-site .cf-closing-cta__lede{color:white;font-size:17px}.b-site .btn-inverse{background:#f7f7f4;color:#203449;border:0;min-height:46px;border-radius:30px;padding:12px 24px}.b-site .btn-inverse:hover{background:#e5e9ef;color:#203449}
/* Process and attorney information */
.b-site .cf-hiw-sticky,.b-site .cf-atty-need,.b-site .cf-stat-band{background:#203449;color:#edf1f4;padding-block:90px}
.b-site .cf-hiw-sticky__heading,.b-site .cf-atty-need__heading,.b-site .cf-stat-band__heading{color:#f7f7f4}
.b-site .cf-hiw-sticky__body,.b-site .cf-atty-need__body,.b-site .cf-atty-need__item-desc,.b-site .cf-stat-band__lede{color:#d7dfe6}
.b-site .cf-hiw-sticky__row{min-height:62vh;border-color:#ffffff30;opacity:1}.b-site .cf-hiw-sticky__num{color:#bfc9dd}.b-site .cf-hiw-sticky__title{font-size:34px;color:white}
.b-site .cf-hiw-sticky__media{top:108px;border-radius:10px;box-shadow:none}.b-site .cf-hiw-sticky__media img{animation:none;object-fit:cover}
.b-site .cf-atty-need__num{color:#bdc9dc}.b-site .cf-atty-need__item-title{font-size:23px;color:white}
.b-site .cf-hiw-qualify{padding-block:90px}.b-site .cf-photo-grid{gap:20px}.b-site .cf-photo-grid__card{border-radius:8px;box-shadow:none}.b-site .cf-photo-grid__label{color:#fff;background:#203449d9;font-size:15px}
.b-site .cf-hiw-timeline{background:#e7e9e8;color:#262835;padding-block:90px}.b-site .cf-hiw-timeline__heading,.b-site .cf-hiw-timeline__label{color:#262835}.b-site .cf-hiw-timeline__lede,.b-site .cf-hiw-timeline__note{color:#526173}.b-site .cf-hiw-timeline__glow{display:none}
.b-site .cf-hiw-map{padding-block:80px}.b-site .cf-state-map__svg{max-height:440px}.b-site .cf-about-leadership__name{font-size:19px;color:#33475b}.b-site .cf-about-leadership__story{font-size:16px;line-height:1.8}.b-site .cf-about-leadership__quote{border-color:#535feb;font:400 28px/1.4 'Instrument Serif',serif;color:#33475b}
.b-site .cf-stat-band__number{font:400 clamp(32px,3.2vw,46px)/1.1 Manrope,sans-serif;color:#f7f7f4}.b-site .cf-stat-band__label{color:#d7dfe6}.b-site .cf-stat-band__item{border-color:#ffffff30}.b-site .cf-about-contact{background:#e7e9e8;padding:90px 6%}.b-site .cf-about-contact__card{background:#f7f7f4;box-shadow:none;border:0;border-radius:10px;padding:40px}
/* Answers and legal reading */
.b-site.cf-faq .cf-statement,.b-site.cf-disclosures .cf-statement{padding-bottom:40px;text-align:left}.b-site.cf-faq .cf-statement h1,.b-site.cf-disclosures .cf-statement h1{margin:0}
.b-site .cf-faq-accordion{padding-top:32px}.b-site .cf-faq-sidebar{top:108px}.b-site .cf-faq-media{border-radius:8px;box-shadow:none;max-height:280px}.b-site .cf-faq-media img{object-fit:cover}
.b-site .cf-faq-group{scroll-margin-top:105px}.b-site .faq-q{padding-block:23px}.b-site .faq-q-text{font-size:18px;line-height:1.45}.b-site .faq-a{font-size:16px;line-height:1.75;color:#526173}.b-site .faq-row{border-color:#cbd0d4}.b-site .faq-row[open]{background:transparent}.b-site .cf-faq-group__heading{font-size:28px}.b-site .jump-link{color:#526173;padding-block:8px}
.b-faq-search{margin-bottom:28px}.b-faq-search label{font-size:14px;display:block;margin-bottom:10px}.b-search-row{display:flex;gap:8px}.b-search-row input{min-width:0;width:100%;border:1px solid #aeb8c2;background:white;border-radius:6px;padding:12px;font-size:16px}.b-search-row button{border:0;background:#e7e9e8;color:#33475b;padding:10px;border-radius:6px;font-size:13px}.b-faq-search p{font-size:12px;color:#526173;min-height:20px;margin-top:8px}.b-site [hidden]{display:none!important}
.b-site .cf-disc-row{border-color:#cbd0d4}.b-site .cf-disc-row__head{padding-block:24px}.b-site .cf-disc-row__name{font:500 19px Manrope,sans-serif}.b-site .cf-disc-row__body{font-size:16px;line-height:1.8}.b-site .cf-disc-map{box-shadow:none}.b-site .cf-disc-map__svg{max-height:500px}
.b-legal-main{width:min(850px,88%);margin:auto;min-height:55vh}.b-site .b-legal-main .cf-statement{padding:80px 0 50px;text-align:left}.b-site .b-legal-main h1{margin:0 0 25px}.b-site .b-legal-main .cf-statement__lede{margin:0}.b-legal-links{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid #cbd0d4;padding:24px 0 70px;font-size:14px}.b-legal-links a{text-decoration:underline;text-underline-offset:4px}
.b-site.cf-404 main{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;width:min(1184px,88%);margin:60px auto 90px}.b-site.cf-404 .cf-statement{padding:0;text-align:left}.b-recovery-image{width:100%;height:480px;object-fit:cover;border-radius:10px}
/* Intake: persistent labels, controlled line lengths, clear feedback. */
.b-site .cf-apply-hero{padding-top:64px;padding-bottom:24px}.b-site .cf-apply-hero__headline{max-width:800px}.b-site .cf-apply-form-section{gap:7%;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);padding-top:24px}
.b-site .cf-form-card{box-shadow:none;border:1px solid #d5dade;background:#fff;border-radius:10px;padding:32px}.b-site .cf-form-card__heading{font-size:25px;line-height:1.3}.b-site .cf-apply-tabs__tab{padding:14px 12px;font-size:16px}.b-site .cf-apply-tabs__tab[aria-selected=true]{color:#414cc7;border-bottom-color:#535feb}.b-site .cf-apply-tabs__panel{outline-offset:6px}
.b-field-label{display:block;font-size:13px;font-weight:500;color:#425467;margin-bottom:7px}.b-site .cf-input{background:#fbfcfc;border:1px solid #aab5c0;border-radius:6px;min-height:50px;font-size:16px;color:#262835;padding:12px 14px}.b-site .cf-input:focus{outline:2px solid #535feb;outline-offset:2px;border-color:#535feb}.b-site .cf-apply-form__field-error{color:#a62435;font-size:13px}.b-site .cf-apply-media{border-radius:10px;box-shadow:none;max-height:310px}.b-site .cf-apply-media img{object-fit:cover}.b-site .cf-apply-disclosure{padding:28px 0;border:0;background:none;box-shadow:none}.b-site .cf-apply-disclosure__heading{font-size:21px}.b-site .disclosure-row__text{font-size:14px;line-height:1.65}.b-site .cf-apply-no-attorney__heading{font-size:21px}.b-site .cf-apply-no-attorney__body{font-size:15px;line-height:1.75}.b-site .cf-apply-form__toggle-btn:has(input:checked){background:#203449;border-color:#203449}.b-site input[type=checkbox]{accent-color:#535feb}
.b-site .cf-apply-confirm{background:#e7e9e8;padding:70px 6%;min-height:650px}.b-site .cf-apply-confirm__card{display:grid;grid-template-columns:1fr 1fr;max-width:1050px;padding:0;background:#f7f7f4;box-shadow:none;border:0;overflow:hidden}.b-site .cf-apply-confirm__media{height:auto;min-height:450px;border-radius:0}.b-site .cf-apply-confirm__media img{height:100%;width:100%;object-fit:cover}.b-site .cf-apply-confirm__body{padding:48px 40px;text-align:left}.b-site .cf-apply-confirm__lede{font-size:17px;line-height:1.75}.b-site .cf-apply-confirm__badge{display:none}
@media(max-width:1000px){.b-site .cf-nav__links{gap:16px}.b-site .cf-nav__logo{width:175px}.b-site .cf-footer__grid{gap:30px}.b-site .cf-hiw-sticky__row{min-height:0}.b-site .cf-apply-form-section{gap:32px}.b-site .cf-form-card{padding:24px}}
@media(max-width:900px){.b-site.b-js .cf-nav__links{display:none}.b-site.b-js .cf-nav__menu-btn{display:inline-flex}.b-site .cf-nav__menu-panel{z-index:89}.b-site .cf-nav__apply-full{display:none}.b-site .cf-nav__apply-short{display:inline}.b-site .cf-nav__inner{gap:12px}.b-site .cf-nav__menu-btn{margin-left:auto}.b-site .cf-nav .btn-primary{padding:9px 16px}}
@media(max-width:767px){.b-site .cf-nav__logo{width:155px}.b-site .cf-nav__inner{padding-inline:20px;gap:9px}.b-site .cf-nav__menu-btn{font-size:13px;padding:9px 13px}.b-site .cf-nav .btn-primary{font-size:13px;padding:9px 14px}.b-site .cf-footer{padding:50px 0 30px}.b-site .cf-footer__grid{grid-template-columns:1fr}.b-site .cf-footer__links{gap:15px 22px}.b-site:not(.voyage) .cf-page-hero,.b-site:not(.voyage) .cf-photo-split{display:flex;flex-direction:column;width:88%;padding:48px 0;gap:30px;align-items:stretch}.b-site .cf-page-hero__media,.b-site .cf-photo-split__media{order:initial;width:100%;margin:0;min-height:0;height:340px}.b-site .cf-photo-split__copy{padding:0;gap:20px}.b-site .cf-page-hero__body,.b-site .cf-photo-split__body{font-size:16px}.b-site .cf-statement,.b-site .cf-section{padding-block:54px}.b-site .cf-hiw-sticky,.b-site .cf-atty-need,.b-site .cf-stat-band,.b-site .cf-hiw-qualify,.b-site .cf-hiw-timeline,.b-site .cf-hiw-map{padding-block:56px}.b-site .cf-hiw-sticky__row{min-height:0}.b-site .cf-photo-grid{grid-template-columns:1fr 1fr;gap:12px}.b-site .cf-photo-grid__label{font-size:13px}.b-site .cf-about-contact{padding:50px 6%}.b-site .cf-about-contact__card{padding:28px}.b-site .cf-closing-cta__content{padding:65px 24px}.b-site .cf-faq-media{display:none}.b-site .cf-faq-sidebar{position:static}.b-site .cf-faq-layout{gap:32px}.b-site .cf-faq-jump{display:flex;flex-wrap:wrap;gap:8px 20px}.b-site .cf-faq-jump__label{width:100%}.b-site .cf-faq-group__heading{font-size:26px}.b-site .faq-q-text{font-size:17px}.b-site .cf-apply-hero{padding-top:42px}.b-site .cf-apply-form-section{grid-template-columns:1fr;gap:36px}.b-site .cf-apply-media{display:none}.b-site .cf-apply-form__row{grid-template-columns:1fr}.b-site .cf-apply-confirm{padding:40px 6%;min-height:0}.b-site .cf-apply-confirm__card{grid-template-columns:1fr}.b-site .cf-apply-confirm__media{height:230px;min-height:0}.b-site .cf-apply-confirm__body{padding:30px 24px}.b-site.cf-404 main{grid-template-columns:1fr;margin:45px auto 60px;gap:35px}.b-recovery-image{height:300px}.b-site .b-legal-main .cf-statement{padding-top:50px}.b-site:not(.b-js) .cf-nav__links{display:none}}
@media(max-width:360px){.b-site .cf-nav__logo{width:130px}.b-site .cf-nav__inner{padding-inline:14px;gap:7px}.b-site .cf-nav__menu-btn{padding:8px 10px}.b-site .cf-nav .btn-primary{padding:8px 12px}.b-site .cf-form-card{padding:20px}}
@media(prefers-reduced-motion:reduce){.b-site .cf-hiw-sticky__media{display:none}.b-site .cf-hiw-sticky__grid{grid-template-columns:1fr}.b-site .cf-hiw-sticky__row-media{display:block}.b-site .cf-hiw-sticky__row{min-height:0}.b-site .cf-hiw-sticky__row-media img{width:100%;max-height:360px;object-fit:cover}}
/* Specificity matches the original interior-nav rule and the heading scale. */
body.b-site:not(.cf-home) .cf-nav .btn-primary{background:#535feb;color:#fff;border:1px solid transparent;padding:9px 19px}
body.b-site:not(.cf-home) .cf-nav .btn-primary:hover{background:#414cc7;color:#fff}
body.b-site h2.cf-form-card__heading{font-size:25px;line-height:1.3}
.b-site .cf-atty-need__item{border-color:#ffffff30}
.b-site .check-draw{stroke-dashoffset:0;transition:none}
/* Utility pages read along the same left edge as their related links. */
.b-site .b-legal-main .cf-statement{align-items:flex-start}.b-site .b-legal-main .cf-statement__heading,.b-site .b-legal-main .cf-statement__lede{text-align:left}
.b-site.cf-faq .cf-statement,.b-site.cf-disclosures .cf-statement{align-items:flex-start}
.b-site .cf-about-contact>svg{display:none}.b-site .cf-about-contact:before,.b-site .cf-about-contact:after{display:none}.b-site .cf-about-contact__card{width:min(1184px,100%);max-width:1184px;margin:auto;text-align:left;background:transparent;display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;padding:0}.b-site .cf-about-contact__heading{grid-row:1/3}.b-site .cf-about-contact__card .btn-primary{justify-self:start}
.b-site .cf-hiw-sticky__row.is-active{background:transparent}
@media(max-width:767px){.b-site .cf-about-contact__card{display:block}.b-site .cf-about-contact__body{margin:22px 0}.b-site .cf-hiw-sticky__rail{display:none}}
/* The selected doorway treatment must also apply without review query parameters. */
.b-site .cin-hero h1{font-family:'Instrument Serif',serif}
.b-site:not(.b-js) .cf-hiw-sticky__media{display:none}.b-site:not(.b-js) .cf-hiw-sticky__grid{grid-template-columns:1fr}.b-site:not(.b-js) .cf-hiw-sticky__row-media{display:block}.b-site:not(.b-js) .cf-hiw-sticky__row{min-height:0}
@media(max-width:767px){.b-site .cf-faq-jump{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.b-site .cf-faq-jump__label{grid-column:1/-1}.b-site .cf-faq-jump a{padding:8px 0;font-size:14px}}
/* Final editorial system: compact interior closes, useful FAQ, real leadership. */
.b-site .b-eyebrow{font:600 11px/1.5 Manrope,sans-serif;letter-spacing:.14em;margin:0 0 20px;color:inherit;display:block}
.b-closing,.b-contact{background:#203449;color:#f7f7f4;padding:76px 6% 64px}
.b-closing__inner,.b-contact__inner{max-width:1184px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:64px;border-bottom:1px solid #ffffff30;padding-bottom:64px}
body.b-site .b-closing h2,body.b-site .b-contact h2{font:400 clamp(48px,5.3vw,72px)/1.02 'Instrument Serif',serif;letter-spacing:-.025em;color:#f7f7f4;margin:0 0 22px}
.b-closing p:not(.b-eyebrow),.b-contact__intro>p:last-child{color:#d7dfe6;font-size:17px;line-height:1.7;margin:0;max-width:460px}
.b-closing__actions{display:flex;align-items:flex-start;flex-direction:column;gap:22px;justify-self:end}
.b-site .b-contact-link{color:#f7f7f4;font-size:15px;text-decoration:none;border-bottom:1px solid #ffffff60;padding-bottom:8px;display:inline-flex;gap:24px;align-items:center}
.b-site .b-contact-link:hover{border-color:#f7f7f4}.b-site .b-closing .btn-primary{background:#5754ed;color:white;border:0;border-radius:32px;padding:15px 26px}.b-site .b-closing .btn-primary:hover{background:#4642d5}
.b-contact__inner{grid-template-columns:1fr 1.1fr;align-items:start}.b-contact__details{padding-top:8px}.b-site .b-contact__phone{font-size:clamp(24px,3vw,40px);letter-spacing:-.04em;color:#f7f7f4;text-decoration:none;display:flex;justify-content:space-between;gap:16px}.b-contact__phone:hover{text-decoration:underline;text-underline-offset:8px}.b-contact__address{border-top:1px solid #ffffff30;padding-top:28px;margin-top:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.b-contact__address .b-eyebrow{margin-bottom:10px}.b-contact address{font-style:normal;color:#d7dfe6;font-size:14px;line-height:1.8}.b-contact__address>a{white-space:nowrap}
.b-site .b-leader-portrait{margin:0;position:sticky;top:112px;align-self:start;background:#e4e5e1;border-radius:8px;overflow:hidden}.b-leader-portrait img{display:block;width:100%;height:auto}.b-leader-portrait figcaption{padding:22px 26px;background:#203449;color:#f7f7f4;font-size:16px}.b-leader-portrait figcaption span{display:block;color:#d7dfe6;font-size:12px;margin-top:5px}
body.b-site.cf-faq .b-faq-hero{padding:65px 6% 44px;background:#f7f7f4;max-width:1304px;margin:auto;gap:0;min-height:0}
body.b-site.cf-faq .b-faq-hero h1{font:400 clamp(48px,5.5vw,76px)/1.02 'Instrument Serif',serif;letter-spacing:-.03em;margin:0 0 22px}
.b-faq-intro{font-size:17px;line-height:1.7;color:#526173;margin:0 0 28px}
.b-site .b-faq-hero .b-faq-search{width:min(620px,100%);margin:0}.b-faq-hero .b-faq-search label{font-size:12px;font-weight:600}.b-faq-hero .b-search-row input{padding:16px 18px;border-radius:6px;background:#fff}.b-faq-hero .b-search-row button{background:transparent}.b-faq-hero .b-search-row button:disabled{opacity:.45}.b-faq-hero .b-faq-search p{margin-bottom:0}
.b-site .cf-faq-accordion{padding:28px 0 88px}.b-site .cf-faq-layout{grid-template-columns:220px minmax(0,1fr);gap:80px}.b-site .cf-faq-jump{border-top:1px solid #cbd0d4;padding-top:22px;gap:8px}.b-site .cf-faq-jump a{font-size:15px}.b-site .cf-faq-jump a[aria-current]{color:#3430bc;border-left:2px solid #5754ed;padding-left:14px}.b-site .cf-faq-jump__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
body.b-site .cf-faq-group__heading{font:400 30px/1.2 'Instrument Serif',serif;letter-spacing:-.01em;margin:0 0 20px}.b-site .faq-q{padding-block:20px}.b-site .faq-q-text{font-size:17px}.b-site .faq-a{max-width:660px;padding-bottom:24px}.b-site .cf-faq-group{margin-bottom:48px}.b-site .faq-q:hover .faq-q-text{color:#3430bc}
@media(prefers-reduced-motion:no-preference){.b-site .faq-row[open] .faq-a{animation:b-answer-in .22s ease-out}@keyframes b-answer-in{from{transform:translateY(-4px)}to{transform:none}}}
@media(max-width:900px){.b-site .cf-faq-layout{grid-template-columns:170px minmax(0,1fr);gap:32px}.b-contact__address{flex-direction:column;align-items:flex-start}.b-site .b-leader-portrait{position:static}}
@media(max-width:767px){.b-closing,.b-contact{padding:54px 6% 20px}.b-closing__inner,.b-contact__inner{grid-template-columns:1fr;gap:32px;padding-bottom:44px}.b-closing__actions{justify-self:start}.b-site .b-contact__phone{font-size:30px}.b-site .b-leader-portrait{width:100%}.b-contact__address{gap:24px}.b-site.cf-faq .b-faq-hero{padding:44px 6% 24px}.b-site .cf-faq-layout{grid-template-columns:1fr;gap:36px}.b-site .cf-faq-jump{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.b-site .cf-faq-sidebar{position:static}.b-site .cf-faq-jump__label{grid-column:1/-1;margin:0}.b-site .cf-faq-jump a{font-size:14px}.b-site .cf-faq-jump a[aria-current]{padding-left:8px}.b-site .cf-faq-accordion{padding-bottom:30px}}
body.b-site.cf-faq .b-faq-hero{width:min(1184px,88%);max-width:none;padding:54px 0 28px}
@media(max-width:767px){body.b-site.cf-faq .b-faq-hero{padding:38px 0 14px}.b-site .cf-faq-accordion{padding-top:20px}}
/* How it works: correctly bounded sticky media and distinct section pacing. */
body.b-site:not(.cf-home) .cf-nav{background:#f7f7f4!important;backdrop-filter:none;color:#29475d}
body.b-site .cf-hiw-sticky__grid{width:min(1184px,88%);max-width:none;padding:0;grid-template-columns:1fr 1.08fr;gap:64px;align-items:start}
body.b-site .cf-hiw-sticky__media{align-self:start;height:min(560px,70vh);min-height:0;top:110px}
body.b-site .cf-hiw-sticky__row{min-height:54vh;padding:36px 0;justify-content:center;border-radius:0;border-top:1px solid #ffffff30;gap:16px}
body.b-site .cf-hiw-sticky.cf-section--navy .cf-hiw-sticky__row.is-active{background:transparent}
body.b-site .cf-hiw-sticky__rail{display:none}
body.b-site .cf-hiw-sticky__heading{width:min(1184px,88%);margin:0 auto 48px;text-align:left}
body.b-site .cf-hiw-sticky__body{max-width:400px;font-size:17px;line-height:1.7}
body.b-site .cf-hiw-sticky__num{font:500 12px/1.4 Manrope,sans-serif;letter-spacing:.12em}
body.b-site .cf-hiw-qualify{background:#e7e9e8}
body.b-site .cf-hiw-timeline{background:#f7f7f4;padding:80px 6%}
body.b-site .cf-hiw-timeline__intro{max-width:1184px;margin:0 auto 48px;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
body.b-site .cf-hiw-timeline__heading{text-align:left;margin:0}
body.b-site .cf-hiw-timeline__lede{text-align:left;margin:0;max-width:none}
.b-settlement-steps{max-width:1184px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.b-settlement-steps li{border-top:1px solid #aeb8c2;padding-top:24px}
.b-settlement-steps li>span{display:block;color:#4543bb;font:400 40px/1 'Instrument Serif',serif;margin-bottom:25px}
.b-site .b-settlement-steps h3{font:500 19px/1.4 Manrope,sans-serif;color:#203449;margin:0 0 12px}
.b-settlement-steps p{font-size:15px;line-height:1.7;color:#526173;margin:0}
.b-availability{background:#e7e9e8;padding:34px max(6%,calc((100% - 1184px)/2));display:flex;justify-content:space-between;align-items:center;gap:32px}
body.b-site .b-availability h2{font:500 20px/1.4 Manrope,sans-serif;margin:0 0 8px}.b-availability p{font-size:14px;line-height:1.7;color:#526173;margin:0}.b-availability>a{white-space:nowrap;font-size:14px;color:#334fab;text-underline-offset:6px}
@media(max-width:1023px){body.b-site .cf-hiw-sticky__grid{grid-template-columns:1fr;gap:0}body.b-site .cf-hiw-sticky__row{min-height:0;padding:28px 0;gap:16px}body.b-site .cf-hiw-sticky__row-media{height:auto;aspect-ratio:3/2;margin-top:12px}body.b-site .cf-hiw-sticky__body{max-width:600px}body.b-site .cf-hiw-sticky__media{display:none}.b-settlement-steps{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:767px){body.b-site .cf-hiw-timeline{padding:54px 6%}body.b-site .cf-hiw-timeline__intro{grid-template-columns:1fr;gap:20px;margin-bottom:34px}.b-settlement-steps{grid-template-columns:1fr;gap:26px}.b-settlement-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:18px;padding-top:22px}.b-settlement-steps li>span{grid-row:1/3;margin:0;font-size:32px}.b-settlement-steps p{grid-column:2}.b-availability{flex-direction:column;align-items:flex-start;gap:18px}body.b-site .cf-hiw-sticky__heading{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){body.b-site .cf-hiw-sticky__grid{grid-template-columns:1fr}body.b-site .cf-hiw-sticky__row{min-height:0}}
body.b-site:not(.b-js) .cf-hiw-sticky__grid{grid-template-columns:1fr}body.b-site:not(.b-js) .cf-hiw-sticky__row{min-height:0}
body.b-site .cf-hiw-timeline__intro{padding:0;width:100%}
/* One homepage transition; the solid header stays consistent through the footer. */
body.b-site.voyage .cf-nav.nav-solid{background:#f7f7f4;color:#29475d;backdrop-filter:none;border-bottom:1px solid #26283512}
body.b-site.voyage .cf-nav.nav-solid .cf-nav__link,body.b-site.voyage .cf-nav.nav-solid .cf-nav__menu-btn{color:#29475d}
body.b-site.voyage .cf-nav.nav-solid .cf-nav__logo{filter:none}
body.b-site.voyage .cf-nav.nav-solid .cf-nav__menu-btn{border-color:#64717f}
/* FAQ help panel: a clear handoff from answers to a conversation. */
.b-faq-contact{background:#e7e9e8;padding:54px 6%;color:#203449}
.b-faq-contact__inner{max-width:1184px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
body.b-site .b-faq-contact h2{font:400 clamp(42px,4.5vw,62px)/1.05 'Instrument Serif',serif;letter-spacing:-.025em;margin:0 0 18px;color:#203449}
.b-faq-contact__copy>p:last-child{font-size:16px;line-height:1.7;color:#526173;margin:0}
.b-faq-contact__action{border-left:1px solid #b7c0c7;padding-left:48px}
.b-site .b-faq-contact__phone{display:flex;align-items:center;justify-content:space-between;gap:20px;font:500 clamp(26px,2.6vw,36px)/1.3 Manrope,sans-serif;letter-spacing:-.04em;color:#203449;text-decoration:none;border-bottom:1px solid #9ba8b3;padding-bottom:18px}
.b-faq-contact__phone:hover{color:#3430bc}
.b-faq-contact__action>p{font-size:13px;line-height:1.8;margin:18px 0 0;color:#526173}
.b-faq-contact__action>p a{color:#3430bc;text-underline-offset:4px;margin-left:4px}
.b-site.cf-faq .cf-footer{padding-top:44px}
@media(max-width:767px){.b-faq-contact{padding:40px 6%}.b-faq-contact__inner{grid-template-columns:1fr;gap:28px}.b-faq-contact__action{border-left:0;border-top:1px solid #b7c0c7;padding:24px 0 0}.b-site .b-faq-contact__phone{font-size:28px}.b-faq-contact .b-eyebrow{margin-bottom:14px}}
.b-faq-contact__action>p a{text-decoration:underline}
/* ==== 99-refined-system.css ==== */
/* Current direction B foundation. Page refinements follow this file. */
body.b-site {
--surface: #f7f7f4;
--surface-alt: #e7e9e8;
--surface-inverse: #203449;
--ink: #262835;
--ink-muted: #526173;
--ink-inverse: #f7f7f4;
--action: #535feb;
--action-hover: #414cc7;
--link: #343f9f;
--rule: #bdc5cb;
--focus-ring: #343f9f;
--content-width: 1184px;
--gutter: 48px;
--section-space: 80px;
--color-paper: var(--surface);
--color-bg-primary: var(--surface);
--color-bg-inverse-deep: var(--surface-inverse);
--color-text-primary: var(--ink);
--color-text-heading: var(--ink);
--color-text-secondary: var(--ink-muted);
--color-cta-bg: var(--action);
--color-cta-primary-bg: var(--action);
--color-cta-text: var(--ink-inverse);
--color-link: var(--link);
--color-border-default: var(--rule);
--radius-md: 8px;
--radius-lg: 10px;
}
body.b-site .cf-container {width:min(var(--content-width),calc(100% - 2 * var(--gutter)));max-width:none;padding-inline:0;margin-inline:auto}
body.b-site .cf-nav__inner {gap:24px}
body.b-site .cf-nav__logo {width:202px}
body.b-site .cf-nav .btn-primary,body.b-site .btn-primary {background:var(--action);color:var(--ink-inverse)}
body.b-site .btn-primary:hover {background:var(--action-hover);color:var(--ink-inverse)}
body.b-site .btn-primary:active {transform:translateY(1px)}
body.b-site .cf-footer {background:var(--surface-inverse);padding:56px 0 32px;--focus-ring:#dbe2e8}
body.b-site .cf-footer__grid {gap:48px}
body.b-site .cf-footer__legal {margin-top:40px}
body.b-site .cf-gain-lockup__tag a {color:inherit;text-decoration:underline;text-underline-offset:4px}
body.b-site .cf-footer__links a {min-height:28px}
body.b-site .cf-footer__contact {font-size:14px;line-height:1.7}
body.b-site .cf-nav__menu-panel {padding-inline:var(--gutter)}
body.b-site.menu-open .cf-nav {background:var(--surface)!important;color:#29475d!important;backdrop-filter:none}
body.b-site.menu-open .cf-nav__logo {filter:none!important}
body.b-site.menu-open .cf-nav__menu-btn {color:#29475d!important;border-color:#64717f!important}
body.b-site.menu-open {overflow:hidden}
body.b-site .cf-faq-group {--focus-ring:var(--link)}
@media(min-width:768px) and (max-width:1023px){body.b-site{--gutter:40px}}
@media(max-width:767px){
body.b-site {--gutter:24px;--section-space:48px}
body.b-site .cf-nav__inner {gap:8px}
body.b-site .cf-nav__logo {width:150px}
body.b-site .cf-nav__menu-btn {padding:8px 12px;font-size:13px}
body.b-site .cf-nav .btn-primary {display:inline-flex;min-height:44px;padding:9px 15px;font-size:13px}
body.b-site .cf-nav__apply-full {display:none}
body.b-site .cf-nav__apply-short {display:inline}
body.b-site .cf-footer {padding:40px 0 28px}
body.b-site .cf-footer__grid {gap:32px}
body.b-site .cf-footer__legal {margin-top:32px}
}
@media(max-width:359px){body.b-site{--gutter:20px}body.b-site .cf-nav__logo{width:123px}body.b-site .cf-nav__inner{gap:7px}body.b-site .cf-nav .btn-primary{padding-inline:13px}}
body.b-site.menu-open .cf-nav .btn-primary {visibility:hidden}
/* ==== 99a-home.css ==== */
/* Home refinement. The doorway is the sole cinematic sequence; content stays readable. */
body.cf-home .cin-wrap{width:min(var(--content-width,1184px),calc(100% - 2 * var(--gutter,24px)));max-width:none;padding-inline:0;margin-inline:auto}
.v-scroll-ready body.cf-home .v-journey{height:160svh}
body.cf-home .cin-hero-copy{padding-top:clamp(140px,19vh,195px)}
body.cf-home .cin-hero h1{font-size:calc(clamp(48px,4.8vw,68px)*var(--cin-type));line-height:1.06}
body.cf-home .cin-hero h1 .cin-hero-emphasis{font-weight:700;font-synthesis:weight;color:#ffe0a3}
body.cf-home .b-home-conditions{padding:80px 0;background:var(--color-bg-primary,#f7f7f4)}
.b-home-conditions__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start}
.b-home-conditions header{max-width:420px}
body.cf-home .b-home-conditions h2,body.cf-home .cin-attorney h2{font:400 clamp(32px,3.3vw,44px)/1.15 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 24px}
.b-home-conditions header>p{font-size:17px;line-height:1.7;color:var(--color-text-secondary,#526173);margin:0 0 24px}
.b-home-conditions__list{list-style:none;padding:0;margin:0}
.b-home-conditions__list li{display:grid;grid-template-columns:32px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--color-border-default,#cbd0d4)}
.b-home-condition-number{font-size:14px;padding-top:4px;color:var(--color-text-secondary,#526173)}
.b-home-conditions__list h3{font:500 21px/1.35 Manrope,sans-serif;letter-spacing:-.025em;margin:0 0 10px}
.b-home-conditions__list p{font-size:16px;line-height:1.65;color:var(--color-text-secondary,#526173);margin:0;max-width:52ch}
.b-home-conditions__list li.b-home-condition--promise{padding:28px;background:#203449;border:0;border-radius:8px;margin-bottom:24px;color:#fff}
.b-home-condition--promise .b-home-condition-number{color:#dbe2e8}
.b-home-conditions__list .b-home-condition--promise h3{font-size:clamp(27px,2.7vw,36px);font-weight:800;line-height:1.18;letter-spacing:-.03em;color:#fff;margin:10px 0 18px}
.b-home-conditions__list .b-home-condition--promise p{color:#f7f7f4}
.b-home-conditions__list .b-home-condition--promise .b-home-promise-label{font-size:14px;line-height:1.5;color:#dbe2e8}
@media(max-width:800px){.b-home-conditions__list li.b-home-condition--promise{padding:24px 18px;grid-template-columns:1fr;gap:8px}.b-home-condition--promise .b-home-condition-number{display:none}}
body.cf-home .v-process-story{padding-block:80px;border-top:1px solid var(--color-border-default,#cbd0d4)}
body.cf-home .v-process-heading{margin-bottom:40px;max-width:660px}
body.cf-home .v-process-heading h2{font-size:clamp(32px,3.3vw,44px);margin:0 0 16px}
body.cf-home .v-process-heading p{margin:0;font-size:17px;line-height:1.6}
body.cf-home .v-process-layout{grid-template-columns:1.1fr 1fr;gap:64px}
body.cf-home .v-process-chapter{min-height:0;padding:32px 0}
.v-scroll-ready body.cf-home .v-process-chapter{min-height:260px;padding:32px 0;justify-content:center}
body.cf-home .v-process-chapter h3{font-size:28px;line-height:1.2;letter-spacing:-.03em;margin:12px 0}
body.cf-home .v-chapter-number{font-size:14px;letter-spacing:0}
body.cf-home .v-process-chapter p{font-size:17px;line-height:1.65;max-width:42ch}
body.cf-home .v-process-story .cin-process-art{height:min(62svh,540px);min-height:300px;border-radius:8px}
body.cf-home .v-process-story .cin-process-art:after{display:none}
body.cf-home .v-process-story .cin-process-art>img{transition:opacity .4s ease,transform .7s ease;transform:scale(1.015)}
body.cf-home .v-process-story .cin-process-art>img.is-active{transform:scale(1)}
body.cf-home .cin-attorney{padding:80px 0;background:var(--color-sky-tint,#e7e9e8)}
body.cf-home .cin-attorney-grid{grid-template-columns:1fr 1.1fr;gap:64px}
body.cf-home .cin-attorney p{font-size:17px;line-height:1.7;max-width:52ch}
body.cf-home .cin-attorney .b-home-attorney-help{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-border-default,#cbd0d4);font-size:15px;line-height:1.7}
.b-home-attorney-help strong{font-weight:600}
body.cf-home .v-attorney-scene:after{display:none}
body.cf-home .v-attorney-scene img{height:auto;aspect-ratio:1.1;object-fit:cover}
.b-home-entry{padding:80px 0;background:var(--color-bg-primary,#f7f7f4)}
.b-home-entry__inner{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:center}
body.cf-home .b-home-entry h2{font:400 clamp(42px,4.6vw,64px)/1.08 'Instrument Serif',serif;letter-spacing:-.025em;margin:0 0 24px}
.b-home-entry p{max-width:45ch;font-size:17px;line-height:1.7;color:var(--color-text-secondary,#526173);margin:0}
.b-home-entry__actions{display:flex;flex-direction:column;align-items:flex-start;gap:24px;justify-self:end}
body.cf-home .b-home-entry .btn-primary{min-height:50px;padding:14px 26px}
@media(max-width:800px){
.v-scroll-ready body.cf-home .v-journey{height:auto}
.v-scroll-ready body.cf-home .v-journey>.cin-hero{position:relative;height:92svh;min-height:640px;max-height:900px}
body.cf-home .cin-hero-copy{padding-top:145px}
body.cf-home .cin-hero h1{font-size:calc(clamp(36px,7vw,48px)*var(--cin-type))}
body.cf-home .cin-hero-copy p{font-size:16px}
body.cf-home .cin-landscape{transform:none}
body.cf-home .b-home-conditions,body.cf-home .v-process-story,body.cf-home .cin-attorney,.b-home-entry{padding-block:48px}
.b-home-conditions__grid,body.cf-home .cin-attorney-grid,.b-home-entry__inner{grid-template-columns:1fr;gap:32px}
.b-home-conditions header{max-width:540px}
.b-home-conditions__list li{padding:24px 0;gap:12px;grid-template-columns:24px 1fr}
.b-home-conditions__list li:last-child{padding-bottom:0}
body.cf-home .b-home-conditions h2,body.cf-home .cin-attorney h2,body.cf-home .v-process-heading h2{font-size:32px}
.b-home-conditions__list h3{font-size:20px}
body.cf-home .v-process-heading{margin-bottom:28px}
body.cf-home .v-process-layout{display:block}
.v-scroll-ready body.cf-home .v-process-visual{display:none}
.v-scroll-ready body.cf-home .v-process-chapters{display:block}
.v-scroll-ready body.cf-home .v-process-chapter{display:block;min-height:0;padding:28px 0}
.v-scroll-ready body.cf-home .v-chapter-image{display:block}
body.cf-home .v-chapter-image{width:100%;height:auto;max-height:320px;aspect-ratio:1.6;object-fit:cover;margin-top:20px}
body.cf-home .v-process-chapter p{font-size:16px;max-width:60ch}
body.cf-home .v-process-story>.cin-text-link{margin-top:0}
body.cf-home .v-attorney-scene{margin-top:0}
body.cf-home .v-attorney-scene img{aspect-ratio:1.3}
.b-home-entry__actions{justify-self:start;gap:16px}
body.cf-home .b-home-entry h2{font-size:42px}
.b-home-entry p,body.cf-home .cin-attorney p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
.v-scroll-ready body.cf-home .v-journey{height:auto}
.v-scroll-ready body.cf-home .v-journey>.cin-hero{position:relative;height:92svh;min-height:640px}
.v-scroll-ready body.cf-home .v-process-visual{display:none}
.v-scroll-ready body.cf-home .v-process-chapters{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.v-scroll-ready body.cf-home .v-process-chapter{min-height:0;display:block}
.v-scroll-ready body.cf-home .v-chapter-image{display:block}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.v-scroll-ready body.cf-home .v-process-chapters{display:block}}
/* Without enhancement, each step carries its own illustration. */
@media(min-width:801px){html:not(.v-scroll-ready) body.cf-home .v-process-chapters{display:grid;grid-template-columns:1fr 1fr;gap:32px}html:not(.v-scroll-ready) body.cf-home .v-chapter-image{aspect-ratio:1.5;object-fit:cover}}
/* ==== 99b-interiors.css ==== */
/* Interior refinements: B direction, practical type, bounded art and document layouts. */
body.b-site .cf-hiw-sticky__list { padding-left: 0; }
body.b-site .cf-hiw-sticky__row { min-height: 46vh; }
body.b-site .cf-hiw-sticky__media { height: min(520px, calc(100svh - 148px)); }
body.b-site .cf-hiw-sticky__num { font-size: 14px; }
body.b-site .cf-statement.b-nonrecourse {
display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 64px;
width: min(var(--content-width), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: 80px 0; text-align: left;
}
body.b-site .b-nonrecourse .cf-hiw-statement__copy { max-width: none; gap: 24px; }
body.b-site .b-nonrecourse .cf-statement__lede { margin: 0; font-size: 18px; line-height: 1.65; }
.b-nonrecourse__principle { border-left: 1px solid var(--rule); padding-left: 40px; }
.b-nonrecourse__principle p { font-size: 17px; line-height: 1.65; margin: 0; }
.b-nonrecourse__principle .b-nonrecourse__display { font: 400 42px/1.1 'Instrument Serif', serif; color: var(--ink); margin-bottom: 24px; }
body.b-site .cf-photo-grid__label { font: 500 16px/1.4 Manrope, sans-serif; padding: 16px; background: var(--surface-inverse); }
body.b-site .b-settlement-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
body.b-site .b-settlement-steps li > span { font: 500 14px/1.4 Manrope, sans-serif; margin-bottom: 24px; letter-spacing: .05em; }
body.b-site .b-settlement-steps p { font-size: 16px; }
body.b-site .b-leader-portrait { position: static; width: 100%; max-width: 420px; align-self: start; }
body.b-site .cf-about-leadership { align-items: start; }
body.b-site .cf-about-leadership__name { font: 500 16px/1.5 Manrope, sans-serif; margin: 0; }
body.b-site .cf-about-leadership__story { font-size: 17px; line-height: 1.7; }
body.b-site .cf-about-leadership__quote { font-size: 29px; line-height: 1.3; }
body.b-site .cf-about-leadership .cf-photo-split__copy { gap: 20px; }
body.b-site .cf-stat-band__lede { max-width: 600px; }
body.b-site .cf-stat-band__lede a{color:inherit;text-underline-offset:4px}
body.b-site .cf-stat-band__label { font-size: 14px; line-height: 1.5; }
.b-search-empty { padding: 32px 0 48px; border-top: 1px solid var(--rule); }
.b-search-empty h2 { font: 500 28px/1.2 Manrope, sans-serif; margin: 0 0 16px; }
.b-search-empty p { font-size: 17px; line-height: 1.65; max-width: 48ch; }
.b-search-empty > div { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 24px; }
.b-search-empty a { text-underline-offset: 5px; }
.b-site .faq-a a { text-decoration: underline; text-underline-offset: 4px; }
body.b-site .b-document { width: min(var(--content-width), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: 72px 0 96px; }
.b-document__header { max-width: 780px; margin-bottom: 56px; }
.b-document__header h1 { font: 400 clamp(40px, 4.6vw, 64px)/1.06 'Instrument Serif', serif; letter-spacing: -.025em; margin: 20px 0 24px; }
.b-document__header p { font-size: 18px; line-height: 1.65; color: var(--ink-muted); }
.b-document__header .b-document__updated { margin: 28px 0 0; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--color-link); }
.b-document__layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 72px; align-items: start; }
.b-document__nav { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 112px; }
.b-document__nav a { display: block; padding: 8px 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-decoration-color: transparent; text-underline-offset: 5px; }
.b-document__nav a:hover, .b-document__nav a:focus-visible { text-decoration-color: currentColor; }
.b-document__nav [aria-current] { font-weight: 700; }
.b-document__body { font-size: 17px; line-height: 1.7; min-width: 0; }
.b-document__body section + section { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--rule); }
.b-document__body h2 { font: 500 28px/1.25 Manrope, sans-serif; margin: 0 0 24px; }
.b-document__body h3 { font: 700 17px/1.45 Manrope, sans-serif; margin: 32px 0 12px; }
.b-document__body p { max-width: 65ch; margin: 0 0 24px; }
.b-document__body a { text-decoration: underline; text-underline-offset: 4px; }
.b-document__eyebrow { margin: 0 0 10px !important; font-size: 13px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--color-link); }
.b-document__list { display: grid; gap: 12px; margin: 24px 0; padding-left: 22px; }
.b-document__list li { padding-left: 6px; }
.b-legal-callout { margin: 32px 0; padding: 26px 28px 24px; border-left: 4px solid var(--color-accent); background: var(--color-neutral-100); }
.b-legal-callout h3 { margin: 0 0 10px; }
.b-legal-callout p:last-child { margin-bottom: 0; }
.b-state-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.b-state-list span { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-text-heading); font-size: 14px; font-weight: 650; line-height: 1.35; }
.b-availability-map{margin:28px 0 20px;width:100%;overflow:hidden}
.b-availability-map img{display:block;width:100%;height:auto;background:#fff}
.b-availability-map figcaption{font-size:13px;line-height:1.5;color:var(--ink-muted);margin-top:8px}
.b-map-legend{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;font-size:14px;line-height:1.5}
.b-map-legend li{display:flex;align-items:flex-start;gap:10px}
.b-map-legend li::before{content:"";display:inline-block;flex:0 0 18px;width:18px;height:18px;margin-top:2px;border:2px solid #15816d;background:#deeee8}
.b-map-legend .b-map-legend__loan::before{border-color:#bc741f;background:#fff0d9}
.b-map-legend .b-map-legend__unavailable::before{border-color:#aeb8c1;background:repeating-linear-gradient(135deg,#f3f5f6 0,#f3f5f6 5px,#c5cdd3 5px,#c5cdd3 7px)}
.b-available-states{margin:0 0 24px;font-size:15px;line-height:1.6}
.b-available-states summary{cursor:pointer;color:var(--color-link);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.b-available-states p{margin:12px 0 0}
.b-license-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0; }
.b-license-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--color-white); }
.b-license-card--featured { grid-column: 1 / -1; border-color: var(--color-accent); background: var(--color-neutral-100); }
.b-license-card .b-license-card__state { margin: 0 0 10px; color: var(--color-link); font-size: 13px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
.b-license-card h3 { margin: 0 0 20px; font-size: 17px; }
.b-license-card dl { width: 100%; margin: 0 0 20px; }
.b-license-card dl div { display: grid; grid-template-columns: minmax(88px, .75fr) 1.25fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.b-license-card dt { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.b-license-card dd { min-width: 0; margin: 0; color: var(--color-text-heading); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.b-license-card > p:not(.b-license-card__state) { margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.b-license-card > a { margin-top: auto; font-size: 14px; font-weight: 700; }
.b-legal-contact { margin-top: 36px; padding: 28px; border-radius: var(--radius-md); background: var(--color-navy-700); color: var(--color-white); }
.b-legal-contact h3 { margin: 0 0 10px; color: var(--color-white); }
.b-legal-contact p { margin: 0; color: var(--color-white); }
.b-legal-contact a { color: var(--color-white); }
.b-legal-address { margin: -8px 0 24px; font-style: normal; line-height: 1.7; }
.b-document__body .cf-disc-list { max-width: none; padding: 0; margin: 0; }
.b-document__body .cf-disc-row__name { font: 500 18px/1.5 Manrope, sans-serif; }
.b-document__body .cf-disc-row__head { padding: 22px 0; }
.b-document__body .cf-disc-row__body { padding: 0 0 24px; margin: 0; font-size: 16px; }
.b-document__body .b-legal-links { margin: 48px 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; border-top: 1px solid var(--rule); }
.b-document [id] { scroll-margin-top: 110px; }
body.b-site.cf-404 .b-recovery-image { height: 360px; }
@media (max-width: 1023px) {
body.b-site .cf-hiw-sticky__row { min-height: 0; }
.b-document__layout { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
body.b-site .cf-statement.b-nonrecourse { gap: 40px; }
}
@media (max-width: 767px) {
body.b-site .cf-statement.b-nonrecourse, body.b-site .b-document { width: calc(100% - var(--gutter) * 2); padding: 48px 0; }
body.b-site .cf-statement.b-nonrecourse { display: grid; grid-template-columns: 1fr; gap: 32px; }
.b-nonrecourse__principle { border-left: 0; border-top: 1px solid var(--rule); padding: 28px 0 0; }
.b-nonrecourse__principle .b-nonrecourse__display { font-size: 36px; }
body.b-site .cf-photo-grid__label { font-size: 14px; padding: 12px; }
body.b-site .b-settlement-steps { grid-template-columns: 1fr; gap: 24px; }
body.b-site .b-settlement-steps li { grid-template-columns: 28px minmax(0, 1fr); }
body.b-site .b-settlement-steps li > span { margin: 4px 0 0; }
body.b-site .cf-about-leadership__quote { font-size: 26px; }
.b-document__header { margin-bottom: 32px; }
.b-document__layout { grid-template-columns: 1fr; gap: 32px; }
.b-document__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; border-block: 1px solid var(--rule); padding: 16px 0; }
.b-document__body h2 { font-size: 25px; }
.b-license-grid { grid-template-columns: 1fr; }
.b-license-card--featured { grid-column: auto; }
.b-legal-callout, .b-license-card, .b-legal-contact { padding: 22px; }
body.b-site.cf-404 .b-recovery-image { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { body.b-site .cf-hiw-sticky__row { min-height: 0; } }
body.b-site:not(.b-js) .cf-hiw-sticky__row { min-height: 0; }
body.b-site .cf-hiw-sticky__grid, body.b-site .cf-hiw-sticky__heading { width: min(var(--content-width), calc(100% - var(--gutter) * 2)); }
/* One interior content edge: outer frames own gutters, never their copy. */
body.b-site:not(.voyage) .cf-page-hero,
body.b-site:not(.voyage) .cf-photo-split {
width: min(var(--content-width), calc(100% - var(--gutter) * 2));
max-width: var(--content-width);
margin-inline: auto;
padding-inline: 0;
}
body.b-site:not(.voyage) .cf-page-hero__copy,
body.b-site:not(.voyage) .cf-photo-split__copy {
padding-inline: 0;
}
body.b-site .b-contact,
body.b-site .b-closing,
body.b-site .b-faq-contact,
body.b-site .cf-hiw-timeline {
padding-inline: 0;
}
body.b-site .b-contact__inner,
body.b-site .b-closing__inner,
body.b-site .b-faq-contact__inner,
body.b-site .cf-hiw-timeline__intro,
body.b-site .b-settlement-steps {
width: min(var(--content-width), calc(100% - var(--gutter) * 2));
max-width: var(--content-width);
margin-inline: auto;
}
body.b-site .b-availability {
padding-inline: max(var(--gutter), calc((100% - var(--content-width)) / 2));
}
@media (max-width: 767px) {
body.b-site:not(.voyage) .cf-page-hero__copy { padding-block: 0; }
}
.b-home-entry__inner p a,
.cf-hiw-qualify__body a,
.cf-hiw-timeline__lede a {
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.b-home-entry__inner p a:hover,
.cf-hiw-qualify__body a:hover,
.cf-hiw-timeline__lede a:hover,
.cf-atty-need__body a:hover {
text-decoration-thickness: 0.12em;
}
.cf-atty-need__body a {
color: var(--ink-inverse);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
/* ==== 99c-intake.css ==== */
/* Intake: persistent labels and restrained editorial hierarchy. */
#intake-form-slot { width: 100%; }
#intake-form { display: block; width: 100%; min-height: 720px; border: 0; scroll-margin-top: 100px; }
@media (max-width: 767px) { #intake-form { width: 100vw; max-width: none; margin-left: calc((100% - 100vw) / 2); } }
.b-intake-embed-notice { margin: 0 0 20px; padding: 16px; border-left: 3px solid #5354ed; background: #f2f2ff; font-size: 14px; line-height: 1.6; color: #1d3446; }
.b-site.cf-apply .cf-apply-hero{padding-top:64px;padding-bottom:36px;text-align:left;gap:0}
.b-site.cf-apply .cf-apply-hero__headline{max-width:900px;font-size:clamp(40px,4.5vw,64px);line-height:1.08;margin:0 0 20px}
.b-intake-lede{font-size:18px;line-height:1.6;max-width:64ch;color:var(--b-muted,#40566b)}
.b-site.cf-apply .cf-apply-form-section{align-items:start;gap:64px;padding-bottom:80px}
.b-site.cf-apply .cf-apply-form-section__col--form{min-width:0}
.b-site.cf-apply .cf-form-card{padding:32px;background:#fff;border:1px solid #cbd2d7;border-radius:8px;box-shadow:none}
.b-site.cf-apply .cf-form-card__heading{font-family:var(--font-body,Manrope,sans-serif);font-size:26px;line-height:1.25;margin:0 0 12px}
.b-intake-intro{font-size:15px;line-height:1.6;color:var(--b-muted,#40566b);margin:0 0 32px;max-width:58ch}
.b-site.cf-apply .cf-apply-tabs__list{display:flex;margin-bottom:24px;border-bottom:1px solid #b9c5cc;gap:24px;background:transparent;padding:0}
.b-site.cf-apply .cf-apply-tabs__tab{flex:0 1 auto;min-height:48px;padding:12px 4px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#40566b;font-size:16px;font-weight:600;white-space:nowrap}
.b-site.cf-apply .cf-apply-tabs__tab[aria-selected="true"]{border-bottom-color:#5354ed;background:transparent;color:#1d3446}
.b-intake-group{min-width:0;padding:0;border:0;margin:0 0 32px}
.b-intake-group>legend{display:block;width:100%;padding:0 0 16px;font-size:17px;font-weight:700;line-height:1.4;color:#1d3446}
.b-intake-group+.b-intake-group{padding-top:24px;border-top:1px solid #d7dce0}
.b-site.cf-apply .b-field-label{display:block;font-size:14px;font-weight:600;line-height:1.5;margin:0 0 8px}
.b-site.cf-apply .cf-input{min-height:52px;font-size:16px;border:1px solid #8b9bab;border-radius:5px;background:#fff;color:#232735}
.b-site.cf-apply .cf-apply-form__field{min-width:0;margin-bottom:18px}
.b-site.cf-apply .cf-apply-form__row .cf-apply-form__field{margin-bottom:0}
.b-site.cf-apply .cf-apply-form__row{gap:16px;margin-bottom:18px}
.b-intake-help{font-size:14px;line-height:1.65;color:#40566b;margin:16px 0 0;max-width:58ch}
.b-attorney-referral{margin:18px 0 0;padding:20px 22px;border-left:3px solid #5354ed;background:#f2f2ff;color:#1d3446;font-size:15px;line-height:1.65}
.b-attorney-referral strong{display:block;margin-bottom:4px}
.b-collection-notice{margin:18px 0 12px;font-size:14px;line-height:1.6;color:#40566b}
.b-collection-notice a{text-decoration:underline;text-underline-offset:3px}
.b-site.cf-apply [data-representation-required][hidden],.b-site.cf-apply .b-attorney-referral[hidden]{display:none!important}
.b-field-help{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:#40566b}
.b-field-help a{text-decoration:underline;text-underline-offset:3px}
.b-site.cf-apply .cf-apply-form__checkbox--legal{align-items:flex-start;margin:8px 0 24px;font-size:14px;line-height:1.6;color:#40566b}
.b-site.cf-apply .cf-apply-form__checkbox--legal input{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.b-site.cf-apply .cf-apply-form__checkbox--legal strong{color:#1d3446}
.b-site.cf-apply .cf-apply-form__checkbox--required{padding:18px;border:1px solid #b9c5cc;border-radius:5px;background:#f7f7f3}
.b-site.cf-apply .cf-apply-form__checkbox--required:has(input[aria-invalid="true"]){border-color:#a12932}
.b-site.cf-apply .cf-apply-form__consent{font-size:14px;line-height:1.6;margin-top:16px}
.b-site.cf-apply .cf-apply-form__consent a{text-decoration:underline;text-underline-offset:3px}
.b-site.cf-apply .cf-apply-form__errors{font-size:15px;line-height:1.6;padding:20px;border-left:3px solid #a12932;background:#fff4f3;margin-bottom:24px}
.b-site.cf-apply .cf-apply-form__errors p{font-weight:600;margin:0 0 8px}
.b-site.cf-apply .cf-apply-form__field-error{font-size:14px;line-height:1.5;margin-top:6px}
.b-site.cf-apply .cf-apply-form__submit{min-height:52px;width:auto;padding-inline:24px;white-space:normal}
.b-site.cf-apply .cf-apply-media{aspect-ratio:3/2;height:auto;max-height:300px;margin-bottom:24px}
.b-site.cf-apply .cf-apply-media img{width:100%;height:100%;object-fit:cover}
.b-site.cf-apply .cf-apply-form-section__col--panel{padding-top:72px}
.b-site.cf-apply .cf-apply-disclosure{background:transparent;padding:0;border:0;box-shadow:none}
.b-site.cf-apply .cf-apply-no-attorney{margin-top:32px;padding-top:24px;border-top:1px solid #cbd2d7}
.b-intake-phone{display:inline-block;font-size:22px;margin-top:12px;color:#1d3446;text-underline-offset:6px}
.b-site.cf-apply-thank-you .cf-apply-confirm{background:#f7f7f3;padding:80px 24px;min-height:0}
.b-site.cf-apply-thank-you .cf-apply-confirm__card{max-width:880px;width:100%;margin-inline:auto;display:grid;grid-template-columns:1fr 1.3fr;border:0;box-shadow:none;background:transparent;overflow:visible;gap:48px}
.b-site.cf-apply-thank-you .cf-apply-confirm__media{height:auto;min-height:0;aspect-ratio:1;align-self:center;border-radius:8px;overflow:hidden}
.b-site.cf-apply-thank-you .cf-apply-confirm__media img{object-fit:cover;width:100%;height:100%}
.b-site.cf-apply-thank-you .cf-apply-confirm__body{padding:24px 0;text-align:left}
.b-receipt-status{font-size:14px;color:#40566b;margin:0 0 16px}
.b-site.cf-apply-thank-you .cf-apply-confirm__heading{font-size:clamp(40px,4.5vw,60px);line-height:1.1;margin:0 0 20px}
.b-site.cf-apply-thank-you .cf-apply-confirm__lede{font-size:17px;line-height:1.65;margin-bottom:28px}
.b-site.cf-apply-thank-you .cf-apply-confirm__link{display:block;margin-top:24px;text-underline-offset:5px}
@media(max-width:900px){.b-site.cf-apply .cf-apply-form-section{gap:32px}.b-site.cf-apply .cf-form-card{padding:24px}.b-site.cf-apply .cf-apply-hero{padding-top:48px}}
@media(max-width:767px){.b-site.cf-apply .cf-apply-form-section{display:block;padding-bottom:48px}.b-site.cf-apply .cf-form-card{padding:24px 0;border:0;background:transparent}.b-site.cf-apply .cf-apply-form-section__col--panel{padding-top:32px}.b-site.cf-apply .cf-apply-media{display:none}.b-site.cf-apply .cf-apply-hero{padding-top:40px;padding-bottom:24px}.b-site.cf-apply .cf-apply-form__row{grid-template-columns:1fr;gap:18px}.b-site.cf-apply .cf-apply-form__submit{width:100%}.b-site.cf-apply-thank-you .cf-apply-confirm{padding:48px 24px}.b-site.cf-apply-thank-you .cf-apply-confirm__card{display:flex;flex-direction:column-reverse;gap:28px}.b-site.cf-apply-thank-you .cf-apply-confirm__media{width:100%;aspect-ratio:2/1;max-height:200px}.b-site.cf-apply-thank-you .cf-apply-confirm__body{padding:0}.b-site.cf-apply-thank-you .btn-primary{font-size:15px}}
.b-site.cf-apply .cf-apply-tabs__tab + .cf-apply-tabs__tab{margin-left:0}
/* ==== 99d-locale.css ==== */
/* Bilingual navigation and the shared leadership layout. */
.cf-nav__locale {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
flex: 0 0 auto;
min-width: 66px;
min-height: 44px;
color: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
}
.cf-nav__locale a,
.cf-nav__locale-current {
color: #29475d;
line-height: 1;
padding: 8px;
border: 1px solid transparent;
border-radius: 6px;
}
.cf-nav__locale a {
text-decoration: none;
}
.cf-nav__locale-current {
color: #343f9f;
background: #535feb12;
border-color: #535feb45;
}
.cf-nav__locale a:hover { background: #29475d0d; text-decoration: none; }
.cf-nav__locale a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.cf-nav__phone {
flex: 0 0 auto;
color: #29475d;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
}
.cf-nav__phone:hover { color: var(--color-iris-600); text-decoration: none; }
.cf-nav__phone:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
/* Hero utilities follow the white logo. Cream scrolled/open headers retain navy. */
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__locale,
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__locale a,
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__locale-current,
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__phone {
color: #fff;
--focus-ring: #fff;
}
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__locale-current {
background: #ffffff24;
border-color: #ffffff99;
}
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__locale a:hover { background: #ffffff18; }
.cf-nav__links { white-space: nowrap; }
.cf-nav .btn-primary { white-space: nowrap; }
.cin-button { white-space: nowrap; }
body.b-site .cf-photo-split.cf-about-leadership {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(32px, 6vw, 80px);
}
.cf-about-leadership .cf-photo-split__copy { width: 100%; }
.cf-about-leadership__story { max-width: none; }
body.b-site .cf-about-leadership .b-leader-portrait {
max-width: 480px;
justify-self: end;
}
.cf-about-leadership .b-leader-portrait img {
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 42% center;
}
@media (max-width: 1150px) {
html[lang="es"] body.b-site.b-js .cf-nav__links { display: none; }
html[lang="es"] body.b-site.b-js .cf-nav__menu-btn { display: inline-flex; margin-left: auto; }
}
@media (max-width: 1180px) {
.cf-nav__phone { display: none; }
}
@media (max-width: 767px) {
/* Keep language selection in view without crowding the logo or primary actions. */
body.b-site .cf-nav,
body.b-site:not(.voyage) .cf-nav { height: 108px; }
body.b-site .cf-nav__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-rows: 44px 44px;
height: 108px;
padding-block: 8px;
gap: 4px 8px;
}
body.b-site .cf-nav__brand { grid-column: 1; grid-row: 1 / 3; justify-self: start; }
body.b-site .cf-nav__menu-btn { grid-column: 2; grid-row: 1; }
body.b-site .cf-nav .btn-primary { grid-column: 3; grid-row: 1; }
body.b-site .cf-nav__locale { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
body.b-site .cf-nav__locale a,
body.b-site .cf-nav__locale-current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
body.b-site .cf-nav__menu-panel { top: 108px; }
body.b-site .cf-photo-split.cf-about-leadership { display: flex; gap: 32px; }
body.b-site .cf-about-leadership .b-leader-portrait { order: -1; align-self: center; }
}
/* ==== 99f-brand-lockup.css ==== */
/* Keep the approved logo and make its relationship to Gain visible on phones. */
.cf-nav__brand { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 3px; }
.cf-nav__brand > a { display: block; line-height: 0; }
.cf-nav__brand-tag { color: #40566b; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.cinematic:not(.menu-open) .cf-nav:not(.nav-light):not(.nav-solid) .cf-nav__brand-tag { color: #fff; }