/* Real customer work: homepage preview and portfolio page. */
:root {
    --work-surface: #111116;
    --work-line: rgba(255, 255, 255, .11);
    --work-muted: #a1a1aa;
    --work-violet: #c4b5fd;
}

.works-preview {
    padding: 7rem 0;
    background: radial-gradient(circle at 12% 15%, rgba(139, 92, 246, .1), transparent 34%), #0a0a0b;
}
.works-container { width: min(100% - 3rem, 80rem); margin-inline: auto; }
.works-eyebrow { color: var(--work-violet); font-size: .75rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.works-preview__top { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.works-preview__top h2 { max-width: 17ch; margin: .7rem 0 0; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: 1.07; letter-spacing: -.045em; font-weight: 800; }
.works-preview__intro { max-width: 24rem; color: #b4b4be; line-height: 1.65; }
.works-preview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.work-preview-card { overflow: hidden; border: 1px solid var(--work-line); border-radius: 1.65rem; background: linear-gradient(145deg, #1b1823, #101014 72%); }
.work-preview-card__image { display: block; height: clamp(16rem, 30vw, 23rem); overflow: hidden; background: #eee9e5; }
.work-preview-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.work-preview-card__image:hover img { transform: scale(1.035); }
.work-preview-card__body { padding: clamp(1.3rem, 2.5vw, 2rem); }
.work-preview-card__type { color: var(--work-violet); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.work-preview-card h3 { margin: .5rem 0 .75rem; font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 750; line-height: 1.15; }
.work-preview-card__desc { min-height: 3.25rem; color: #b4b4be; line-height: 1.6; }
.work-preview-card__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.work-preview-card__meta span { padding: .5rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #dedee3; background: rgba(255,255,255,.04); font-size: .82rem; }
.work-preview-card__footer { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--work-line); }
.work-preview-card__price small { display: block; margin-bottom: .1rem; color: #9a9aa6; font-size: .75rem; }
.work-preview-card__price strong { font-size: 1.5rem; letter-spacing: -.025em; }
.work-preview-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.work-text-link { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; background: none; color: #e9ddff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.work-text-link:hover { color: #fff; }
.works-preview__all { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 2rem; padding: .9rem 1.35rem; border: 1px solid rgba(196,181,253,.45); border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.works-preview__all:hover { background: rgba(196,181,253,.13); }

.works-page { min-height: 100vh; margin: 0; background: #0a0a0b; color: #fff; font-family: Inter, sans-serif; }
.works-page *, .works-page *::before, .works-page *::after { box-sizing: border-box; }
.works-page a { color: inherit; }
.works-page__header { border-bottom: 1px solid var(--work-line); }
.works-page__header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 5.25rem; }
.works-page__brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.works-page__brand img { width: auto; height: 2.45rem; filter: brightness(0) invert(1); }
.works-page__brand span { color: #a1a1aa; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.works-page__nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.8rem, 2.3vw, 2rem); }
.works-page__nav a { color: #b4b4be; font-size: .9rem; text-decoration: none; }
.works-page__nav a:hover, .works-page__nav a[aria-current="page"] { color: #fff; }
.works-page__hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(2.8rem, 5vw, 4rem); }
.works-page__hero::before { position: absolute; z-index: 0; top: -12rem; right: -7rem; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(circle, rgba(130, 84, 220, .22), transparent 65%); content: ""; pointer-events: none; }
.works-page__hero .works-container { position: relative; z-index: 1; }
.works-page__hero-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.works-page__hero h1 { margin: .8rem 0 1.2rem; max-width: 9ch; font-size: clamp(3.5rem, 8vw, 7rem); line-height: .98; letter-spacing: -.055em; font-weight: 850; }
.works-page__hero p { max-width: 42rem; color: #b4b4be; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.works-page__hero-art { position: relative; min-height: clamp(19rem, 31vw, 27rem); }
.works-page__hero-art img { position: absolute; display: block; width: 73%; height: 66%; border: .45rem solid #e9e6e2; border-radius: 1.1rem; background: #e9e6e2; object-fit: cover; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.4); }
.works-page__hero-art img:first-child { top: 1%; left: 0; transform: rotate(-7deg); }
.works-page__hero-art img:last-child { right: 0; bottom: 0; transform: rotate(8deg); }
.works-page__jump { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.works-page__jump a { padding: .7rem 1rem; border: 1px solid var(--work-line); border-radius: 999px; background: rgba(255,255,255,.04); font-size: .85rem; text-decoration: none; }
.works-page__jump a:hover { border-color: rgba(196,181,253,.5); background: rgba(196,181,253,.1); }
.works-story { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--work-line); scroll-margin-top: 1rem; }
.works-story__head { display: flex; align-items: start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.works-story__head h2 { max-width: 18ch; margin: .55rem 0 .7rem; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.works-story__head p { max-width: 43rem; color: #b4b4be; line-height: 1.7; }
.works-story__number { color: rgba(196,181,253,.45); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.works-story__layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .85fr); align-items: start; gap: clamp(1.5rem, 3vw, 3rem); }
.works-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: .65rem; aspect-ratio: 1.18; }
.works-gallery__item { display: block; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: #e9e6e2; cursor: zoom-in; }
.works-gallery__item:first-child { grid-column: span 2; grid-row: span 2; border-radius: 1.4rem; }
.works-gallery[data-count="4"] .works-gallery__item:last-child { grid-column: span 2; }
.works-gallery[data-count="1"] { display: block; aspect-ratio: 4 / 3; }
.works-gallery[data-count="1"] .works-gallery__item { width: 100%; height: 100%; }
.works-gallery[data-count="9"] { grid-template-rows: repeat(3, minmax(0, 1fr)); aspect-ratio: 1.05; }
.works-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.works-gallery__item:hover img { transform: scale(1.035); }
.works-story__details { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--work-line); border-radius: 1.4rem; background: linear-gradient(150deg, rgba(151, 106, 232, .11), rgba(255,255,255,.025) 58%); }
.works-story__details h3 { margin: 0 0 1.25rem; font-size: 1.2rem; font-weight: 750; }
.works-facts { margin: 0; }
.works-facts div { display: flex; justify-content: space-between; gap: 1.2rem; padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem; }
.works-facts dt { flex: 0 0 auto; color: #a1a1aa; }
.works-facts dd { margin: 0; max-width: 63%; text-align: right; line-height: 1.45; font-weight: 600; }
.works-facts div:last-child { border-bottom: 0; }
.works-story__terms { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.works-story__term { padding: 1rem; border: 1px solid rgba(196,181,253,.19); border-radius: 1rem; background: rgba(196,181,253,.06); }
.works-story__term span { display: block; margin-bottom: .35rem; color: #a1a1aa; font-size: .75rem; }
.works-story__term strong { display: block; font-size: 1.25rem; line-height: 1.15; }
.works-story__term em { display: block; margin-top: .28rem; color: #b4b4be; font-size: .75rem; font-style: normal; }
.works-story__disclaimer { margin: 1rem 0 1.35rem; color: #a1a1aa; font-size: .78rem; line-height: 1.5; }
.works-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.15rem; padding: .8rem 1.35rem; border-radius: 999px; background: #fff; color: #15121b !important; font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.works-cta:hover { background: #d8b4fe; transform: translateY(-2px); }
.works-page__bottom { padding: 4rem 0; border-top: 1px solid var(--work-line); background: radial-gradient(circle at 70% 60%, rgba(149, 80, 218, .17), transparent 40%); }
.works-page__bottom h2 { margin: .5rem 0 .8rem; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.1; letter-spacing: -.04em; }
.works-page__bottom p { max-width: 39rem; margin-bottom: 1.7rem; color: #b4b4be; line-height: 1.65; }
.works-page__footer { padding: 2rem 0; border-top: 1px solid var(--work-line); }
.works-page__footer .works-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: #9292a0; font-size: .85rem; }
.works-page__footer a { text-decoration: none; }
.works-page__footer a:hover { color: #fff; }
.works-lightbox { max-width: min(94vw, 1150px); max-height: 94vh; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 1rem; background: #131318; color: #fff; }
.works-lightbox::backdrop { background: rgba(0,0,0,.88); }
.works-lightbox__inner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .4rem; padding: .7rem; }
.works-lightbox__viewport { width: min(80vw, 1000px); max-height: 78vh; overflow: auto; overscroll-behavior: contain; }
.works-lightbox__image { display: block; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; cursor: zoom-in; }
.works-lightbox__image:focus-visible { outline: 2px solid var(--work-violet); outline-offset: -3px; }
.works-lightbox__viewport.is-zoomed .works-lightbox__image { width: var(--zoom-width); max-width: none; max-height: none; margin: 0; cursor: zoom-out; }
.works-lightbox__control { width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--work-line); border-radius: 50%; background: #26262d; color: white; font-size: 1.5rem; cursor: pointer; }
.works-lightbox__control:hover { background: #4b3f60; }
.works-lightbox__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem 1rem; color: #c4c4ce; font-size: .85rem; }
.works-lightbox__close { position: absolute; top: .7rem; right: .7rem; z-index: 2; }

@media (max-width: 900px) {
    .works-page__hero-layout { grid-template-columns: 1fr; }
    .works-page__hero h1 { max-width: 12ch; }
    .works-page__hero-art { width: min(100%, 35rem); min-height: 19rem; }
    .works-story__layout { grid-template-columns: 1fr; }
    .works-gallery { aspect-ratio: 1.5; }
}
@media (max-width: 650px) {
    .works-container { width: min(100% - 2rem, 80rem); }
    .works-preview { padding: 4.5rem 0; }
    .works-preview__top { display: block; }
    .works-preview__intro { margin-top: 1rem; }
    .works-preview__grid { grid-template-columns: 1fr; }
    .work-preview-card__image { height: 17rem; }
    .work-preview-card__desc { min-height: 0; }
    .works-page__header-inner { min-height: 4.5rem; }
    .works-page__brand span { display: none; }
    .works-page__nav { gap: .8rem; }
    .works-page__nav a { font-size: .78rem; }
    .works-page__nav a:nth-child(3) { display: none; }
    .works-page__hero-art { min-height: 13rem; }
    .works-story__number { display: none; }
    .works-gallery { aspect-ratio: auto; grid-template-rows: 12rem 8rem 8rem; }
    .works-gallery__item:first-child { grid-column: span 4; grid-row: span 1; }
    .works-gallery[data-count="9"] { aspect-ratio: auto; grid-template-rows: 12rem repeat(4, 8rem); }
    .works-gallery[data-count="9"] .works-gallery__item:not(:first-child) { grid-column: span 2; }
    .works-gallery[data-count="5"] .works-gallery__item:not(:first-child) { grid-column: span 2; }
    .works-gallery[data-count="4"] .works-gallery__item:nth-child(2),
    .works-gallery[data-count="4"] .works-gallery__item:nth-child(3) { grid-column: span 2; }
    .works-gallery[data-count="4"] .works-gallery__item:last-child { grid-column: span 4; }
    .works-story__terms { grid-template-columns: 1fr 1fr; }
    .works-story__term { padding: .8rem; }
    .works-story__term strong { font-size: 1rem; }
    .works-lightbox__viewport { width: calc(94vw - 5.5rem); }
    .works-lightbox__inner { grid-template-columns: 2rem minmax(0,1fr) 2rem; gap: .15rem; padding: .4rem; }
    .works-lightbox__control { width: 2rem; height: 2rem; }
    .works-lightbox__image { max-width: 74vw; }
}
@media (prefers-reduced-motion: reduce) {
    .work-preview-card__image img, .works-gallery__item img, .works-cta { transition: none; }
}

/* Navigation and useful context for work examples. */
.works-breadcrumbs { display: flex; flex-wrap: wrap; gap: .7rem; padding-top: 1.5rem; color: #a6a6b3; font-size: .85rem; }
.works-breadcrumbs a, .works-story__service, .works-page__useful-links a { color: #c9b5ff; text-underline-offset: .25em; }
.works-story__product { display: block; margin-bottom: .8rem; font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.works-facts__hint { color: #a6a6b3; font-size: .8rem; font-weight: 400; }
.works-story__service { display: block; margin-top: 1rem; font-size: .9rem; line-height: 1.5; }
.works-page__useful-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1.7rem; line-height: 1.5; }