:root {
  --black:#070707;
  --cream:#f1f1ee;
  --grey:#8d8d8b;
  --yellow:#fee206;
  --hair:#333332;
  --font:'Inter Tight',Arial,sans-serif;
  --heavy:'Archivo Black','Arial Black',sans-serif;
  --condensed:'Barlow Condensed','Arial Narrow',sans-serif;
  --mono:'DM Mono',monospace;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:85px;
}

body {
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.modal-open {
  overflow:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  cursor:pointer;
}

button,input {
  color:inherit;
}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:6px;
}

::selection {
  background:var(--yellow);
  color:#070707;
}

.mono {
  font:500 10px/1.5 var(--mono);
  letter-spacing:.11em;
}

.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.skip-link {
  position:absolute;
  z-index:1000;
  top:-100px;
  left:16px;
  background:var(--yellow);
  color:#000;
  padding:10px;
}

.skip-link:focus {
  top:10px;
}

.yellow-slash,.accent-dot {
  color:var(--yellow);
}

.yellow-mark {
  display:inline-block;
  width:53px;
  height:7px;
  background:var(--yellow);
}

.site-progress {
  height:2px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:110;
  background:transparent;
  pointer-events:none;
}

.site-progress>span {
  display:block;
  background:var(--yellow);
  width:0;
  height:100%;
  transition:width .08s linear;
}

