/* what-we-do page-specific styles. Kept separate for safe future changes. */

/* Project and story modules for What We Do. */
.project-showcase{background:#fff}
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.showcase-card,.video-story-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(53,32,80,.06);transition:.25s}
.showcase-card:hover,.video-story-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.showcase-media,.video-story-media{height:235px;position:relative;overflow:hidden;background:#f4eff8}
.showcase-media img,.video-story-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.showcase-card:hover .showcase-media img,.video-story-card:hover .video-story-media img{transform:scale(1.04)}
.showcase-body,.video-story-body{padding:24px}
.showcase-body h3,.video-story-body h3{font-size:24px;margin:13px 0 9px}
.showcase-body p,.video-story-body p{font-size:13px;color:var(--muted);margin:0 0 16px}
.text-link{display:inline-flex;align-items:center;color:var(--purple);font-size:12px;font-weight:800}
.text-link:hover{color:#df7800}
.video-story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.video-story-media .play{width:62px;height:62px}
@media(max-width:980px){.showcase-grid{grid-template-columns:repeat(2,1fr)}.video-story-grid{grid-template-columns:1fr}}
@media(max-width:760px){.showcase-grid{grid-template-columns:1fr}.showcase-media,.video-story-media{height:230px}}

/* Restore the shared Work-card icon and action styling used by the locked design. */
.work-card .icon svg{width:28px;height:28px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.work-card .work-view{margin-top:14px;border:0;background:none;color:var(--purple);font:inherit;font-weight:700;font-size:12px;cursor:pointer;padding:0}
.work-card .work-view:hover{color:var(--orange)}

/* Work-details popup. */
.work-modal{position:fixed;inset:0;background:rgba(20,12,29,.82);display:none;align-items:center;justify-content:center;padding:22px;z-index:125}
.work-modal.open{display:flex}
.work-modal-box{width:min(760px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;padding:36px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.work-modal-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--purple);font-size:24px;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.15)}
.work-modal-description{color:var(--muted);font-size:14px;line-height:1.8;white-space:pre-line}