:root {
  --black: #050505;
  --obsidian: #0d0d0d;
  --soft: #fafafa;
  --paper: #f4f4f1;
  --blue: #0066ff;
  --yellow: #ffc300;
  --muted: #6f6f6f;
  --line-dark: rgba(250, 250, 250, 0.16);
  --line-light: rgba(5, 5, 5, 0.18);
  --page: 1440px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--black); }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--black);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.wrap {
  width: min(calc(100% - 80px), var(--page));
  margin-inline: auto;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 5, 0.96);
  border-bottom: 1px solid var(--line-dark);
  color: var(--soft);
  backdrop-filter: blur(18px);
}

.nav-inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  width: 190px;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 100%;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 42px;
}

.nav-links a,
.nav-contact {
  position: relative;
  font-size: 0.87rem;
  font-weight: 650;
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-contact {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  padding-left: 26px;
  border-left: 1px solid var(--line-dark);
}

.nav-contact span { color: var(--blue); font-size: 1.3rem; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.page-intro {
  padding: 84px 0 74px;
  background: var(--black);
  color: var(--soft);
  border-bottom: 1px solid var(--line-dark);
}

.page-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.55fr);
  gap: 80px;
  align-items: end;
}

.page-intro h1 {
  max-width: 820px;
  margin: 0;
  font-size: 4.8rem;
  font-weight: 660;
  line-height: 0.98;
  letter-spacing: 0;
}

.page-intro h1 em { font-weight: 350; }

.page-intro-copy {
  margin: 0;
  color: #bdbdbd;
  font-size: 1.02rem;
}

.work-page { padding: 74px 0 110px; }

.work-page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 32px;
}

.work-page-head h2 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0;
}

.work-count {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 18px;
}

.video-card { min-width: 0; scroll-margin-top: 120px; }

.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: #111;
}

.video-shell > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.2, .75, .2, 1);
}

.video-card:hover .video-shell > img { transform: scale(1.04); }

.video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-number,
.video-status {
  position: absolute;
  z-index: 3;
  color: var(--soft);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.video-number { left: 14px; top: 12px; }
.video-status { left: 14px; bottom: 12px; }

.play-mark {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(250, 250, 250, 0.75);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(5, 5, 5, 0.58);
}

.play-mark::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--soft);
}

.video-shell.is-ready { cursor: pointer; }
.video-shell.is-ready:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.video-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  padding-top: 17px;
}

.video-meta h2 {
  margin: 0 0 4px;
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.video-meta p {
  margin: 0;
  color: #595959;
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.video-meta > span { color: var(--blue); font-size: 1.2rem; }

.placeholder-art::before,
.placeholder-art::after {
  content: "";
  position: absolute;
  transition: transform 600ms cubic-bezier(.2, .75, .2, 1);
}

.video-card:hover .placeholder-art::before { transform: translate3d(7px, -7px, 0) rotate(7deg); }
.video-card:hover .placeholder-art::after { transform: translate3d(-7px, 7px, 0) rotate(-7deg); }

.art-04, .art-10 { background: var(--black); }
.art-04::before, .art-10::before { width: 46%; aspect-ratio: 1; border: 18px solid var(--blue); border-radius: 50%; left: 18%; top: 8%; }
.art-04::after, .art-10::after { width: 36%; height: 18px; background: var(--yellow); right: 8%; bottom: 17%; }

.art-05, .art-11 { background: var(--yellow); }
.art-05::before, .art-11::before { width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--black); left: -6%; bottom: -28%; }
.art-05::after, .art-11::after { width: 24%; aspect-ratio: 1; border: 16px solid var(--soft); right: 16%; top: 15%; transform: rotate(12deg); }

.art-06, .art-12 { background: var(--blue); }
.art-06::before, .art-12::before { width: 64%; height: 30%; background: var(--black); right: -6%; top: 16%; transform: rotate(-8deg); }
.art-06::after, .art-12::after { width: 28%; aspect-ratio: 1; border: 14px solid var(--soft); border-radius: 50%; left: 16%; bottom: 12%; }

.art-07 { background: var(--soft); }
.art-07::before { width: 55%; height: 42%; background: var(--black); left: 9%; top: 12%; }
.art-07::after { width: 35%; height: 52%; background: var(--blue); right: 10%; bottom: 8%; }

.art-08 { background: var(--obsidian); }
.art-08::before { width: 70%; height: 10px; background: var(--soft); left: 14%; top: 34%; transform: rotate(-14deg); }
.art-08::after { width: 20%; aspect-ratio: 1; background: var(--yellow); right: 18%; bottom: 18%; }

.art-09 { background: var(--paper); }
.art-09::before { width: 42%; aspect-ratio: 1; border: 20px solid var(--black); border-radius: 50%; right: 10%; top: 8%; }
.art-09::after { width: 54%; height: 22%; background: var(--blue); left: 7%; bottom: 14%; }

.contact-page {
  min-height: calc(100svh - 88px);
  background: var(--black);
  color: var(--soft);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
  gap: 86px;
  align-items: start;
  padding-top: 86px;
  padding-bottom: 100px;
}

.contact-intro {
  position: sticky;
  top: 150px;
}

.contact-intro h1 {
  margin: 0;
  font-size: 4.8rem;
  font-weight: 660;
  line-height: 0.98;
  letter-spacing: 0;
}

.contact-intro h1 em { color: var(--yellow); font-weight: 350; }

.contact-intro > p:not(.eyebrow) {
  max-width: 500px;
  margin: 28px 0 0;
  color: #bdbdbd;
  font-size: 1.04rem;
}

.contact-direct {
  display: inline-block;
  margin-top: 34px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--blue);
  font-weight: 760;
  text-decoration: none;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 18px;
  padding: 38px;
  background: var(--soft);
  color: var(--black);
}

