/* Shared by service pages that tell a story down the page (Digital ads, Websites):
   sections rise into view, and the line wave at the foot shrinks into a banner */

:root { --banner-h: 26px; } /* same as the homepage banner */

/* Leave room above the banner once the page reaches the bottom */
.svc-page { padding-bottom: calc(var(--banner-h) + 48px); }

/* Content never sits under the wave: it fades out just above the wave's top edge,
   so it appears gradually as the wave shrinks (wave.js keeps --wave-h current) */
.svc-page {
  -webkit-mask-image: linear-gradient(to top, transparent var(--wave-h, 34vh), #000 calc(var(--wave-h, 34vh) + 56px));
  mask-image: linear-gradient(to top, transparent var(--wave-h, 34vh), #000 calc(var(--wave-h, 34vh) + 56px));
}

.story-section {
  padding: clamp(56px, 11vh, 120px) 4vw;
}
.story-title {
  margin: 0 0 .7em;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}

/* Sections rise from the bottom as they scroll into view */
.js .reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s ease, transform 1s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* The foot of the screen: line wave first, banner once you've scrolled */

.carpet-wave-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}
.story-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  height: var(--banner-h);
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-style: italic;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.story-roll {
  display: flex;
  width: max-content;
  animation: story-roll 50s linear infinite;
}
.story-half { display: flex; }
.story-half span { padding-right: 4em; }
@keyframes story-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .story-section { padding: 56px var(--gutter); }
  .story-banner { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .story-roll { animation: none; }
}