/*
 * Visual case studies: large, natural-ratio evidence with concise captions.
 * Load last, after the white theme and existing case styles.
 */
.case-hero .case-hero-top{margin-bottom:34px}
.case-hero .case-summary{
 max-width:55ch;
 font-size:clamp(16px,1.3vw,19px);
 line-height:1.65;
 margin-top:18px!important;
}
.case-visual-scope{
 display:grid;
 grid-template-columns:150px minmax(0,1fr);
 align-items:baseline;
 gap:28px;
 padding-block:28px 34px;
}
.case-visual-scope>.case-label,.case-visual-scope>.case-eyebrow{
 font-size:10px;
 line-height:1.6;
 color:var(--case-muted,var(--muted,#6e746b));
}
.case-visual-scope>p:not(.case-label):not(.case-eyebrow){
 max-width:78ch;
 font-size:16px;
 line-height:1.75;
}
.case-page #case-gallery{padding-block:28px 44px}
#case-gallery>.case-section-heading{margin-bottom:32px}
.case-visual-sections{display:grid;gap:46px}
.case-visual-section{min-width:0}
.case-visual-heading{
 display:grid;
 grid-template-columns:28px minmax(0,1fr) minmax(180px,.57fr);
 align-items:baseline;
 gap:15px;
 margin-bottom:20px;
}
.case-visual-number,.case-visual-heading>span:first-child{
 grid-column:1;
 font:400 23px/1.2 var(--case-hand,var(--hand,Caveat,cursive));
 color:var(--case-accent,var(--accent,#667852));
}
.case-visual-title,.case-visual-heading>h3{
 grid-column:2;
 font:400 clamp(27px,2.5vw,36px)/1.13 var(--case-display,var(--display,'Instrument Serif',Georgia,serif));
 letter-spacing:-.02em;
 text-wrap:balance;
 overflow-wrap:anywhere;
}
.case-visual-caption{
 font-size:12px;
 line-height:1.7;
 color:var(--case-muted,var(--muted,#6e746b));
 max-width:62ch;
}
.case-visual-heading>.case-visual-caption,.case-visual-heading>p{
 grid-column:3;
 font-size:12px;
 line-height:1.7;
 color:var(--case-muted,var(--muted,#6e746b));
}
.case-visual-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:24px;
 align-items:start;
 min-width:0;
}
.case-visual-card{min-width:0;margin:0}
.case-visual-grid .case-screen-open{
 display:block;
 width:100%;
 min-width:0;
 padding:0;
 border:0;
 border-radius:0;
 background:transparent;
 overflow:hidden;
 cursor:zoom-in;
}
.case-visual-grid .case-screen-image,
.case-visual-card>.case-screen-open>img{
 display:block;
 width:100%;
 height:auto;
 max-width:100%;
 max-height:none;
 aspect-ratio:auto;
 object-fit:initial;
 object-position:center;
}
.case-visual-grid .case-screen-open:hover .case-screen-image{transform:scale(1.008)}
.case-visual-card>figcaption,.case-visual-grid .case-screen-caption{
 padding-top:10px;
 font-size:12px;
 line-height:1.6;
 color:var(--case-muted,var(--muted,#6e746b));
}
.case-visual-card .case-screen-title{
 font-family:var(--case-body,var(--body,'DM Sans',Arial,sans-serif));
 font-size:12px;
 font-weight:450;
 line-height:1.6;
 letter-spacing:0;
 color:var(--case-ink,var(--ink,#22251f));
}
.case-visual-grid .case-screen-zoom{right:14px;bottom:14px}
.case-visual-section[data-layout=pair] .case-visual-grid,
.case-visual-grid[data-layout=pair]{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-visual-section[data-layout=triptych] .case-visual-grid,
.case-visual-grid[data-layout=triptych]{grid-template-columns:repeat(3,minmax(0,1fr))}

/* A feature layout gets a lead image only when there are at least three images.
   Exactly two remain an ordinary pair, with no empty slot or needless large lead. */
.case-visual-section[data-layout=feature] .case-visual-grid:has(>:nth-child(3))>:first-child,
.case-visual-grid[data-layout=feature]:has(>:nth-child(3))>:first-child{grid-column:1/-1}

.case-page #case-experience{padding-block:38px 42px}
.case-page #case-experience>.case-section-heading{margin-bottom:25px}
.case-page #case-screens{padding-block:30px 42px}
.case-page #case-screens>.case-section-heading{margin-bottom:26px}

/* Native project links retain the current coverflow geometry and color compositions. */
.flow-stage a.flow-card,
.flow-stage a.flow-card:visited,
.flow-stage a.flow-card:hover,
.flow-stage a.flow-card:active{
 display:block;
 color:inherit;
 text-decoration:none;
 cursor:pointer;
}
.flow-stage a.flow-card img{
 user-select:none;
 -webkit-user-drag:none;
}
.flow-stage a.flow-card:focus-visible{
 outline:2px solid var(--accent,#667852);
 outline-offset:5px;
}
.flow-stage.is-dragging a.flow-card{cursor:grabbing}

@media(max-width:1100px){
 .case-visual-heading{grid-template-columns:25px minmax(0,1fr) minmax(160px,.65fr);gap:13px}
 .case-visual-grid{gap:20px}
 .case-visual-sections{gap:40px}
}
@media(max-width:850px){
 .case-visual-scope{grid-template-columns:120px minmax(0,1fr);gap:24px}
 .case-visual-scope>p:not(.case-label):not(.case-eyebrow){font-size:15px}
 .case-visual-heading{grid-template-columns:25px minmax(0,1fr);gap:9px 13px;margin-bottom:18px}
 .case-visual-heading>.case-visual-caption,.case-visual-heading>p{grid-column:2;max-width:70ch}
 .case-visual-title,.case-visual-heading>h3{font-size:29px}
 .case-visual-grid{gap:18px}
}
@media(max-width:640px){
 .case-hero .case-hero-top{margin-bottom:27px}
 .case-hero .case-summary{font-size:15px;line-height:1.7;margin-top:16px!important}
 .case-visual-scope{grid-template-columns:1fr;gap:9px;padding-block:22px 28px}
 .case-visual-scope>p:not(.case-label):not(.case-eyebrow){font-size:14px;line-height:1.8}
 .case-page #case-gallery{padding-block:24px 32px}
 #case-gallery>.case-section-heading{margin-bottom:27px}
 .case-visual-sections{gap:33px}
 .case-visual-heading{grid-template-columns:22px minmax(0,1fr);gap:8px 10px;margin-bottom:16px}
 .case-visual-number,.case-visual-heading>span:first-child{font-size:21px}
 .case-visual-title,.case-visual-heading>h3{font-size:27px;line-height:1.17}
 .case-visual-heading>.case-visual-caption,.case-visual-heading>p{font-size:11px;line-height:1.7}
 .case-visual-grid,
 .case-visual-section[data-layout=pair] .case-visual-grid,
 .case-visual-grid[data-layout=pair],
 .case-visual-section[data-layout=triptych] .case-visual-grid,
 .case-visual-grid[data-layout=triptych]{grid-template-columns:minmax(0,1fr);gap:23px}
 .case-visual-grid>*{grid-column:1!important}
 .case-visual-card>figcaption,.case-visual-grid .case-screen-caption{padding-top:9px;font-size:11px}
 .case-visual-card .case-screen-title{font-size:11px}
 .case-visual-grid .case-screen-zoom{right:10px;bottom:10px}
 .case-page #case-experience{padding-block:29px 32px}
 .case-page #case-screens{padding-block:25px 32px}
}
@media(max-width:360px){
 .case-visual-title,.case-visual-heading>h3{font-size:25px}
 .case-visual-heading{gap:8px}
}
@media(prefers-reduced-motion:reduce){
 .case-visual-grid .case-screen-open:hover .case-screen-image{transform:none}
}

.case-visual-grid:has(>:only-child){grid-template-columns:minmax(0,1fr)}.flow-open-cue{position:absolute;right:14px;bottom:14px;background:#fff;color:#22251f;font:500 11px/1.2 var(--body);padding:9px 12px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none}.flow-card:hover .flow-open-cue,.flow-card:focus-visible .flow-open-cue{opacity:1}@media(hover:none){.flow-card.is-current .flow-open-cue{opacity:1}}

/* Askpix mobile homepage reference */


/* Askpix complete homepage sections */
body[data-case=askpix] #visual-first-impression .case-visual-grid,body[data-case=askpix] #visual-homepage-sections .case-visual-grid,body[data-case=askpix] #visual-creative-showcase .case-visual-grid,body[data-case=askpix] #visual-creative-control .case-visual-grid{grid-template-columns:minmax(0,1fr)}
body[data-case=askpix] #visual-mobile-homepage .case-visual-grid{max-width:880px;margin-inline:auto}
body[data-case=askpix] #case-screen-grid{grid-template-columns:minmax(0,1fr);max-width:960px;margin-inline:auto}
body[data-case=askpix] #case-screen-grid .case-screen-image{max-height:none;object-fit:initial}
body[data-case=askpix] #case-screen-grid .case-screen-open{padding:0}
.case-library-content .case-screen-filters{margin-top:0}
@media(max-width:640px){body[data-case=askpix] #visual-mobile-homepage .case-visual-grid{grid-template-columns:minmax(0,1fr);max-width:420px}}

/* Direct entry into the real website screens. */
.case-page .case-direct-hero{padding-block:28px 22px}
.case-page .case-direct-hero .case-hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin:0}
.case-page .case-direct-hero .case-title{font-size:clamp(30px,3.5vw,52px);line-height:1.1;margin:0}
.case-page .case-direct-hero .case-hero-meta{display:block;padding:0}
.case-page #case-gallery.case-direct-gallery{padding-top:22px}
.case-direct-gallery .case-visual-section[data-leading=true] .case-visual-grid>:first-child{grid-column:1/-1}
.case-direct-gallery .case-visual-section[data-leading=true] .case-visual-grid:has(>:nth-child(2):last-child)>:last-child{grid-column:1/-1}
@media(max-width:640px){.case-page .case-direct-hero{padding-block:22px 20px}.case-page .case-direct-hero .case-hero-top{gap:16px}.case-page #case-gallery.case-direct-gallery{padding-top:18px}}

/* Complete page fragments share a baseline without cropping their contents. */
@media(min-width:641px){.case-visual-section[data-layout=justified] .case-visual-grid{grid-template-columns:var(--case-image-columns,repeat(2,minmax(0,1fr)))}}