.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid #bdbdbd;
  border-radius: 0;
  background: #fff;
  color: var(--black);
  padding: 12px 14px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea { min-height: 180px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.16);
}

.form-submit {
  grid-column: 1 / -1;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  background: var(--blue);
  color: var(--soft);
  padding: 0 20px;
  font-weight: 780;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.form-submit:hover,
.form-submit:focus-visible { background: #075bd9; transform: translateY(-2px); }

.form-note {
  grid-column: 1 / -1;
  margin: -6px 0 0;
  color: #666;
  font-size: 0.76rem;
}

.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.footer {
  padding: 28px 0;
  background: var(--black);
  border-top: 1px solid var(--line-dark);
  color: #8d8d8d;
  font-size: 0.74rem;
  font-weight: 700;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .wrap { width: min(calc(100% - 48px), var(--page)); }
  .nav-inner { grid-template-columns: 200px 1fr auto; }
  .nav-links { gap: 24px; }
  .page-intro h1, .contact-intro h1 { font-size: 4rem; }
  .contact-layout { grid-template-columns: minmax(280px, 0.65fr) minmax(400px, 1fr); gap: 42px; }
}

@media (max-width: 820px) {
  .nav-inner { grid-template-columns: 1fr auto; min-height: 74px; }
  .brand { width: 164px; }
  .brand img { height: 48px; }
  .nav-links { display: none; }
  .nav-contact { min-height: 40px; padding-left: 18px; }
  .page-intro { padding: 68px 0 60px; }
  .page-intro-grid, .contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .page-intro h1, .contact-intro h1 { font-size: 3.6rem; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-intro { position: static; }
}

@media (max-width: 560px) {
  .wrap { width: min(calc(100% - 30px), var(--page)); }
  .nav-inner { min-height: 66px; }
  .brand { width: 142px; }
  .brand img { height: 44px; }
  .nav-contact { border-left: 0; padding-left: 0; font-size: 0.76rem; }
  .nav-contact span { font-size: 1rem; }
  .page-intro h1, .contact-intro h1 { font-size: 3rem; }
  .page-intro-grid { gap: 24px; }
  .work-page { padding: 56px 0 76px; }
  .work-page-head h2 { font-size: 2rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 38px; }
  .contact-layout { padding-top: 58px; padding-bottom: 74px; }
  .contact-form { grid-template-columns: 1fr; padding: 24px 18px; }
  .field.full, .form-submit, .form-note { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}