:root{color-scheme:dark;--bg:#0d0e10;--paper:#eeeef0;--dim:#aaaeb3;--rule:#303238;--accent:#c8fb9e;--pad:clamp(20px,4.4vw,74px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--paper);font:16px/1.5 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img,video{display:block;width:100%}h1,h2,h3,p,figure,dl,dd{margin:0}h1,h2,h3{font-weight:600;line-height:.95;letter-spacing:-.073em}main,header,.footer-inner{max-width:1720px;margin:auto}.pad{margin-inline:var(--pad)}.mono{font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}.muted{color:var(--dim)}.accent{color:var(--accent)}.skip{position:absolute;left:12px;top:-100px;background:var(--accent);color:#111;padding:10px;z-index:5}.skip:focus{top:10px}.top{display:flex;justify-content:space-between;align-items:center;height:76px;border-bottom:1px solid var(--rule)}.brand{font-size:17px;font-weight:700;letter-spacing:-.055em}.brand b{color:var(--accent);font-weight:600}.top nav{display:flex;align-items:center;gap:clamp(15px,3.3vw,52px)}.top nav a{padding:8px 0}.top nav a:hover,.text-link:hover{color:var(--accent)}
.hero{padding-top:clamp(27px,5.8vw,90px)}.hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:clamp(20px,3vw,48px)}.hero h1{font-size:clamp(65px,13.25vw,220px);letter-spacing:-.097em;white-space:nowrap;margin-left:-.052em}.hero-side{flex:none;padding:0 0 5px clamp(4px,1vw,18px);border-left:1px solid var(--rule);min-width:13%;margin-bottom:.4vw}.hero-side p+p{margin-top:7px}.eyebrow{margin-bottom:12px}.dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin:0 8px 2px 0}
.feature{position:relative;display:block;overflow:hidden;background:#111a24;border:1px solid #344352;isolation:isolate}.feature video{height:clamp(300px,36.5vw,610px);object-fit:cover;object-position:50% 49%;transition:transform .55s ease}.feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,5,9,.93),transparent 45%),linear-gradient(180deg,rgba(3,6,10,.44),transparent 25%);pointer-events:none}.feature:hover video,.project-link:hover img{transform:scale(1.035)}.overlay-top,.overlay-bottom{position:absolute;z-index:1;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(15px,2.6vw,37px)}.overlay-top{top:0;align-items:flex-start;color:#e2e9ef}.overlay-bottom{bottom:0;gap:14px;align-items:end}.overlay-bottom strong{display:block;font-size:clamp(25px,4.5vw,68px);line-height:1.02;letter-spacing:-.06em;margin-top:5px}.round{display:grid;place-items:center;border:1px solid #d7e3ed;border-radius:50%;width:clamp(40px,5vw,68px);aspect-ratio:1;flex:none;font-size:clamp(18px,2.5vw,30px);transition:background .2s,color .2s}.feature:hover .round,.project-link:hover .round{background:var(--accent);border-color:var(--accent);color:#101210}
.section{padding-block:clamp(64px,9.5vw,155px);scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:clamp(22px,4vw,55px)}.section h2,.end h2{font-size:clamp(53px,8.7vw,140px)}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,34px)}.project-link{display:block;border-top:1px solid var(--rule);padding-top:12px}.project-link>div:first-child,.line{display:flex;justify-content:space-between;gap:12px}.thumb{overflow:hidden;margin-block:13px 16px;background:#1b222e}.thumb img{height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .45s}.project-link h3{font-size:clamp(25px,3.7vw,57px);letter-spacing:-.058em}.project-link .line{align-items:center}.project-link .round{width:38px;font-size:18px;border-color:#656970}.project-link p{margin-top:8px}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,8vw,138px);border-top:1px solid var(--rule);padding-block:clamp(36px,6vw,99px);scroll-margin-top:20px}.case :is(h1, h2){font-size:clamp(41px,5.7vw,90px);line-height:.96;margin:12px 0 18px}.case .client{margin-bottom:22px}.watch{display:inline-flex;align-items:center;justify-content:space-between;gap:17px;background:var(--accent);color:#141911;padding:12px 17px;font-weight:700;font-size:14px}.watch:hover{background:#efffe3}.case dl{display:grid;gap:20px}.case dt{color:var(--accent);margin-bottom:5px}.case dd,.about-copy{font-size:clamp(16px,1.62vw,24px);line-height:1.46;color:#cbd0d6}.about{border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,8vw,138px);align-items:end}.about-copy p+p{margin-top:14px}.end{background:var(--accent);color:#141911;padding-block:clamp(47px,7vw,98px)}.end h2{margin:12px 0 21px}.contact-link{display:inline-block;font-size:clamp(19px,2.85vw,43px);letter-spacing:-.045em;border-bottom:1px solid currentColor;overflow-wrap:anywhere}.contact-link:hover{border-bottom-width:2px}.contact-link:focus-visible{outline-color:#141911}.base{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:23px}.base a:hover{color:var(--accent)}
@media(max-width:790px){.top{height:59px}.top nav{gap:14px}.top nav a{letter-spacing:.04em}.hero-top{display:block}.hero h1{font-size:clamp(53px,14.4vw,100px);margin-bottom:15px}.hero-side{border:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px}.hero-side p+p{margin:0}.work-grid,.case,.about{grid-template-columns:1fr}.work-grid{gap:30px}.feature video{height:clamp(295px,75vw,430px);object-position:50% 50%}.project-link h3{font-size:34px}.section-head{align-items:start;flex-direction:column}.overlay-top .art-label{max-width:105px;text-align:right}.case :is(h1, h2){font-size:clamp(43px,10vw,65px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.feature-shell { position: relative; }
.feature video { pointer-events: none; }
.motion-toggle {
  position: absolute;
  z-index: 2;
  top: clamp(13px, 2.5vw, 35px);
  right: clamp(13px, 2.5vw, 35px);
  border: 1px solid #78828c;
  padding: 7px 10px;
  background: #101318;
  color: #eeeef0;
  cursor: pointer;
}
.motion-toggle:hover { border-color: var(--accent); color: var(--accent); }
.case-media { grid-column: 1 / -1; }
.case-player { height: auto; aspect-ratio: 16 / 9; background: #08090a; }
.case-media figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 12px;
}
.case-media figcaption a { color: var(--accent); }
.case-media figcaption a:hover { text-decoration: underline; }
.stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 24px);
  margin-top: clamp(22px, 4vw, 52px);
}
.stills img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 520px) { .stills { grid-template-columns: 1fr; } }
@media (min-width: 1120px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-link h3 { font-size: clamp(27px, 2.45vw, 45px); }
}

.top nav a[aria-current="page"] { color: var(--accent); }
.top nav a[aria-current="page"]:after {
  content: ""; display: block; height: 1px; background: currentColor;
}
.work-opening {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 72svh, 760px);
  overflow: hidden;
  isolation: isolate;
  background: #101318;
}
.work-opening video {
  position: absolute;
  z-index: -2;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.work-opening:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, #08090a 0%, transparent 77%);
}
.work-opening-inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-block: clamp(24px, 5vw, 76px);
}
.work-opening h1 { font-size: clamp(54px, 12vw, 192px); }
.work-opening .round:hover { background: var(--accent); color: #101210; }
.work-filters { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.work-filters[hidden], .project-link[hidden] { display: none; }
.work-filters button {
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--dim);
  cursor: pointer;
}
.work-filters button[aria-pressed="true"], .work-filters button:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}
.work-index { padding-top: clamp(42px, 7vw, 105px); }
.work-index .section-head { align-items: center; }
.work-index .work-grid { row-gap: clamp(25px, 3vw, 52px); }
.back-to-work a { color: var(--accent); }
.back-to-work a:hover { text-decoration: underline; }
.back-to-work { padding-block: clamp(22px, 3vw, 46px); }
@media(max-width: 540px) {
  .top nav { gap: 11px; }
  .top nav a { font-size: 9px; }
  .brand { font-size: 15px; }
  .work-opening { min-height: 59svh; }
  .work-index .section-head { align-items: start; }
}