/* The film fades through the hero's gutter; the SVG retains its own column. */
.hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  padding: clamp(1.5rem, 2.2vw, 3rem);
}
.hero .mark { font-size: clamp(3rem, 3.7vw, 5rem); }
.hero > .hero-film {
  position: absolute;
  inset: 0;
  width: calc(100% + clamp(1.5rem, 4vw, 5rem));
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: -2;
  pointer-events: none;
  /* Fade into the table on every edge, rather than framing a second card. */
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
/* A light overall wash leaves the film visible between the local text scrims. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(226, 230, 224, 0.08);
  pointer-events: none;
}
/* Each text box protects its own ink; feathered edges avoid a hard paper panel.
   The dark title/lead need less paper than the lighter secondary text. */
.hero > :is(.eyebrow, .mark, .lead, .aside) {
  position: relative;
  --scrim: rgba(226, 230, 224, 0.88);
}
.hero > :is(.mark, .lead) { --scrim: rgba(226, 230, 224, 0.60); }
.hero > .mark { --scrim: rgba(226, 230, 224, 0.56); }
.hero > :is(.eyebrow, .mark, .lead, .aside)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
  box-shadow: 0 0 12px 4px var(--scrim);
  border-radius: 0.5rem;
  pointer-events: none;
}
.motion-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-top: var(--gutter);
  background: var(--paper);
}
.motion-strip figure { margin: 0; min-width: 0; }
.motion-strip video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
}
.motion-strip figcaption {
  margin: 0.65rem 0 0;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .motion-strip { grid-template-columns: 1fr; }
}