/* Matching coloured paper tabs and folders; mobile retains the project list. */
.project-folder-navigation[hidden],.project-folder-tabs[hidden]{display:none!important}
.home-cases .stack-card[hidden]{display:none!important}
.home-cases .fontready-card,.home-cases [data-project=fontready]{--folder-paper:#eee9f5;--folder-ink:#282330;--folder-accent:#7752ca}
.home-cases .seamless-card,.home-cases [data-project=seamless]{--folder-paper:#eeeae1;--folder-ink:#22211f;--folder-accent:#2169bc}
.home-cases .hymns-card,.home-cases [data-project=hymns]{--folder-paper:#e5dcc9;--folder-ink:#22211f;--folder-accent:#8b6534}
.home-cases .valentine-card,.home-cases [data-project=valentine]{--folder-paper:#f5efea;--folder-ink:#39262d;--folder-accent:#c25e78}
.home-cases .project-folder-navigation{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.17fr);gap:7px;align-items:end;width:100%;max-width:none;box-sizing:border-box;margin:0 0 -1px;padding:0 12px;position:relative;z-index:2}
.home-cases .project-folder-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:end;min-width:0;width:100%;margin:0;padding:0}
.home-cases .project-folder-tab{--folder-edge:color-mix(in srgb,var(--folder-accent) 30%,var(--folder-paper));appearance:none;display:flex;align-items:center;gap:9px;position:relative;min-width:0;min-height:65px;margin:0;padding:15px 13px;border:1px solid var(--folder-edge);border-bottom:0;border-radius:3px 3px 0 0;background:var(--folder-paper);color:var(--folder-ink);font:500 12px/1.4 Satoshi,sans-serif;text-align:left;text-decoration:none;cursor:pointer;transition:box-shadow .25s,padding .25s}
.home-cases .folder-tab-favicon{display:block;flex:0 0 25px;width:25px;height:25px;padding:3px;background:#fff;border-radius:6px;object-fit:contain;filter:none}
.home-cases .folder-tab-pair{display:flex;align-items:center;flex:0 0 38px}
.home-cases .folder-tab-pair .folder-tab-favicon+img{margin-left:-10px;transform:translateY(4px);box-shadow:-1px -1px 0 #fff}
.home-cases .folder-tab-indicator{margin-left:auto;color:var(--folder-accent);opacity:.5;font-size:15px;transition:opacity .25s,transform .25s}
.home-cases .project-folder-tab:hover{padding-bottom:21px;box-shadow:inset 0 3px 0 var(--folder-accent);text-decoration:none}
.home-cases .project-folder-tab[aria-selected=true]{padding-top:22px;padding-bottom:21px;box-shadow:inset 0 4px 0 var(--folder-accent);z-index:1}
.home-cases .project-folder-tab[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--folder-paper)}
.home-cases .project-folder-tab[aria-selected=true] .folder-tab-indicator,.home-cases .project-folder-tab:hover .folder-tab-indicator{opacity:1;transform:translate(1px,-1px)}
.home-cases .project-folder-tab:focus-visible{outline:2px solid var(--folder-accent);outline-offset:-5px}
.home-cases .project-folder-all{--folder-paper:#e4edce;--folder-ink:#33452c;--folder-accent:#607744}
.home-cases .project-folder-all .folder-tab-favicon{background:transparent;padding:0}
.home-cases .project-folder-all .folder-tab-indicator{opacity:1}
.home-cases .case-stack.is-folders{display:block;width:100%;max-width:none;margin:0;padding:0;isolation:isolate}
.home-cases .case-stack.is-folders .case-step{display:contents}
.home-cases .case-stack.is-folders .stack-card{position:relative;top:auto;width:100%;max-width:none;box-sizing:border-box;margin:0;min-height:420px;padding:32px 36px;border:1px solid color-mix(in srgb,var(--folder-accent) 30%,var(--folder-paper));border-radius:0 3px 3px 3px;background:var(--folder-paper);color:var(--folder-ink);opacity:1!important;box-shadow:0 7px 0 -2px color-mix(in srgb,var(--folder-accent) 12%,var(--folder-paper)),0 13px 0 -5px color-mix(in srgb,var(--folder-accent) 24%,var(--folder-paper));scroll-margin-top:90px}
.home-cases .case-stack.is-folders .stack-card-top{display:block;margin:0 0 18px;padding:0;border:0}
.home-cases .case-stack.is-folders .stack-card-top .case-number,.home-cases .case-stack.is-folders .stack-card-top .case-brand{display:none}
.home-cases .case-stack.is-folders .stack-card-top .case-tag{display:block;margin:0;text-align:left}
.home-cases .case-stack.is-folders .stack-card-body{padding-top:0;gap:40px}
.home-cases .case-stack.is-folders .stack-card h3{font-size:clamp(27px,3vw,39px);line-height:1.2}
.home-cases .case-stack.is-folders .stack-card:focus-visible{outline:2px solid var(--folder-accent);outline-offset:5px}
.home-cases .case-stack.is-folders .case-margin{border-color:color-mix(in srgb,var(--folder-ink) 20%,transparent)}
@media(min-width:761px) and (max-width:1050px){.home-cases .project-folder-navigation{grid-template-columns:minmax(0,1fr) 110px;gap:5px;padding-inline:8px}.home-cases .project-folder-tabs{gap:5px}.home-cases .project-folder-tab{font-size:10px;padding:13px 9px;gap:6px;min-height:63px}.home-cases .folder-tab-favicon{width:22px;height:22px;flex-basis:22px}.home-cases .folder-tab-pair{flex-basis:34px}.home-cases .project-folder-tabs .folder-tab-indicator{display:none}.home-cases .case-stack.is-folders .stack-card{padding:28px;min-height:440px}}
@media(max-width:760px){.home-cases .project-folder-navigation{display:none}.home-cases .case-stack,.home-cases .case-stack.is-folders{display:grid;gap:26px;padding-bottom:0}.home-cases .case-stack .stack-card{position:relative;top:auto;margin:0;min-height:0;opacity:1!important;transform:none!important}.home-cases .case-stack .case-step{display:contents}}
@media(prefers-reduced-motion:reduce){.home-cases .project-folder-tab,.home-cases .folder-tab-indicator{transition:none}}

/* The selection indicator follows the clicked tab, including its curved top edge. */
.home-cases .project-folder-tabs{position:relative}
.home-cases .project-folder-tabs .project-folder-tab,.home-cases .project-folder-tabs .project-folder-tab:hover,.home-cases .project-folder-tabs .project-folder-tab[aria-selected=true]{min-height:70px;padding:17px 13px;transition:background-color .3s,color .3s;box-shadow:none}
.home-cases .project-folder-marker{position:absolute;top:0;left:0;height:4px;box-sizing:border-box;border-top:3px solid transparent;border-radius:3px 3px 0 0;z-index:3;pointer-events:none;opacity:0;transition:transform .48s cubic-bezier(.22,.8,.22,1),width .48s cubic-bezier(.22,.8,.22,1),border-color .35s,opacity .15s;will-change:transform}
.home-cases .project-folder-marker.is-ready{opacity:1}
@media(min-width:761px) and (max-width:1050px){.home-cases .project-folder-tabs .project-folder-tab,.home-cases .project-folder-tabs .project-folder-tab:hover,.home-cases .project-folder-tabs .project-folder-tab[aria-selected=true]{padding:14px 9px;min-height:65px}}
@media(prefers-reduced-motion:reduce){.home-cases .project-folder-marker,.home-cases .project-folder-tabs .project-folder-tab{transition:none}}
/* Use the same preview proportions for the campaign as the other projects. */
.home-cases .valentine-card .paper-crop{aspect-ratio:1.8!important}
.home-cases .valentine-card .paper-crop>img{width:100%;height:100%!important;object-fit:cover;object-position:center top}
@media(min-width:761px){.home-cases .case-stack.is-folders .stack-card{height:var(--folder-height,auto)}}


/* Compact tabs start at the left edge of their folder. */
@media(min-width:761px){
 .home-cases .project-folder-navigation{display:flex;justify-content:flex-start;align-items:flex-end;padding:0;gap:7px}
 .home-cases .project-folder-tabs{flex:0 1 840px;width:auto;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
 .home-cases .project-folder-all{flex:0 0 140px;min-height:70px;padding:17px 13px;box-sizing:border-box}
}
@media(min-width:761px) and (max-width:1050px){
 .home-cases .project-folder-navigation{gap:5px;padding:0}
 .home-cases .project-folder-tabs{flex:1 1 auto}
 .home-cases .project-folder-all{flex-basis:110px;min-height:65px;padding:14px 9px}
}

/* Chevrons select a panel; arrows navigate to the Work page. */
.home-cases .project-folder-tabs .folder-tab-indicator{display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px}
.home-cases .project-folder-tabs .folder-tab-indicator svg{display:block}
.home-cases .project-folder-tabs .project-folder-tab:hover .folder-tab-indicator,.home-cases .project-folder-tabs .project-folder-tab[aria-selected=true] .folder-tab-indicator{transform:none}
.home-cases .project-folder-all{flex-basis:164px}
@media(min-width:761px){.home-cases .case-stack.is-folders+.portfolio-next{display:none}}
@media(min-width:761px) and (max-width:1050px){.home-cases .project-folder-all{flex-basis:132px}}

/* Let project names determine tab width instead of squeezing longer titles. */
@media(min-width:761px){
 .home-cases .project-folder-tabs{flex:0 0 auto;grid-template-columns:repeat(4,max-content);width:auto}
 .home-cases .project-folder-tab{white-space:nowrap}
 .home-cases .project-folder-tab>span:not(.folder-tab-indicator):not(.folder-tab-pair){flex-shrink:0}
}
@media(min-width:761px) and (max-width:1050px){
 .home-cases .project-folder-navigation{overflow-x:auto;scrollbar-width:thin}
 .home-cases .project-folder-tabs{flex:0 0 auto}
}

/* Preview each tab's colour on hover while retaining the selected marker. */
.home-cases .project-folder-tabs .project-folder-tab:hover,
.home-cases .project-folder-tabs .project-folder-tab:focus-visible{
 box-shadow:inset 0 3px 0 var(--folder-accent);
}