.project-page{background:linear-gradient(180deg,var(--white) 30%,var(--primary-100))}.project-page__container{inline-size:min(100% - var(--site-padding)*2,var(--content-width));gap:var(--space-l);flex-direction:column;margin-inline:auto;display:flex;position:relative}.project-page__section{padding-block:var(--section-space-m)}.project-page__heading{font-size:var(--h3);margin:0}.project-page__hero{isolation:isolate;background:var(--primary-500);color:var(--white);padding-block:var(--space-m) var(--space-xl);position:relative;overflow:hidden;&:after{content:"";pointer-events:none;z-index:-1;background:linear-gradient(55deg,transparent 35%,var(--white-10) 35% 38%,transparent 38% 40%,var(--secondary-30) 40% 44%,transparent 44% 46%,var(--white-20) 46% 49%,transparent 49%);position:absolute;inset:0}@media (width<=700px){padding-block-end:0;flex-direction:column;display:flex}}.project-page__hero-image{object-fit:cover;object-position:55% 65%;block-size:100%;inline-size:59%;mask-image:linear-gradient(90deg,transparent,var(--black) 35%);z-index:-2;position:absolute;inset-block:0;inset-inline-end:0;@media (width<=700px){block-size:22rem;inline-size:100%;mask-image:linear-gradient(0deg,var(--black) 65%,transparent);order:2;display:block;position:relative}}.project-page__breadcrumbs{gap:var(--space-xs);font-size:var(--text-xs);max-inline-size:55%;color:var(--white);flex-wrap:wrap;display:flex;& a{color:var(--white);transition:color var(--motion-duration) var(--motion-ease);text-decoration:none;&:hover,&:focus-visible{color:var(--secondary-200);box-shadow:none;background:0 0;text-decoration:none}@media (prefers-reduced-motion:reduce){transition:none}}@media (width<=700px){max-inline-size:100%}}.project-page__hero-copy{max-inline-size:49%;padding-block:var(--space-s);@media (width<=700px){max-inline-size:100%}}.project-page__title{font-size:var(--h3);color:var(--white);max-inline-size:18ch;margin-block-end:var(--space-m)}.project-page__lead{max-inline-size:45ch;color:var(--white);font-size:var(--text-m)}.project-page__snapshot{border-block-start:var(--border-width) solid var(--white-30);gap:var(--space-m);grid-template-columns:repeat(2,minmax(0,1fr));max-inline-size:32rem;margin-block-start:var(--space-l);padding-block-start:var(--space-m);display:grid;@media (width<=350px){grid-template-columns:1fr}}.project-page__snapshot-row{align-items:flex-start;gap:var(--space-s);min-inline-size:0;display:flex;&:last-child{grid-column:1/-1}& dt{color:var(--white);font-size:var(--text-m);margin-block-end:var(--space-xxs)}& dd{color:var(--white);font-size:var(--text-s);margin:0}}.project-page__snapshot-mark{color:var(--secondary);flex-shrink:0}.project-page__icon{block-size:1.6em;inline-size:1.6em;color:var(--secondary-400);flex-shrink:0}.project-page__pair{gap:var(--space-m);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;@media (width<=700px){grid-template-columns:1fr}}.project-page__story-card{isolation:isolate;background:var(--white);border:var(--border-width) solid var(--primary-200);padding:var(--space-l);border-radius:var(--radius-l);box-shadow:var(--shadow-s);gap:var(--space-m);grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;display:grid;position:relative;overflow:hidden;& h2{font-size:var(--h4);margin:0}& .project-page__prose{grid-column:1/-1}&:after{content:"";z-index:-1;background:repeating-linear-gradient(135deg,transparent 0 var(--space-xl),var(--primary-10) var(--space-xl) calc(var(--space-xl) + var(--space-xs)));mask-image:linear-gradient(150deg,var(--black),transparent 65%);position:absolute;inset:0}}.project-page__prose{& p+p{margin-block-start:var(--space-s)}}.project-page__work-grid{gap:var(--space-l);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;@media (width<=900px){grid-template-columns:repeat(2,minmax(0,1fr))}@media (width<=500px){grid-template-columns:1fr}}.project-page__work-item{gap:var(--space-s);flex-direction:column;min-inline-size:0;display:flex;& h3{font-size:var(--h5)}& p{font-size:var(--text-s)}}.project-page__outcomes{margin-block-start:var(--space-l)}.project-page__outcome{padding:var(--space-l);border-radius:var(--radius-m)}.project-page__outcome--challenge{background:var(--danger-100);border:var(--border-width) solid var(--danger-200);& h2,& svg{color:var(--danger-400)}}.project-page__outcome--result{background:var(--success-100);border:var(--border-width) solid var(--success-200);& h2,& svg{color:var(--success-400)}}.project-page__outcome-heading{align-items:center;gap:var(--space-s);margin-block-end:var(--space-m);display:flex;& h2{font-size:var(--h4);margin:0}}.project-page__trust-grid{gap:var(--space-m);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;@media (width<=40rem){grid-template-columns:1fr}}.project-page__membership{align-items:center;gap:var(--space-m);padding:var(--space-m);background:var(--white);border:var(--border-width) solid var(--primary-200);border-radius:var(--radius-m);box-shadow:var(--shadow-s);grid-template-columns:auto 1fr auto;display:grid;& h2{font-size:var(--h4);margin-block-end:var(--space-s)}& p{font-size:var(--text-s)}@media (width<=900px){grid-template-columns:auto 1fr;&>:last-child{grid-column:1/-1;justify-self:start}}@media (width<=500px){grid-template-columns:1fr}}.project-page__snapshot-link{align-items:center;gap:var(--space-xs);color:var(--secondary-200);box-shadow:none;transition:color var(--motion-duration) var(--motion-ease);border:0;text-decoration:none;display:inline-flex;&:after{content:"↗"}&:hover,&:focus-visible{color:var(--white);box-shadow:none;background:0 0;border:0;text-decoration:none}@media (prefers-reduced-motion:reduce){transition:none}}.project-page__story-card--need{border-block-start:var(--space-xxs) solid var(--secondary)}.project-page__story-card--solution{border-block-start:var(--space-xxs) solid var(--primary);background:var(--primary-100)}.project-page__story-icon{inline-size:var(--space-xl);block-size:var(--space-xl);padding:var(--space-s);border-radius:var(--radius-m);background:var(--white);color:var(--secondary-400);box-shadow:var(--shadow-s)}.project-page__benefits,.project-page__credentials{padding-block:var(--section-space-m)}