/* Your Senior Health Benefits Review - landing page design system
Senior-optimized: nothing here is allowed to be small.
Body 20px, tap targets 44px+, WCAG AA minimum and AAA on body text. */
:root{
--navy:#122844; --navy-deep:#0c1c30; --navy-soft:#1d3a5f;
--cream:#e8e2d3; --cream-lt:#f5f1e8;
--red:#a02828; --red-dk:#8a2222;
--ink:#16202b; --ink-soft:#43536a;
--white:#fff; --line:#d6cfc0;
--ok:#1f6b45;
/* Brand, sampled from the badge itself. Added alongside the site palette,
never replacing it: --navy and --red are contrast-verified across the whole
site and --red is the CTA colour on every conversion path. */
--brand-navy:#024365; --brand-blue:#2a87b2;
--gold:#e4b42c; --gold-lt:#efca3e; --gold-dk:#d19f22;
--shadow:0 2px 4px rgba(12,28,48,.06),0 8px 24px rgba(12,28,48,.10);
--shadow-lg:0 4px 8px rgba(12,28,48,.08),0 16px 48px rgba(12,28,48,.16);
--r:10px; --r-lg:16px;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:Georgia,"Iowan Old Style","Times New Roman",serif;
--wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:20px} /* rem base = 20px so every rem size below is senior-scale. Do not change. */
body{
margin:0;font-family:var(--sans);font-size:1rem;line-height:1.6;
color:var(--ink);background:var(--white);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section--tight{padding:40px 0}
.section--cream{background:var(--cream-lt)}
.section--navy{background:var(--navy);color:var(--cream-lt)}
.section--navy h2,.section--navy h3{color:var(--white)}
/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.18;margin:0 0 .5em;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.4vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,2.1vw,1.32rem);line-height:1.55;color:var(--ink-soft)}
.section--navy .lede{color:#c8d4e4}
.eyebrow{
font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--red);margin:0 0 .8em
}
.section--navy .eyebrow{color:#f0c9c9}
.center{text-align:center}
.mw-60{max-width:62ch}
.mw-60.center{margin-left:auto;margin-right:auto}
/* ---------- flag accent ---------- */
.flag{display:inline-flex;height:5px;width:52px;border-radius:3px;overflow:hidden;vertical-align:middle}
.flag i{flex:1}
.flag i:nth-child(1){background:#a02828}
.flag i:nth-child(2){background:#f5f1e8}
.flag i:nth-child(3){background:#122844}
/* ---------- header ---------- */
.hdr{background:var(--navy);color:var(--white);position:relative;z-index:20}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:10px 20px;max-width:var(--wrap);margin:0 auto}
.hdr__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.hdr__mark{width:92px;height:62px;flex:none}
.hdr__name{font-family:var(--serif);font-size:1.06rem;line-height:1.2;font-weight:700}
.hdr__name small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a9bdd6;margin-top:3px}
.hdr__tel{
display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;
background:var(--red);color:var(--white);border-radius:var(--r);
font-size:1.06rem;font-weight:700;text-decoration:none;white-space:nowrap
}
.hdr__tel:hover{background:var(--red-dk)}
.hdr__tel svg{width:19px;height:19px;flex:none}
/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--white);padding:52px 0 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12%;top:-30%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(232,226,211,.09),transparent 62%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr;gap:36px;position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero .lede{color:#cdd9e8}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(232,226,211,.22)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:#c8d4e4;font-weight:600}
.hero__trust svg{width:17px;height:17px;flex:none;color:#8fd1a8}
/* ---------- form card ---------- */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.card__top{background:var(--cream);padding:22px 26px;border-bottom:3px solid var(--red)}
.card__top h2{font-size:1.42rem;margin:0 0 4px}
.card__top p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.card__body{padding:26px}
.field{margin-bottom:19px}
.field:last-of-type{margin-bottom:22px}
label{display:block;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:7px}
label .opt{font-weight:500;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=tel],input[type=email],select{
width:100%;min-height:54px;padding:13px 15px;font-size:1.06rem;font-family:var(--sans);
color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r);
transition:border-color .14s,box-shadow .14s
}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,40,68,.15)}
input::placeholder{color:#9aa6b5}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343536a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* radio pills */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
border:2px solid var(--line);border-radius:var(--r);font-size:1rem;font-weight:600;
color:var(--ink-soft);background:var(--white);cursor:pointer;transition:.14s
}
.pill input:checked+span{border-color:var(--navy);background:var(--navy);color:var(--white)}
.pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(18,40,68,.28)}
/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--cream-lt);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.consent input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
.consent label{font-size:.88rem;font-weight:500;color:var(--ink-soft);line-height:1.5;margin:0}
/* buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:60px;padding:0 30px;width:100%;
background:var(--red);color:var(--white);border:none;border-radius:var(--r);
font-family:var(--sans);font-size:1.16rem;font-weight:700;cursor:pointer;
text-decoration:none;transition:background .14s,transform .08s
}
.btn svg{width:21px;height:21px;flex:none} /* unconstrained SVGs blew up the hero CTA */
.btn{white-space:nowrap}
.btn:hover{background:var(--red-dk)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(232,226,211,.5)}
.btn--ghost:hover{background:rgba(232,226,211,.12)}
.btn--navy{background:var(--navy)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--auto{width:auto}
.formnote{font-size:.86rem;color:var(--ink-soft);text-align:center;margin:14px 0 0;line-height:1.5}
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:24px;counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{
counter-increment:s;content:counter(s);
position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;
background:var(--navy);color:var(--white);font-family:var(--serif);font-size:1.35rem;font-weight:700;
display:flex;align-items:center;justify-content:center
}
.step h3{margin-bottom:.3em}
.step p{margin:0;color:var(--ink-soft);font-size:1.02rem}
/* ---------- checklist ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:1.06rem;line-height:1.5}
.checks svg{width:26px;height:26px;flex:none;margin-top:1px;color:var(--ok)}
.section--navy .checks svg{color:#8fd1a8}
/* ---------- agent ---------- */
.agent{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.agent__photo{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;max-width:330px;margin:0 auto;background:var(--cream);aspect-ratio:4/5;object-fit:cover}
.agent__ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:.9rem;color:var(--ink-soft);border:2px dashed var(--line)}
/* ---------- alt path ---------- */
.alt{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:22px 24px}
.alt p{margin:0;font-size:1.06rem}
.alt strong{color:var(--navy)}
/* ---------- footer ---------- */
.ftr{background:var(--navy-deep);color:#a9bdd6;padding:44px 0 36px;font-size:.9rem;line-height:1.65}
.ftr a{color:#cdd9e8}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ftr__brand img,.ftr__brand svg{width:60px;height:40px;flex:none}
.ftr__name{font-family:var(--serif);color:var(--white);font-size:1.02rem;font-weight:700}
.ftr__disc{border-top:1px solid rgba(169,189,214,.22);margin-top:24px;padding-top:20px;font-size:.83rem;color:#8ba3c0}
.ftr__disc p{margin:0 0 .8em}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
/* ---------- sticky mobile CTA ---------- */
.sticky{
position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 14px;
background:rgba(18,40,68,.97);backdrop-filter:blur(6px);
box-shadow:0 -3px 18px rgba(0,0,0,.24)
}
.sticky .btn{min-height:52px;font-size:1.04rem;padding:0 16px}
.sticky .btn--ghost{border-color:rgba(232,226,211,.45)}
/* ---------- success ---------- */
.done{display:none;text-align:center;padding:16px 4px}
.done svg{width:60px;height:60px;color:var(--ok);margin:0 auto 14px}
.done h2{font-size:1.5rem}
.err{display:none;background:#fdecec;border:2px solid #e5a3a3;color:#7d1d1d;border-radius:var(--r);padding:13px 15px;font-size:.96rem;margin-bottom:16px}
/* ---------- responsive ---------- */
@media (min-width:900px){
.hero{padding:72px 0 80px}
.hero__grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.section{padding:76px 0}
.steps{grid-template-columns:repeat(3,1fr);gap:34px}
.agent{grid-template-columns:330px 1fr;gap:44px}
.checks{grid-template-columns:1fr 1fr;gap:16px 34px}
}
@media (max-width:899px){
body{padding-bottom:98px} /* clears the sticky bar (87px) with room */
.sticky{display:flex}
.sticky .btn{flex:1;white-space:nowrap}
.hdr__name small{display:none}
/* Mobile hero: the h1 was eating the entire first screen at 40px x 5 lines.
Smaller head + tighter padding puts the form one thumb-flick away, and the
sticky Start Review button jumps straight to it. */
.hero{padding:32px 0 40px}
h1{font-size:clamp(1.68rem,7vw,2.3rem)}
.hero .lede{font-size:1.02rem}
.hero__trust{margin-top:20px;padding-top:18px;gap:8px 18px}
.hero__trust span{font-size:.86rem}
.section{padding:44px 0}
}
@media (max-width:560px){
/* Brand name was wrapping to 5 lines and pushing the phone button off screen. */
.hdr__in{min-height:66px;gap:10px}
.hdr__mark{width:48px;height:32px}
/* At 390px the row is mark + name + call button. The forced
plus the
"Licensed Independent Broker" line pushed the name to FIVE wrapped lines.
The tagline is redundant next to a logo on a phone, so it goes, and the
name is allowed to wrap naturally to three. */
.hdr__name{font-size:.76rem;line-height:1.18;max-width:none}
.hdr__name br{display:none}
.hdr__name small{display:none}
.hdr__tel{padding:0 13px;font-size:.92rem;min-height:46px;gap:7px}
.hdr__tel svg{width:17px;height:17px}
.card__top,.card__body{padding-left:19px;padding-right:19px}
}
@media (max-width:420px){
.row2{grid-template-columns:1fr}
.hdr__name{font-size:.75rem;max-width:7.4em}
.hdr__tel{padding:0 11px;font-size:.86rem}
}
/* Reduced motion is handled by INVERSION, not override: nothing animates by
default, and every animation lives inside a (prefers-reduced-motion:
no-preference) block further down. See the MOTION SYSTEM section.
The competitor site this was benchmarked against has exactly one
prefers-reduced-motion block whose entire content is a Tailwind utility, and
zero rules that stop any of its 11 running animations. */
/* ══════════════════════════════════════════════════════════════════════
SITE COMPONENTS - added for the full site rebuild (2026-08-29).
Everything above is the shared landing-page design system.
══════════════════════════════════════════════════════════════════ */
/* ---------- site nav ---------- */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
color:#c8d4e4;text-decoration:none;font-size:.8rem;font-weight:600;
padding:10px 13px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center
}
.nav a:hover{background:rgba(232,226,211,.12);color:#fff}
.nav a[aria-current=page]{color:#fff;background:rgba(232,226,211,.16)}
.hdr__in--site{flex-wrap:wrap}
.navtoggle{
display:none;background:none;border:2px solid rgba(232,226,211,.4);color:#fff;
border-radius:8px;min-height:44px;min-width:44px;cursor:pointer;align-items:center;justify-content:center
}
.navtoggle svg{width:24px;height:24px}
/* ---------- generic page head ---------- */
.phead{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:48px 0 52px}
.phead h1{color:#fff;margin-bottom:.35em}
.phead .lede{color:#cdd9e8;max-width:60ch}
/* ---------- cards grid ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
.grid--3{grid-template-columns:1fr}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.tile--cream{background:var(--cream-lt)}
.tile h3{margin-bottom:.4em}
.tile p:last-child{margin-bottom:0}
.tile__ico{width:46px;height:46px;border-radius:10px;background:var(--navy);color:var(--cream-lt);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tile__ico svg{width:25px;height:25px}
/* ---------- compare table (workshop vs us) ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:22px}
.vs__col{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line)}
.vs__col--bad{background:#f7f4f1}
.vs__col--good{background:var(--navy);color:var(--cream-lt);border-color:var(--navy)}
.vs__col--good h3{color:#fff}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vs li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.5}
.vs svg{width:22px;height:22px;flex:none;margin-top:2px}
.vs__col--bad svg{color:#9b3535}
.vs__col--good svg{color:#8fd1a8}
/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:78ch;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.faq details[open]{border-color:var(--navy);box-shadow:var(--shadow)}
.faq summary{
cursor:pointer;list-style:none;padding:19px 54px 19px 21px;position:relative;
font-weight:700;font-size:1.04rem;color:var(--navy);min-height:44px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:21px;top:50%;width:12px;height:12px;
border-right:3px solid var(--red);border-bottom:3px solid var(--red);
transform:translateY(-70%) rotate(45deg);transition:transform .16s
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 21px 20px;color:var(--ink-soft);font-size:1rem}
.faq .faq__a p:last-child{margin-bottom:0}
/* ---------- state list ---------- */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px;list-style:none;margin:0;padding:0}
.states a{
display:flex;align-items:center;justify-content:space-between;gap:8px;
min-height:56px;padding:0 17px;background:var(--white);border:1px solid var(--line);
border-radius:var(--r);text-decoration:none;color:var(--navy);font-weight:700;font-size:1rem
}
.states a:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.states a span{color:var(--ink-soft);font-weight:600;font-size:.85rem}
/* ---------- carriers ---------- */
.carriers{display:grid;grid-template-columns:1fr;gap:26px}
.carriers h3{font-size:1.1rem;margin-bottom:.6em;padding-bottom:.5em;border-bottom:2px solid var(--line)}
.carriers ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.carriers li{font-size:1rem;color:var(--ink-soft)}
/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--navy);line-height:1.1}
.section--navy .stat b{color:#fff}
.stat span{font-size:.92rem;color:var(--ink-soft)}
.section--navy .stat span{color:#c8d4e4}
/* ---------- callout ---------- */
.callout{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:24px 26px}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}
/* ---------- prose (guides / legal) ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.55em}
.prose a{color:var(--red);font-weight:600}
/* ---------- footer nav ---------- */
.ftr__cols{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:26px}
.ftr__cols h4{color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}
.ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__cols a{text-decoration:none}
.ftr__cols a:hover{text-decoration:underline}
@media (min-width:760px){
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.vs{grid-template-columns:1fr 1fr;gap:26px}
.carriers{grid-template-columns:repeat(3,1fr)}
.ftr__cols{grid-template-columns:2fr 1fr 1fr}
.phead{padding:66px 0 70px}
}
@media (max-width:759px){
.nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
.nav.open{display:flex}
.nav a{font-size:1rem;padding:13px}
.navtoggle{display:inline-flex}
}
/* ══════════════════════════════════════════════════════════════════════
HERO v2 (2026-08-29) — depth, accent headline, stat chips, badge.
Design language only. Their copy patterns ($0 premiums, "free quote",
dollar-savings testimonials, unverifiable ratings) are deliberately NOT
carried over; see BUILD_LOG.
══════════════════════════════════════════════════════════════════ */
.hero--v2{
position:relative;overflow:hidden;
background:
radial-gradient(900px 480px at 78% 8%, rgba(90,140,210,.20), transparent 62%),
radial-gradient(700px 420px at 8% 92%, rgba(160,40,40,.16), transparent 60%),
linear-gradient(165deg,#16304f 0%,var(--navy) 42%,var(--navy-deep) 100%);
}
.hero--v2::before{ /* faint texture, adds depth without an image */
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:
radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.30), transparent),
radial-gradient(1.5px 1.5px at 62% 14%, rgba(255,255,255,.22), transparent),
radial-gradient(1.5px 1.5px at 84% 44%, rgba(255,255,255,.26), transparent),
radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 72% 78%, rgba(255,255,255,.22), transparent);
}
.hero--v2 .wrap{position:relative;z-index:2}
/* pill eyebrow with a live dot */
.pill-eyebrow{
display:inline-flex;align-items:center;gap:9px;padding:8px 16px;
border:1px solid rgba(232,226,211,.26);border-radius:999px;
background:rgba(232,226,211,.07);
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:#cdd9e8;margin:0 0 22px
}
.pill-eyebrow i{width:8px;height:8px;border-radius:50%;background:#8fd1a8;flex:none}
/* the accent word */
.accent{color:#7fb0e8;position:relative;white-space:nowrap}
.accent::after{
content:"";position:absolute;left:0;right:0;bottom:-.10em;height:.075em;
border-radius:3px;background:linear-gradient(90deg,#7fb0e8,rgba(127,176,232,.15))
}
/* rounded CTAs */
.btn--pill{border-radius:999px;padding:0 30px}
.btn--pill svg{width:19px;height:19px}
/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.chip{
display:inline-flex;align-items:center;gap:11px;padding:11px 17px;
border:1px solid rgba(232,226,211,.20);border-radius:14px;
background:rgba(232,226,211,.06)
}
.chip svg{width:19px;height:19px;flex:none;color:#8fd1a8}
.chip b{color:#fff;font-family:var(--serif);font-size:1.12rem;line-height:1}
.chip span{color:#a9bdd6;font-size:.78rem;font-weight:600;line-height:1.25}
/* floating credential badge */
.badge-float{
display:inline-flex;align-items:center;gap:13px;padding:15px 20px;
border:1px solid rgba(232,226,211,.22);border-radius:16px;
background:rgba(12,28,48,.72);backdrop-filter:blur(8px);box-shadow:var(--shadow-lg)
}
.badge-float__ico{
width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,#2c5c96,#1b3c66)
}
.badge-float__ico svg{width:21px;height:21px;color:#cfe3ff}
.badge-float b{display:block;color:#fff;font-size:.94rem;line-height:1.3}
.badge-float span{display:block;color:#a9bdd6;font-size:.79rem;margin-top:2px}
/* service cards */
.svc{display:grid;grid-template-columns:1fr;gap:22px}
.svc__card{
background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column
}
.svc__card:hover{border-color:var(--navy);box-shadow:var(--shadow-lg)}
.svc__ico{
width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
background:var(--navy);color:var(--cream-lt);margin-bottom:17px
}
.svc__ico svg{width:26px;height:26px}
.svc__card h3{margin-bottom:.45em}
.svc__card>p{color:var(--ink-soft);font-size:1rem}
.svc__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.svc__list li{display:flex;gap:9px;align-items:center;font-size:.94rem;font-weight:600;color:var(--navy)}
.svc__list svg{width:17px;height:17px;flex:none;color:var(--ok)}
.svc__card .btn{margin-top:auto}
@media (min-width:900px){
.svc{grid-template-columns:repeat(3,1fr)}
.hero--v2{padding:84px 0 92px}
}
@media (max-width:899px){
.chips{gap:9px}
.chip{padding:9px 13px}
.badge-float{margin-top:26px}
}
/* ---- photography ---- */
picture{display:block}
.ph{display:block;width:100%;height:auto;border-radius:var(--r-lg);object-fit:cover}
.ph--hero{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2}
.ph--portrait{aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.ph--wide{aspect-ratio:16/9}
.ph--card{border-radius:var(--r-lg) var(--r-lg) 0 0;aspect-ratio:16/9;margin:-26px -26px 20px}
.ph--band{aspect-ratio:21/9;border-radius:0}
/* photo + copy split */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.split--rev .split__media{order:-1}
@media (min-width:900px){
.split{grid-template-columns:1fr 1fr;gap:52px}
.split--rev .split__media{order:0}
}
/* page hero with a photo */
.phead--photo{padding-bottom:0}
.phead__img{margin-top:40px;margin-bottom:-90px;position:relative;z-index:3}
.section--after-photo{padding-top:120px}
/* guide cards with images */
.tile--img{padding:26px;overflow:hidden}
/* ══════════════════════════════════════════════════════════════════════════
MOTION SYSTEM (2026-08-29)
THE RULE: motion is opt-IN. Everything below the base layer sits inside
@media (prefers-reduced-motion: no-preference). A visitor who has told their
OS they get motion sick gets a completely static site, and it is structurally
impossible to ship an animation that ignores that — you would have to put it
outside the block on purpose.
This audience is over 65. Vestibular sensitivity rises sharply with age, so
this is the one audience where it matters most.
PERFORMANCE RULE: animate `transform` and `opacity` ONLY. Both are
GPU-composited and skip layout and paint entirely. Blur stays on a STATIC
parent while only the child's transform moves. Animating a blurred element
forces the browser to re-rasterise a large blurred surface every frame, which
is what makes the benchmarked site expensive on the older phones and tablets
its own audience actually uses.
BUDGET: <=10 running animations, ZERO animated blur over 80px.
══════════════════════════════════════════════════════════════════════ */
/* ---- base (always applied, no motion) ---- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx>*{position:absolute;border-radius:50%}
.orb{filter:blur(74px);opacity:.58} /* blur on the STATIC wrapper */
.orb>i{display:block;width:100%;height:100%;border-radius:50%}
.orb--1{width:620px;height:620px;top:-14%;right:-8%;background:rgba(70,120,190,.42)}
.orb--2{width:520px;height:520px;bottom:-18%;left:-10%;background:rgba(160,40,40,.26)}
.orb--3{width:440px;height:440px;top:38%;left:44%;background:rgba(120,90,190,.22)}
.aurora{left:-10%;right:-10%;top:22%;height:320px;border-radius:0;
background:linear-gradient(90deg,transparent,rgba(120,170,235,.16),transparent);filter:blur(70px)}
.beam{width:150%;height:190px;top:8%;left:-25%;border-radius:0;transform:rotate(24deg);
background:linear-gradient(90deg,transparent,rgba(210,228,255,.07),transparent);filter:blur(7px);opacity:.05}
.dust{width:4px;height:4px;background:rgba(220,235,255,.9);opacity:.45}
.dust:nth-child(4){top:70%;left:12%} .dust:nth-child(5){top:32%;left:26%}
.dust:nth-child(6){top:82%;left:47%} .dust:nth-child(7){top:24%;left:63%}
.dust:nth-child(8){top:60%;left:78%} .dust:nth-child(9){top:44%;left:88%}
/* reveal: visible by default so a JS failure can never hide content */
.rv{opacity:1;transform:none}
/* ---- motion, opt-in ---- */
@media (prefers-reduced-motion: no-preference){
/* Three orbs. Blur is on .orb (static); only the inner transforms.
RETUNED 2026-08-30. The first pass ran 24/30/36s at 120px blur and 0.5
opacity, chasing "calmer reads as more premium". Measured on the live page,
an orb moved ZERO pixels in two seconds — the animations were genuinely
running and were entirely below the threshold of perception. Adam's read,
"there are no animations", was simply correct.
13/16/19s with roughly double the travel is still unhurried, and it is
actually visible. Verified by sampling the transform over 2s. */
.orb>i{will-change:transform}
.orb--1>i{animation:drift1 13s ease-in-out infinite}
.orb--2>i{animation:drift2 16s ease-in-out infinite}
.orb--3>i{animation:drift3 19s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
33%{transform:translate3d(96px,-70px,0) scale(1.22)}
66%{transform:translate3d(-58px,48px,0) scale(.88)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
33%{transform:translate3d(-84px,54px,0) scale(1.18)}
66%{transform:translate3d(66px,-42px,0) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(56px,-58px,0) scale(1.26)}}
/* one aurora band, not two — two competing bands is noise */
.aurora{will-change:transform;animation:breathe 15s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate3d(0,0,0) scaleY(1)}
50%{transform:translate3d(9%,0,0) scaleY(1.55)}}
.beam{will-change:transform,opacity;animation:sweep 13s ease-in-out infinite}
@keyframes sweep{0%,100%{opacity:.10;transform:rotate(24deg) translate3d(-40px,0,0)}
50%{opacity:.22;transform:rotate(24deg) translate3d(170px,0,0)}}
/* Six dust motes. Staggered durations AND delays so the loop never visibly
repeats — the one genuinely clever thing on the benchmarked site. */
.dust{will-change:transform,opacity}
.dust:nth-child(4){animation:rise1 7s ease-in-out 0s infinite}
.dust:nth-child(5){animation:rise2 10s ease-in-out 1.5s infinite}
.dust:nth-child(6){animation:rise3 8s ease-in-out 3s infinite}
.dust:nth-child(7){animation:rise1 11s ease-in-out 2s infinite}
.dust:nth-child(8){animation:rise2 6s ease-in-out 4.5s infinite}
.dust:nth-child(9){animation:rise3 9s ease-in-out 1s infinite}
@keyframes rise1{0%,100%{opacity:.25;transform:translate3d(0,0,0) scale(1)}
30%{opacity:.7;transform:translate3d(22px,-46px,0) scale(1.5)}
70%{opacity:.35;transform:translate3d(-14px,-78px,0) scale(1)}}
@keyframes rise2{0%,100%{opacity:.3;transform:translate3d(0,0,0) scale(1)}
45%{opacity:.65;transform:translate3d(-28px,-56px,0) scale(1.3)}}
@keyframes rise3{0%,100%{opacity:.35;transform:translate3d(0,0,0) scale(1)}
50%{opacity:.75;transform:translate3d(18px,-64px,0) scale(1.45)}}
/* Scroll reveal. THREE guards, because the failure mode is invisible content:
1. .rv is hidden ONLY under html.js-rv, a class JS adds at runtime. No JS,
no hiding — the page is simply complete.
2. The observer only ADDS .is-rv, never removes it, so nothing can flicker
or vanish on scroll-up.
3. A failsafe timer in the script reveals everything after 2.5s no matter
what. Verified necessary: IntersectionObserver does not fire at all in
some headless/background contexts, and a reveal that depends on it
firing would leave the page blank there. */
html.js-rv .rv{opacity:0;transform:translate3d(0,16px,0);
transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js-rv .rv.is-rv{opacity:1;transform:translate3d(0,0,0)}
/* micro-interactions */
.tile,.svc__card,.states a,.faq details{transition:transform .22s cubic-bezier(.22,.61,.36,1),
box-shadow .22s ease,border-color .22s ease}
.tile:hover,.svc__card:hover,.states a:hover{transform:translateY(-3px)}
.btn{transition:background .16s ease,transform .12s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a{position:relative}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
/* Rotating hero. Three frames, an 18s cycle, 6s apart, crossfading over 1.6s.
Only opacity animates, so it is GPU-composited and costs no layout or paint.
Living inside this block is the whole point: for a visitor who asked for
reduced motion, frame 1 simply stays put and the others never appear. */
.rot .rot__f+.rot__f{animation:rotfade 12s ease-in-out infinite;animation-delay:var(--d)}
.rot .rot__f:first-child{animation:rotfade1 12s ease-in-out infinite}
@keyframes rotfade{0%,2%{opacity:0}9%,33%{opacity:1}42%,100%{opacity:0}}
@keyframes rotfade1{0%,33%{opacity:1}42%,91%{opacity:0}98%,100%{opacity:1}}
}
/* internal page heroes: same language, dialled down. A full hero treatment on a
200px header reads as noise rather than atmosphere. */
.phead{position:relative;overflow:hidden}
.phead .wrap{position:relative;z-index:2}
.fx--page .orb{filter:blur(66px);opacity:.5}
.fx--page .orb--1{width:420px;height:420px;top:-30%;right:-6%}
.fx--page .orb--2{width:340px;height:340px;bottom:-40%;left:-8%}
.fx--page .aurora{height:200px;top:10%;filter:blur(55px)}
.fx--page .beam{opacity:.10}
.fx--page .dust:nth-child(3){top:30%;left:18%}
.fx--page .dust:nth-child(4){top:62%;left:52%}
.fx--page .dust:nth-child(5){top:38%;left:81%}
/* ══════════════════════════════════════════════════════════════════════
FOCUS + KEYBOARD — WCAG 2.4.7.
Previously only form inputs had a focus style, so a keyboard user tabbing
through links, buttons and nav had no idea where they were. That matters
more for this audience than most: keyboard and assistive-tech use is
markedly higher over 65.
:focus-visible so a mouse click never draws a ring, but every keyboard
focus does.
══════════════════════════════════════════════════════════════════ */
:where(a,button,summary,[tabindex]):focus-visible{
outline:3px solid var(--red);
outline-offset:3px;
border-radius:4px;
}
/* on navy, red-on-navy is too low contrast for an outline — use cream */
.hdr :focus-visible,.hero :focus-visible,.section--navy :focus-visible,
.ftr :focus-visible,.sticky :focus-visible{
outline-color:#f0e6d2;
}
.faq summary:focus-visible{outline-offset:-3px}
/* skip link: first tab stop, hidden until focused */
.skip{
position:absolute;left:12px;top:-60px;z-index:100;
background:var(--red);color:#fff;padding:13px 20px;border-radius:0 0 var(--r) var(--r);
font-weight:700;text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:0}
/* footer group labels: h2 for correct document outline, styled small */
.ftr__h{color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}
/* ---- full-bleed photo band behind a page header -------------------------
The photograph sits at z0, a navy scrim at z1, content at z2. The scrim is
load-bearing: it is what guarantees the headline stays AA-contrast over any
image, rather than that being luck. */
/* ROOT CAUSE of a photograph that loaded, sized and painted correctly and was
still invisible: .phead carries an OPAQUE navy gradient background, and the
photo layer sat at z-index:0, which did not reliably paint above it. Proven by
removing only that background on the live page — scrim and atmosphere still
on — at which point the design worked exactly as intended.
The band variant supplies its own ground (photo + scrim), so it drops the
gradient and every layer is given an EXPLICIT z-index. No implicit ordering. */
.phead--band{position:relative;padding-top:64px;padding-bottom:68px;background:none}
/* NO opaque background on .phead__bg or any ancestor of the image. Proven twice
on the rendered page: an opaque background on .phead (the original) and then
on .phead__bg (a "fallback" added while fixing it) each painted OVER the
photograph, which loaded, sized and canvas-sampled correctly the whole time.
Putting it on the ![]()
itself did the same thing, so there is NO opaque
background anywhere in this subtree. Nothing is lost: grade.py refuses to
write a photo-map entry for a file that is not on disk, build.mjs refuses to
ship a photograph under 200KB, and all 204 image URLs were verified 200 on
the live domain. The fallback guarded a case that cannot occur. */
.phead__bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.phead__bgimg{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 62%);border-radius:0}
/* Contrast on a band header is held by two things working together, and both
are load-bearing:
1. the text is CONSTRAINED to the left 60% of the header
2. the scrim is strong across exactly that zone, then clears to nothing
That is why the photograph stays visible on the right while white text keeps
a 7.98:1 worst case. A flat wash cannot do both: heavy enough for the text
hides the picture, light enough to see the picture fails the text. */
.phead--band::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(96deg,rgba(18,40,68,.92) 0%,rgba(18,40,68,.88) 38%,rgba(18,40,68,.72) 60%,rgba(18,40,68,.22) 84%,rgba(18,40,68,.10) 100%),
linear-gradient(0deg,rgba(10,26,46,.46) 0%,rgba(10,26,46,0) 46%)}
@media (min-width:900px){
.phead--band h1{max-width:60%}
.phead--band .lede{max-width:52%}
.phead--band .eyebrow{max-width:60%}
}
@media (max-width:899px){
/* narrow: text runs full width, so the wash has to cover everything */
.phead--band::before{background:linear-gradient(168deg,rgba(18,40,68,.90),rgba(10,26,46,.92))}
}
.phead--band .wrap{position:relative;z-index:3}
.phead--band .fx{z-index:2}
@media (max-width:560px){.phead--band{padding-top:44px;padding-bottom:48px}}
/* ---- rotating hero frames ---------------------------------------------- */
.rot{position:relative;display:block}
.rot .rot__f{position:absolute;inset:0}
/* frame 1 stays in flow: it is what gives the stack its height, so the layout
is identical whether or not the rotation ever runs (and CLS stays 0). */
.rot .rot__f:first-child{position:relative}
.rot .rot__f picture{display:block;height:100%}
.rot .rot__f:first-child .rot__img{width:100%;height:auto}
.rot .rot__f+.rot__f .rot__img{width:100%;height:100%;object-fit:cover}
.rot .rot__f+.rot__f{opacity:0}
/* ══════════════════════════════════════════════════════════════════════════
BRAND ACCENT (2026-08-30)
The gold from the badge, used where it strengthens the identity WITHOUT
touching a conversion path. Deliberately not applied to:
.btn--primary / .btn / .skip — the CTA is brand red on every conversion
path and its contrast is already verified
:focus-visible — the focus ring stays red so it never
matches an element it is highlighting
Gold on navy measures 8.4:1 and gold on cream 2.6:1, so gold is used for
RULES AND MARKS on dark grounds, never for body text on light ones.
══════════════════════════════════════════════════════════════════════════ */
/* eyebrow: gold on dark grounds, red on light — both clear AA */
.hero .eyebrow,.phead .eyebrow,.section--navy .eyebrow{color:var(--gold-lt)}
/* the small rule under a section heading */
.hero__trust svg{color:var(--gold-lt)}
/* stat chips: the tick becomes the brand gold */
.chip svg{color:var(--gold-lt)}
/* footer: a gold hairline above the disclaimers ties the badge to the page */
.ftr__brand{border-bottom:2px solid rgba(228,180,44,.32);padding-bottom:16px}
/* the flag accent gains the brand blue as its third bar */
.flag i:nth-child(3){background:var(--brand-blue)}