#work {
  height:auto;
  min-height:0;
  padding:70px var(--pad) 80px;
  overflow:visible;
}

#work .work-sticky {
  position:relative;
  top:auto;
  height:auto;
  min-height:0;
  padding:0;
  overflow:visible;
}

#work .section-label,#work .work-head,#work .work-bottom {
  margin-left:0;
  margin-right:0;
}

#work .work-track {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:90px;
  overflow:visible;
  padding:0;
  transform:none!important;
  scroll-snap-type:none;
  will-change:auto;
}

#work .project {
  width:100%;
  min-width:0;
  scroll-snap-align:none;
}

#work .project-button {
  height:clamp(360px,65svh,780px);
  min-height:0;
  isolation:isolate;
  clip-path:inset(var(--visual-inset,0%) round 4px);
}

#work .project-button img,#work .project-button:hover img {
  transform:translateY(var(--visual-y,0px)) scale(var(--visual-scale,1));
  transition:none;
}

#work .project-button:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 45%,#0008);
  pointer-events:none;
  z-index:0;
}

#work .project-overlay {
  z-index:1;
  font-size:clamp(30px,4.4vw,72px);
  line-height:1.07;
  right:25px;
  bottom:30px;
}

#work .project-meta {
  font-size:12px;
  line-height:1.7;
  gap:16px;
  margin-top:20px;
}

#work .work-bottom>div,#work .all-work {
  display:none;
}

#work .work-bottom {
  margin-top:40px;
}

#work .project-button:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px;
  clip-path:none;
}

@media(max-width:700px) {
  #work {
    padding-top:45px;
    padding-bottom:55px;
  }
  #work .work-track {
    gap:55px;
  }
  #work .project-button {
    height:52svh;
    min-height:320px;
  }
  #work .project-overlay {
    left:20px;
    bottom:22px;
    font-size:32px;
  }
  #work .project-meta {
    font-size:10px;
    flex-wrap:wrap;
  }
  #work .section-label {
    gap:20px;
    line-height:1.6;
  }
  #work .work-count {
    white-space:nowrap;
  }
}

@media(prefers-reduced-motion:reduce) {
  #work .project-button {
    clip-path:none;
  }
  #work .project-button img {
    transform:none!important;
  }
}

#work {
  padding:55px 0 0;
}

#work>.work-sticky>.section-label,#work .work-head {
  margin-left:var(--pad);
  margin-right:var(--pad);
}

#work .work-bottom {
  display:none;
}

.portfolio-sequence {
  position:relative;
  margin:35px 12px 0;
  height:var(--sequence-height,440svh);
}

.portfolio-stage {
  position:sticky;
  top:var(--stage-top,100px);
  height:var(--stage-height,calc(100svh - 112px));
  background:#171714;
  overflow:hidden;
  border-radius:10px;
  isolation:isolate;
}

#work .portfolio-stage .work-track {
  position:absolute;
  inset:0;
  display:block;
  height:100%;
  padding:0;
  overflow:hidden;
}

#work .portfolio-stage .project {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  clip-path:inset(0);
  background:#171714;
}

#work .portfolio-stage .project-button {
  height:100%;
  width:100%;
  min-height:0;
  clip-path:none;
  border-radius:0;
}

#work .portfolio-stage .project-button img {
  transform:scale(var(--frame-scale,1));
  height:100%;
  transition:none;
}

#work .portfolio-stage .project-overlay {
  bottom:116px;
  left:clamp(22px,4vw,70px);
  right:clamp(22px,4vw,70px);
  font-size:clamp(36px,6.5vw,100px);
  max-width:1000px;
  line-height:1.02;
}

#work .portfolio-stage .project-meta {
  position:absolute;
  top:28px;
  left:clamp(22px,4vw,70px);
  right:clamp(22px,4vw,70px);
  margin:0;
  z-index:2;
  pointer-events:none;
  color:white;
  text-shadow:0 1px 12px #000;
}

#work .portfolio-stage .project-meta span:last-child {
  color:white;
}

#work .portfolio-stage .project-button:after {
  background:linear-gradient(#0006,transparent 30%,#0002 50%,#000c);
}

