/* The brand and its story are part of every video, not an overlay on the footage. */
.work-grid{align-items:stretch;gap:25px}
.work-card{display:flex;flex-direction:column;border-radius:12px;transition:transform .3s;overflow:hidden;background:var(--cream)}
.work-card:nth-child(2),.work-card:nth-child(3){padding-top:0}
.work-card:focus-visible{outline-offset:7px}
.work-poster{width:100%;aspect-ratio:9/10;flex-shrink:0;border-radius:12px 12px 0 0}
.work-card .work-caption{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:24px;flex:1;background:var(--cream);color:var(--navy);text-align:right}
.work-brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-avatar{width:72px;height:72px;flex:0 0 72px;background:#fffaf6;border:1px dashed #c83e7080;border-radius:15px;display:grid;place-items:center;overflow:hidden;padding:8px}
.brand-placeholder{display:block;max-width:40px;text-align:center;font-size:12px;font-weight:600;line-height:1.6;color:#a63660}
.brand-avatar.has-logo{border:1px solid #e4d5d9;background:#fff;padding:8px}
.brand-avatar .client-logo{width:100%;height:100%;max-height:100%;object-fit:contain;display:block}
/* A small lift on the brand itself, without resizing the card or its text. */
@media(hover:hover) and (pointer:fine){
  .studio-site:is(.home-page,.work-page) .work-card .brand-avatar.has-logo{position:relative;transform-origin:center;transition:transform .32s cubic-bezier(.2,.7,.25,1),box-shadow .32s ease,border-color .32s ease}
  .studio-site:is(.home-page,.work-page) .work-card .brand-avatar.has-logo:hover{transform:translateY(-2px) scale(1.12);border-color:#d84b86;box-shadow:0 0 0 3px #d84b8612,0 8px 20px #a8295d24;z-index:1}
  html.motion-paused .studio-site:is(.home-page,.work-page) .work-card .brand-avatar.has-logo{transition:none;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .studio-site:is(.home-page,.work-page) .work-card .brand-avatar.has-logo,
  .studio-site:is(.home-page,.work-page) .work-card .brand-avatar.has-logo:hover{transition:none;transform:none}
}
.work-brand-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.work-caption .work-brand-name,.story-brand .work-brand-name{font-size:19px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;display:block}
.work-caption .work-brand-meta,.story-brand .work-brand-meta{color:#796776;font-size:12px;line-height:1.5;display:block;margin:0}
.work-brand .work-arrow{font-size:27px;color:var(--pink);margin-right:auto}
.work-caption .work-project-title{font:800 26px/1.3 var(--body);letter-spacing:-.6px;display:block;border-top:1px solid #d8c5cc;padding-top:22px;margin:22px 0 14px}
.work-brief-label,.story-brief-label{display:block;font-size:11px;font-weight:700;color:#ae2d5d;margin-bottom:7px}
.work-brief{display:block;font-size:16px;line-height:1.85;color:#645565;margin-bottom:23px}
.work-view-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:17px;border-top:1px solid #dfd0d5;margin-top:auto;font-size:13px;font-weight:600;color:var(--navy)}
.work-view-row i{font-size:12px;font-style:normal;background:var(--navy);color:var(--cream);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.work-card:hover .work-view-row i{background:var(--pink)}
.work-card:hover .work-project-title{color:#a92d59}
.story-info{padding:38px 32px 32px}
.story-info .section-kicker{font-size:9px;letter-spacing:1px;margin:0 0 20px}
.story-brand{width:100%;padding-bottom:23px;margin-bottom:25px;border-bottom:1px solid #d8c5cc}
.story-brand .brand-avatar{width:80px;height:80px;flex-basis:80px}
.story-brand .work-brand-name{font-size:22px}
.story-info h2{font-size:34px;line-height:1.2;letter-spacing:-.7px;margin-bottom:23px}
.story-info .story-description{font-size:17px;line-height:1.85;color:#645565;margin-bottom:24px}
.story-goal{width:100%;border-right:3px solid var(--pink);padding:15px 18px;background:#efdee3;margin:0 0 24px}
.story-goal>span{font-size:12px;font-weight:700;color:#9b2754}.story-goal p{font-size:15px;line-height:1.75;margin-top:5px}
.story-controls{flex-wrap:wrap}.story-controls button{font-size:12px}
.story-info .story-disclaimer{font-size:11px!important;line-height:1.8}
.story-info>.button{font-size:14px;min-height:50px}
.real-video-screen{background:#10121f;display:flex;align-items:center;justify-content:center}
.real-video-screen iframe{max-height:80dvh}
@media(max-width:1100px){.work-grid{gap:20px}.work-card .work-caption{padding:20px}.work-brand{gap:12px}.brand-avatar{width:60px;height:60px;flex-basis:60px}.work-caption .work-brand-name{font-size:17px}.work-caption .work-project-title{font-size:24px}.work-brief{font-size:15px}}
@media(max-width:760px){.work-grid{gap:30px}.work-poster{aspect-ratio:9/10}.work-card .work-caption{padding:23px}.brand-avatar{width:68px;height:68px;flex-basis:68px}.work-caption .work-brand-name{font-size:20px}.work-caption .work-brand-meta{font-size:12px}.work-caption .work-project-title{font-size:27px;padding-top:19px;margin-top:20px}.work-brief{font-size:16px;line-height:1.85}.work-view-row{font-size:14px}.story-info{padding:28px 25px}.story-info h2{font-size:30px}.story-info .story-description{font-size:16px}.story-brand{gap:15px;margin-bottom:23px;padding-bottom:20px}.story-brand .brand-avatar{width:72px;height:72px;flex-basis:72px}.story-brand .work-brand-name{font-size:21px}.story-info .story-disclaimer{margin-top:0}.real-video-screen iframe{max-height:75dvh}}
@media(prefers-reduced-motion:reduce){.work-card,.work-view-row i{transition:none}}

.work-page .work-filters { flex-wrap: wrap; }
.work-page .work-filters button { min-height: 44px; }
.work-page .work-format { flex-shrink: 0; }