/* Service and project directories use the established particle identity. */
.directory-hero.inner-hero{height:690px;min-height:690px;max-height:none;overflow:hidden;isolation:isolate}
.directory-hero.bands .particle-stage{position:absolute;inset:0;opacity:.82;mask-image:linear-gradient(90deg,transparent 48%,#000 72%)}
.directory-hero .inner-hero-content{max-width:none;padding-top:150px;padding-bottom:120px}
.directory-hero .inner-copy{width:65%}
.directory-hero .inner-copy h1{font-size:clamp(64px,7vw,96px)}
.directory-hero .inner-lead{max-width:480px;font-size:20px;margin-bottom:0}
.directory-hero .hero-page-marker{left:auto;right:var(--gutter);bottom:40px;font-size:13px;color:#c2bdc1;position:absolute}
.directory-index{position:relative;display:flex;justify-content:space-between;gap:28px;border-block:1px solid var(--line);padding-block:24px;background:var(--bg)}
.directory-index>a{display:flex;align-items:center;gap:18px;font-size:14px;min-height:44px;transition:color .2s}
.directory-index>a:hover{color:#ff5269}
.directory-index .arrow{width:16px;height:16px}
.service-stories{position:relative}
.service-story{padding-block:120px 72px}
.story-heading{display:flex;align-items:end;justify-content:space-between;gap:64px;margin-bottom:48px}
.internal .story-heading h2{font-size:clamp(44px,5.25vw,76px);max-width:880px}
.story-discipline{color:#bbb6bd;font-size:14px;white-space:nowrap;padding-bottom:8px}
.story-composition{display:grid;grid-template-columns:1.8fr 1fr;gap:7%;align-items:center}
.story-art{display:block;position:relative;background:var(--bg)}
.story-art>img{width:100%;height:auto;aspect-ratio:1.28;object-fit:cover}
.art-link{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;padding-top:20px;color:#c4bfc4;background:var(--bg)}
.art-link .arrow{width:18px;height:18px}
.story-copy{position:relative;background:var(--bg);padding-block:20px}
.story-copy>p:first-child{font-size:22px;line-height:1.6;color:#e0dce1;max-width:32ch}
.story-copy .story-scope{font-size:15px;line-height:1.7;margin-top:24px;max-width:32ch}
.story-copy .text-link{margin-top:32px;padding-bottom:12px;border-bottom:1px solid #8d878f;font-size:16px}
.story-branding .story-composition{grid-template-columns:1fr 1.8fr}
.story-branding .story-art{grid-column:2;grid-row:1}
.story-branding .story-copy{grid-column:1;grid-row:1}
.story-branding .story-art>img{aspect-ratio:1.18}
.story-pubblicita .story-composition{grid-template-columns:1.8fr 1fr}
.story-pubblicita .story-art>img{aspect-ratio:1.45}
.story-ufficio-stampa .story-composition{grid-template-columns:1fr 1.8fr}
.story-ufficio-stampa .story-art{grid-column:2;grid-row:1}
.story-ufficio-stampa .story-copy{grid-column:1;grid-row:1}
.story-ufficio-stampa .story-art>img{aspect-ratio:1.4;object-fit:contain;background:#f2efed}
.story-contenuti{padding-bottom:140px}
.story-contenuti .story-art>img{aspect-ratio:1.5}
.servizi-page .service-contact{background:var(--bg)}
/* Case studies: a large first work and varied image scales. */
.portfolio-directory{padding-bottom:100px}
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:32px;border-top:1px solid var(--line);padding-block:24px 40px;background:var(--bg)}
.case-filters{display:flex;gap:8px 28px;flex-wrap:wrap}
.case-filters[hidden]{display:none}
.case-filters button{border:0;border-bottom:2px solid transparent;padding:10px 0;background:none;color:#bcb6bf;font-size:14px;min-height:44px;transition:color .2s,border-color .2s}
.case-filters button:hover{color:#fff}
.case-filters button[aria-pressed=true]{color:#fff;border-color:#ed203e}
#case-count{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.case-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:96px 48px;align-items:start}
.case-entry{grid-column:span 6;min-width:0}
.case-entry[hidden]{display:none}
.case-entry:nth-child(1),.case-entry:nth-child(4),.case-entry:nth-child(10){grid-column:1/-1}
.case-entry:nth-child(2),.case-entry:nth-child(7),.case-entry:nth-child(11){grid-column:span 7}
.case-entry:nth-child(3),.case-entry:nth-child(8),.case-entry:nth-child(12){grid-column:span 5;margin-top:120px}
.case-entry:nth-child(6){margin-top:96px}
.case-entry:nth-child(13){grid-column:span 7}.case-entry:nth-child(14){grid-column:span 5;margin-top:120px}
.case-link{display:block}
.case-visual{position:relative;overflow:hidden;background:#1b191d}
.case-visual>img{display:block;width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.case-entry:nth-child(1) .case-visual>img,.case-entry:nth-child(4) .case-visual>img,.case-entry:nth-child(10) .case-visual>img{aspect-ratio:1.85}
.case-entry:nth-child(3) .case-visual>img,.case-entry:nth-child(8) .case-visual>img{aspect-ratio:.98}
.case-link:hover .case-visual>img{transform:scale(1.025)}
.case-open{position:absolute;right:24px;bottom:24px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#f4f1eb;color:#171319;transition:transform .25s}
.case-link:hover .case-open{transform:rotate(45deg)}
.case-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:24px}
.internal .case-caption h2{font-size:clamp(24px,2.2vw,32px);line-height:1.2;font-weight:550}
.case-caption p{font-size:12px;text-align:right;max-width:240px}
.case-entry:nth-child(3) .case-caption,.case-entry:nth-child(8) .case-caption,.case-entry:nth-child(12) .case-caption,.case-entry:nth-child(14) .case-caption{display:block}
.case-entry:nth-child(3) .case-caption p,.case-entry:nth-child(8) .case-caption p,.case-entry:nth-child(12) .case-caption p,.case-entry:nth-child(14) .case-caption p{margin-top:12px;text-align:left;max-width:none}
.case-gallery.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 48px}
.case-gallery.is-filtered .case-entry{grid-column:auto;margin-top:0}
.case-gallery.is-filtered .case-visual>img{aspect-ratio:1.3}
.case-gallery.is-filtered .case-caption{display:block}
.case-gallery.is-filtered .case-caption p{margin-top:12px;text-align:left;max-width:none}
.additional-case{margin-top:80px;padding-block:20px;border-bottom:1px solid var(--line)}
@media(min-width:761px) and (max-width:1100px){
 .directory-hero.inner-hero{height:650px;min-height:650px}
 .directory-hero .inner-copy{width:72%}
 .directory-hero .inner-copy h1{font-size:76px}
 .directory-index{gap:20px}
 .directory-index>a{font-size:12px;gap:10px}
 .directory-index .arrow{display:none}
 .story-heading{gap:40px}
 .story-discipline{font-size:12px}
 .internal .story-heading h2{font-size:54px}
 .story-composition{gap:40px}
 .story-copy>p:first-child{font-size:19px}
 .story-copy .story-scope{font-size:14px}
 .case-gallery{gap:72px 32px}
 .case-caption{display:block}
 .case-caption p{text-align:left;margin-top:12px}
 .case-filters{gap:20px}
}
@media(max-width:760px){
 .directory-hero.inner-hero{height:720px;min-height:720px}
 .directory-hero.bands .particle-stage{opacity:.82;mask-image:linear-gradient(0deg,#000 25%,transparent 60%)}
 .directory-hero .inner-hero-content{padding-top:140px;padding-bottom:340px}
 .directory-hero .inner-copy{width:100%;background:none}
 .directory-hero .inner-copy h1{font-size:clamp(48px,12vw,64px)}
 .directory-hero .inner-lead{font-size:17px;max-width:300px;margin-top:24px}
 .directory-hero .hero-page-marker{left:var(--gutter);right:auto;font-size:12px;bottom:30px}
 .directory-index{flex-wrap:wrap;gap:4px 24px;padding-block:20px}
 .directory-index>a{font-size:13px;gap:12px;min-height:44px}
 .directory-index .arrow{width:13px;height:13px}
 .service-story{padding-block:64px 16px}
 .story-heading{display:block;margin-bottom:28px}
 .internal .story-heading h2{font-size:clamp(34px,9.3vw,44px)}
 .story-discipline{display:block;font-size:12px;margin-top:20px;padding:0}
 .story-composition,.story-branding .story-composition,.story-ufficio-stampa .story-composition{display:flex;flex-direction:column;gap:20px;align-items:stretch}
 .story-art>img,.story-branding .story-art>img,.story-pubblicita .story-art>img,.story-ufficio-stampa .story-art>img,.story-contenuti .story-art>img{aspect-ratio:1.15}
 .art-link{font-size:11px;gap:16px;padding-top:14px}
 .story-copy{padding-block:12px 24px}
 .story-copy>p:first-child{font-size:18px;max-width:none}
 .story-copy .story-scope{font-size:14px;margin-top:16px;max-width:none}
 .story-copy .text-link{margin-top:20px;font-size:15px}
 .story-contenuti{padding-bottom:64px}
 .portfolio-directory{padding-bottom:64px}
 .filter-bar{display:block;padding-block:16px 28px}
 .case-filters{gap:4px 22px}
 .case-filters button{font-size:13px}
 #case-count{margin-top:16px;font-size:12px}
 .case-gallery,.case-gallery.is-filtered{display:block}
 .case-entry,.case-gallery.is-filtered .case-entry{margin:0 0 48px}
 .case-entry:nth-child(n){margin-top:0}
 .case-entry:nth-child(n) .case-visual>img,.case-gallery.is-filtered .case-visual>img{aspect-ratio:1.16}
 .case-entry:nth-child(4) .case-visual>img{aspect-ratio:1.4}
 .case-open{width:44px;height:44px;right:16px;bottom:16px}
 .case-open .arrow{width:19px;height:19px}
 .case-caption{display:block;padding-top:18px}
 .internal .case-caption h2{font-size:27px}
 .case-caption p{margin-top:10px;font-size:12px;text-align:left;max-width:none}
 .additional-case{margin-top:8px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.case-visual>img,.case-open{transition:none}}
/* Show complete typography and teams inside the supplied project artwork. */
.story-siti-web .story-art>img{object-position:top}
.story-branding .story-art>img{aspect-ratio:4/3;object-fit:contain}
.story-contenuti .story-art>img{aspect-ratio:16/9;object-fit:contain}
.case-gallery .case-10 .case-visual>img{aspect-ratio:16/9;object-fit:contain}
.case-gallery .case-5 .case-visual>img{aspect-ratio:3/2;object-fit:contain}
.case-gallery .case-7 .case-visual>img{object-fit:contain}
.case-gallery .case-4 .case-visual>img{object-position:center bottom}
.case-gallery .case-12 .case-visual>img{object-position:top}

.story-siti-web .story-art>img{aspect-ratio:1.4;object-position:center;object-fit:contain}
.case-gallery .case-3 .case-visual>img,.case-gallery .case-4 .case-visual>img{aspect-ratio:auto;object-fit:contain}
.case-gallery .case-3 .case-caption{display:grid;grid-template-columns:1fr 52px;gap:12px 24px}
.case-gallery .case-3 .case-caption h2,.case-gallery .case-3 .case-caption p{grid-column:1;text-align:left;max-width:none;margin:0}
.case-gallery .case-3 .case-open{position:static;grid-column:2;grid-row:1/3;align-self:center}