.portfolio-controls {
  position:absolute;
  bottom:24px;
  left:clamp(22px,4vw,70px);
  right:clamp(22px,4vw,70px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:10;
  color:white;
  border-top:1px solid #ffffff60;
  padding-top:16px;
}

.portfolio-controls span {
  font-size:11px;
  letter-spacing:.08em;
}

.portfolio-controls div {
  display:flex;
  gap:10px;
}

.portfolio-controls button {
  color:white;
  width:44px;
  height:44px;
  border:1px solid #ffffff70;
  border-radius:50%;
  font-size:20px;
}

.portfolio-controls button:disabled {
  opacity:.3;
  cursor:default;
}

@media(max-width:700px) {
  .portfolio-sequence {
    margin-left:7px;
    margin-right:7px;
  }
  .portfolio-controls .scroll-note {
    display:none;
  }
  #work .portfolio-stage .project-meta {
    flex-direction:column;
    gap:3px;
    top:22px;
  }
  #work .portfolio-stage .project-overlay {
    bottom:120px;
    font-size:clamp(36px,9vw,60px);
  }
  .portfolio-controls {
    bottom:20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .portfolio-sequence {
    height:auto!important;
  }
  .portfolio-stage {
    position:relative;
    top:0;
    height:auto;
    overflow:visible;
    background:none;
  }
  #work .portfolio-stage .work-track {
    position:relative;
    display:grid;
    height:auto;
    gap:20px;
    overflow:visible;
  }
  #work .portfolio-stage .project {
    position:relative;
    height:calc(100svh - 120px);
    min-height:440px;
    clip-path:none!important;
  }
  #work .portfolio-stage .project img {
    transform:none!important;
  }
  .portfolio-controls {
    display:none;
  }
  #work .portfolio-stage .project-overlay {
    bottom:40px;
  }
}

dialog:has(.project-film:hover) .cursor {
  display:none!important;
}


/* --------------------------------------------------------------------------
   Client logo cards in the scroll sequence
   Each frame shows the client's logo artwork as a card on the dark stage, like
   the home page slider: the heading on a dark fade at the bottom of the card,
   the client name and services underneath. The card is exactly as wide as the
   controls bar below it (same side inset). On wide screens it takes the height
   that is left, with the artwork aligned so the logo stays clear of the heading;
   on portrait screens it is square so the whole logo fits.
   The wipe and zoom animation is unchanged.
   -------------------------------------------------------------------------- */
#work .portfolio-stage .project {
  --card-top:clamp(16px,3.5vh,36px);
  --card-x:clamp(22px,4vw,70px);
  --card-bottom:100px;
  --card-w:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--card-top) var(--card-x) var(--card-bottom);
}

#work .portfolio-stage .project-button {
  flex:1 1 auto;
  width:var(--card-w);
  height:auto;
  min-height:0;
  border-radius:6px;
  container-type:size;
}

#work .portfolio-stage .project-button img {
  object-position:50% 65%;
}

#work .portfolio-stage .project-button:after {
  inset:auto 0 0;
  height:36%;
  min-height:90px;
  background:linear-gradient(to top,rgba(23,23,20,.92),rgba(23,23,20,.75) 45%,rgba(23,23,20,0));
}

#work .portfolio-stage .project-overlay {
  left:clamp(14px,3.2cqw,36px);
  right:clamp(14px,3.2cqw,36px);
  bottom:clamp(12px,min(3.2cqw,6cqh),32px);
  max-width:none;
  font-size:clamp(16px,min(5.2cqw,12cqh),58px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

#work .portfolio-stage .project-meta {
  position:static;
  flex:none;
  width:var(--card-w);
  margin:14px 0 0;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 20px;
  font-size:clamp(11px,.85vw,14px);
  letter-spacing:.05em;
  line-height:1.4;
  text-shadow:none;
}

#work .portfolio-stage .project-meta span:first-child {
  font-weight:700;
  text-transform:uppercase;
}

#work .portfolio-stage .project-meta span:last-child {
  font-weight:600;
  color:#dedbd4;
}

/* Portrait screens: square cards, so the whole logo fits */
@media(orientation:portrait) {
  #work .portfolio-stage .project {
    --card-w:min(100%,calc(var(--stage-height,100svh) - var(--card-top) - var(--card-bottom) - 52px));
  }
  #work .portfolio-stage .project-button {
    flex:none;
    aspect-ratio:1;
  }
  #work .portfolio-stage .project-overlay {
    font-size:clamp(20px,7.4cqw,48px);
  }
}

@media(max-width:700px) {
  #work .portfolio-stage .project {
    --card-bottom:96px;
  }
  #work .portfolio-stage .project-meta {
    font-size:11px;
  }
}

/* Phones held sideways: a slimmer controls bar leaves more room for the card.
   portfolio-motion.js keeps the stage at least 340px tall, which is taller than
   the screen here, so the stage takes the real space under the nav instead. */
@media(orientation:landscape) and (max-height:500px) {
  .portfolio-sequence {
    --stage-height:calc(100svh - var(--stage-top,76px) - 8px) !important;
  }
  #work .portfolio-stage .project {
    --card-top:10px;
    --card-bottom:66px;
  }
  #work .portfolio-stage .project-button img {
    object-position:50% 55%;
  }
  .portfolio-controls {
    bottom:10px;
    padding-top:8px;
  }
  .portfolio-controls button {
    width:36px;
    height:36px;
    font-size:17px;
  }
}