.dm-support{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin:45px 0 0 36%}
.dm-support button{border:0;background:transparent;padding:0;text-align:left;cursor:zoom-in}
.dm-support img{display:block;width:100%;max-height:350px;object-fit:contain;object-position:left center;box-shadow:0 18px 45px rgba(49,47,40,.14)}
.dm-support span{display:block;margin-top:13px;font-size:8px;letter-spacing:.16em;color:var(--muted)}
.stem-extra{display:none}
.dm-support[data-active="stem"]{grid-template-columns:minmax(220px,330px);justify-content:end}
.dm-support[data-active="stem"] .flow-extra{display:none}
.dm-support[data-active="stem"] .stem-extra{display:block}
.dm-support[data-active="stem"]{grid-template-columns:1fr;margin-left:28%}
.stem-unfolded{display:none!important;grid-template-columns:repeat(4,1fr);gap:10px;align-items:center;padding:26px;background:rgba(255,255,255,.26);border:1px solid rgba(111,82,49,.12)}
.dm-support[data-active="stem"] .stem-unfolded{display:grid!important}
.stem-unfolded button{min-width:0}
.stem-unfolded img{width:100%;height:auto;max-height:none;object-fit:contain;box-shadow:0 13px 28px rgba(70,49,28,.12)}
.stem-unfolded span{grid-column:1/-1}

/* Campaigns are grouped by visual tone instead of scattered across an empty field. */
.campaign-title{margin-bottom:80px}
.poster-wall{height:auto;max-height:none;min-height:0;position:relative;display:grid;grid-template-columns:1fr 1fr .82fr;gap:clamp(20px,3vw,48px);align-items:start;padding:28px 1vw 18px}
.poster-cluster{display:grid;gap:clamp(20px,3vw,48px)}
.poster-wall figure{position:relative;margin:0;cursor:zoom-in;background:#35312b;padding:12px;box-shadow:0 22px 52px rgba(0,0,0,.28);transition:transform .4s ease,box-shadow .4s ease}
.poster-wall figure:hover{z-index:8;transform:translateY(-8px);box-shadow:0 34px 72px rgba(0,0,0,.42)}
.poster-wall img{display:block;width:100%;height:auto}
.poster-green{padding-top:7vw}
.poster-green .poster-side{width:82%;justify-self:end}
.poster-warm .poster-side{width:78%;justify-self:center}
.poster-love{margin-top:15vw!important}

/* The material belongs to each certificate itself. */
.certificate.wood{padding:0;background:none;box-shadow:none}
.certificate.wood:before{display:none}
.wood-plaque{position:relative;padding:5.5%;background-color:#d9d0bd;background-image:radial-gradient(circle at 12% 18%,rgba(82,70,51,.24) 0 .7px,transparent .9px),radial-gradient(circle at 73% 36%,rgba(116,94,63,.2) 0 .6px,transparent .9px),radial-gradient(circle at 31% 78%,rgba(255,255,255,.55) 0 .8px,transparent 1px),repeating-linear-gradient(7deg,transparent 0 8px,rgba(104,89,66,.055) 9px,transparent 10px);background-size:19px 23px,27px 31px,23px 29px,100% 13px;box-shadow:0 1px 0 #b9ad98,0 3px 0 #cabfab,0 28px 60px rgba(54,40,23,.18);overflow:hidden;transform:rotate(-.35deg)}
.wood-plaque:before{content:"";position:absolute;inset:0;opacity:.52;background:repeating-linear-gradient(103deg,transparent 0 17px,rgba(91,77,58,.07) 18px,transparent 20px),linear-gradient(115deg,rgba(255,255,255,.22),transparent 42%,rgba(91,75,52,.06))}
.wood-plaque:after{content:"";position:absolute;inset:3.8%;border:1px solid rgba(91,76,54,.12);pointer-events:none}
.wood-plaque img{position:relative;z-index:1;display:block;width:100%;mix-blend-mode:multiply;filter:sepia(.18) saturate(.72) contrast(1.06) brightness(.99);box-shadow:none}
.acrylic{padding:0 10px}
.acrylic-case{position:relative;padding:7%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.82);box-shadow:0 32px 65px rgba(53,45,34,.2),inset 0 0 0 2px rgba(205,194,174,.22),inset 10px 10px 26px rgba(255,255,255,.3);isolation:isolate}
.acrylic-case:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.66),transparent 20%,transparent 68%,rgba(255,255,255,.25));pointer-events:none}
.acrylic-case:after{content:"";position:absolute;z-index:-1;inset:10px -9px -10px 9px;border:1px solid rgba(130,119,101,.18);background:rgba(255,255,255,.09)}
.acrylic-case img{width:100%;display:block;box-shadow:0 8px 22px rgba(62,51,37,.16)}
.screw{position:absolute;z-index:4;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 15%,#c7c1b6 40%,#777166 75%,#ddd 100%);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.s1{left:2.5%;top:2.5%}.s2{right:2.5%;top:2.5%}.s3{left:2.5%;bottom:2.5%}.s4{right:2.5%;bottom:2.5%}
.certificate figcaption{line-height:1.7}

@media(max-width:900px){.dm-support{margin-left:0}.dm-support[data-active="stem"]{margin-left:0}.poster-wall{grid-template-columns:1fr 1fr}.poster-love{margin:0!important;width:76%;justify-self:center;grid-column:1/-1}.poster-green{padding-top:6vw}}
@media(max-width:560px){.dm-support{grid-template-columns:1fr;gap:24px}.dm-support img{max-height:280px}.stem-unfolded{grid-template-columns:1fr 1fr;padding:16px}.poster-wall{grid-template-columns:1fr;gap:28px}.poster-green{padding-top:0}.poster-green .poster-side,.poster-warm .poster-side,.poster-love{width:86%}.poster-love{grid-column:auto}.poster-wall figure{padding:8px}}

/* Warmer title accent to harmonize with the campaign artwork. */
@font-face{font-family:"Nimbus Sans Narrow";src:url("assets/fonts/NimbusSansNarrow-Regular.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Nimbus Sans Narrow";src:url("assets/fonts/NimbusSansNarrow-Bold.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
.hero h1{font-family:"Nimbus Sans Narrow","Arial Narrow",Arial,sans-serif;font-weight:700;letter-spacing:.01em;line-height:.86}
.hero h1 em{color:#d48793;margin-top:.12em}