/* Visual-first work gallery. Other homepage sections retain their original design. */
.work-showcase {padding-bottom:clamp(5rem,10vw,9rem)}
.work-showcase__title {font-family:'Fraunces',Georgia,serif;font-weight:500}
.work-showcase__subtitle {margin-bottom:clamp(3rem,6vw,5rem)}
.work-gallery {max-width:1050px;gap:clamp(4rem,8vw,7rem)}
.work-card,.work-card:nth-child(odd),.work-card:nth-child(even) {display:block;transform:none;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
.work-card + .work-card {margin-top:0}
.work-card__image {position:relative;display:grid;place-items:center;min-height:0;height:clamp(360px,48vw,560px);padding:clamp(56px,7vw,84px) clamp(28px,6vw,72px) clamp(40px,5vw,60px);border-radius:28px;overflow:hidden;isolation:isolate;background:var(--card-tint)}
/* One soft tint per project, drawn from each case study's own colour. */
.work-card--plans {--card-tint:#C9D8D2}
.work-card--search {--card-tint:#DDD3D6}
.work-card--statera {--card-tint:#D3D0E0}
[data-theme="dark"] .work-card--plans {--card-tint:#223430}
[data-theme="dark"] .work-card--search {--card-tint:#2E2629}
[data-theme="dark"] .work-card--statera {--card-tint:#28263A}
.work-card__shot {display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.work-card__shot img {display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;filter:drop-shadow(0 24px 32px rgba(13,21,36,.18));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.work-card--search .work-card__shot img {border-radius:0}
.work-card__client {position:absolute;top:18px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.88);color:#101418;font-size:12px;font-weight:600;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.work-card__client img {width:20px;height:20px;border-radius:6px;flex:0 0 auto}
.work-card__view {position:absolute;right:22px;bottom:22px;z-index:2;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#fff;color:#047857;font-size:13px;font-weight:650;box-shadow:0 8px 24px #0002;transition:transform .3s,background .3s,color .3s}
.work-card__content {padding:23px 0 0;display:block;color:var(--text-primary)}
.work-card__eyebrow {display:block;font-size:12px;letter-spacing:.065em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.work-card__title {font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(26px,3.2vw,40px);line-height:1.18;letter-spacing:-.02em;max-width:980px;margin:0 0 14px;text-wrap:pretty}
.work-card__tagline {font-size:clamp(17px,2.1vw,23px);line-height:1.4;max-width:850px;color:var(--text-primary);margin:0 0 18px}
.work-card__meta {font-size:15px;color:var(--text-secondary);margin:0}
@media (hover:hover) and (pointer:fine) {
 .work-card:hover,.work-card:focus-visible {transform:none!important;box-shadow:none;border:0}
 .work-card:hover .work-card__shot img,.work-card:focus-visible .work-card__shot img {transform:scale(1.03) translateY(-6px)}
 .work-card:hover .work-card__view,.work-card:focus-visible .work-card__view {transform:translateY(-7px);background:#047857;color:white}
 .work-card:hover .work-card__title,.work-card:focus-visible .work-card__title {color:var(--accent)}
}
.work-card:focus-visible {outline:3px solid var(--accent);outline-offset:10px}
@media(max-width:768px) {
 .work-gallery {gap:52px;padding:0 18px}
 .work-card__image {height:clamp(280px,62vw,480px);padding:25px;border-radius:19px}
 .work-card__content {padding:19px 2px 0}
 .work-card__title {font-size:clamp(22px,5.4vw,30px)}
 .work-card__view {right:14px;bottom:14px;font-size:12px}
}
@media(max-width:480px) {
 .work-card__image {height:clamp(260px,78vw,340px);padding:58px 18px 30px}
 .work-card__meta {font-size:12px}
}
@media(prefers-reduced-motion:reduce){.work-card__shot img,.work-card__view{transition:none!important}}
/* Private SonyLIV work is flagged before anyone clicks through. */
.work-card__nda {position:absolute;top:18px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(14,18,28,.78);color:#fff;font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(max-width:640px){.work-card__nda {top:12px;right:12px;padding:6px 10px;font-size:11px}}
/* Pressing a project card squeezes its "View case study" pill. */
.work-card__view {transition:transform .3s,background .3s,color .3s,scale 160ms cubic-bezier(.23,1,.32,1)}
.work-card:active .work-card__view {scale:.96}
@media(max-width:640px){.work-card__client {top:12px;left:12px;font-size:11px;padding:5px 10px 5px 5px}.work-card__client img {width:18px;height:18px}}
/* The search mockup has generous empty space around the phone; scale it up to match the others. */
.work-card--search .work-card__shot img {max-height:none;height:128%}
/* On phones the whole card is the tap target, so the pill would only cover the screenshot. */
@media(max-width:640px){.work-card__view {display:none}}

/* ── Frosted-glass cards ──────────────────────────────────────────────
   At rest a small screenshot peeks over a sheet of frosted glass, with tag
   chips tucked behind it. On hover the screenshot grows and rises in front,
   the glass clears, the chips pop up on either side, and the "View case
   study" pill follows the cursor (card-hover.js sets --px / --py). */
.work-card__image {display:block;padding:0;--rise:cubic-bezier(.22,1,.36,1)}
.work-card__shot {position:absolute;z-index:1;left:50%;top:21%;width:56%;height:auto;display:block;transform:translateX(-50%);transform-origin:50% 0;transition:transform .75s var(--rise)}
.work-card__shot img {display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:10px;transform:none!important;transition:none}
.work-card--search .work-card__shot {top:12%;width:52%}
.work-card--search .work-card__shot img {height:auto;border-radius:0}
.work-card__tags {position:absolute;inset:0;z-index:2;pointer-events:none}
.work-card__tag {position:absolute;top:47%;padding:9px 18px;border-radius:14px;background:color-mix(in srgb,var(--card-tint) 45%,#0b1512);color:rgba(255,255,255,.9);font:italic 500 clamp(13px,1.45vw,18px)/1 'Fraunces',Georgia,serif;white-space:nowrap;box-shadow:0 12px 26px rgba(0,0,0,.16);transition:transform .75s var(--rise)}
.work-card__tag--a {left:9%;transform:rotate(-10deg)}
.work-card__tag--b {left:17%;top:51%;transform:rotate(-4deg)}
.work-card__tag--c {right:8%;transform:rotate(15deg)}
.work-card__glass {position:absolute;z-index:3;left:0;right:0;bottom:0;top:49%;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.55);background:linear-gradient(to bottom,color-mix(in srgb,var(--card-tint) 30%,transparent),color-mix(in srgb,var(--card-tint) 90%,transparent) 60%,var(--card-tint));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .55s ease}
[data-theme="dark"] .work-card__glass {border-top-color:rgba(255,255,255,.14)}
.work-card__client,.work-card__nda {z-index:6}
@media (hover:hover) and (pointer:fine) {
 .work-card__view {z-index:7;left:var(--px,50%);top:var(--py,50%);right:auto;bottom:auto;opacity:0;scale:.8;transform:translate(-50%,-50%)!important;pointer-events:none;background:#047857!important;color:#fff!important;transition:opacity .25s ease,scale .35s var(--rise)}
 .work-card:hover .work-card__view,.work-card:focus-visible .work-card__view {opacity:1;scale:1}
 .work-card:hover .work-card__shot,.work-card:focus-visible .work-card__shot {z-index:5;transform:translate(-50%,-13%) scale(1.3)}
 .work-card:hover .work-card__glass,.work-card:focus-visible .work-card__glass {opacity:0}
 .work-card:hover .work-card__tags,.work-card:focus-visible .work-card__tags {z-index:5}
 .work-card:hover .work-card__tag--a,.work-card:focus-visible .work-card__tag--a {transform:translate(-18%,-150%) rotate(-8deg)}
 .work-card:hover .work-card__tag--b,.work-card:focus-visible .work-card__tag--b {transform:translate(-28%,-40%) rotate(-3deg)}
 .work-card:hover .work-card__tag--c,.work-card:focus-visible .work-card__tag--c {transform:translate(22%,-130%) rotate(13deg)}
 .work-card:focus-visible .work-card__view {left:auto;right:22px;top:auto;bottom:22px;transform:none!important}
}
/* Touch screens have no hover, so they rest halfway: enough of the screen to read. */
@media (hover:none),(pointer:coarse) {.work-card__glass {top:66%}.work-card__tag {top:63%}}
@media(max-width:640px){.work-card__shot,.work-card--search .work-card__shot {top:22%;width:78%}.work-card__tag {padding:6px 11px;font-size:12px;border-radius:10px}.work-card__tag--b {display:none}}
@media(prefers-reduced-motion:reduce){.work-card__shot,.work-card__glass,.work-card__tag,.work-card__view{transition:none!important}}
/* The card fades into the page at the bottom instead of ending on a hard
   edge, and the whole card sits slightly smaller until hovered. */
.work-card__image {border-radius:28px 28px 0 0;background:linear-gradient(to bottom,var(--card-tint) 0%,var(--card-tint) 52%,var(--bg-primary) 100%);transform-origin:50% 55%;transition:transform .75s var(--rise)}
.work-card__glass {border-radius:22px 22px 0 0;background:linear-gradient(to bottom,color-mix(in srgb,var(--card-tint) 35%,transparent) 0%,color-mix(in srgb,var(--card-tint) 60%,var(--bg-primary)) 45%,var(--bg-primary) 100%)}
@media (hover:hover) and (pointer:fine) {
 .work-card__image {transform:scale(.94)}
 .work-card:hover .work-card__image,.work-card:focus-visible .work-card__image {transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.work-card__image{transition:none!important}}
.project-card__image {position:relative}
.work-card__nda[hidden] {display:none}

/* Art & Artist card: warm tint from the product imagery; two phones, cropped like the search card. */
.work-card--art {--card-tint:#E3D7CA}
[data-theme="dark"] .work-card--art {--card-tint:#30291F}
.work-card--art .work-card__shot {top:12%;width:50%}
.work-card--art .work-card__shot img {border-radius:0;filter:drop-shadow(0 24px 32px rgba(30,20,10,.22))}
@media(max-width:640px){.work-card--art .work-card__shot {top:20%;width:80%}}