/* Photo-led index pages. Typography and palette inherit the shared design system. */
.reference-listing main>.listing-hero{position:relative;isolation:isolate;overflow:hidden;border:0;text-align:left}
.reference-listing .listing-hero :is(h1,.lead){margin-left:0;margin-right:0}
.reference-listing .listing-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.reference-listing .listing-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#FAF6EFFA 0%,#FAF6EFF0 16%,#FAF6EFD9 32%,#FAF6EF99 48%,#FAF6EF40 67%,#FAF6EF08 100%);pointer-events:none}
.reference-listing .listing-hero-copy{max-width:65%}
.reference-listing .listing-hero-copy .lead{max-width:500px;margin-bottom:0}
.reference-listing main>.listing-hero+.section{padding-top:36px}
.reference-listing :is(.service-index,.work-index){position:relative}
.reference-listing :is(.service-work-grid,.work-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.reference-listing :is(.service-entry .service-card,.work-grid .editorial-card){width:100%;min-width:0;min-height:330px;aspect-ratio:1.78;padding:32px;align-items:flex-end;box-shadow:none}
.reference-listing .editorial-card:is(:hover,:focus-visible){transform:none!important}
.reference-listing :is(.service-entry,.work-grid) .editorial-card .editorial-backdrop,
.reference-listing :is(.service-entry,.work-grid) .editorial-card:is(:hover,:focus-visible) .editorial-backdrop{filter:none!important}
.reference-listing .editorial-card::after{background:linear-gradient(180deg,#29262130 0%,#29262100 38%,#29262155 65%,#292621ED 100%)}
.reference-listing :is(.service-copy,.editorial-copy){position:relative;width:100%;max-width:none;padding-right:52px}
.reference-listing :is(.service-copy,.editorial-copy) h3{margin:0 0 8px}
.reference-listing :is(.service-copy,.editorial-copy)>.eyebrow{margin:0}
.reference-listing .editorial-card .service-more{position:absolute;right:0;bottom:3px;border:0;padding:0;display:flex;align-items:center}
.reference-listing .service-more svg{transition:transform .6s ease}
.reference-listing .editorial-card:is(:hover,:focus-visible) .service-more svg{transform:translateX(3px)}
@media(max-width:1100px) and (min-width:761px){
 .reference-listing .listing-hero-copy{max-width:80%}
 .reference-listing :is(.service-entry .service-card,.work-grid .editorial-card){padding:26px;min-height:300px}
}
@media(max-width:760px){
 .reference-listing main>.listing-hero{padding-bottom:228px}
 .reference-listing .listing-hero-copy{max-width:none}
 .reference-listing .listing-hero-image{inset:0;width:100%;height:100%;object-position:58% center}
 .reference-listing .listing-hero::after{inset:0;height:auto;background:linear-gradient(90deg,#FAF6EFF5 0%,#FAF6EFDE 38%,#FAF6EFB8 72%,#FAF6EF80 100%)}
 .reference-listing main>.listing-hero+.section{padding-top:28px}
 .reference-listing :is(.service-work-grid,.work-grid){grid-template-columns:1fr;gap:22px}
 .reference-listing :is(.service-entry .service-card,.work-grid .editorial-card){min-height:300px;aspect-ratio:1.25;padding:26px}
}
@media(prefers-reduced-motion:reduce){.reference-listing .service-more svg{transition:none}.reference-listing .editorial-card:is(:hover,:focus-visible) .service-more svg{transform:none}}

/* Restore the previous category controls. */
.reference-listing .filter-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reference-listing :is(.service-index,.work-index)>.service-filters{gap:12px;margin-bottom:32px;flex-wrap:wrap}
.reference-listing .service-filters button:not([aria-pressed="true"]){border-color:transparent!important;background:transparent!important;color:var(--ink)!important}
.reference-listing .service-filters button[aria-pressed="true"]{background:var(--action-bg)!important;color:var(--action-text)!important;border-color:var(--action-bg)!important}
.reference-listing .service-filters button:hover{background:var(--action-hover)!important;color:var(--ink)!important}
.reference-listing .service-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Match the service-card indices; soften the photographs behind them. */
.reference-listing .work-grid .service-index-number{position:absolute;top:28px;left:32px;font-size:80px;line-height:1;font-weight:200;letter-spacing:-.04em;color:#ffffffa6;pointer-events:none}
.reference-listing .work-grid .editorial-card .editorial-backdrop,.reference-listing .work-grid .editorial-card:is(:hover,:focus-visible) .editorial-backdrop{filter:blur(1.4px) brightness(.95)!important}
@media(max-width:760px){
 .reference-listing .work-grid .service-index-number{font-size:64px;top:25px;left:26px}
 .reference-listing :is(.service-index,.work-index)>.service-filters{gap:8px;margin-bottom:24px}
}
/* The same soft focus on both card collections, including hover and keyboard focus. */
.reference-listing :is(.service-entry,.work-grid) .editorial-card .editorial-backdrop,
.reference-listing :is(.service-entry,.work-grid) .editorial-card:is(:hover,:focus-visible) .editorial-backdrop{filter:blur(1.4px) brightness(.95)!important}