/* Editorial brand gallery: original marks remain separate from concept imagery. */
.project-art.supplied-product{background:#f5f7f6}.project-art.supplied-product img{object-fit:contain}
.directory-intro{max-width:100%;padding:40px 0 26px}.directory-intro h1{font-size:clamp(32px,3.6vw,48px);margin-bottom:14px}.directory-intro h1 br{display:none}.directory-intro>p:last-child{max-width:850px;font-size:17px}.project-grid{gap:24px;border:0;background:transparent;align-items:stretch}.project-card.visual-card{padding:0;overflow:hidden;background:#fff;color:#292c25;border:1px solid #e4e0d6;box-shadow:0 8px 30px #38352105;transition:box-shadow .2s,transform .2s}.project-card.visual-card:hover{background:white;box-shadow:0 14px 34px #38352113;transform:translateY(-3px)}.project-art{display:block;position:relative;background:#eee9dd;overflow:hidden}.project-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.art-caption{position:absolute;left:12px;bottom:12px;font-size:12px;line-height:1.5;background:#fffffff0;color:#5b594d;padding:3px 9px}.brand-signature{display:flex;align-items:center;justify-content:center;height:100px;padding:18px 32px;background:#fff;flex-shrink:0;border-bottom:1px solid #eeece5}.brand-signature img{display:block;width:100%;max-width:230px;height:66px;object-fit:contain}.brand-signature[data-brand=house-of-soap] img{max-width:110px;height:76px}.brand-signature[data-brand=rmitrchai-farm] img{height:74px}.brand-signature[data-brand=havelle]{background:#54b9c8}.brand-signature[data-brand=havelle] img{max-width:240px;height:80px}.brand-signature[data-brand=h-sense] img{max-width:215px;height:82px}.brand-signature[data-brand=hey-shrimp] img{max-width:175px;height:78px}.park-signature{color:#77704d;font:500 29px/1.2 sans-serif;gap:12px}.park-signature small{font:14px/1.5 'IBM Plex Sans Thai',sans-serif;max-width:180px}.project-card-copy{display:flex;flex-direction:column;flex:1;padding:24px}.project-card-copy .card-top{font-size:13px;margin-bottom:12px;color:#706b5a}.project-card-copy h2{font-size:23px;margin-bottom:10px}.project-card-copy p,.project-card:first-child .project-card-copy p{color:#666656;font-size:16px;line-height:1.8}.project-card-copy .read-story{color:#6e6547;padding-top:16px}.project-card[data-project=ecological-park]{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto 1fr}.project-card[data-project=ecological-park] .project-art{grid-row:1/3}.project-card[data-project=ecological-park] .project-art img{height:100%;min-height:330px;aspect-ratio:auto}.project-card[data-project=ecological-park] .project-card-copy{padding:26px 34px}.project-story header>.brand-signature{justify-content:flex-start;max-width:340px;border:1px solid #e4e0d6;margin-bottom:25px;padding:16px 25px;height:110px}.project-story .story-body{padding-top:138px}.project-story figure img{height:auto;aspect-ratio:auto}.concept-section{margin-top:20px}.eco-header nav a{padding-block:8px}
@media(max-width:900px){.project-story .story-body{padding-top:0}.project-grid{gap:18px}.brand-signature{padding-inline:24px}.project-card[data-project=ecological-park]{grid-template-columns:1fr 1fr}.project-card[data-project=ecological-park] .project-art img{object-position:center}}
@media(max-width:540px){.directory-intro{padding-top:28px}.directory-intro h1{font-size:31px}.directory-intro>p:last-child{font-size:16px}.project-grid{gap:25px}.project-card-copy{padding:22px}.project-card[data-project=ecological-park]{display:flex}.project-card[data-project=ecological-park] .project-art img{aspect-ratio:3/2;height:auto;min-height:0}.project-card[data-project=ecological-park] .project-card-copy{padding:22px}.project-story header>.brand-signature{max-width:100%;justify-content:center}.project-card.visual-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.project-card.visual-card{transition:none}.project-card.visual-card:hover{transform:none}}
/* Production pass 2026-09-20. <picture> wrappers must not become layout boxes; image rules above use descendant selectors for the same reason. */
picture{display:contents}
/* Card meta was #706b5a at 80% opacity = 3.5:1 on white; solid it is 5.3:1. */
.project-card-copy .card-top{opacity:1}
/* Pointer targets of at least 24 by 24 CSS px. */
.languages a{display:inline-block;min-width:28px;text-align:center}.eco-footer a,.breadcrumb a{display:inline-block;padding-block:6px}