/* finesse · brand · reference case page 30051 · grey/white/red · system sans · full-width four-column portfolio */
/* Scope: catalog only. Reference geometry and colors follow the user's chosen site. */
.catalog-page{background:#efefef}
.catalog-page .site-header .brand{color:#fff;transition:color .3s}
.catalog-page .site-header.is-scrolled .brand{color:var(--orange)}
.case-banner{position:relative;height:580px;background:#252b30 url('assets/reference/case-banner.jpg') center center/cover no-repeat;color:#fff}
.case-banner-title{position:absolute;left:4%;right:4%;top:50%;transform:translateY(-50%);text-align:center}
.case-banner-title p{font-size:60px;line-height:1.12;font-weight:300;letter-spacing:-1px}
.case-banner-title h1{font-size:42px;line-height:1.6;margin-top:28px;font-weight:400;letter-spacing:2px;text-wrap:balance}
.case-breadcrumb{min-height:61px;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:20px;padding-bottom:20px;font-size:14px;color:#999;background:#efefef}
.case-breadcrumb a:hover,.case-breadcrumb [aria-current]{color:var(--orange)}
.case-filter-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:35px 0}
.type-bar{display:flex;gap:1px;min-width:0}
.type-button{min-width:145px;min-height:50px;padding:10px 15px;background:#fff;color:#333;font-size:14px;transition:background .25s,color .25s}
.type-button.is-active,.type-button:hover{background:#0a0a0a;color:#fff}
.search-form{display:flex;flex:0 1 300px;min-width:220px;height:50px;background:#fff}
.search-form input{background:transparent;min-height:50px;height:50px;padding:13px 14px;font-size:13px;flex:1;min-width:0}
.search-form button{flex:0 0 46px;display:grid;place-items:center;color:#666}
.search-form button:hover{color:var(--case-red)}
.search-form svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5}
.industry-panel{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.industry-panel summary{display:flex;align-items:center;gap:16px;min-height:52px;cursor:pointer;list-style:none;color:#333;font-size:13px}
.industry-panel summary::-webkit-details-marker{display:none}
.mobile-filter-summary{color:#888;font-size:12px}
.details-toggle{margin-left:auto;color:#777;font-size:12px}
.details-close,.industry-panel[open] .details-open{display:none}
.industry-panel[open] .details-close{display:inline}
.industry-content{padding:4px 0 24px}
.industry-controls{display:flex;align-items:center;gap:16px;margin-bottom:14px;color:#888;font-size:12px}
.industry-controls label{width:220px;max-width:50%}
.industry-controls input{min-height:44px;height:44px;background:#fff;padding:10px 12px;font-size:13px}
.industry-controls button{min-height:44px;margin-left:auto;padding:6px 10px;color:#555}
.industry-controls button:hover:enabled{color:var(--case-red)}
.industry-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.industry-option{min-height:44px;padding:10px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;background:#fff;color:#666;font-size:12px;min-width:0}
.industry-option input{width:14px;height:14px;min-height:0;padding:0;margin:0;flex:0 0 14px;accent-color:#0a0a0a}
.industry-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.industry-number{margin-left:auto;color:#999;font-size:11px;font-variant-numeric:tabular-nums}
.industry-option:has(input:checked){border-color:#333;color:#111}
.industry-option:hover{border-color:#999}
.industry-option:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.industry-empty{padding:20px 0;font-size:13px}
.catalog-results{scroll-margin-top:112px}
.results-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px}
.results-summary{display:flex;align-items:center;gap:16px;min-width:0}
.results-summary h2{font-size:14px;color:#555}
.results-summary p{font-size:12px;color:#888;font-variant-numeric:tabular-nums}
.sort-label select{min-height:44px;width:auto;max-width:100%;padding:10px 24px 10px 8px;font-size:12px;background:transparent;color:#777;border:0;cursor:pointer}
.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 18px}
.filter-chip{display:flex;align-items:center;gap:14px;min-height:36px;padding:6px 12px;font-size:12px;background:#fff;border:1px solid #ddd;max-width:100%}
.filter-chip span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-chip span:last-child{font-size:17px;color:#888}
.reset-filters{min-height:36px;padding:6px 10px;font-size:12px;color:#777}
.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.template-card{min-width:0;background:#fff}
.template-media{position:relative;overflow:hidden;background:#e5e5e5}
.template-picture{position:relative;display:block;width:100%;padding:0;aspect-ratio:720/464;overflow:hidden;white-space:normal}
.template-picture img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.template-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:#0005;opacity:0;transition:opacity .5s}
.template-card:hover .template-picture img,.template-card:focus-within .template-picture img{transform:scale(1.05)}
.template-card:hover .template-media::after,.template-card:focus-within .template-media::after{opacity:1}
.image-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#888;font-size:16px}
.image-fallback small{font-size:12px}
.image-failed img{visibility:hidden}
.image-failed .image-fallback{display:flex}
.template-actions{position:absolute;bottom:0;left:0;right:0;z-index:2;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.template-actions>*{display:flex;align-items:center;justify-content:center;width:100%;height:0;visibility:hidden;padding:0;overflow:hidden;color:#111;background:#ffffffcc;font-size:12px;transition:height .3s ease,background .3s,visibility .3s}
.template-actions>*+*{border-top:1px solid #ddd6}
.template-card:hover .template-actions>*,.template-card:focus-within .template-actions>*{height:50px;visibility:visible}
.template-actions>*:hover{background:#fff;color:var(--case-red)}
.template-caption{position:relative;isolation:isolate;padding:25px 15px;color:#333;transition:color .3s}
.template-caption::before{content:'';position:absolute;inset:0;z-index:-1;background:#cb0808;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.template-caption h3{font-size:16px;font-weight:400;min-width:0}
.card-title-button{display:block;width:100%;padding:0;min-height:24px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;color:#999;transition:color .3s}
.template-id{font-variant-numeric:tabular-nums;white-space:nowrap}
.template-card:hover .template-caption::before,.template-card:focus-within .template-caption::before{transform:scaleY(1)}
.template-card:hover .template-caption,.template-card:focus-within .template-caption,.template-card:hover .card-meta,.template-card:focus-within .card-meta{color:#fff}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:48px 0 60px}
.pagination-pages{display:flex;align-items:center;gap:6px}
.pagination button{height:42px;min-width:42px;padding:6px 13px;border:1px solid #ddd;background:#fff;color:#555;font-size:13px;transition:background .2s,color .2s,border-color .2s}
.pagination button[aria-current=page],.pagination button:hover:enabled{background:#ca2310;border-color:#ca2310;color:#fff}
.pagination .page-direction{padding:6px 18px}
.page-ellipsis{padding:0 4px;color:#888}
.empty-state{padding:70px 20px 90px;text-align:center}
.empty-state h3{font-size:22px;color:#333;margin-bottom:10px}
.empty-state p{font-size:14px;color:#888;margin-bottom:24px}
.empty-state button,.empty-state>a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 24px;background:#111;color:#fff;font-size:14px}
.case-collection{padding-top:32px;padding-bottom:0}
.catalog-page .contact-section{background:#fff}
.catalog-page .footer-information nav{flex-wrap:wrap;row-gap:12px}
.preview-dialog{border:0;padding:0;width:min(1120px,calc(100% - 48px));height:min(900px,calc(100dvh - 48px));max-width:none;max-height:calc(100dvh - 48px);background:#fff;color:#333;overflow:hidden}
.preview-dialog[open]{display:flex;flex-direction:column}
.preview-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.preview-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #eee;flex-shrink:0}
.preview-header>div{min-width:0}
.preview-header p{font-size:11px;color:#999;margin-bottom:5px}
.preview-header h2{font-size:20px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.close-preview{width:44px;height:44px;flex:0 0 44px;font-size:28px;background:#f4f4f4}
.close-preview:hover{background:#eee;color:#cb0808}
.preview-body{position:relative;flex:1;min-height:0;overflow:hidden;background:#efefef;scrollbar-width:none}
.preview-frame-host{position:absolute;inset:0;overflow:hidden}
.preview-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.preview-loading,.preview-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;margin:0;padding:24px;text-align:center;background:#f4f4f4;color:#555;font-size:15px}
.preview-error button{min-height:44px;padding:10px 22px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.preview-error button:hover{border-color:var(--orange);color:var(--orange)}
.preview-error button:focus-visible,.preview-action:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.preview-error button:active{transform:translateY(1px)}
.preview-loading[hidden],.preview-error[hidden]{display:none}
.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;border-top:1px solid #eee;flex-shrink:0}
.preview-footer p{font-size:12px;color:#888}
.preview-select{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 24px;background:#111;color:#fff;font-size:14px;white-space:nowrap}
.preview-select:hover{background:#cb0808}
html.template-preview-open,body.modal-open{overflow:hidden;scrollbar-width:none}
html.template-preview-open::-webkit-scrollbar,body.modal-open::-webkit-scrollbar,.preview-body::-webkit-scrollbar{display:none}
@media(max-width:1366px){.case-banner{height:420px}.type-button{min-width:128px}.search-form{flex-basis:260px}}
@media(max-width:1110px){.case-filter-bar{flex-wrap:wrap;gap:16px}.type-bar{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.type-button{min-width:0}.search-form{flex-basis:100%;height:46px}.search-form input{height:46px;min-height:46px}.industry-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:768px){.catalog-page .site-header .brand{color:var(--orange)}.case-banner{height:380px}.case-banner-title p{font-size:48px}.case-banner-title h1{font-size:32px;margin-top:22px}.case-breadcrumb{min-height:50px;padding-top:14px;padding-bottom:14px;font-size:12px}.case-filter-bar{padding:25px 0}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-caption{padding:18px 12px}.template-caption h3{font-size:14px}.card-meta{font-size:10px}.results-toolbar{gap:12px}.results-summary{gap:6px;flex-direction:column;align-items:flex-start}.industry-list{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-results{scroll-margin-top:70px}.preview-dialog{width:calc(100% - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}.preview-header{padding:15px}.preview-header h2{font-size:17px}.preview-footer{padding:12px 15px;gap:12px}.preview-select{padding:10px 16px;font-size:13px}}
@media(max-width:640px){.case-banner{height:260px}.case-banner-title p{font-size:39px;letter-spacing:-.5px}.case-banner-title h1{font-size:25px;letter-spacing:1px;margin-top:17px}.type-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.type-button{font-size:13px;min-height:46px;padding:8px 6px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-caption{padding:15px 10px}.card-meta{flex-wrap:wrap;gap:3px;font-size:10px}.results-summary h2{font-size:13px}.results-summary p{font-size:11px}.sort-label{max-width:130px}.sort-label select{font-size:11px;padding-right:8px}.industry-list{grid-template-columns:repeat(2,minmax(0,1fr))}.industry-controls{gap:8px;flex-wrap:wrap}.industry-controls label{flex:1;max-width:none;min-width:120px}.industry-controls>span{display:none}.industry-option{padding:8px;font-size:11px;gap:6px}.industry-number{font-size:10px}.filter-chip,.reset-filters{min-height:44px}.pagination{padding:32px 0 40px;gap:12px 8px}.pagination-pages{order:-1;flex-basis:100%;justify-content:center;gap:4px}.pagination button{height:44px;min-width:34px;padding:6px 8px}.page-ellipsis{padding:0 2px}.preview-footer{align-items:stretch;flex-direction:column;gap:10px}.preview-footer p{text-align:center;font-size:11px}.preview-select{width:100%}.contact-dialog{max-width:calc(100% - 24px)}}
@media(hover:none),(pointer:coarse){.template-actions{position:static;display:grid;grid-template-columns:1fr 1fr}.template-actions>*,.template-card:hover .template-actions>*,.template-card:focus-within .template-actions>*{height:44px;visibility:visible;font-size:11px;background:#fafafa}.template-actions>*+*{border-top:0;border-left:1px solid #eee}.template-media::after{display:none}.template-card:hover .template-picture img,.template-card:focus-within .template-picture img{transform:none}}
@media(hover:none) and (max-width:360px),(pointer:coarse) and (max-width:360px){.template-actions{grid-template-columns:1fr}.template-actions>*+*{border-left:0;border-top:1px solid #eee}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.catalog-page *, .catalog-page *::before,.catalog-page *::after{animation:none!important;transition:none!important}.template-card:hover .template-picture img,.template-card:focus-within .template-picture img{transform:none}}

/* Template actions inherit the existing card and dialog appearance. */
.template-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.template-actions>*{min-width:0;white-space:nowrap}
.template-actions>*+*{border-top:0;border-left:0}
.template-actions>*:nth-child(even){border-left:1px solid var(--line)}
.template-actions>*:nth-child(n+3){border-top:1px solid var(--line)}
.template-card:hover .template-actions>*,.template-card:focus-within .template-actions>*{height:44px}
.template-provider-notice{padding:12px 16px;margin-bottom:18px;background:var(--surface);color:var(--ink);font-size:13px}
.preview-footer{flex-wrap:wrap;gap:12px}
.preview-footer-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.preview-local-actions{display:contents}
.preview-action{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:13px;white-space:nowrap}
.preview-action[hidden]{display:none}
.preview-footer-actions .preview-select{padding:10px 16px;font-size:13px}
.preview-action[aria-pressed=true]{border-color:var(--ink);background:var(--form)}
.preview-action:active{transform:translateY(1px)}
#preview-detail{flex-shrink:0}
@media(hover:hover){.preview-action:hover{border-color:var(--case-red);color:var(--case-red)}}
@media(max-width:1110px){.type-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.preview-footer-actions{display:flex;flex-wrap:wrap;width:100%}.preview-local-actions>button{flex:1;min-width:0;padding:10px 8px}.preview-footer-actions .preview-select{flex:1 0 100%;min-width:0;width:100%;padding:10px 8px}.template-actions>*{font-size:11px}}
@media(hover:none),(pointer:coarse){.template-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.template-actions>*,.template-card:hover .template-actions>*,.template-card:focus-within .template-actions>*{height:44px;visibility:visible}.template-actions>*:nth-child(odd){border-left:0}}
html[data-motion=off] .catalog-page *,html[data-motion=off] .catalog-page *::before,html[data-motion=off] .catalog-page *::after{animation:none!important;transition:none!important}

/* finesse · component: catalog-industry-sidebar · tokens: inherited catalog palette */
.catalog-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.catalog-sidebar{min-width:0;padding-bottom:24px}
.catalog-sidebar .search-form{width:100%;min-width:0;height:50px;margin-bottom:16px}
.catalog-sidebar .search-form input{height:50px;min-height:50px;font-size:15px}
.catalog-sidebar .industry-panel{border:0}
.catalog-sidebar .industry-panel summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;min-height:76px;padding:12px 0;font-size:16px}
.catalog-sidebar .mobile-filter-summary{grid-column:1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--body)}
.catalog-sidebar .details-toggle{grid-column:2;grid-row:1 / 3;font-size:14px}
.catalog-sidebar .industry-content{padding:0}
.catalog-sidebar .industry-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin-bottom:10px;font-size:14px;color:var(--body)}
.catalog-sidebar .industry-controls label{grid-column:1 / -1;width:100%;max-width:none;min-width:0}
.catalog-sidebar .industry-controls input{font-size:15px}
.catalog-sidebar .industry-controls>span{display:block}
.catalog-sidebar .industry-controls button{margin:0;padding-inline:0;font-size:14px;white-space:nowrap}
.catalog-sidebar .industry-controls button:disabled{opacity:.5;cursor:not-allowed}
.catalog-sidebar .industry-list{grid-template-columns:minmax(0,1fr);gap:6px;min-height:44px;overflow:visible;padding:3px}
.catalog-sidebar .industry-option{min-height:48px;gap:9px;padding:10px;font-size:15px;color:var(--body);line-height:1.5}
.catalog-sidebar .industry-option input{width:16px;height:16px;flex-basis:16px}
.catalog-sidebar .industry-label{min-width:0}
.catalog-sidebar .industry-number{font-size:13px;color:var(--body);flex-shrink:0}
.catalog-sidebar .industry-option:has(input:checked){border-color:var(--orange);background:#fff8f3;color:var(--orange)}
.catalog-sidebar .industry-option:active{background:var(--form)}
.catalog-sidebar .industry-empty{font-size:14px;color:var(--body)}
.catalog-layout .catalog-results{min-width:0}
.case-filter-bar .type-button{font-size:16px}
.case-filter-bar .search-form input{font-size:15px}
.catalog-layout .results-summary h2{font-size:16px}
.catalog-layout .results-summary p,.catalog-layout .sort-label select{font-size:14px;color:var(--body)}
.catalog-layout .filter-chip,.catalog-layout .reset-filters{font-size:14px}
.catalog-layout .template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.catalog-layout .template-caption h3{font-size:18px}
.catalog-layout .card-meta{font-size:13px}
.catalog-layout .template-actions>*{font-size:14px}
.catalog-layout .pagination button{font-size:14px}
@media(min-width:1700px){.catalog-layout{grid-template-columns:300px minmax(0,1fr);gap:32px}.catalog-layout .template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:769px) and (max-width:1100px){.catalog-layout{grid-template-columns:260px minmax(0,1fr);gap:20px}.catalog-layout .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-layout .results-toolbar{align-items:flex-start;padding:14px 0;gap:10px}.catalog-layout .results-summary{flex-direction:column;align-items:flex-start;gap:4px}.catalog-layout .sort-label select{padding-right:8px}}
@media(max-width:768px){.catalog-layout{grid-template-columns:minmax(0,1fr);gap:12px}.catalog-sidebar{position:static;padding-bottom:0}.catalog-sidebar .industry-content{padding-bottom:16px}.catalog-layout .template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout .template-caption h3{font-size:16px}.catalog-layout .card-meta{font-size:12px}}
@media(max-width:640px){.case-filter-bar .type-button{font-size:15px}.catalog-layout .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-layout .results-toolbar{gap:8px}.catalog-layout .results-summary p,.catalog-layout .sort-label select{font-size:13px}.catalog-layout .sort-label{max-width:140px}.catalog-layout .template-actions>*{font-size:12px}}