/* pages.css — Inner pages: page heroes, About / Services / Work, category pages, contact. */

/* ---------- Page heroes: a short film plays once on opening, then holds ---------- */
.page-head--art { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(48rem, calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px))); padding-block: 9rem 4.5rem; }
.page-head--art > .wrap { position: relative; }
.page-head__media { position: absolute; inset: -6% 0 0; z-index: -1; transform: translate3d(0, var(--hy, 0px), 0); }
@media (min-width: 1024px) { .page-head__media { left: 18%; right: -18%; } }
.page-head__media img, .page-head__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; }
.page-head__media video, .page-head__media img { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.page-head__media.has-video video, .page-head__media.show-still img { opacity: 1; }
.page-head__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(var(--scrim) / .94) 0%, rgb(var(--scrim) / .7) 34%, rgb(var(--scrim) / .05) 72%),
  linear-gradient(0deg, rgb(var(--scrim)) 0%, rgb(var(--scrim) / 0) 30%),
  linear-gradient(180deg, rgb(var(--scrim) / .55) 0%, rgb(var(--scrim) / 0) 20%); }
@media (max-width: 767.98px) {
  .page-head__media img, .page-head__media video { object-position: 80% 55%; }
  .page-head__media::after { background: linear-gradient(0deg, rgb(var(--scrim)) 10%, rgb(var(--scrim) / .6) 55%, rgb(var(--scrim) / .3) 100%); }
}
/* Art: rendered stills, drifting slowly as you scroll */
.art { position: relative; overflow: hidden; margin: 0; background: var(--layer); }
.art > img { display: block; width: 100%; height: 116%; margin-top: -8%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); }
.art--wide { aspect-ratio: 16 / 7; margin-bottom: 7rem; border-radius: var(--r-stage); }
@media (max-width: 767.98px) { .art--wide { aspect-ratio: 4 / 3; margin-bottom: 5rem; } }
.art--step { aspect-ratio: 4 / 5; margin-bottom: 1.5rem; border-radius: var(--r-card); }
.cols--4 .col:has(.art) { padding-top: 0; border-top: 0; }
.svc-layout { display: grid; gap: 3rem 4rem; }
.svc-layout__art { display: none; }
@media (min-width: 1024px) { .svc-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .svc-layout__art { display: block; } .svc-layout .menu__art { display: none; } }
.svc-art { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 2rem); overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-stage); background: var(--layer); }
.svc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity 1.1s var(--ease-out), scale 2.6s var(--ease-out); }
.svc-art img.is-on { opacity: 1; scale: 1; }
.menu__art { aspect-ratio: 16 / 10; margin: 1.5rem 0 0; border-radius: var(--r-card); }
.menu__art > img { height: 100%; margin-top: 0; }
.svc-layout .menu--detail .menu__head { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.svc-layout .menu--detail .menu__head .add { grid-column: 3; }
.svc-layout .menu--detail .menu__short { grid-column: 2 / -1; }
@media (min-width: 900px) { .svc-layout .menu__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 4rem; } .svc-layout .menu__more > div:last-child { grid-column: 1 / -1; } }
/* ---------- Inner pages ---------- */
.page-head { padding-block: 6rem 4rem; }
@media (min-width: 1024px) { .page-head { padding-block: 9rem 5rem; } }
.split { display: grid; gap: 2rem 5rem; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cols { display: grid; column-gap: 2rem; }
@media (min-width: 640px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* desktop: one-row collections get as many equal columns as they have items (up to what fits) — remove or add one and the row re-balances */
@media (min-width: 1024px) { .cols--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.col { padding-block: 1.75rem 2.25rem; border-top: 1px solid var(--line); }
.col__n { display: block; margin-bottom: 2.5rem; font-size: .8125rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.col__title { margin-bottom: .5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-strong); }
.col__body { font-size: .9375rem; color: var(--fg-soft); }
.people { display: grid; gap: 3rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; }
@media (min-width: 1024px) { .people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.person__disc { display: grid; place-items: center; width: 100%; max-width: 10rem; aspect-ratio: 1; margin-bottom: 1.25rem; border-radius: var(--r-pill); background: radial-gradient(circle at 32% 26%, var(--disc-a), var(--disc-b) 72%); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; color: var(--fg-soft); }
.person__name { font-weight: 500; color: var(--fg-strong); }
.person__role { font-size: .875rem; color: var(--fg-muted); }
.split__intro { max-width: 32rem; margin: 1rem 0 2rem; color: var(--fg-soft); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills li { padding: .5rem .9375rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; color: var(--fg-soft); }
.clients2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .clients2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clients2 li { padding-block: 1.75rem; border-top: 1px solid var(--line); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-muted); transition: color .35s; }
.clients2 li:hover { color: var(--fg-strong); }
/* ---------- Work: index + grid ---------- */
.worktools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.segs { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 1.5rem; box-shadow: inset 0 0 0 1px var(--line); }
.segs button { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9375rem; border-radius: var(--r-pill); font-size: .8125rem; line-height: 1.25rem; font-weight: 500; color: var(--fg-muted); transition: color .25s, background-color .25s; }
.segs button:hover { color: var(--fg-strong); }
.segs button[aria-pressed="true"] { background: var(--fg-strong); color: var(--bg); }
.segs__n { font-size: .6875rem; opacity: .6; font-variant-numeric: tabular-nums; }
.catnote { display: grid; gap: 1.25rem 3rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .catnote { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.catnote__kind { display: block; margin-bottom: .5rem; font-size: .8125rem; color: var(--fg-muted); }
.catnote p { max-width: 42rem; color: var(--fg-soft); }
.catnote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.wrow__link { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1.25rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .wrow__link { grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) 3.5rem 1.25rem; } }
.wrow__n { font-size: .8125rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.wrow__title { font-size: clamp(1.25rem, 2.2vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: var(--fg-strong); transition: color .35s, transform .35s var(--ease-in-out); }
.wrow__client, .wrow__cat { font-size: .875rem; color: var(--fg-muted); }
.wrow__year { font-size: .875rem; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.wrow__arrow { color: var(--fg-strong); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease-in-out); }
@media (max-width: 899.98px) { .wrow__client { grid-column: 2; grid-row: 2; } .wrow__cat, .wrow__arrow { display: none; } .wrow__year { grid-column: 3; grid-row: 1; } }
.windex:hover .wrow__link:not(:hover) .wrow__title { color: var(--fg-dim); }
.wrow__link:hover .wrow__title, .wrow__link:focus-visible .wrow__title { transform: translateX(.5rem); }
.wrow__link:hover .wrow__arrow, .wrow__link:focus-visible .wrow__arrow { opacity: 1; transform: none; }
.wgrid { display: grid; gap: 3rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wtile { display: grid; gap: 1rem; }
.wtile__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--layer); --zs: 1; }
.wtile__media > img, .wtile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wtile__media > img { scale: var(--zs); transition: scale 1.2s var(--ease-out); }
.wtile__media video { opacity: 0; transition: opacity .5s; }
.wtile__media.has-film video { opacity: 1; }
.wtile:hover .wtile__media, .wtile:focus-visible .wtile__media { --zs: 1.06; }
.wtile__title { display: block; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-strong); }
.wtile__meta { display: block; font-size: .8125rem; color: var(--fg-muted); }
/* ---------- Category pages ---------- */
.kind { display: flex; align-items: center; gap: .75rem; margin: 2.5rem 0 1.25rem; font-size: .8125rem; color: var(--fg-muted); }
.kind__n { color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { padding: .3125rem .75rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .8125rem; color: var(--fg-soft); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--fg-muted); transition: color .25s; }
.text-link:hover { color: var(--fg-strong); }
.case-layout { display: grid; gap: 2rem 5rem; }
@media (min-width: 1024px) { .case-layout { grid-template-columns: 13rem minmax(0, 1fr); } }
.case-index { align-self: start; }
@media (min-width: 1024px) { .case-index { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 2rem); } }
.case-index a { position: relative; display: flex; gap: .875rem; padding-block: .5rem; font-size: .9375rem; color: var(--fg-muted); transition: color .3s, padding-left .35s var(--ease-in-out); }
.case-index a:hover { color: var(--fg-strong); }
.case-index a[aria-current] { padding-left: 1.25rem; color: var(--fg-strong); }
.case-index a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--fg-strong); transition: width .35s var(--ease-in-out); }
.case-index a[aria-current]::before { width: .75rem; }
.case-index__n { font-size: .75rem; line-height: 1.5rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.case { display: grid; gap: 2rem; padding-bottom: 5rem; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 1.5rem); }
.case + .case { padding-top: 5rem; border-top: 1px solid var(--line); }
.film { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-stage); background: var(--layer); cursor: pointer; }
.film > img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { opacity: 0; transition: opacity .5s; }
.film.has-film video { opacity: 1; }
.film__play {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: .625rem; padding: .375rem 1rem .375rem .375rem;
  border-radius: var(--r-pill); background: rgb(10 10 10 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  font-size: .875rem; font-weight: 500; color: #FFFFFF;
}
.film__play-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill); background: #FFFFFF; color: #0A0A0A; }
.film-status { min-height: 1.25rem; margin-top: -1.25rem; font-size: .8125rem; color: var(--fg-muted); }
.case__body { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 1024px) { .case__body { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.case__number { margin-bottom: .75rem; font-size: .8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.case__title { margin-bottom: .5rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--fg-strong); }
.case__meta { font-size: .875rem; color: var(--fg-muted); }
.facts { display: grid; gap: 1.5rem; }
.facts dt { margin-bottom: .375rem; font-size: .8125rem; font-weight: 500; color: var(--fg-muted); }
.facts dd { font-size: 1.0625rem; line-height: 1.7; color: var(--fg-soft); }
.case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.next2 { position: relative; display: grid; gap: .75rem; padding-block: 3.5rem 1rem; border-top: 1px solid var(--line); }
.next2__label { font-size: .8125rem; color: var(--fg-muted); }
.next2__title { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(2.25rem, 6vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--fg-muted); transition: color .4s; }
.next2:hover .next2__title, .next2:focus-visible .next2__title { color: var(--fg-strong); }
.next2__title .icon { display: inline-block; width: .5em; height: .5em; margin-left: .3em; vertical-align: .05em; transition: transform .5s var(--ease-out); }
.next2:hover .next2__title .icon { transform: translateX(8px); }
/* ---------- Contact ---------- */
.contact { display: grid; gap: 3.5rem 5rem; padding-block: 6rem 7rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding-block: 9rem 9rem; } }
.contact .page-title { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }
.contact .lead { margin-bottom: 3rem; }
.next-steps { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.next-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
.next-steps strong { display: block; font-weight: 500; color: var(--fg-strong); }
.next-steps li > span:last-child { color: var(--fg-muted); }
.num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .75rem; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.channels { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.panel { position: relative; padding: 1.5rem; border-radius: var(--r-stage); background: var(--layer); box-shadow: inset 0 0 0 1px var(--hairline); }
@media (min-width: 1024px) { .panel { padding: 2.75rem; } }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .5rem; margin-top: 1.5rem; }
.field-row .field { margin-top: 0; }
.field__label { font-size: .8125rem; font-weight: 500; color: var(--fg-strong); }
.field__hint { font-weight: 400; color: var(--fg-muted); }
.input { width: 100%; padding: .8125rem 1rem; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--fg-strong); font: inherit; font-size: .9375rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--fg-muted); }
textarea.input { min-height: 9rem; resize: vertical; }
.input:hover { border-color: var(--fg-muted); }
.input:focus { outline: none; border-color: var(--fg-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-strong) 14%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--danger-text); }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice__label { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9375rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .8125rem; font-weight: 500; color: var(--fg-soft); pointer-events: none; transition: background-color .25s, color .25s, box-shadow .25s; }
.choice:hover .choice__label { box-shadow: inset 0 0 0 1px var(--fg-muted); color: var(--fg-strong); }
.choice input:checked + .choice__label { background: var(--fg-strong); color: var(--bg); box-shadow: none; }
.choice input:focus-visible + .choice__label { outline: 2px solid var(--focus); outline-offset: 2px; }
.ref { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .375rem .375rem .375rem .875rem; border-radius: var(--r-pill); background: rgb(248 222 92 / .1); box-shadow: inset 0 0 0 1px rgb(248 222 92 / .35); font-size: .8125rem; color: var(--fg-soft); }
.ref strong { font-weight: 500; color: var(--fg-strong); }
.ref__x { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill); color: var(--fg-soft); }
.ref__x:hover { background: var(--tint); color: var(--fg-strong); }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.brief-note { font-size: .8125rem; color: var(--fg-muted); }
.form-fail { margin-top: 1rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: people never see it, bots fill it */
.success { display: grid; gap: 1.25rem; justify-items: start; padding-block: 1rem; }
.success__badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); }
.success__badge .icon { width: 1.375rem; height: 1.375rem; }
.success__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: var(--fg-strong); }
.success__body { color: var(--fg-soft); }
.success__body strong { font-weight: 500; color: var(--fg-strong); }
.success__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }