/* Scrolling quote — pinned card with a video tile and a word-by-word reveal. */
.sq {
  --sq-bg: #000;
  --sq-panel: var(--accent-deep);          
  --sq-text: #fff;
  height: 200dvh;               /* the section scrolls for 2 screens while the card stays pinned */
  padding: 0 24px;
  background: var(--sq-bg);
}
.sq__section { position: relative; margin: 0 auto; width: 100%; max-width: 2048px; }
.sq { overflow-x: clip; }
.sq__section { isolation: isolate; }
.sq__wrapper { position: relative; z-index: 1; display: flex; width: 100%; padding-bottom: 12px; min-height: 70vh; }
/* the light-grey "tab" peeking under the card: a preview of the next section's card (::after on the wrapper) */
.sq__wrapper::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: calc(100% - 4px); left: 50%;
  width: calc(100vw - 48px); height: 20vh; transform: translate(-50%); transform-origin: top;
  background: var(--sq-tab, #eaeaea); border-radius: 16px 16px 0 0; }
.sq__inner { position: relative; z-index: 1; display: flex; flex: 1; gap: 8px; min-height: 70vh; height: 70vh; }
.sq__media { position: relative; flex: none; width: 362px; height: 60%;
  background: #000; border-radius: 24px; overflow: hidden; }
.sq__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sq__panel { flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--sq-panel); border-radius: 16px; padding: 48px 56px; }
.sq__quote { max-width: 64rem; margin: 0; font: 400 64px/64px 'Inter', Arial, sans-serif; letter-spacing: -0.01em;
  color: var(--sq-text); text-wrap: balance; }
/* SplitText output: each line is masked (overflow clip) so words can rise into it, each word is its own box */
.sq__quote .sq-line-mask { overflow: clip; margin: -0.12em 0; padding: 0.12em 0; }
.sq__quote .sq-word { display: inline-block; }

@media (max-width: 767px) {
  .sq { padding: 0 12px; }
  .sq__wrapper::after { width: calc(100vw - 24px); border-radius: 8px 8px 0 0; }
  .sq__inner { padding-top: 1rem; }
  .sq__inner { flex-direction: column; height: calc(92svh - 1.25rem + 1.5rem); min-height: 0; }
  .sq__media { width: 100%; height: auto; flex: 1 1 0; border-radius: 8px; }
  .sq__panel { flex: 2 1 0; border-radius: 8px; padding: 32px; overflow-y: auto; }
  .sq__quote { font-size: 40px; line-height: 40px; }
}