/* Supplied source PNGs are preserved; frames remove export whitespace in CSS. */
.brand.brand-art{display:block;position:relative;width:280px;height:auto;aspect-ratio:2050/335;overflow:hidden;flex-shrink:0;min-height:0}
.brand-art>img{position:absolute;display:block;max-width:none;width:105.951%;height:auto;left:-3.171%;top:-62.687%}
.hero .brand-art>img,.site-footer .brand-art>img{filter:brightness(0) invert(95%) sepia(8%) saturate(230%) hue-rotate(350deg)}
.brand.brand-art.brand-full{width:280px;aspect-ratio:1630/810}
.brand-full>img{width:108.834%;left:-4.294%;top:-5.556%}
.footer-identity>p{margin-top:27px}.case-header .brand-art{width:270px}
@media(max-width:1100px){.hero .brand-art{width:250px}}
@media(max-width:700px){.hero .brand-art{width:220px}.case-header .brand-art{width:205px}.site-footer .brand-full{width:245px}}
@media(max-width:365px){.hero .brand-art{width:195px}.case-header .brand-art{width:170px}}

/* Hollow symbol gives the footer a lighter lockup at a readable display size. */
.brand-lockup{display:flex;flex-direction:column;gap:15px;width:280px;max-width:100%}
.brand-symbol{position:relative;display:block;width:100%;aspect-ratio:1060/440;overflow:hidden}
.brand-symbol>img{position:absolute;width:118.302%;max-width:none;height:auto;left:-8.962%;top:-95.455%;filter:brightness(0) invert(95%) sepia(8%) saturate(230%) hue-rotate(350deg)}
.brand-lockup .brand-art{width:100%}
@media(max-width:700px){.brand-lockup{width:245px;gap:13px}}

/* Minimal header wordmark: crop transparent export margins without editing source. */
.brand.brand-art.brand-minimal{aspect-ratio:1956/148}
.brand-art.brand-minimal>img{width:110.4806%;left:-5.3681%;top:-186.4865%}

/* Restrained header identity, shared across home and project pages. */
.hero>header .brand.brand-minimal,.project-header .brand.brand-minimal{width:240px}
@media(max-width:700px){.hero>header .brand.brand-minimal,.project-header .brand.brand-minimal{width:180px}}
@media(max-width:365px){.hero>header .brand.brand-minimal,.project-header .brand.brand-minimal{width:160px}}

/* One wordmark across all branded page surfaces. */
.project-footer-brand{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.project-footer .brand.brand-minimal,.study-header .brand.brand-minimal{width:200px}
.project-footer .brand-art>img{filter:brightness(0) invert(95%) sepia(8%) saturate(230%) hue-rotate(350deg)}
.project-footer-brand>span{font-size:12px;opacity:.7}
@media(max-width:700px){.project-footer-brand{gap:16px}.project-footer .brand.brand-minimal,.study-header .brand.brand-minimal{width:160px}}
@media(max-width:450px){.study-header{flex-wrap:wrap;gap:24px}}