/* A single project, shown through photography, its website and packaging. */
.recent-work.portfolio-filmstrip {
  --filmstrip-edge: clamp(24px, 2.8vw, 56px);
  padding: clamp(36px, 3vw, 56px) 0 clamp(40px, 3.5vw, 64px);
  background: var(--blue, #012bba);
  color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
}
.portfolio-filmstrip__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 0 var(--filmstrip-edge);
  margin-bottom: clamp(28px, 2.8vw, 48px);
}
.portfolio-filmstrip__intro h2 {
  font-size: clamp(52px, 7vw, 118px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.06em;
}
.portfolio-filmstrip__title > span { display: block; }
.portfolio-filmstrip__label {
  flex: 0 0 auto;
  padding-bottom: 8px;
  font-size: clamp(13px, 1.35vw, 21px);
  line-height: 1.4;
  letter-spacing: -.025em;
}
.portfolio-filmstrip__label span { padding: 0 .25em; opacity: .6; }
.portfolio-filmstrip__gallery {
  display: grid;
  grid-template-columns: 1fr 1.62fr 1fr;
  gap: clamp(10px, 1vw, 20px);
  padding: 0 clamp(12px, 1vw, 20px);
}
.portfolio-filmstrip__image {
  position: relative;
  display: block;
  min-width: 0;
  height: clamp(280px, 29.3vw, 560px);
  overflow: hidden;
  background: #ee712a;
  isolation: isolate;
}
.portfolio-filmstrip__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.portfolio-filmstrip__image--photo img { object-position: 50% 20%; }
.portfolio-filmstrip__image--website img { object-position: 50% 0%; }
.portfolio-filmstrip__image--packaging img { object-position: 50% 50%; }
.portfolio-filmstrip__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(24px, 2.4vw, 40px) var(--filmstrip-edge) 0;
  padding-top: clamp(20px, 1.6vw, 32px);
  border-top: 1px solid #ffffff80;
}
.portfolio-filmstrip__caption h3 {
  font-size: clamp(40px, 4.8vw, 80px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}
body .portfolio-filmstrip__cta.onform-button {
  flex: 0 0 auto;
  border-color: #fff;
  color: #fff;
  min-height: 54px;
  font-size: clamp(13px, 1.1vw, 17px);
  padding: 14px 25px;
}
body .portfolio-filmstrip__cta.onform-button::before { background: #fff; }
body .portfolio-filmstrip__cta.onform-button:is(:hover,:focus-visible) { color: var(--blue); }
.portfolio-filmstrip a:focus-visible { outline-color: #fff; outline-offset: 5px; }
.portfolio-filmstrip__image:focus-visible { outline-offset: -6px; }
.portfolio-filmstrip__image:focus-visible img { transform: scale(1.025); }
@media (hover:hover) and (pointer:fine) {
  .portfolio-filmstrip__image:hover img { transform: scale(1.025); }
}
/* Motion lives on wrappers; imagery retains its own quiet hover treatment. */
.portfolio-filmstrip.is-filmstrip-ready [data-filmstrip-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .85s cubic-bezier(.16,1,.3,1) var(--filmstrip-delay,0ms), transform 1.1s cubic-bezier(.16,1,.3,1) var(--filmstrip-delay,0ms);
}
.portfolio-filmstrip.is-filmstrip-ready [data-filmstrip-reveal].is-filmstrip-visible { opacity: 1; transform: none; }
@media (max-width:760px) {
  .recent-work.portfolio-filmstrip { padding: 64px 0 52px; }
  .portfolio-filmstrip__intro { display: block; margin-bottom: 28px; }
  .portfolio-filmstrip__intro h2 { font-size: clamp(48px, 9vw, 68px); }
  .portfolio-filmstrip__label { margin-top: 24px; padding: 0; font-size: 13px; }
  .portfolio-filmstrip__gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .portfolio-filmstrip__image { height: auto; aspect-ratio: 1; }
  .portfolio-filmstrip__image--website { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4/3; }
  .portfolio-filmstrip__caption { margin-top: 24px; gap: 16px; }
  .portfolio-filmstrip__caption h3 { font-size: clamp(34px, 7vw, 52px); }
  body .portfolio-filmstrip__cta.onform-button { padding: 12px 17px; min-height: 48px; gap: 18px; font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-filmstrip.is-filmstrip-ready [data-filmstrip-reveal] { opacity: 1; transform: none; transition: none; }
  .portfolio-filmstrip__image img { transition: none; }
  .portfolio-filmstrip__image:is(:hover,:focus-visible) img { transform: none; }
}

/* The centre panel runs the same hero as the Pep Pals case study. */
.portfolio-filmstrip__image--website { background: #ff6500; }
.portfolio-filmstrip__preview { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #ff6500; }
.portfolio-filmstrip__preview iframe { position: absolute; display: block; max-width: none; border: 0; transform-origin: top left; background: #ff6500; }
.portfolio-filmstrip__preview iframe:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }