/* Inherited draggable notes can extend beyond the page after a layout refresh. */
html:has(.canopy-reel), body:has(.canopy-reel) { overflow-x: clip; }
.canopy-reel { width: 100%; max-width: none; margin: 0 0 120px; color: var(--color-carbon); }
.canopy-reel__stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border: 0; border-radius: 0; background: var(--color-paper-white); }
.canopy-reel__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#canopy-reel-clip); }
.canopy-reel__tints { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; transition: opacity .45s ease; }
.canopy-reel__stage.is-playing .canopy-reel__film { clip-path: none; object-fit: contain; background: var(--color-paper-white); }
.canopy-reel__stage.is-playing .canopy-reel__tints { opacity: 0; }
.canopy-reel__trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; cursor: pointer; background: transparent; color: var(--color-carbon); }
.canopy-reel__hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--color-carbon); border-radius: 999px; background: var(--color-paper-white); font: 700 18px/1.3 'Slush UI', sans-serif; white-space: nowrap; }
.canopy-reel__hint svg { width: 18px; height: 18px; }
.canopy-reel__trigger:focus-visible { outline: 3px solid var(--canopy-olive); outline-offset: -7px; border-radius: 30px; }
.canopy-reel__stage.is-playing .canopy-reel__trigger { display: none; }
.canopy-reel__close { position: absolute; top: 20px; right: 20px; z-index: 3; display: none; padding: 12px 18px; border: 1px solid var(--color-carbon); border-radius: 999px; background: var(--color-paper-white); color: var(--color-carbon); font: 700 16px/1.3 'Slush UI', sans-serif; cursor: pointer; }
.canopy-reel__stage.is-playing .canopy-reel__close { display: block; }
.canopy-reel__close:focus-visible { outline: 3px solid var(--canopy-olive); outline-offset: 4px; }
.canopy-reel__caption { margin-top: 18px; padding: 0 24px; display: flex; justify-content: space-between; gap: 20px; font: 500 18px/1.5 'Slush UI', sans-serif; }
.canopy-reel__status:empty { display: none; }
@media (max-width: 649px) {
  .canopy-reel { width: 100%; margin-bottom: 70px; }
  .canopy-reel__stage { aspect-ratio: 4 / 5; }
  .canopy-reel__hint { bottom: 24px; font-size: 16px; padding: 12px 16px; }
  .canopy-reel__caption { flex-direction: column; gap: 6px; }
  .canopy-reel__close { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .canopy-reel__tints { transition: none; } }

/* Edge-to-edge portfolio photography, without card boxes. */
.page__content .site-max:has(> h2.sr-only), .canopy-portfolio { width: 100%; max-width: none; padding-left: 0; padding-right: 0; margin-bottom: 40px !important; }
.canopy-portfolio .grid { column-gap: 24px; }
.canopy-portfolio .case-item__thumbnail,
.canopy-portfolio .case-item__thumbnail div,
.canopy-portfolio .case-item__thumbnail img { border: 0 !important; border-radius: 0 !important; }
.canopy-portfolio .case-item a > div:has(> h3) { padding-left: 24px; padding-right: 24px; }
/* Suppress the removed mascots during hydration as well. */
svg[viewBox='0 0 58 17'], .sh__box canvas, .rive-inline:has(> div[class*='-500%']) { display: none !important; }
.sh__box > div { position: static; inset: auto; width: 100%; height: 100%; display: grid; place-items: center; }
.canopy-menu-glyph { width: 24px; height: 24px; color: var(--color-carbon); }
@media (max-width: 649px) { .canopy-portfolio .grid { column-gap: 0; } }