/* Homepage proportions: fluid within each layout, bounded on large displays.
   Backgrounds and the pinned cinema remain full bleed. */
body[data-work-variant="filmstrip"] {
  --home-wide-edge: max(24px, calc((100vw - 2200px) / 2));
  --home-reading-edge: max(24px, calc((100vw - 2000px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .studio-hero.architecture-hero {
  --hero-gutter: max(clamp(20px, 1.9vw, 40px), calc((100vw - 2200px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .architecture-hero__title {
  left: max(1.25vw, calc((100vw - 2200px) / 2));
  right: max(1.25vw, calc((100vw - 2200px) / 2));
  font-size: min(12.2vw, 268px);
}
:where(body[data-work-variant="filmstrip"]) .architecture-hero__intro {
  bottom: calc(5.4svh + min(10.736vw, 236px) + clamp(50px, 7svh, 100px));
}
:where(body[data-work-variant="filmstrip"]) .architecture-hero__badges {
  bottom: calc(5.4svh + min(10.736vw, 236px) + clamp(50px, 7svh, 100px) + 20px);
}
:where(body[data-work-variant="filmstrip"]) .onform-statement {
  padding-inline: var(--home-reading-edge);
}
:where(body[data-work-variant="filmstrip"]) .onform-statement__text {
  font-size: clamp(29px, 4.05vw, 76px);
}
:where(body[data-work-variant="filmstrip"]) .onform-portfolio-story {
  --editorial-gutter: max(clamp(16px, 1.25vw, 32px), calc((100vw - 2200px) / 2));
  --portfolio-frame: max(clamp(24px, 6vw, 140px), calc((100vw - 2200px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .recent-work.portfolio-filmstrip {
  --filmstrip-edge: max(clamp(24px, 2.8vw, 56px), calc((100vw - 2200px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .portfolio-filmstrip__gallery {
  padding-inline: max(clamp(12px, 1vw, 20px), calc((100vw - 2240px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .studio-pricing {
  padding-inline: max(clamp(24px, 5.5vw, 105px), calc((100vw - 1800px) / 2));
}
:where(body[data-work-variant="filmstrip"]) .pricing-row__overview,
:where(body[data-work-variant="filmstrip"]) .pricing-row__details-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .75fr); }
:where(body[data-work-variant="filmstrip"]) .contact-footer.onform-footer {
  --footer-gutter: max(clamp(24px, 6vw, 120px), calc((100vw - 2000px) / 2));
}
/* Typography follows the heading's available column, rather than the viewport. */
:where(body[data-work-variant="filmstrip"]) .onform-footer__grid { container-type: inline-size; }
:where(body[data-work-variant="filmstrip"]) .onform-footer h2 { font-size: clamp(44px, 9.8cqw, 168px); }
:where(body[data-work-variant="filmstrip"]) .onform-footer__wordmark { font-size: min(20.2vw, 400px); }

@media (max-width:1100px) {
  :where(body[data-work-variant="filmstrip"]) .pricing-row__overview {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'identity price' 'description description';
    gap: 24px 28px;
  }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__identity { grid-area: identity; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__description { grid-area: description; max-width: 35em; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__price { grid-area: price; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row h3 { font-size: clamp(24px, 3.6vw, 38px); }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__price > p { font-size: clamp(30px, 5.8vw, 60px); }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__details-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__details-body > div:last-child { grid-column: 1 / -1; }
  :where(body[data-work-variant="filmstrip"]) .pricing-bottom { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-contact { justify-self: start; }
}
@media (min-width:601px) and (max-width:1100px) {
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__intro { right: 250px; }
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__intro-copy br { display:none; }
  :where(body[data-work-variant="filmstrip"]) .onform-showcase__copy .onform-showcase__story > p { font-size: clamp(26px, 3.2vw, 35px); }
}
@media (max-width:900px) {
  :where(body[data-work-variant="filmstrip"]) .onform-footer h2 { font-size: clamp(44px, 12.2cqw, 96px); }
  :where(body[data-work-variant="filmstrip"]) .menu-split {
    top: 92px; width: calc(100% - 40px); height: calc(100dvh - 112px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, .55fr); gap: 16px;
  }
  :where(body[data-work-variant="filmstrip"]) .navigation.architectural-nav nav.architectural-nav__panels { height: 100%; }
  :where(body[data-work-variant="filmstrip"]) .menu-gallery { height: 100%; aspect-ratio: auto; }
  :where(body[data-work-variant="filmstrip"]) .menu-panel__title { font-size: clamp(38px, min(17vw, 9dvh), 100px); }
}
@media (max-width:600px) {
  :where(body[data-work-variant="filmstrip"]) .studio-hero.architecture-hero { min-height: 560px; }
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__title {
    left: 20px; right: 20px; bottom: 7svh;
    font-size: clamp(62px, 20vw, 120px);
  }
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__intro {
    left: 20px; right: 20px; bottom: max(220px, 35svh);
  }
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__intro-copy { max-width: 32ch; font-size: 16px; }
  :where(body[data-work-variant="filmstrip"]) .architecture-hero__badges { top: max(130px, 20svh); bottom: auto; right: 20px; }
  :where(body[data-work-variant="filmstrip"]) .onform-statement { padding: 72px 20px 88px; }
  :where(body[data-work-variant="filmstrip"]) .onform-statement__text { font-size: clamp(28px, 7.2vw, 42px); line-height: 1.1; }
  :where(body[data-work-variant="filmstrip"]) .onform-portfolio-story {
    --editorial-gutter: 20px; --portfolio-frame: 20px; --start-width: calc(100vw - 40px);
    --start-top: max(285px, 38svh);
  }
  :where(body[data-work-variant="filmstrip"]) .onform-showcase__copy { left: 20px; right: 20px; top: 32px; }
  :where(body[data-work-variant="filmstrip"]) .onform-showcase__copy .onform-showcase__story > p { font-size: clamp(24px, 6.8vw, 34px); }
  :where(body[data-work-variant="filmstrip"]) .portfolio-filmstrip__caption { align-items: center; gap: 12px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__overview { gap: 24px 16px; align-items: start; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__price { padding-top: 3px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__price > p { font-size: clamp(30px, 9vw, 46px); }
  :where(body[data-work-variant="filmstrip"]) .pricing-details-toggle { min-height: 44px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__meta { gap: 0 14px; }
  :where(body[data-work-variant="filmstrip"]) .pricing-row__details-body { grid-template-columns: minmax(0, 1fr); }
  :where(body[data-work-variant="filmstrip"]) .pricing-inclusions > ul { grid-template-columns: minmax(0, 1fr); }
  :where(body[data-work-variant="filmstrip"]) .onform-footer h2 { font-size: clamp(40px, 12.2cqw, 68px); }
  :where(body[data-work-variant="filmstrip"]) .onform-footer__navigation a { min-height: 44px; display: inline-flex; align-items: center; }
  :where(body[data-work-variant="filmstrip"]) .onform-footer__legal { line-height: 1.6; gap: 16px 24px; }
}
@media (max-width:360px) {
  :where(body[data-work-variant="filmstrip"]) .portfolio-filmstrip__caption { align-items: start; flex-direction: column; gap: 20px; }
  :where(body[data-work-variant="filmstrip"]) .portfolio-filmstrip__intro h2 { font-size: 48px; }
}
/* Short landscape screens need space below the fixed menu capsule. */
@media (max-height:520px) and (min-width:501px) {
  :where(body[data-work-variant="filmstrip"]) .menu-split {
    top: 84px; width: calc(100% - 48px); height: calc(100dvh - 104px);
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px;
  }
  :where(body[data-work-variant="filmstrip"]) .menu-panel__title { font-size: clamp(30px, min(8.2vw, 13dvh), 68px); }
  :where(body[data-work-variant="filmstrip"]) .onform-portfolio-story { --start-top: 10svh; }
  :where(body[data-work-variant="filmstrip"]) .onform-showcase__copy .onform-showcase__story > p { font-size: clamp(22px, 2.7vw, 30px); }
}
@media (pointer:coarse) {
  /* Expand the small pause control's hit area without making its icon heavy. */
  :where(body[data-work-variant="filmstrip"]) .hero-slideshow__playback::after { content:''; position:absolute; inset:-10px; border-radius:50%; }
}
@media (prefers-reduced-motion:reduce) {
  :where(body[data-work-variant="filmstrip"]) .onform-showcase__copy { inset:auto; padding:24px; }
}

/* Section links leave room for the persistent navigation. Lenis also reads this offset. */
:where(body[data-work-variant="filmstrip"]) :is(#studio, #work, #pricing, #contact) { scroll-margin-top: 92px; }