.site-header {
  height:104px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 clamp(25px,5vw,88px);
  z-index:80;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.brand-home {
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-home img {
  width:143px;
  height:auto;
  display:block;
}

.brand-home span {
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:37px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.17em;
}

.main-nav a {
  transition:color .2s;
}

.main-nav a:hover {
  color:var(--yellow);
}

.nav-indicator {
  width:14px;
  height:14px;
  background:var(--yellow);
  border-radius:50%;
  margin-left:5px;
}

.menu-toggle {
  display:none;
  position:relative;
  border:0;
  background:transparent;
  width:42px;
  height:42px;
  z-index:100;
}

.menu-toggle span {
  display:block;
  height:2px;
  background:white;
  width:27px;
  position:absolute;
  left:7px;
  top:16px;
  transition:transform .2s;
}

.menu-toggle span+span {
  top:25px;
}

.mobile-menu[hidden] {
  display:none!important;
}

.mobile-menu {
  position:fixed;
  inset:0;
  z-index:70;
  background:#111;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7vw;
}

.mobile-menu a {
  font:900 clamp(70px,12vw,145px)/.95 var(--condensed);
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #383838;
  padding:10px 0;
}

.mobile-menu small {
  font:12px var(--mono);
  align-self:center;
  color:var(--yellow);
}

.hero {
  min-height:790px;
  height:100svh;
  max-height:1130px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:125px clamp(24px,5vw,88px) 35px;
}

.hero-eyebrow {
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:2;
  margin-bottom:30px;
  color:#a4a4a4;
}

.hero-title {
  margin:0;
  width:115%;
  position:relative;
  left:-.5vw;
  z-index:1;
  font:900 clamp(134px,17.5vw,365px)/.735 var(--condensed);
  letter-spacing:-.032em;
  text-transform:uppercase;
  font-stretch:condensed;
}

.hero-row {
  display:block;
  height:.85em;
  overflow:hidden;
  white-space:nowrap;
}

.hero-word {
  display:block;
  will-change:transform;
  transform-origin:left center;
  animation:hero-rise 1.05s cubic-bezier(.2,.7,.2,1) both;
}

.hero-row:nth-child(2) .hero-word {
  animation-delay:.09s;
}

.hero-row:nth-child(3) .hero-word {
  animation-delay:.18s;
}

.word-motion {
  font-weight:900;
}

.word-visual {
  font-weight:900;
  letter-spacing:-.045em;
}

.word-direction {
  font-weight:900;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.hero-small-note {
  position:absolute;
  right:6.1vw;
  top:46%;
  font:500 12px/1.45 var(--mono);
  letter-spacing:.11em;
  color:#d1d1d1;
  z-index:3;
}

.hero-small-note::before {
  content:'';
  display:block;
  background:var(--yellow);
  height:4px;
  width:42px;
  margin-bottom:20px;
}

.hero-foot {
  display:flex;
  justify-content:space-between;
  align-items:end;
  position:absolute;
  bottom:38px;
  left:clamp(24px,5vw,88px);
  right:clamp(24px,5vw,88px);
  z-index:3;
}

.hero-foot a {
  transition:color .2s;
}

.hero-foot a:hover {
  color:var(--yellow);
}

.hero-foot a span {
  display:inline-block;
  transform:translateY(-2px);
  margin-left:10px;
  font-size:16px;
}

.page-section {
  padding:60px clamp(24px,5vw,88px) 120px;
  position:relative;
  overflow:hidden;
}

.section-rule {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#aaa;
  padding:14px 0;
  border-top:1px solid #3e3e3e;
  margin-bottom:35px;
}

.section-rule>span:first-child {
  color:var(--yellow);
}

.reel-section {
  padding-top:80px;
}

.reel-typography {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}

.reel-typography h2 {
  font:900 clamp(145px,30vw,500px)/.75 var(--condensed);
  letter-spacing:-.05em;
  margin:5px 0 -17px -10px;
}

.reel-27 {
  font:900 clamp(155px,32vw,520px)/.77 var(--condensed);
  letter-spacing:-.04em;
  color:var(--yellow);
  margin-bottom:-16px;
  align-self:end;
}

.reel-headline-footer {
  display:flex;
  justify-content:space-between;
  align-items:end;
  padding:25px 0 60px;
}

.reel-explainer {
  margin:0;
  font-size:clamp(21px,2.7vw,39px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.04em;
}

.reel-explainer span {
  color:#777;
}

.reel-index {
  color:#aaa;
}

.sequence-module {
  border:1px solid #363636;
  margin-bottom:90px;
  background:#050505;
}

.sequence-top {
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  gap:15px;
}

.muted-line {
  color:var(--yellow);
}

.sequence-stage {
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  background:#000;
}

.sequence-surface,.sequence-final {
  position:absolute;
  inset:0;
}

.sequence-surface img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sequence-final {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:5% 10%;
  background:#000;
}

.sequence-final[hidden] {
  display:none;
}

.sequence-final>img {
  width:85%;
  height:auto;
}

.sequence-final-bottom {
  width:85%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:clamp(8px,1.15vw,20px);
  letter-spacing:.06em;
  margin-top:3%;
}

.sequence-final-bottom .yellow-mark {
  width:5.5%;
  height:5px;
}

.sequence-controls {
  padding:13px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #363636;
}

.sequence-controls>div {
  display:flex;
  align-items:center;
  gap:2px;
}

.sequence-controls button {
  border:1px solid transparent;
  background:transparent;
  padding:12px 17px;
  transition:background .25s;
}

.sequence-controls button:hover {
  background:#222;
}

.sequence-controls #sequence-play {
  font:500 11px var(--mono);
  letter-spacing:.08em;
}

.sequence-controls #sequence-play span {
  color:var(--yellow);
  margin-left:8px;
}

.current-reel-head,.film-foot {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:14px 0;
  color:#aaa;
}

.current-reel-head {
  border-top:1px solid #444;
}

.film-foot a:hover {
  color:var(--yellow);
}

.vimeo-frame {
  position:relative;
  aspect-ratio:16/9;
  background:#151515;
}

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

.work-section {
  padding-top:55px;
}

.bleed-title {
  font:900 clamp(125px,25vw,415px)/.73 var(--condensed);
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:40px 0 10px -1.3vw;
  white-space:nowrap;
}

.work-bleed {
  transform:scaleX(1.05);
  transform-origin:left center;
}

.work-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  border-bottom:1px solid #4c4c4c;
  padding:15px 0 55px;
}

.work-intro p {
  margin:0;
  max-width:690px;
  font-size:clamp(24px,3vw,45px);
  line-height:1.08;
  letter-spacing:-.05em;
}

.work-intro .mono {
  color:#a4a4a4;
}

.focus-area {
  margin-top:45px;
}

.focus-header {
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  color:#aaa;
}

.project-banner-list {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.project-banner {
  position:relative;
  border:1px solid #323232;
  min-height:clamp(240px,32vw,370px);
  overflow:hidden;
  background:#111;
}

.project-banner::before {
  content:'';
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  transform:scale(1.02);
  filter:saturate(.92) contrast(1.02);
  opacity:.9;
}

.project-banner::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.52) 36%,rgba(0,0,0,.24) 65%,rgba(0,0,0,.65) 100%);
}

.project-banner[data-image]::before {
  background-image:var(--banner-image);
}

.project-banner:hover::before {
  transform:scale(1.045);
  transition:transform .65s cubic-bezier(.15,.65,.15,1);
}

.project-banner-inner {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:inherit;
  padding:18px 22px 20px;
}

.project-banner-top,.project-banner-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.project-banner-top {
  color:#d7d7d7;
}

.project-banner-top .yellow-mark {
  height:5px;
  width:48px;
  flex:none;
}

.project-banner-copy {
  max-width:min(760px,75%);
}

.project-banner-copy h3 {
  margin:0;
  font:900 clamp(48px,7.8vw,136px)/.86 var(--condensed);
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.project-banner-copy p {
  margin:12px 0 0;
  font-size:clamp(14px,1.35vw,18px);
  line-height:1.35;
  color:#d8d8d8;
  max-width:44ch;
}

.project-banner-meta {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:#efefef;
}

.project-banner-meta strong {
  font-size:13px;
  letter-spacing:.08em;
}

.project-banner-links {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.project-banner-links a {
  font:500 11px var(--mono);
  letter-spacing:.06em;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}

.project-banner-links a:hover {
  color:var(--yellow);
  border-color:var(--yellow);
}

.project-banner-number {
  color:var(--yellow);
}

.focus-footnote {
  font:11px/1.5 var(--mono);
  color:#8a8a8a;
  margin:18px 0;
}

.vimeo-archive-heading {
  margin:145px 0 40px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
}

.vimeo-archive-heading h3 {
  font:900 clamp(82px,13vw,215px)/.78 var(--condensed);
  letter-spacing:-.035em;
  margin:0;
}

.vimeo-archive-heading p {
  max-width:310px;
  font-size:15px;
  line-height:1.4;
  color:#aaa;
}

.filter-bar {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  padding:15px 0 28px;
  border-top:1px solid #3c3c3c;
}

.filter-bar button {
  border:0;
  background:transparent;
  font:500 11px var(--mono);
  letter-spacing:.06em;
  padding:8px 8px 8px 0;
  color:#888;
}

.filter-bar button.is-active,.filter-bar button:hover {
  color:var(--yellow);
}

.filter-bar button span {
  font-size:9px;
  vertical-align:top;
}

.film-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:22px;
  row-gap:54px;
}

.film-card {
  min-width:0;
}

.film-card.wide {
  grid-column:span 2;
}

.film-cover {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  border:0;
  background:#171717;
  text-align:left;
  padding:0;
  isolation:isolate;
}

.film-card.wide .film-cover {
  aspect-ratio:2.28;
}

.film-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  display:block;
  transition:transform .7s cubic-bezier(.1,.7,.1,1),filter .7s;
}

.film-cover:hover img {
  transform:scale(1.035);
  filter:saturate(.72);
}

