/* Latest approved purple accents, beige header and pastel framed footer. */
:root { --brand-purple: #b6a0d8; --footer-navy: #1b2048; }
.page-index .hero { background-color: var(--hero-maroon); }
.client-band { background-color: var(--hero-maroon); }
header, header.scrolled, body.hero-dark header:not(.scrolled) { background-color: var(--porcelain); color: #291d31; }
body.hero-dark header:not(.scrolled) .brand-wordmark { filter: none; }
.brand-lockup { display: block; position: relative; line-height: 0; }
.brand-logo .brand-lockup { width: 146px; }
.brand-wordmark { clip-path: inset(0 var(--period-clip) 0 0); }
.brand-lockup::after { content: ''; position: absolute; pointer-events: none; left: var(--period-left); top: var(--period-top); width: var(--period-width); height: var(--period-height); background: var(--brand-purple); -webkit-mask: url('/assets/logo-period-mask.png') center / 100% 100% no-repeat; mask: url('/assets/logo-period-mask.png') center / 100% 100% no-repeat; }
body.page-index main .exceptional h2 { font-size: clamp(30px,3vw,40px); max-width: 800px; }
.pillar { background: var(--brand-purple); color: #251d3d; }
body[class] main .pillar h3 { display: block; min-height: 56px; margin: 20px 22px 8px; padding: 0; line-height: 1.28; text-align: left; color: #251d3d; }
body[class] main .pillar p { margin: 0 22px 18px; color: #251d3d; text-align: left; }
.pillar .text-link { color: #251d3d; border-color: currentColor; position: relative; }
.pillar .text-link::after { content: ''; position: absolute; inset: -7px 0; }
footer { padding: 64px 4vw 32px; background: linear-gradient(110deg,#d9d6f7 0%,#edcfeb 38%,#f3d2e1 67%,#f8e2cf 100%); }
footer > .wrap { width: 100%; max-width: none; padding: 64px 5vw 36px; background: var(--footer-navy); border-radius: 52px; }
.foot-grid p, .foot-list a, .foot-bottom, .foot-bottom a { color: #edeafa; }
.foot-list .label { color: #cfb9eb; }
.foot-list a:hover, .foot-bottom a:hover { color: #f4cddf; }
.foot-bottom { width: calc(100% + 10vw); margin-inline: -5vw; padding-inline: 5vw; border-top-color: #d8c8ef42; }
@media(max-width:620px) {
 .brand-logo .brand-lockup { width: 120px; }
 body.page-index main .exceptional h2 { font-size: 30px; }
 footer { padding: 36px 14px 20px; }
 footer > .wrap { padding: 44px 6vw 28px; border-radius: 28px; }
 .foot-bottom { width: calc(100% + 12vw); margin-inline: -6vw; padding-inline: 6vw; }
}
