.v4-work-exhibits {
    --work-navy: #10243b;
    --work-line: #dce4ed;
    --work-ease: cubic-bezier(.2, .8, .2, 1);
    background: linear-gradient(160deg, #fff 20%, #f1f5fa 100%);
}
.v4-work-features, .v4-work-website-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.8vw, 32px);
}
.v4-work-feature, .v4-project-card {
    min-width: 0;
    border: 1px solid var(--work-line);
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}
.v4-work-stage {
    position: relative;
    display: block;
    aspect-ratio: 1.56;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 25% 6%, #cadfe9 0%, #1f5065 63%, #17394f 100%);
}
.v4-work-tone-millets .v4-work-stage {
    background: radial-gradient(ellipse at 22% 8%, #f4e8c9 0%, #b5ad70 63%, #777443 100%);
}
.v4-work-main-image {
    position: absolute;
    width: 82%;
    top: 10%;
    left: 7%;
    background: #fff;
    border: 1px solid #ffffff82;
    border-radius: 10px;
    box-shadow: 0 16px 30px #05162730;
    overflow: hidden;
    transition: transform 420ms var(--work-ease);
}
.v4-work-main-image img, .v4-work-sample-image img {
    display: block;
    width: 100%;
    height: auto;
}
.v4-work-sample-image {
    position: absolute;
    right: 7%;
    bottom: 7%;
    width: 23%;
    border: 3px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 32px #05162755;
    transform: rotate(4deg);
    transition: transform 460ms var(--work-ease);
}
.v4-work-tone-millets .v4-work-sample-image { width: 18%; }
.v4-project-copy { padding: 22px clamp(16px, 2vw, 26px) 24px; }
.v4-project-type {
    display: block;
    color: #4c6079;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.5;
    text-transform: uppercase;
}
.v4-project-copy h3 { margin: 8px 0; color: var(--work-navy); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.19; }
.v4-project-copy p { margin: 0; line-height: 1.6; color: #43556d; }
.v4-project-copy .v4-text-link { display: inline-flex; margin-top: 16px; }
.v4-work-website-links { margin-top: 16px; }
.v4-work-website-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border: 1px solid var(--work-line);
    border-radius: 12px;
    background: #fff;
    color: var(--work-navy);
    transition: border-color 180ms ease, background-color 180ms ease;
}
.v4-work-website-links a:is(:hover, :focus-visible) { border-color: #b59ea8; background: #fff6f8; }
.v4-work-website-links small { display: block; color: #506179; }
.v4-work-website-links svg, .v4-work-context-copy svg { width: 18px; height: 18px; flex: none; }
.v4-work-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.v4-project-card { scroll-margin-top: 110px; }
.v4-project-card[hidden] { display: none; }
.v4-project-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.48;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
    background: #eaf0f6;
}
.v4-project-card[data-category="creative"] .v4-project-visual,
.v4-project-card[data-category="print"] .v4-project-visual { background: #f4f0e9; }
.v4-project-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 380ms var(--work-ease);
}
.v4-project-visual:focus-visible, .v4-work-stage:focus-visible { outline-offset: -5px; }
.v4-project-expand {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 100px;
    background: #fff;
    color: var(--work-navy);
    box-shadow: 0 4px 18px #13284016;
    font-size: .7rem;
    font-weight: 700;
}
.v4-project-video { background: #0e1c2e; padding: 8px; }
.v4-project-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.v4-work-context { padding-top: 30px; padding-bottom: 42px; }
.v4-work-context-panel {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(18px, 4vw, 55px);
    background: radial-gradient(ellipse at 100% 0%, #29465b 0%, #102238 63%);
    color: #f1f6fd;
    border-radius: 22px;
    padding: clamp(22px, 4.3vw, 62px);
}
.v4-work-context-copy .v4-kicker { color: #ffc9d5; }
.v4-work-context-copy h2 { margin: 8px 0 16px; color: #fff; }
.v4-work-context-copy p { max-width: 40ch; color: #dfebf8; }
.v4-work-context-copy a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.v4-work-context-image { margin: 0; min-width: 0; text-align: center; }
.v4-work-context-image img { display: block; width: 100%; max-height: 360px; object-fit: contain; height: auto; border-radius: 8px; }
.v4-work-context-image figcaption { margin-top: 9px; color: #d3e1ef; font-size: .78rem; }
@media (hover: hover) and (pointer: fine) {
    .v4-work-stage:hover .v4-work-main-image { transform: translate(-3px, -5px) scale(1.035); }
    .v4-work-stage:hover .v4-work-sample-image { transform: translate(3px, -5px) rotate(0deg); }
    .v4-project-visual:hover img { transform: scale(1.04); }
}
@media (max-width: 980px) {
    .v4-work-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .v4-work-features, .v4-work-gallery, .v4-work-context-panel { grid-template-columns: minmax(0, 1fr); }
    .v4-work-website-links a { padding-inline: 12px; }
    .v4-work-context { padding-block: 18px 30px; }
    .v4-work-context-image img { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .v4-work-exhibits *, .v4-work-context * { animation: none !important; transition: none !important; }
    .v4-work-stage:hover .v4-work-main-image, .v4-project-visual:hover img { transform: none; }
    .v4-work-stage:hover .v4-work-sample-image { transform: rotate(4deg); }
}
.v4-motion-paused .v4-work-exhibits * { transition: none !important; }
.v4-motion-paused .v4-work-stage:hover .v4-work-main-image,
.v4-motion-paused .v4-project-visual:hover img { transform: none; }
.v4-motion-paused .v4-work-stage:hover .v4-work-sample-image { transform: rotate(4deg); }