/* Project index: broad typography, staggered details, and a masked cover. */
.case-study .case-related{position:relative;background:#fff;color:#000;padding:0 0 72px;isolation:isolate}
.case-related-heading{margin:0;display:flex;align-items:center;justify-content:center;min-height:clamp(240px,23vw,460px);padding:60px 20px 100px;text-align:center;font-family:Ballet,cursive;font-weight:400;font-size:clamp(30px,3.1vw,46px);line-height:1.15;letter-spacing:0;font-optical-sizing:auto}
.case-related-list{border-top:1px solid rgb(0 0 0 / 15%)}
.case-related-link{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(120px,10vw,205px);padding:24px 20px;border-bottom:1px solid rgb(0 0 0 / 15%);color:inherit;text-decoration:none;isolation:isolate}
.case-related-link:is(:hover,:focus-visible){z-index:2;text-decoration:none}
.case-related-link:focus-visible{outline:2px solid var(--case-hover-color,var(--accent));outline-offset:-5px}
/* Negative tracking lets the final glyph overhang its advance width. Give
   the text-clipped backgrounds room to paint it, without moving the title. */
.case-related-title{position:relative;width:max-content;max-width:100%;margin:-.08em -.12em;padding:.08em .12em;font:700 clamp(36px,7.4vw,152px)/.94 Arial,Helvetica,sans-serif;letter-spacing:-.075em;white-space:nowrap;text-transform:uppercase;background-color:#000;background-image:linear-gradient(var(--case-hover-color,var(--accent,#ff3300)),var(--case-hover-color,var(--accent,#ff3300)));background-position:0 100%;background-repeat:no-repeat;background-size:100% 0%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-size .65s cubic-bezier(.22,1,.36,1)}
.case-related-link:is(:hover,:focus-visible) .case-related-title{background-size:100% 100%}
.case-related-meta{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;font:400 14px/1.2 Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;max-width:20%;pointer-events:none}
.case-related-detail{display:block;overflow:hidden}
.case-related-detail>span{display:block}
.case-related-detail .letter-stack>span:first-child{visibility:hidden}
.case-related-preview{position:absolute;width:14vw;max-width:290px;aspect-ratio:16/9;right:12%;top:0;transform:translateY(-58%);clip-path:inset(100% 0 0);opacity:0;transition:clip-path .65s cubic-bezier(.22,1,.36,1),opacity .2s ease;pointer-events:none;z-index:3;border-radius:4px}
.case-related-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;outline:1px solid #0003;outline-offset:-1px;transform:scale(1.1);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.case-related-link:is(:hover,:focus-visible) .case-related-preview{clip-path:inset(0);opacity:1}
.case-related-link:is(:hover,:focus-visible) .case-related-preview img{transform:scale(1)}
.case-related .case-back{display:flex;width:max-content;margin:44px auto 0;color:#000;gap:18px}
@media(max-width:800px){
 .case-study .case-related{padding-bottom:48px}
 .case-related-heading{min-height:240px;padding:54px 12px 70px;font-size:clamp(30px,3.1vw,46px)}
 .case-related-link{display:grid;grid-template-columns:minmax(0,1fr) min(25vw,150px);gap:18px;align-items:center;min-height:160px;padding:24px 12px}
 .case-related-title{grid-column:1;grid-row:1;white-space:normal;overflow-wrap:normal;font-size:clamp(22px,6.3vw,50px);line-height:.95;letter-spacing:-.065em}
 .case-related-meta{position:static;grid-column:1;grid-row:2;transform:none;max-width:none;gap:3px;font-size:14px;margin-top:-6px}
 .case-related-detail .letter-stack>span:first-child{visibility:visible}
 .case-related-preview{position:relative;grid-column:2;grid-row:1 / 3;align-self:center;width:100%;right:auto;top:auto;transform:none;opacity:1;clip-path:inset(0)}
 .case-related-preview img{transform:none}
 .case-related .case-back{margin-top:30px;font-size:11px}
}
@media(hover:none) and (min-width:801px){.case-related-detail .letter-stack>span:first-child{visibility:visible}.case-related-title{max-width:65%;white-space:normal;font-size:6vw}.case-related-preview{opacity:1;clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.case-related-title,.case-related-detail>span,.case-related-preview,.case-related-preview img{transition:none;transition-delay:0s}.case-related-link:is(:hover,:focus-visible) .case-related-title{transform:none}}

@media(min-width:1600px){.case-related-heading{font-size:clamp(46px,2.4vw,64px)}}
html[lang=fi] .case-related-heading{font-size:clamp(26px,3vw,44px)}
@media(max-width:650px){.case-related-heading{font-size:30px}.case-related-meta{font-size:12px}html[lang=fi] .case-related-heading{font-size:24px;line-height:1.05}}
@media(max-width:360px){.case-related-meta{font-size:11px}}

@media(forced-colors:active){.case-related-title{background:none;color:CanvasText}.case-related-link:is(:hover,:focus-visible) .case-related-title{color:LinkText}}

/* Tablet rows reserve space for their cover in either orientation, including
   iPads reporting a fine pointer when a trackpad is connected. */
@media (min-width:801px) and (max-width:1366px), (min-width:801px) and (hover:none){
 .case-study .case-related-link{display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,23vw,300px);grid-template-rows:auto auto;column-gap:32px;row-gap:16px;align-items:center;min-height:176px;padding:28px 20px}
 .case-study .case-related-title{grid-column:1;grid-row:1;justify-self:start;min-width:0;width:auto;max-width:100%;white-space:normal;overflow-wrap:break-word;font-size:clamp(40px,5.6vw,76px);line-height:1.05;letter-spacing:-.065em}
 .case-study .case-related-meta{position:static;grid-column:1;grid-row:2;transform:none;max-width:100%;margin:0;font-size:14px;gap:5px}
 .case-study .case-related-detail .letter-stack>span:first-child{visibility:visible}
 .case-study .case-related-preview{position:relative;grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;width:100%;max-width:none;inset:auto;transform:none;opacity:1;clip-path:inset(0)}
 .case-study .case-related-preview img{transform:none}
}