/* SEO hero (Evan picked lab G, 2026-10-03): centred headline, white balls printed with the real logos drop in
   front of it, bounce, squash, roll, then the floor opens and it loops. js/seo-balls.js draws them on .sd-cv. */
.sd { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-block: 72px 132px; background: #fff; color: #000; text-align: center; }
.sd > .w-container { position: relative; z-index: 1; width: 100%; pointer-events: none; }   /* grabs fall through to the hero */
.sd .w-container a, .sd .w-container button { pointer-events: auto; }
.sd-cv { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }   /* balls in front of the text */
.sd h1 { margin: 0; color: #000; font-size: clamp(52px, 8.6vw, 148px); line-height: 1; letter-spacing: -.045em; font-weight: 500; }
.sd-v, .sd-a { display: block; }
.sd-roll { position: relative; display: block; height: 1.08em; overflow: hidden; }
.sd-roll > span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; transform: translateY(105%); transition: transform .9s cubic-bezier(.7, 0, .3, 1); }
.sd-roll > span.on { transform: none; }
.sd-roll > span.up { transform: translateY(-105%); }
.sd .lede { margin: 14px auto 0; max-width: 460px; font-size: 18px; line-height: 1.5; color: #6e6e73; }
.sd .buttons-flex-container { justify-content: center; margin-top: 22px; }
.sd .btn-secondary { background: #fff; }   /* stays readable when a ball rolls behind it */
.sd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-full { display: none; }
.sd.sd-still .sd-v { display: none; }   /* reduced motion: the whole sentence, still */
.sd.sd-still .sd-full { display: block; }
/* Phones (Evan approved 2026-10-05, mobile lab #3): headline and buttons sit higher so the balls pile up below them; buttons always on top. */
@media (max-width: 767px) { .sd { align-items: flex-start; padding-top: 104px; } .sd .buttons-flex-container { position: relative; z-index: 3; } }
