/* One expanded project panel with compressed previews, inspired by carousel-squeeze. */
.service-squeeze { max-width: var(--max-width); margin-inline: auto; min-width: 0; }
.squeeze-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.squeeze-toolbar > span { margin-right: auto; color: #686d60; font-size: 13px; font-variant-numeric: tabular-nums; }
.squeeze-toolbar button { width: 38px; height: 38px; border: 0; border-radius: 6px; background: #31372b; color: #fff; cursor: pointer; font-size: 20px; }
.squeeze-toolbar button[hidden] { display: none; }
.service-squeeze .squeeze-track { display: flex; gap: 12px; width: 100%; max-width: none; height: clamp(250px, 32vw, 440px); overflow: hidden; }
.service-squeeze .squeeze-panel { flex: 0.35 1 0%; min-width: 28px; border-radius: 6px; position: relative; background: #20211d; transition: flex-grow 850ms cubic-bezier(.16,1,.3,1); }
.service-squeeze .squeeze-panel.is-open { flex-grow: 5; }
.service-squeeze .squeeze-panel:not(.is-open):hover { flex-grow: .65; }
.service-squeeze .squeeze-panel img, .service-squeeze .squeeze-panel video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.service-squeeze .squeeze-panel.is-open video { object-fit: contain; }
.service-squeeze .squeeze-panel figcaption { display: none; }
.squeeze-select { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; padding: 12px 4px; background: linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%); color: #fff; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; font-size: 12px; font-weight: 700; white-space: nowrap; }
.is-open .squeeze-select { inset: 12px auto auto 12px; width: auto; padding: 6px 10px; border-radius: 4px; background: rgba(0,0,0,.65); }
.squeeze-select:focus-visible { outline-offset: -3px; outline: 3px solid #e4bc43; }
.squeeze-caption { margin: 22px 0 0; max-width: 760px; color: #393e33; font-size: 17px; line-height: 1.6; }
@media (max-width: 700px) {
 .service-squeeze .squeeze-track { gap: 6px; height: clamp(240px,65vw,380px); }
 .service-squeeze .squeeze-panel { min-width: 8px; flex-grow: .08; }
 .service-squeeze .squeeze-panel.is-open { flex-grow: 6; }
 .service-squeeze .squeeze-panel:not(.is-open) .squeeze-select { font-size: 0; padding: 0; }
 .service-squeeze .squeeze-panel:not(.is-open):hover { flex-grow: .08; }
 .squeeze-caption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .service-squeeze .squeeze-panel { transition: none; } }