:root{
--navy:#071f45;
--blue:#087dfa;
--pale:#edf6ff;
--text:#24364b}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
color:var(--text);
font:16px/1.6 Arial,Helvetica,sans-serif}
h1,h2,h3,.brand{
font-family:Georgia,'Times New Roman',serif;
color:var(--navy);
line-height:1.12}
h1{
font-size:clamp(2.6rem,5.2vw,4.7rem);
letter-spacing:-.045em;
max-width:650px;
margin:0 0 18px}
h1 em{
font-style:normal;
color:var(--blue)}
h2{
font-size:clamp(2rem,3vw,2.7rem);
letter-spacing:-.035em;
margin:0 0 18px}
h3{
font-size:1.5rem;
margin:0 0 8px}
p{
margin:0 0 16px;
max-width:65ch}
a{
color:inherit}
.wrap{
width:min(1140px,calc(100% - 48px));
margin:auto}
.site-header{
min-height:100px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px}
.brand{
text-decoration:none;
font-weight:bold;
font-size:19px}
.brand small{
display:block;
font:10px/1.8 Arial,sans-serif;
text-transform:uppercase;
letter-spacing:.16em;
color:#5c718a;
margin-top:5px}
.site-header nav{
display:flex;
align-items:center;
gap:25px}
.site-header nav>a:not(.button){
text-decoration:none;
font-size:14px}
.button{
display:inline-flex;
align-items:center;
gap:25px;
background:var(--blue);
color:white;
text-decoration:none;
border-radius:30px;
padding:13px 27px;
font-weight:bold;
line-height:1.3}
.button:hover{
background:#0065d3}
.button.small{
font-size:13px;
padding:11px 20px}
.hero{
background:linear-gradient(90deg,#f8fafc 0%,#f8fafc 37%,rgba(248,250,
252,.92) 48%,rgba(248,250,252,.02) 75%),
url('/images/caregiver.jpg') right center/auto 100% no-repeat;
min-height:550px;
display:flex;
align-items:center}
.hero-inner{
padding:65px 0}
.hero p{
font-size:19px;
max-width:510px;
margin-bottom:25px}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
padding:40px 0;
text-align:center}
.stats>div+div{
border-left:1px solid #d6e2ed}
.stats strong{
display:block;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--navy)}
.stats span{
display:block;
font-size:14px}
.section{
padding-top:76px;
padding-bottom:76px}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:65px}
.stack{
display:grid;
gap:14px}
.panel{
background:var(--pale);
padding:28px 32px;
border-radius:12px}
.panel p{
margin:0}
.text-link{
display:inline-block;
color:var(--blue);
font-weight:bold;
margin-top:14px;
text-decoration:none}
.story{
background:#f5f8fb}
.story-grid{
display:grid;
grid-template-columns:300px 1fr;
align-items:center;
gap:65px}
.story img{
display:block;
width:100%;
height:330px;
object-fit:cover;
object-position:center 25%}
.faq{
padding-top:20px}
.faq details{
padding:17px 20px;
background:var(--pale);
margin:9px 0;
border-radius:8px}
.faq summary{
cursor:pointer;
font-weight:bold;
color:var(--navy)}
.faq details p{
padding-top:12px}
.cta{
background:var(--navy);
color:white;
text-align:center;
padding:70px 0}
.cta h2{
color:white}
.cta p{
margin:0 auto 22px}
footer{
display:flex;
justify-content:space-between;
gap:20px;
padding:30px 0;
font-size:13px}
@media(max-width:750px){
.site-header{
align-items:flex-start;
padding:20px 0}
.site-header nav>a:not(.button){
display:none}
.site-header nav{
gap:0}
.brand{
font-size:15px}
.brand small{
font-size:8px}
.hero{
background:linear-gradient(90deg,rgba(248,250,252,.96),rgba(248,250,252,
.85)),url('images/caregiver.webp') center/cover;
min-height:500px}
.hero p{
font-size:17px}
.stats{
gap:14px}
.stats strong{
font-size:12px}
.stats span{
font-size:12px}
.split,.story-grid{
grid-template-columns:1fr;
gap:24px}
.story-grid{
padding:40px 0}
.story img{
height:300px;
object-position:center 18%}
.section{
padding-top:50px;
padding-bottom:50px}
footer{
flex-direction:column}
}