:root {
  --bone-v6: #e5e7eb;
  --ink-v6: #222222;
  --blue-v6: #075cff;
  --cyan-v6: #00eefa;
  --orange-v6: #ff4f00;
  --pink-v6: #fd95ec;
  --yellow-v6: #f0fc3a;
}

body.works-page {
  background: var(--bone-v6) !important;
  color: var(--ink-v6) !important;
}

body.works-gallery-page :where(a, button, span, div),
body.work-detail-page :where(a, button, span, div, p, h1, h2, h3),
body.contact-page :where(a, button, span, div, p, h1, h2, h3, label, li) {
  color: var(--ink-v6) !important;
}

body.works-gallery-page,
body.work-detail-page {
  background: var(--bone-v6) !important;
}

body.works-page .works-header {
  background: var(--bone-v6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .22);
}

body.works-page .works-header--no-brand {
  grid-template-columns: 1fr 1fr;
}

body.works-page .works-header--no-brand > a:last-child {
  justify-self: end;
}

.page-language {
  position: fixed;
  z-index: 1200;
  top: 27px;
  right: clamp(132px, 11vw, 176px);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1 Arial, sans-serif;
}

.page-language button {
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 5px 2px;
  background: transparent;
  cursor: pointer;
  outline: 0;
}

.page-language button[aria-pressed='true'] {
  border-bottom-color: var(--cyan-v6);
}

body.works-gallery-page .gallery-shell {
  padding-top: 46px;
}

body.works-gallery-page .gallery-filters {
  gap: clamp(20px, 3vw, 46px);
  background: var(--bone-v6) !important;
  border-bottom: 1px solid #c7c7c7 !important;
}

body.works-gallery-page .gallery-filters button,
body.works-gallery-page .gallery-filters button[aria-pressed='false'] {
  position: relative;
  z-index: 0;
  isolation: isolate;
  border: 0 !important;
  padding: 11px 2px 13px;
  background: transparent !important;
  color: #343434 !important;
  font-size: 12px;
}

body.works-gallery-page .gallery-filters button::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -3px;
  bottom: 10px;
  height: 7px;
  background: var(--cyan-v6);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease, opacity .2s ease;
}

body.works-gallery-page .gallery-filters button[aria-pressed='true'] {
  border: 0 !important;
  color: var(--ink-v6) !important;
  font-weight: 700;
}

body.works-gallery-page .gallery-filters button[aria-pressed='true']::after {
  opacity: .78;
  transform: scaleX(1);
}

body.works-gallery-page .collection-tabs {
  display: flex;
  gap: clamp(22px, 4vw, 58px);
  max-width: none;
  margin: 8px 0 24px;
}

body.works-gallery-page .collection-tabs button,
body.works-gallery-page .collection-tabs button:first-child,
body.works-gallery-page .collection-tabs button:last-child {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: auto;
  min-width: 0;
  padding: 8px 2px 10px;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-v6) !important;
  font-size: clamp(15px, 1.5vw, 21px);
  opacity: .48;
  box-shadow: none;
}

body.works-gallery-page .collection-tabs button::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -4px;
  right: -4px;
  bottom: 9px;
  height: 9px;
  background: var(--cyan-v6);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease, opacity .2s ease;
}

body.works-gallery-page .collection-tabs button[aria-selected='true'] {
  opacity: 1;
  box-shadow: none;
}

body.works-gallery-page .collection-tabs button[aria-selected='true']::after {
  opacity: .78;
  transform: scaleX(1);
}

body.works-gallery-page .works-legal-note {
  display: block;
  max-width: 900px;
  margin: 78px 0 0 auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .42);
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: rgba(0, 0, 0, .64);
}

body.contact-page .contact-main-page {
  margin-top: 48px;
}

body.contact-page .contact-intro,
body.contact-page .contact-form-wrap {
  position: relative;
  z-index: 2;
}

body.contact-page .contact-form-wrap {
  padding: clamp(26px, 4vw, 52px);
  border: 2px solid var(--ink-v6);
  background: color-mix(in srgb, white 87%, var(--bone-v6));
  box-shadow: 12px 12px 0 var(--blue-v6);
}

body.contact-page .form-primary {
  background: var(--ink-v6) !important;
}

body.contact-page .form-primary span {
  color: var(--pink-v6) !important;
}

@media (max-width: 640px) {
  .page-language { top: 22px; right: 112px; font-size: 11px; }
  body.works-gallery-page .gallery-shell { padding-top: 60px; }
  body.contact-page .contact-main-page { margin-top: 68px; }
  body.contact-page .contact-form-wrap { padding: 24px 18px; box-shadow: 7px 7px 0 var(--blue-v6); }
}


/* PHASE 6.5 — standalone Works pages back to white. */
body.works-gallery-page,
body.work-detail-page {
  background: #ffffff !important;
}

body.works-gallery-page .works-header,
body.work-detail-page .works-header,
body.works-gallery-page .gallery-filters,
body.works-gallery-page .collection-tabs,
body.works-gallery-page .gallery-shell {
  background: #ffffff !important;
}