/* Portfolio controls inherit Virusha's Figtree typography. */
#works-projects [hidden] { display: none !important; }
.works-tabs { display: inline-flex; gap: 4px; padding: 6px; margin-bottom: 28px; border: 1px solid #dedee5; border-radius: 999px; background: #fff; }
.works-tabs button { padding: 12px 28px; border: 0; border-radius: 999px; background: transparent; color: #646464; font: 500 15px/1.4 Figtree, sans-serif; cursor: pointer; }
.works-tabs button[aria-selected="true"] { background: linear-gradient(135deg, #7c5cff, #598fd6); color: white; box-shadow: 0 8px 24px -12px #7c5cff; }
.works-tabs span { margin-left: 8px; font-size: 11px; opacity: .8; }
.works-tabs button:focus-visible, .graphic-card:focus-visible, #graphics-viewer button:focus-visible { outline: 3px solid #7c5cff; outline-offset: 3px; }
.graphics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.graphic-card { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #e0e0e5; border-radius: 24px; background: white; color: #171717; text-align: left; font-family: Figtree, sans-serif; cursor: pointer; }
.graphic-card:hover { border-color: #7c5cff; }
.graphic-card__cover { position: relative; aspect-ratio: 1; overflow: hidden; background: #eee; }
.graphic-card--wide .graphic-card__cover { aspect-ratio: 16 / 9; }
.graphic-card__cover img, .graphic-card__cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.graphic-card__cover video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.graphic-card__cover video.is-playing { opacity: 1; }
.graphic-card__tag { position: absolute; left: 12px; top: 12px; border-radius: 999px; padding: 5px 10px; color: white; background: #171717cc; font-size: 11px; }
.graphic-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fffffff0; color: #171717; font-size: 22px; }
.graphic-card:has(video.is-playing) .graphic-card__play { opacity: 0; }
.graphic-card__details { padding: 20px; }
.graphic-card h3 { margin: 0 0 8px; font: 500 20px/1.25 Figtree, sans-serif; letter-spacing: -.02em; }
.graphic-card p { margin: 0; font-size: 13px; color: #646464; }
#graphics-viewer { position: fixed; inset: 0; width: min(1100px, 96vw); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 20px; overflow: auto; border: 1px solid #444; border-radius: 20px; background: #111116; color: #fff; font-family: Figtree, sans-serif; }
#graphics-viewer::backdrop { background: #08080be8; }
.graphics-viewer__toolbar, .graphics-viewer__navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#graphics-viewer button { min-width: 44px; min-height: 44px; border: 1px solid #ffffff40; border-radius: 999px; padding: 8px 16px; background: #ffffff15; color: white; cursor: pointer; font: inherit; }
.graphics-viewer__media { display: flex; justify-content: center; align-items: center; min-height: 160px; margin: 16px 0; }
.graphics-viewer__media img, .graphics-viewer__media video { max-width: 100%; max-height: 58dvh; width: auto; height: auto; border-radius: 12px; object-fit: contain; }
.graphics-viewer__details h2 { margin: 0 0 8px; color: white; font: 500 24px/1.2 Figtree, sans-serif; }
.graphics-viewer__details p { color: #ccc; font-size: 14px; line-height: 1.5; }
@media (max-width: 991px) { .graphics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .graphics-grid { grid-template-columns: 1fr; gap: 20px; } .works-tabs button { padding: 11px 20px; } #graphics-viewer { padding: 14px; } .graphics-viewer__details h2 { font-size: 20px; } }
/* Every website thumbnail uses the same frame, including legacy CDN images. */
#works-grid .work-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
#works-grid .work-thumb .cover-image { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
#works-grid .work-content { align-items: flex-start; gap: 16px; }
#works-grid .work-content h4 { min-width: 0; }
#works-grid .work-right { flex-shrink: 0; max-width: 45%; }
@media(max-width:600px) { #works-grid .work-content { flex-direction: column; gap: 6px; } #works-grid .work-right { max-width: 100%; } }
.graphic-card { display: flex; flex-direction: column; }
.graphic-card__cover { width: 100%; flex-shrink: 0; }
.graphic-card__details { flex: 1; }
/* Match the site's flat, high-contrast navigation and service buttons. */
.works-tabs { gap: 0; padding: 0; border-radius: 4px; border-color: #171717; background: transparent; overflow: hidden; margin-bottom: 32px; }
.works-tabs button { border-radius: 0; padding: 16px 30px; min-height: 56px; color: #171717; }
.works-tabs button + button { border-left: 1px solid #171717; }
.works-tabs button[aria-selected="true"] { background: #171717; color: #fff; box-shadow: none; }
.works-tabs span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 6px; border-radius: 3px; background: #eee; color: #171717; opacity: 1; }
.works-tabs button[aria-selected="true"] span { background: #b2a8ed; }
#works-projects .works-filter { border-radius: 4px; background: transparent; padding: 11px 16px; border-color: #d9d9df; }
#works-projects .works-filter[aria-pressed="true"] { background: #a9d6e5; border-color: #a9d6e5; color: #171717; }
.works-tabs button:focus-visible { outline-offset: -4px; }
.graphics-grid { display: block; }
.graphics-group + .graphics-group { margin-top: 56px; }
.graphics-group__heading { margin: 0 0 24px; font: 600 22px/1.3 Figtree, sans-serif; color: #171717; }
.graphics-group__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.graphics-group__grid--motion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.graphics-group__grid .graphic-card { height: 100%; }
.graphics-group__grid--motion .graphic-card__cover { aspect-ratio: 16 / 9; }
.graphics-group__grid:not(.graphics-group__grid--motion) .graphic-card__cover { aspect-ratio: 1; }
.graphic-card__details { padding: 24px; }
#graphics-viewer { padding: 0; height: min(920px, 94dvh); overflow: hidden; border-radius: 12px; }
#graphics-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.graphics-viewer__toolbar { padding: 16px 24px; border-bottom: 1px solid #ffffff20; }
.graphics-viewer__media { min-height: 0; overflow: hidden; padding: 24px; margin: 0; background: #08080b; }
.graphics-viewer__media img, .graphics-viewer__media video { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; }
.graphics-viewer__details { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 24px; border-top: 1px solid #ffffff20; max-height: 30dvh; overflow-y: auto; }
.graphics-viewer__caption { display: grid; gap: 10px; }
.graphics-viewer__details h2, .graphics-viewer__details p { margin: 0; }
.graphics-viewer__details h2 { font-size: 22px; line-height: 1.3; }
#graphics-viewer-client { font-size: 13px; color: #b2a8ed; }
#graphics-viewer-description { font-size: 14px; line-height: 1.6; }
.graphics-viewer__navigation { gap: 10px; }
#graphics-viewer .graphics-viewer__navigation button { border-radius: 4px; padding: 12px 16px; white-space: nowrap; }
#graphics-close { border-radius: 50%; padding: 8px !important; width: 44px; }
@media(max-width:991px) { .graphics-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .graphics-viewer__details { grid-template-columns: 1fr; gap: 20px; } .graphics-viewer__navigation { justify-content: flex-end; } }
@media(max-width:600px) { .graphics-group__grid { grid-template-columns: 1fr; } .works-tabs button { padding: 13px 20px; } .graphics-viewer__toolbar { padding: 12px 16px; } .graphics-viewer__media { padding: 16px; } .graphics-viewer__details { padding: 16px; gap: 16px; max-height: 36dvh; } .graphics-viewer__details h2 { font-size: 19px; } .graphics-viewer__navigation { justify-content: space-between; } .graphics-group + .graphics-group { margin-top: 40px; } }

/* Keep vertical launch reels fully visible within the category’s square grid. */
.graphic-card--portrait .graphic-card__cover { background: #111116; }
.graphic-card--portrait .graphic-card__cover img, .graphic-card--portrait .graphic-card__cover video { object-fit: contain; }
/* Underlined section tabs and rounded lavender controls follow the site palette. */
.works-tabs{display:flex;gap:32px;border:0;border-bottom:1px solid #dedee5;border-radius:0;overflow:visible;width:100%;background:transparent}
.works-tabs button,.works-tabs button[aria-selected="true"]{border:0;border-bottom:3px solid transparent;background:transparent;color:#777;padding:12px 0 20px;font-size:24px;box-shadow:none}
.works-tabs button+button{border-left:0}.works-tabs button[aria-selected="true"]{color:#171717;border-bottom-color:#a69ce1}.works-tabs span,.works-tabs button[aria-selected="true"] span{border-radius:999px;background:#eeeaf9;font-size:12px;padding:3px 9px;vertical-align:middle}
#works-projects .works-filter{border-radius:999px;background:#fff;border:1px solid #dfdfe5;padding:12px 22px;color:#555;min-height:46px}
#works-projects .works-filter[aria-pressed="true"]{background:#b2a8ed;border-color:#b2a8ed;color:#171717}
#works-projects .works-filter:hover{border-color:#a69ce1;background:#eeeaf9}
#graphics-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;background:#07060ceb;backdrop-filter:blur(16px);margin:0;color:white}
#graphics-viewer::backdrop{background:#07060c99}#graphics-viewer[open]{grid-template-rows:auto minmax(0,1fr) auto}
.graphics-viewer__toolbar{border:0;padding:16px 24px;gap:16px}.graphics-viewer__toolbar>span{font-size:12px;letter-spacing:.12em;color:#ffffff99}
.graphics-zoom{display:flex;align-items:center;gap:4px;margin-left:auto}#graphics-viewer .graphics-zoom button{border:0;background:#ffffff12;border-radius:999px;padding:8px;min-width:44px;font-size:18px}#graphics-viewer #zoom-reset{font-size:12px;min-width:60px}#graphics-viewer button:disabled{opacity:.3;cursor:default}
.graphics-viewer__stage{position:relative;min-height:0;margin:0 72px}.graphics-viewer__media{height:100%;padding:0;background:transparent;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}.graphics-viewer__media.is-image{display:block}.graphics-zoom-stage{display:flex;align-items:center;justify-content:center}.graphics-viewer__media .graphics-zoom-stage img{max-width:none;max-height:none;border-radius:12px;flex-shrink:0;user-select:none}.graphics-viewer__media.is-zoomed{cursor:grab}.graphics-viewer__media.is-dragging{cursor:grabbing}.graphics-viewer__media video{max-height:100%;max-width:100%;border-radius:12px}
.graphics-viewer__navigation{position:absolute;inset:0;pointer-events:none}#graphics-viewer .graphics-viewer__navigation button{position:absolute;top:50%;transform:translateY(-50%);border:0;border-radius:50%;width:48px;height:48px;padding:0;background:#ffffff18;font-size:32px;pointer-events:auto}#graphics-previous-item{left:-60px}#graphics-next-item{right:-60px}
.graphics-viewer__details{display:block;max-width:800px;width:100%;margin:auto;border:0;padding:20px 24px 28px;max-height:28dvh;overflow-y:auto}.graphics-viewer__caption{gap:6px}.graphics-viewer__details h2{font-size:24px}.graphics-viewer__details p,#graphics-viewer-client{color:#ffffffa6;font-size:14px}#graphics-viewer-description{line-height:1.5}
@media(max-width:600px){.works-tabs{gap:28px}.works-tabs button,.works-tabs button[aria-selected="true"]{font-size:21px;padding:10px 0 16px}#works-projects .works-filter{padding:10px 16px;font-size:13px}.graphics-viewer__toolbar{padding:12px 16px;gap:8px}.graphics-viewer__stage{margin:0 16px}.graphics-viewer__details{padding:16px 20px 24px;max-height:30dvh}.graphics-viewer__details h2{font-size:20px}#graphics-viewer .graphics-viewer__navigation button{width:40px;height:40px;background:#222b}#graphics-previous-item{left:0}#graphics-next-item{right:0}}

.graphics-zoom[hidden]{display:none!important}
#graphics-viewer[open]{grid-template-columns:minmax(0,1fr)}
.graphics-viewer__stage,.graphics-viewer__media,.graphics-viewer__toolbar,.graphics-viewer__details{min-width:0;box-sizing:border-box}
.graphics-viewer__media{width:100%}

/* Keep moving reel artwork inside its photographed device screen. */
.graphic-card__screen { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; overflow: hidden; border-radius: 14% / 6%; opacity: 0; pointer-events: none; }
.graphic-card__screen:has(video.is-playing) { opacity: 1; }
.graphic-card__cover .graphic-card__screen video { object-fit: fill; }
.graphic-card__screen::after { content: ''; position: absolute; top: 1.5%; left: 35%; width: 30%; height: 3.5%; border-radius: 50%; background: #08090a; pointer-events: none; }