.hero-section .copy{color:var(--purple);background:linear-gradient(270deg,var(--brasso) 40.42%,var(--neon-carrot) 100%);padding:40px 20px}
.hero-section h1,.intro-section h2,.quote p{margin:0}
.intro-section h2{color:var(--lilac)}
.img-left,.img-right,.data-viz .handw,.data-viz .intro,.data-viz .summary{color:var(--purple)}
.img-left h2,.img-right h2,.data-viz h3,blockquote svg{color:var(--lilac)}
.data-viz .summary h2{color:var(--purple-l)}
.data-viz{padding:40px 0;background-color:var(--gray-l)}
.data-viz hr{margin:1em 0;background-color:var(--lilac)}
blockquote{margin:0 0 1em}
.data-viz .summary p{font-weight:500;font-size:clamp(1rem,0.8571rem + 0.7143vw,1.5rem);margin:.7em 0}
blockquote > p{background:linear-gradient(90deg,var(--lilac) 0%,var(--zahri-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.data-viz .intro{max-width:750px}
.data-viz figure+ p.handw{margin-top:40px}
.data-viz p.handw{margin-bottom:1em}
blockquote svg{margin-bottom:1em}
.details .container{display:grid;gap:30px}
.details .container :first-child{margin-top:0}
.details .container :last-child{margin-bottom:0}
.details .quotee{margin-top: 5px;}
.details blockquote .m-text{font-weight:500}
.details footer{text-align:center;margin-top:30px}
.details footer .handw{font-size:20px}
@media screen and (max-width: 767px) {
.intro-section h2{text-align:center}
.img-left figure img:not(.mob-only),.img-right figure img:not(.mob-only){display:none}
img.mob-only{margin-left:-20px;margin-right:-20px;max-width:calc(100% + 40px)}
.data-viz .quote:has(p){background-color:#fff;padding:20px;border-radius:.625rem}
blockquote svg{width:30px}
}
@media screen and (min-width: 768px) {
img.mob-only{display:none}
.hero-section .copy{flex:1 1 55%;display:flex;flex-direction:column;justify-content:center}
.hero-section figure{flex:1 1 45%}
.intro-section h2{letter-spacing:-1px;margin:0 auto .37em}
.intro-section .copy{max-width:620px;margin:0 auto}
.img-left .container,.img-right .container{gap:20px;align-items:center}
.img-right .container{flex-direction:row-reverse}
.img-left .container >*,.img-right .container >*{flex:1 1 48%}
.img-left h2,.img-right h2,.data-viz .summary h2{margin-top:0}
.img-left p:last-child,.img-right p:last-child,.data-viz .summary p:last-child{margin-bottom:0}
.data-viz hr{margin-bottom:2em}
.data-viz .summary{gap:20px}
.data-viz .summary .copy{flex:0 0 60%}
.details .quote{margin-left:auto;max-width:900px}
.details .container>p{max-width:720px}
.summary.half .copy{max-width:720px}
}
@media screen and (min-width: 1024px) {
.hero-section .copy{padding-left:60px}
.intro-section p:first-child{margin-top:0}
.intro-section p:last-child{margin-bottom:0}
.img-left .container,.img-right .container{gap:50px}
.data-viz{padding:100px 0}
.data-viz figure+ p.handw{margin-top:70px}
.details footer .handw{font-size:20px}
}
@media screen and (min-width: 1280px) {
.hero-section .copy{padding-left:100px}
.intro-section .container,.img-left .container,.img-right .container{gap:100px}
.img-left .container{padding-right:100px}
.img-right .container{padding-left:100px}
.img-left .container figure,.img-right .container figure{flex:0 0 522px}
.data-viz .summary{gap:70px}
.data-viz .quote{flex:0 0 420px}
.details .container>p:first-child,.summary.half .copy{margin-left:80px}
}