* { box-sizing: border-box; }
:root {
  --gap: 4px; --page: #000; --panel: #1b1b1b; --text: #eee; --panel-text: #eee; --muted: #888;
  --subtle: #777; --active: #fff; --hover: #999; --visual-empty: #222; --icon-filter: invert(1); --panel-filter: none; --pfp-color: 0, 255, 26;
}
html { min-height: 100%; overflow-y: scroll; scrollbar-gutter: stable; }
body { min-height: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--page); color: var(--text); font: 400 0.8rem/1.547 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.039em;
  transition: background-color 320ms ease, color 320ms ease;
}
.auth-gate {
  position: fixed; z-index: 1000; inset: 0; display: grid; padding: 8px 10px; place-items: center; background: rgba(244, 244, 242, 0.18); color: #050505;
  backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05);
  pointer-events: none;
  opacity: 1; visibility: visible; transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), visibility 520ms;
}
html.is-authorized .auth-gate { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-form {
  display: grid; width: max(240px, calc((100vw - 40px) / 6)); max-width: 340px; padding: 5px 6px; border-radius: 3px; background: rgba(232, 232, 230, 0.82); color: #050505; text-align: center;
  row-gap: 4px;
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  pointer-events: auto;
  animation: auth-reveal 700ms cubic-bezier(.16, 1, .3, 1) both;
}
.auth-title { margin-bottom: 0; }
.auth-label { font-size: 0.805em; opacity: 0.6; }
.auth-input {
  width: 100%; margin: 0; padding: 2px 0; border: 0; border-bottom: 1px solid #555; border-radius: 0;
  outline: 0; background: transparent; color: #050505; font: inherit; text-align: center; transition: border-color 240ms ease;
}
.auth-input:focus { border-color: #050505; }
.auth-submit {
  justify-self: center; padding: 0; border: 0; background: transparent; color: #888;
  transition: color 240ms ease;
}
.auth-submit:hover, .auth-submit:focus-visible { color: #050505; }
.auth-message:empty { display: none; }
.auth-message { margin: 0; color: #888; font-size: 0.805em; }
.auth-error { animation: auth-shake 360ms cubic-bezier(.16, 1, .3, 1); }
@keyframes auth-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-shake { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-5px); } 70% { transform: translateX(3px); } }
body.glass-theme {
  --page: #f4f4f2; --panel: rgba(232, 232, 230, 0.82); --text: #050505; --panel-text: #050505; --muted: rgba(5, 5, 5, 0.62);
  --subtle: rgba(5, 5, 5, 0.48); --active: #050505; --hover: #000; --visual-empty: #ececea; --icon-filter: none; --panel-filter: blur(18px) saturate(1.1); --pfp-color: 0, 255, 26;
}
a { color: inherit; text-decoration: none; }
a:hover, button:hover { color: var(--hover); }
button { color: inherit; font: inherit; font-weight: 400; cursor: pointer; }
p, h1, h2 { margin: 0; font-size: inherit; font-weight: 400; }

.layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  min-height: calc(100vh - 35px);
  padding: 8px 6px 0;
}
.column { min-width: 0; align-self: start; overflow: visible; }
.intro-column, .projects-column, .details-column, .info-column, .services-column, .contacts-column, .team-column, .team-about-column, .team-pfp-column, .gallery-column { grid-row: 1; }
.intro-column { grid-column: 1; }
.projects-column, .info-column, .team-column { grid-column: 2; }
.details-column, .services-column, .team-about-column { grid-column: 3; }
.contacts-column, .team-pfp-column { grid-column: 4; }
.gallery-column { grid-column: 2 / -1; }
.projects-column, .details-column, .info-column, .services-column, .contacts-column, .team-column, .team-about-column, .team-pfp-column {
  position: relative; z-index: 5; overflow: hidden; border-radius: 3px; background: var(--panel); color: var(--panel-text); padding: 5px 6px;
  backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter);
  transform: translateZ(0); transition: background-color 320ms ease, backdrop-filter 320ms ease;
}
.intro-column { position: sticky; z-index: 5; top: 8px; }
.projects-column, .details-column { position: sticky; z-index: 5; top: 8px; }
.identity-name { display: flex; gap: 3px; align-items: center; }
.brand-icon-frame { display: block; width: 24px; height: 13px; overflow: hidden; flex: 0 0 auto; padding: 0; border: 0; background: transparent; transform: translateY(-2px); }
.brand-icon { display: block; width: 24px; height: 24px; filter: var(--icon-filter); transform: translateY(-5px); transition: filter 320ms ease; }
.identity { display: block; padding: 5px 6px; }
.identity h1 { margin-top: 1px; }
.tabs {
  display: grid; margin-top: 26px; border-radius: 3px; background: var(--panel); color: var(--panel-text); padding: 5px 6px;
  backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter);
  transition: background-color 320ms ease, backdrop-filter 320ms ease;
}
.tab {
  padding: 0; border: 0; background: transparent; color: var(--subtle); text-align: left;
  font-size: inherit; line-height: inherit;
  transition: color 240ms ease, padding-left 320ms cubic-bezier(.16, 1, .3, 1);
}
.tab.active { padding-left: 5px; color: var(--active); }
.tab::before { content: ""; }
.tab.active::before, .project-button.active::before, .team-button.active::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.36em; border-radius: 50%; background: #00ff1a; vertical-align: middle; transform: translateY(-0.04em);
}
.label { margin-bottom: 4px; color: inherit; font-size: 0.805em; opacity: 0.6; }

