/* Purpose-specific content uses the existing R2 layout and shared brand controls. */
.purpose-page .purpose-assurance{margin:26px 0 0;padding:18px 0;border-block:1px solid #b8d0ca}
.purpose-assurance p{font-size:16px;color:var(--camel);margin:0 0 8px}
.purpose-assurance strong{display:block;font-size:22px;color:var(--teal);line-height:1.6}
.purpose-assurance span{display:block;font-size:16px;margin-top:6px}
.purpose-page .purpose-story{background:#fff}
.purpose-page .purpose-story .key-message{margin-top:28px}
.purpose-page .r2-hero h1{font-size:34px;line-height:1.6}
.purpose-page .r2-hero h1 span{font-size:23px}
.purpose-page .r2-hero .hero-description{display:block}
@media(max-width:1199px){
 .purpose-page .mobile-hero-art{height:auto;aspect-ratio:3/2;object-position:50% 0}
 .purpose-page .r2-hero h1{font-size:32px}
 .purpose-page .purpose-assurance{margin-top:0}
}
@media(max-width:540px){
 .purpose-page .mobile-hero-art{height:220px;aspect-ratio:auto}
 .purpose-page .r2-hero h1{font-size:30px}
 .purpose-page .r2-hero h1 span{font-size:21px}
 .purpose-page .r2-hero .hero-description{font-size:16px;margin-top:16px}
 .purpose-assurance strong{font-size:21px}
 .purpose-page .r2-hero .hero-lead{font-size:18px}
}
@media(max-width:350px){
 .purpose-page .r2-hero h1{font-size:27px}
 .purpose-page .r2-hero h1 span{font-size:19px}
 .purpose-page .mobile-hero-art{height:200px}
}
@media(min-width:1200px) and (max-height:760px){
 .purpose-page .r2-hero h1{font-size:30px;margin-top:12px}
 .purpose-page .r2-hero h1 span{font-size:21px}
 .purpose-page .r2-hero .hero-lead{font-size:18px}
 .purpose-page .purpose-assurance{margin-top:18px;padding-block:12px}
 .purpose-page .r2-hero .hero-description{font-size:16px}
}