.film-card-art {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:-1;
  background:linear-gradient(135deg,#111,#242424);
}

.film-card:nth-child(even) .film-card-art {
  background:#e8e8e5;
  color:black;
}

.film-card-art b {
  font:900 clamp(75px,13vw,230px)/.73 var(--condensed);
  letter-spacing:-.03em;
  white-space:nowrap;
  opacity:.64;
}

.film-cover .corner-number {
  position:absolute;
  z-index:2;
  top:18px;
  left:19px;
  font:500 10px var(--mono);
  letter-spacing:.06em;
  padding:6px 8px;
  background:#0b0b0bcc;
}

.film-cover .corner-play {
  position:absolute;
  z-index:2;
  bottom:21px;
  right:22px;
  background:var(--yellow);
  color:black;
  padding:13px 18px;
  font:500 11px var(--mono);
  letter-spacing:.05em;
  transition:transform .25s;
}

.film-cover:hover .corner-play {
  transform:translateX(4px);
}

.film-card-info {
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.film-card-info h4 {
  font-size:clamp(20px,2.4vw,36px);
  font-weight:650;
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0 0 5px;
}

.film-card-info p {
  font:500 10px/1.5 var(--mono);
  color:#999;
  letter-spacing:.07em;
  margin:0;
}

.film-card-category {
  font:500 10px var(--mono);
  color:#aaa;
  padding-top:6px;
  white-space:nowrap;
}

.archive-footer {
  border-top:1px solid #444;
  margin-top:75px;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  gap:25px;
}

.archive-footer a:hover {
  color:var(--yellow);
}

@media (max-width:900px) {
  .project-banner-copy {
    max-width:100%;
  }
  .project-banner-copy h3 {
    font-size:clamp(42px,14vw,92px);
  }
  .project-banner-copy p {
    max-width:100%;
    font-size:14px;
  }
  .project-banner-top,.project-banner-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
  .project-banner-bottom {
    gap:10px;
  }
}

.about-section {
  border-top:1px solid #303030;
}

.about-bleed {
  font-size:clamp(180px,33vw,570px);
  line-height:.73;
  margin-top:70px;
  margin-left:-1.5vw;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:60px;
  border-top:1px solid #3e3e3e;
  padding-top:35px;
  margin-top:55px;
}

.about-label {
  color:#aaa;
  display:flex;
  align-items:start;
  gap:25px;
}

.about-prose p {
  font-size:clamp(17px,1.8vw,26px);
  line-height:1.4;
  max-width:850px;
  letter-spacing:-.02em;
  margin:0 0 25px;
}

.about-prose p:first-child {
  font-size:clamp(27px,3.4vw,52px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.05em;
}

.client-section {
  border-top:1px solid #444;
  margin-top:100px;
  padding:25px 0 80px;
}

.clients-label {
  color:#999;
  margin-bottom:40px;
}

.clients-text {
  font:800 clamp(29px,3.2vw,55px)/1.25 var(--font);
  letter-spacing:-.05em;
}

.clients-text span,.services-row>div span {
  color:var(--yellow);
  font-weight:400;
  margin:0 .15em;
}

.services-row {
  border-top:1px solid #414141;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:28px;
  padding:30px 0;
}

.services-row>span {
  color:#aaa;
}

.services-row>div {
  font-size:clamp(16px,1.8vw,25px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.02em;
}

.contact-section {
  border-top:1px solid #333;
  padding-bottom:60px;
}

.contact-intro {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:start;
  padding-top:15px;
}

.contact-intro>span:first-child {
  color:#aaa;
}

.contact-title {
  font:900 clamp(130px,26vw,440px)/.72 var(--condensed);
  letter-spacing:-.045em;
  margin:100px -2vw 130px -2vw;
  text-transform:uppercase;
  white-space:nowrap;
}

.contact-title span {
  color:var(--yellow);
}

.contact-bottom {
  border-top:1px solid #444;
  padding-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}

.contact-mail {
  font-size:clamp(22px,3.7vw,57px);
  font-weight:750;
  letter-spacing:-.045em;
}

.contact-mail span {
  color:var(--yellow);
}

.contact-mail:hover {
  color:var(--yellow);
}

.contact-links {
  display:flex;
  gap:35px;
}

.contact-links a:hover {
  color:var(--yellow);
}

.footer {
  border-top:1px solid #333;
  padding:35px clamp(24px,5vw,88px) 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#aaa;
}

.footer img {
  width:103px;
  height:auto;
  display:block;
}

.footer a:hover {
  opacity:.8;
}

.player-modal[hidden] {
  display:none;
}

.player-modal {
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.modal-scrim {
  position:absolute;
  inset:0;
  background:#000e;
}

.player-panel {
  position:relative;
  z-index:1;
  background:#101010;
  width:min(1250px,100%);
  max-height:calc(100dvh - 56px);
  overflow:auto;
  border:1px solid #3c3c3c;
}

.player-header {
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

.player-header h3 {
  font-size:clamp(18px,3vw,36px);
  letter-spacing:-.035em;
  margin:3px 0 0;
}

.player-header button {
  background:transparent;
  border:1px solid #555;
  padding:10px 15px;
  font:500 11px var(--mono);
}

.player-header button span {
  color:var(--yellow);
}

.player-container {
  aspect-ratio:16/9;
  background:#000;
  position:relative;
}

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

.player-footer {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:18px 20px;
  align-items:center;
  font-size:12px;
  color:#b4b4b4;
}

.player-footer p {
  margin:0;
}

.player-footer a {
  font:500 11px var(--mono);
  white-space:nowrap;
}

.player-footer a:hover {
  color:var(--yellow);
}

@keyframes hero-rise {
  from {
    transform:translateY(85%);
    opacity:.15;
  }
  to {
    transform:translateY(0);
    opacity:1;
  }
}

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

@media (max-width:1100px) {
  .hero-title {
    font-size:20.7vw;
  }
  .hero-small-note {
    right:5vw;
    top:30%;
    font-size:10px;
  }
  .focus-item {
    grid-template-columns:35px 1.1fr 1fr 110px;
  }
  .focus-item h3 {
    font-size:7vw;
  }
  .main-nav {
    gap:22px;
  }
  .reel-typography h2 {
    font-size:32vw;
  }
  .reel-27 {
    font-size:32vw;
  }
}

@media (max-width:750px) {
  .site-header {
    height:82px;
    padding:0 22px;
  }
  .brand-home img {
    width:116px;
  }
  .brand-home span {
    font-size:10px;
  }
  .main-nav {
    display:none;
  }
  .menu-toggle {
    display:block;
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span+span {
    transform:translateY(-5px) rotate(-45deg);
  }
  .hero {
    min-height:630px;
    height:91svh;
    padding:105px 22px 35px;
  }
  .hero-eyebrow {
    font-size:8px;
    margin-bottom:20px;
  }
  .hero-title {
    font-size:24.5vw;
    line-height:.83;
    left:-1vw;
  }
  .hero-row {
    height:1.02em;
  }
  .hero-small-note {
    position:relative;
    top:auto;
    right:auto;
    align-self:flex-end;
    font-size:10px;
    margin-top:40px;
    text-align:right;
  }
  .hero-small-note::before {
    margin-left:auto;
  }
  .hero-foot {
    left:22px;
    right:22px;
    bottom:24px;
    font-size:8px;
  }
  .hero-foot>span:last-child {
    display:none;
  }
  .page-section {
    padding:42px 22px 85px;
  }
  .section-rule {
    font-size:9px;
  }
  .reel-typography h2 {
    font-size:32vw;
    margin-bottom:-8px;
    margin-left:-5px;
  }
  .reel-27 {
    font-size:34vw;
    margin-bottom:-8px;
  }
  .reel-headline-footer {
    align-items:start;
    padding:22px 0 35px;
  }
  .reel-index {
    display:none;
  }
  .reel-explainer {
    font-size:25px;
  }
  .sequence-top {
    padding:12px;
    font-size:8px;
  }
  .sequence-controls {
    padding:8px 12px;
  }
  .sequence-controls button {
    padding:12px;
  }
  .sequence-controls #sequence-play {
    font-size:9px;
  }
  .sequence-final-bottom {
    font-size:7px;
  }
  .current-reel-head,.film-foot {
    font-size:9px;
    align-items:start;
  }
  .film-foot span {
    max-width:60%;
  }
  .bleed-title {
    font-size:29vw;
    line-height:.8;
    letter-spacing:-.04em;
  }
  .work-intro {
    flex-direction:column;
    align-items:start;
  }
  .work-intro p {
    font-size:27px;
  }
  .focus-item {
    grid-template-columns:30px 1fr;
    gap:9px;
    min-height:0;
    padding:22px 0;
  }
  .focus-item h3 {
    font-size:14vw;
    white-space:nowrap;
  }
  .focus-meta {
    grid-column:2;
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .focus-meta strong,.focus-meta span {
    font-size:10px;
  }
  .focus-item>a {
    grid-column:2;
    text-align:left;
    font-size:10px;
    margin-top:4px;
  }
  .vimeo-archive-heading {
    margin-top:85px;
    flex-direction:column;
    align-items:start;
  }
  .vimeo-archive-heading h3 {
    font-size:19vw;
  }
  .vimeo-archive-heading p {
    max-width:95%;
    font-size:13px;
  }
  .filter-bar {
    gap:5px 14px;
  }
  .filter-bar button {
    font-size:10px;
  }
  .film-grid {
    grid-template-columns:1fr;
    row-gap:37px;
  }
  .film-card.wide {
    grid-column:span 1;
  }
  .film-card.wide .film-cover {
    aspect-ratio:16/9;
  }
  .film-card-info h4 {
    font-size:24px;
  }
  .film-cover .corner-play {
    font-size:9px;
    padding:12px;
  }
  .film-card-category {
    font-size:9px;
  }
  .archive-footer {
    font-size:9px;
  }
  .about-bleed {
    font-size:40vw;
    margin-top:70px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .about-prose p {
    font-size:17px;
  }
  .about-prose p:first-child {
    font-size:34px;
  }
  .clients-text {
    font-size:30px;
  }
  .services-row {
    grid-template-columns:1fr;
    gap:15px;
  }
  .services-row>div {
    font-size:20px;
  }
  .contact-title {
    font-size:31vw;
    margin:80px -2vw 95px;
  }
  .contact-bottom {
    align-items:start;
    flex-direction:column;
  }
  .contact-mail {
    font-size:35px;
  }
  .footer {
    flex-wrap:wrap;
    padding:30px 22px;
    font-size:8px;
  }
  .footer img {
    width:90px;
  }
  .player-modal {
    padding:0;
  }
  .player-panel {
    max-height:100dvh;
  }
  .player-header {
    padding:14px;
  }
  .player-footer {
    flex-direction:column;
    align-items:start;
  }
  .player-header button {
    font-size:10px;
  }
}

@media (max-width:400px) {
  .hero {
    min-height:580px;
  }
  .hero-title {
    font-size:24.3vw;
  }
  .hero-small-note {
    font-size:9px;
  }
  .hero-foot {
    font-size:7px;
  }
  .section-rule>span:nth-child(2) {
    max-width:55%;
    text-align:right;
  }
  .focus-item h3 {
    font-size:13vw;
  }
  .sequence-top {
    font-size:7px;
  }
}

.sequence-surface[hidden] {
  display:none!important;
}

.film-card[hidden] {
  display:none!important;
}

/* GABBAS V2.2 — MAIN TYPE VOICE | approved Reel 27 / hero mood.
   The master wordmark is the actual SVG: do not replace it with a font.
   Monumental + confident, not puffed up. Optical condensation by tight tracking.
   The deliberately slender type is a supporting voice only. */ :root {
  --headline: 'Inter Tight', 'Inter Display', 'Inter', Arial, sans-serif;
  --condensed: var(--headline);
  --headline-weight: 800;
}

.hero-title, .reel-typography h2, .bleed-title, .vimeo-archive-heading h3, .focus-item h3, .contact-title, .film-card-art b, .mobile-menu a {
  font-family: var(--headline);
  font-weight: var(--headline-weight);
  font-stretch: condensed;
  letter-spacing: -.048em;
}

.hero-title {
  line-height: .77;
  letter-spacing: -.045em;
}

.hero-word.word-motion, .hero-word.word-visual, .hero-word.word-direction {
  font-weight: var(--headline-weight);
  letter-spacing: -.045em;
}

.reel-27 {
  font-family: var(--headline);
  font-weight:800;
  letter-spacing:-.055em;
}

/* Secondary contrasts: sparing light cuts, small captions and editorial notes. */ .hero-small-note, .reel-index, .section-rule, .focus-meta, .film-foot {
  font-weight:400;
}

/* Keep proportions and section layouts of the approved V2 unchanged. */ /* V2.4 / Bilingual navigation and real Vimeo-thumbnail media */ .project-banner::before {
  display:none;
}

.project-banner-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.015);
  transition:transform .75s cubic-bezier(.15,.65,.15,1),filter .75s;
  filter:contrast(1.04) saturate(.88);
}

.project-banner:hover .project-banner-media {
  transform:scale(1.06);
  filter:contrast(1.03) saturate(1);
}

.project-banner::after {
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.40) 54%,rgba(0,0,0,.26));
}

.project-banner-copy h3 {
  text-wrap:balance;
  max-width:12ch;
}

.project-banner-links a {
  display:inline-block;
  border-bottom:1px solid #bcbcb9;
  padding-bottom:5px;
}

.project-banner-links a:focus-visible {
  background:var(--yellow);
  color:#050505;
}

.project-banner-top {
  font-size:11px;
}

.project-banner-bottom {
  gap:24px;
}

.lang-switch {
  display:flex;
  gap:1px;
  align-items:center;
  margin-left:14px;
  border:1px solid #666;
  border-radius:1px;
  padding:4px 5px;
  background:rgba(8,8,8,.7);
  backdrop-filter:blur(8px);
}

.lang-btn {
  border:none;
  color:#b0b0b0;
  background:transparent;
  font:500 10px/1.3 var(--mono);
  letter-spacing:.09em;
  padding:6px 9px;
  min-width:37px;
  transition:background .2s,color .2s;
}

.lang-btn[aria-pressed="true"] {
  color:#0b0b0b;
  background:var(--yellow);
}

.lang-btn:hover:not([aria-pressed="true"]) {
  color:#fff;
}

.lang-separator {
  color:#555;
  font:9px var(--mono);
}

.site-header {
  position:fixed;
  background:linear-gradient(180deg,rgba(6,6,6,.91),rgba(6,6,6,.65));
  backdrop-filter:blur(10px);
  height:84px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header .main-nav {
  margin-left:auto;
}

.project-banner-inner {
  min-height:clamp(260px,32vw,390px);
}

@media(max-width:1080px) {
  .project-banner-copy h3 {
    font-size:clamp(43px,7vw,88px);
  }
  .project-banner-copy {
    max-width:86%;
  }
}

@media(max-width:720px) {
  .lang-switch {
    margin-left:auto;
    margin-right:8px;
    padding:3px;
  }
  .lang-btn {
    padding:8px 7px;
    font-size:10px;
  }
  .brand-home span {
    display:none;
  }
  .site-header {
    padding:0 18px;
    height:76px;
  }
  .project-banner-inner {
    min-height:340px;
    padding:16px;
  }
  .project-banner-copy {
    max-width:100%;
  }
  .project-banner-copy h3 {
    font-size:clamp(39px,12vw,67px);
  }
  .project-banner-copy p {
    font-size:13px;
  }
  .project-banner-top {
    align-items:flex-start;
  }
  .project-banner-bottom {
    align-items:flex-start;
  }
  .project-banner::after {
    background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.62) 38%,rgba(0,0,0,.88));
  }
}

@media(prefers-reduced-motion:reduce) {
  .project-banner-media {
    transition:none;
  }
}

/* ==========================================================================
   V3 — Whole-card click targets
   Each card carries one stretched, transparent <button class="card-hit">
   covering the entire box. Text layers let clicks pass through; secondary
   controls (episode buttons) sit above it and stay independently clickable.
   ========================================================================== */
.card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.card-hit:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}

/* Selected Work banners */
.project-banner {
  cursor: pointer;
}

.project-banner-inner {
  pointer-events: none;
}

.project-episode {
  pointer-events: auto;
  position: relative;
  border: 0;
  border-bottom: 1px solid #bcbcb9;
  background: transparent;
  padding: 0 0 5px;
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  transition: color .2s, border-color .2s;
}

.project-episode:hover,
.project-episode:focus-visible {
  color: var(--yellow);
  border-color: var(--yellow);
}

.project-banner-cue {
  display: inline-block;
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  padding-bottom: 5px;
  border-bottom: 1px solid #bcbcb9;
  transition: color .2s, border-color .2s, transform .25s;
}

.project-banner:hover .project-banner-cue,
.project-banner:has(.card-hit:focus-visible) .project-banner-cue {
  color: var(--yellow);
  border-color: var(--yellow);
  transform: translateX(4px);
}

/* Archive film cards */
.film-card {
  position: relative;
  cursor: pointer;
}

.film-cover .corner-number,
.film-cover .corner-play {
  pointer-events: none;
}

.film-card:hover .film-cover img {
  transform: scale(1.035);
  filter: saturate(.72);
}

.film-card:hover .corner-play,
.film-card:has(.card-hit:focus-visible) .corner-play {
  transform: translateX(4px);
}

.film-card:hover .film-card-info h4 {
  color: var(--yellow);
}

.film-card-info h4 {
  transition: color .2s;
}

.project-banner-media[hidden],
.film-cover img[hidden] {
  display: none;
}