#project-list { display: grid; }
.mobile-client-slider { display: none; }
.team-list { display: grid; }
.project-button, .team-button {
  padding: 1px 0; border: 0; background: transparent; color: var(--subtle); text-align: left;
  transition: color 240ms ease, padding-left 320ms cubic-bezier(.16, 1, .3, 1);
}
.project-button.active, .team-button.active { padding-left: 5px; color: var(--active); }

dl {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; row-gap: 5px; align-items: baseline; margin: 0;
}
dt, dd { min-height: 1.547em; margin: 0 0 2px; font-weight: 400; line-height: inherit; }
dt { font-size: 0.805em; opacity: 0.6; }
dd a { color: inherit; overflow-wrap: anywhere; text-decoration: none; text-underline-offset: 0.12em; }
dd a.has-link { text-decoration: underline; }
dd a.is-disabled-link { cursor: default; pointer-events: none; }

.gallery-column { position: relative; z-index: 1; align-self: start; overflow: visible; border-radius: 3px; background: transparent; }
#gallery { display: block; }
.project-group {
  position: relative; overflow: hidden; border-radius: 3px;
  background: transparent; isolation: isolate; scroll-margin-top: 0;
}
.project-group + .project-group { margin-top: var(--gap); }
.project-composition {
  position: relative; height: calc(var(--composition-height) * var(--composition-scale, 1) + 24px); overflow: hidden;
  content-visibility: auto; contain-intrinsic-size: calc(var(--composition-height) * var(--composition-scale, 1) + 24px);
}
.project-composition + .project-composition { margin-top: var(--gap); }
.visual {
  position: absolute; z-index: var(--z); top: var(--y); left: var(--x); display: block;
  width: calc(var(--w) * var(--visual-scale, 0.65)); overflow: visible;
  padding: 0; border: 0; color: inherit; text-align: left;
  background: transparent; translate: 0 var(--parallax-y, 0px); will-change: translate;
  transform-origin: center;
  transition: opacity 420ms ease;
  animation: reveal-image 700ms var(--delay) cubic-bezier(.16, 1, .3, 1) both;
}
.visual-box {
  position: relative; display: block; width: 100%; aspect-ratio: var(--ratio); overflow: hidden; border-radius: 3px 3px 0 0;
  background: var(--visual-empty); transform-origin: center bottom;
  transition: transform 1267ms cubic-bezier(.45, 0, .2, 1);
}
.visual-box::before {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 3px 3px 0 0; background: var(--visual-empty);
  transform-origin: center; transition: transform 1267ms cubic-bezier(.45, 0, .2, 1);
}
.visual-lime .visual-box, .visual-lime .visual-box::before { background: #c7ff54; }
.visual-blue .visual-box, .visual-blue .visual-box::before { background: #8fd8ff; }
.visual-white .visual-box, .visual-white .visual-box::before { background: #f4f4ef; }
.visual-img, .visual-video,
.visual-img .visual-box, .visual-video .visual-box,
.visual-img .visual-box::before, .visual-video .visual-box::before { background: transparent; }
.visual:hover { opacity: 1; }
.visual:hover .visual-box { transform: scale(1.15); }
.visual-media {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px 3px 0 0;
  pointer-events: none; filter: blur(14px); transform: scale(1.055); opacity: 0.86;
  transform-origin: center;
  transition: filter 700ms cubic-bezier(.16, 1, .3, 1), transform 1267ms cubic-bezier(.45, 0, .2, 1), opacity 520ms ease;
}
.visual-media.is-loaded { filter: blur(0); transform: scale(1); opacity: 1; }
.video-cover {
  position: absolute; z-index: 3; inset: 0; display: block; border-radius: 3px 3px 0 0;
  background: var(--visual-empty); pointer-events: none; opacity: 1;
  transition: opacity 280ms ease, visibility 280ms;
}
.visual-video.video-frame-ready .video-cover { opacity: 0; visibility: hidden; }
.visual-video:not(.video-frame-ready) video { visibility: hidden; }
.visual-video video::-webkit-media-controls,
.visual-video video::-webkit-media-controls-panel,
.visual-video video::-webkit-media-controls-play-button,
.visual-video video::-webkit-media-controls-start-playback-button,
.visual-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; pointer-events: none; }
.visual-tags {
  position: relative; z-index: 2; display: block; width: 100%; margin-top: 0;
  min-height: 14px; overflow: hidden; padding: 2px 4px; border-radius: 0 0 3px 3px; background: rgba(27, 27, 27, 0.72); color: var(--panel-text);
  font-size: 0.805em; line-height: 1.1; opacity: 1;
  pointer-events: none; text-overflow: ellipsis; white-space: nowrap;
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transform-origin: center top;
  transition: transform 1267ms cubic-bezier(.45, 0, .2, 1);
}
.visual-tags-text {
  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform-origin: left center;
  transition: transform 1267ms cubic-bezier(.45, 0, .2, 1);
}
.visual:hover .visual-tags { transform: scaleX(1.15); }
.visual:hover .visual-tags-text { transform: scaleX(0.869565); }
.visual-tags-shift-left .visual-tags { text-align: left; padding-right: 28px; }
.visual-tags-shift-right .visual-tags { text-align: right; padding-left: 28px; }
.visual-tags-shift-right .visual-tags-text { transform-origin: right center; }
body.glass-theme .visual-tags {
  background: var(--panel); color: var(--panel-text);
  backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter);
}
@keyframes reveal-image { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }

.info-column p:not(.label) { margin-bottom: 14px; }
.team-about-column p:not(.label) { margin-bottom: 14px; }
.team-pfp {
  position: relative; display: grid; width: 100%; aspect-ratio: 1;
  overflow: hidden; place-items: center; border-radius: 1px; background: transparent; color: var(--subtle);
}
.team-pfp-column { background: transparent; color: var(--text); }
.team-pfp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.team-pfp-fallback { position: relative; z-index: 1; }
.team-pfp.loaded .team-pfp-fallback { display: none; }
.services-column h2 { margin-top: 12px; }
.services-column h2:first-of-type { margin-top: 0; }
.services-list { color: inherit; }
.contacts-column ul { margin: 0; padding: 0; list-style: none; }
.contacts-column a { color: var(--subtle); transition: color 240ms ease, padding-left 320ms cubic-bezier(.16, 1, .3, 1); }
.contacts-column a:hover { padding-left: 5px; }

.site-footer {
  position: fixed; z-index: 50; right: 10px; bottom: 6px; left: 10px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 2px 6px; border-radius: 3px;
  color: var(--panel-text); background: var(--panel);
  backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter);
  transition: background-color 320ms ease, color 320ms ease, backdrop-filter 320ms ease;
}
.disclaimer-toggle, .disclaimer-close, .footer-up { padding: 0; border: 0; background: transparent; color: inherit; }
.disclaimer-toggle { justify-self: start; }
.footer-up {
  justify-self: center; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms ease;
}
body.footer-up-visible .footer-up { opacity: 1; visibility: visible; pointer-events: auto; }
.help-toggle { display: inline-flex; gap: 4px; align-items: center; justify-self: end; align-self: center; margin-left: 0; padding: 0; border: 0; background: transparent; }
.help-toggle img { display: block; width: auto; height: 0.86em; max-height: 0.86em; object-fit: contain; filter: var(--icon-filter); transform: none; }
.disclaimer-modal {
  position: fixed; z-index: 900; inset: 0; display: grid; padding: 10px; place-items: center;
  background: transparent; backdrop-filter: blur(20px) saturate(0.75); -webkit-backdrop-filter: blur(20px) saturate(0.75);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), visibility 420ms;
}
.disclaimer-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.disclaimer-panel {
  position: relative; display: grid; width: min(560px, 100%); row-gap: 16px; padding: 12px 14px 14px;
  border-radius: 3px; background: var(--panel); color: var(--panel-text);
  backdrop-filter: var(--panel-filter); -webkit-backdrop-filter: var(--panel-filter);
  animation: auth-reveal 520ms cubic-bezier(.16, 1, .3, 1) both;
}
.disclaimer-header { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.disclaimer-header .label { margin: 0; }
.disclaimer-content { display: grid; width: 100%; row-gap: 10px; }
.disclaimer-content p { text-align: left; line-height: 1.55; }
.disclaimer-panel a { color: var(--muted); overflow-wrap: anywhere; }
.disclaimer-close { flex: 0 0 auto; color: var(--muted); font: inherit; font-size: 0.805em; line-height: inherit; }

@media (max-width: 700px) {
  .auth-gate {
    background: #000;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .auth-form {
    width: calc(100% - 20px); max-width: 340px; background: #1b1b1b;
    backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
  }
  .video-cover { background: #111; transition: none; }
  .layout { display: block; height: auto; padding-bottom: 44px; }
  .column { margin-bottom: var(--gap); }
  .intro-column, .projects-column { position: relative; top: auto; }
  .details-column { position: sticky; z-index: 12; top: 8px; }
  .details-column.client-slider-visible { touch-action: none; }
  .intro-column, .projects-column, .details-column, .info-column, .services-column, .contacts-column, .team-column, .team-about-column, .team-pfp-column { min-height: auto; padding: 5px 6px; }
  .intro-column { padding: 0; }
  .details-column dl {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) 20px minmax(0, auto);
    row-gap: 8px;
    transition: grid-template-rows 360ms cubic-bezier(.16, 1, .3, 1);
    will-change: grid-template-rows;
  }
  .details-column dd a.has-link { text-decoration: none; }
  .team-pfp-column { padding-top: 0; }
  .team-pfp { width: 80%; margin: -4px auto 0; }
  .project-button, .team-button { padding-top: 0; padding-bottom: 0; }
  #meta-client-label { align-self: stretch; display: flex; align-items: center; line-height: 20px; }
  .meta-client {
    position: relative; min-width: 0; height: 100%; overflow: hidden;
  }
  .meta-client > #meta-url {
    position: absolute; inset: 0; display: flex; align-items: center;
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 220ms;
  }
  .mobile-client-slider {
    position: absolute; top: 50%; right: 0; left: 0; display: block; width: 100%; height: 46px; overflow: hidden;
    padding: 13px 0; gap: 0; --client-picker-index: 0;
    overscroll-behavior-y: contain; touch-action: none;
    scrollbar-width: none; user-select: none; -webkit-user-select: none; mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%);
    transition: opacity 180ms ease, visibility 220ms;
  }
  .mobile-client-slider::-webkit-scrollbar { display: none; }
  .details-column.client-slider-visible .meta-client > #meta-url {
    opacity: 0; visibility: hidden; transform: translateY(-3px);
  }
  .details-column.client-slider-visible #meta-client-label {
    align-self: stretch; display: flex; align-items: center; line-height: 20px;
  }
  .details-column.client-slider-visible dl { grid-template-rows: minmax(0, auto) 46px minmax(0, auto); }
  .details-column.client-slider-visible .mobile-client-slider {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%);
  }
  .client-slider-button {
    position: absolute; top: 50%; left: 0; width: 100%; min-height: 20px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--panel-text); opacity: 0.22; text-align: left;
    line-height: 20px;
    white-space: nowrap;
    transform: translate3d(0, calc((var(--project-index) - var(--client-picker-index)) * 21px - 50%), 0);
    will-change: transform, opacity;
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1), color 320ms ease, opacity 420ms cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-client-slider.is-instant .client-slider-button { transition-duration: 0ms; }
  .client-slider-button.active { color: var(--active); opacity: 1; }
  .tabs { margin-top: 20px; }
  .gallery-column { position: relative; z-index: auto; top: auto; right: auto; left: auto; max-height: none; }
  .visual { --visual-scale: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .visual:focus, .visual:focus-visible, .visual-lightbox:focus, .visual-lightbox:focus-visible { outline: 0; }
  .visual-source-expanded { opacity: 0; transition-duration: 80ms; }
  .visual-lightbox-backdrop {
    position: fixed; z-index: 950; inset: 0; display: block; padding: 0; border: 0;
    background: transparent; opacity: 0; pointer-events: auto;
    backdrop-filter: blur(20px) saturate(0.75); -webkit-backdrop-filter: blur(20px) saturate(0.75);
    transition: opacity 420ms cubic-bezier(.16, 1, .3, 1);
  }
  .visual-lightbox-backdrop.is-open { opacity: 1; }
  .visual-lightbox {
    position: fixed; z-index: 960; top: 0; left: 0; display: block;
    width: var(--overlay-w); height: var(--overlay-h); padding: 0; border: 0; border-radius: 3px; outline: 0; overflow: hidden;
    background: transparent; box-shadow: none; color: #fff; cursor: zoom-out;
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    will-change: transform, width, height;
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1), width 520ms cubic-bezier(.16, 1, .3, 1), height 520ms cubic-bezier(.16, 1, .3, 1), opacity 360ms ease, background 260ms ease;
  }
  .visual-lightbox.visual-lightbox-closing {
    opacity: 0; background: transparent;
  }
  .visual-lightbox .visual-box {
    height: calc(100% - 18px); aspect-ratio: auto; border: 0; border-radius: 3px 3px 0 0; outline: 0; transform: none !important;
    background: transparent; box-shadow: none;
  }
  .visual-lightbox .visual-media {
    object-fit: cover; border: 0; border-radius: 3px 3px 0 0; outline: 0; box-shadow: none; pointer-events: none;
  }
  .visual-lightbox .video-cover { display: none; }
  .visual-lightbox .visual-tags {
    width: 100%; min-height: 18px; border: 0; outline: 0; box-shadow: none; transform: none !important; text-align: left;
  }
  .visual-lightbox .visual-tags-text { transform: none !important; }
  .project-composition { --composition-scale: 0.86; }
  .project-composition + .project-composition { margin-top: -56px; }
  .project-group + .project-group { margin-top: clamp(180px, 28vh, 280px); }
  .site-footer { font-size: inherit; }
  .disclaimer-modal { padding: 10px; align-items: center; }
  .disclaimer-panel { width: 100%; row-gap: 12px; padding: 10px; }
  .disclaimer-content { row-gap: 8px; }
}