/* =========================================================
   Full-screen slider layer
   Every screen is at least one viewport tall and snaps
   into place like a slide.
   ========================================================= */

/* CSS snapping is the no-JS fallback. Once slides.js takes over it is
   switched off: the browser's own snap engine second-guesses the
   programmatic scrolls and drags them onto the wrong screen.

   The slider is a desktop-only treatment. Everything below 1200px is a
   normal scrolling document: the fold-fitting further down this file only
   exists at >=1200px, so snapping screens that were never sized to fit a
   fold is what made narrow viewports feel broken. Keeping these rules out
   of the mobile cascade also hands the sections their own padding back —
   `main > .section` (0,1,1) was outranking `.wwa`'s 200px of clearance
   (0,1,0) and pulling the copy up into the artwork. */
@media (min-width: 1200px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  html.has-slider {
    scroll-snap-type: none;
  }

  /* The header now rides above every slide instead of scrolling away. */
  .header {
    position: fixed;
  }

  /* Slides sit flush against each other — no sliver of the next screen. */
  main {
    gap: 0;
  }

  /* The footer deliberately gets no snap point of its own: an `end` aligned
     footer sits within proximity range of the contact screen and steals the
     snap from it. The slider scrolls to the page bottom instead. */
  main > .section {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 40px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The hero used to overshoot the fold by ~150px. */
  .hero {
    --hero-padding-top: 0px;
  }
}


/* --- Slide entrance -------------------------------------------------
   Every screen carries the site's `fade-up` entrance: opacity 0 and
   translateY(200px) until an IntersectionObserver adds `.animate-start`.
   That predates the slider and fights it — the slider parks a screen by
   its layout position, but an unrevealed screen paints 200px lower, so
   each step showed the neighbouring slide through the 200px band and
   then jerked into place. Worse, a fast step could start the next screen
   while the previous one was still travelling, and the two rode over one
   another. Under the slider the screens hold their position and fade. */
html.has-slider main > .section.animate--fade-up {
  transform: none;
}

html.has-slider main > .section {
  transition: opacity .45s ease;
}

/* --- Fitting the tall screens into one fold ------------------------ */

/* Section headings carry a big decorative watermark. Its reserved space
   now tracks viewport height instead of being a fixed 88 + 60px block. */
@media (min-width: 1200px) {
  main > .section {
    padding-top: var(--header-height);
  }

  .section__title--1 {
    padding-top: clamp(96px, 15vh, 184px);
  }

  .section__title--1:before {
    width: clamp(112px, 17vh, 206px);
    height: clamp(98px, 15vh, 181px);
  }

  .section__title--2 {
    padding-top: clamp(30px, 7vh, 88px);
    padding-bottom: clamp(12px, 4vh, 60px);
  }

  .section__title--2:before {
    width: clamp(112px, 17vh, 206px);
    height: clamp(113px, 17vh, 207px);
  }

  .wwd__title {
    margin-bottom: clamp(6px, 1.5vh, 22px);
  }

  .cases__title {
    margin-bottom: clamp(16px, 3vh, 42px);
  }

  /* "What we do": 6 cards over 3 rows — the densest screen on the site. */
  .wwd__list {
    --gap: clamp(48px, 8vw, 228px);
    row-gap: clamp(12px, 3vh, 108px);
  }

  .wwd-item {
    gap: clamp(24px, 3vw, 64px);
  }

  .wwd-item__img {
    width: clamp(90px, 12vh, 240px);
    height: clamp(110px, 15vh, 296px);
  }

  .wwd-item__desc {
    gap: clamp(6px, 1.4vh, 24px);
  }

  .wwd-item__title {
    font-size: clamp(16px, 2.1vh, 20px);
  }

  .wwd-item__text {
    font-size: clamp(13px, 2vh, 20px);
    letter-spacing: 1px;
  }

  .wwd-item__decore-line {
    height: clamp(6px, 1vh, 11px);
  }

  /* Case studies: the slide height is driven by the artwork. */
  .case__img {
    width: 100%;
    height: min(450px, calc(100vh - 440px));
  }

  /* Below ~1400px a fixed 596px of artwork squeezes the pitch column into
     a wrapping mess that outgrows the fold — so the artwork and the gutter
     give way first. */
  .case {
    gap: clamp(32px, 5vw, 96px);
  }

  .case__box--1 {
    max-width: min(596px, 46vw);
  }

  /* Let the pitch column use the room left over by the artwork instead of
     stopping at 450px — wider lines mean fewer wraps, so the card is
     shorter and reads better. */
  .case__box--2 {
    max-width: none;
  }

  .cases-swiper-pagination {
    padding-top: clamp(10px, 2vh, 24px);
    padding-bottom: clamp(10px, 2vh, 24px);
  }

  /* A single case study needs no pagination — that is 48px of the fold
     back. The rule lifts itself the moment a second case is added. */
  .cases-swiper-pagination:has(.swiper-pagination-bullet:only-child) {
    display: none;
  }

  /* …and by the pitch column, which is the taller of the two on short
     screens — so every band of it scales with viewport height. */
  .case__eyebrow {
    margin-bottom: clamp(8px, 1.6vh, 14px);
    padding: clamp(4px, .7vh, 6px) clamp(10px, 1.6vh, 14px);
    font-size: clamp(10px, 1.2vh, 11px);
  }

  .case__title {
    margin-bottom: clamp(4px, 1vh, 12px);
    font-size: clamp(22px, 3.4vh, 32px);
  }

  .case__subtitle:after {
    margin-top: clamp(6px, 1.4vh, 16px);
  }

  .case__lead {
    margin-top: clamp(10px, 1.7vh, 18px);
    font-size: clamp(14px, 1.85vh, 18px);
  }

  .case__wins {
    gap: clamp(6px, 1vh, 10px);
    margin-top: clamp(10px, 1.7vh, 18px);
  }

  .case__desc .case__wins li {
    gap: clamp(8px, 1.3vh, 12px);
    font-size: clamp(13px, 1.7vh, 16px);
  }

  .case__desc .case__wins li::before {
    width: clamp(16px, 2.2vh, 20px);
    height: clamp(16px, 2.2vh, 20px);
  }

  .case__stack {
    margin-top: clamp(12px, 2vh, 22px);
    padding-top: clamp(12px, 1.9vh, 20px);
  }

  .case__stack > p {
    margin-bottom: clamp(8px, 1.4vh, 14px);
  }

  .case__desc .case__stack li {
    padding: clamp(5px, .9vh, 8px) clamp(10px, 1.7vh, 16px);
    font-size: clamp(12px, 1.5vh, 14px);
  }

  .case__cta {
    gap: clamp(10px, 2vh, 18px);
    margin-top: clamp(12px, 2.2vh, 24px);
  }

  .case__cta-btn {
    height: clamp(42px, 5.6vh, 56px);
    font-size: clamp(14px, 1.9vh, 18px);
  }

  /* Our process — one line on desktop, still stacked on narrow screens. */
  .process__break {
    display: none;
  }

  .process__title {
    height: auto;
    min-height: clamp(80px, 16vh, 130px);
    padding-top: 0;
    margin-bottom: clamp(14px, 5vh, 52px);
    white-space: nowrap;
  }

  .process__list {
    gap: clamp(12px, 3.6vh, 44px);
  }

  .process-item {
    gap: clamp(12px, 2.8vh, 34px);
  }

  .process-item__desc {
    gap: clamp(16px, 3vw, 60px);
  }

  /* Same story on the process screen: the illustration yields width so the
     step descriptions stop wrapping onto extra lines. */
  .process__box--img {
    max-width: 44%;
  }

  .process__img {
    width: 100%;
    max-width: 810px;
  }

  .process__title {
    padding-left: clamp(96px, 13vw, 182px);
  }
}

/* 1200–1365px: the desktop layout at its tightest. The case artwork gives
   up more width still, otherwise the pitch column wraps past the fold. */
@media (min-width: 1200px) and (max-width: 1365px) {
  .case {
    gap: clamp(24px, 3vw, 40px);
  }

  .case__box--1 {
    max-width: 40vw;
  }

  .cases__title {
    font-size: 44px;
  }
}

/* Keep the case-study arrows clear of the slide rail on 1440-class screens. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .cases-swiper-btn-next {
    right: -60px;
  }

  .cases-swiper-btn-prev {
    left: -60px;
  }
}

/* --- Slide navigation dots ----------------------------------------- */

.slides-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity .3s ease;
}

.isLoading .slides-nav,
.burgerMenuIsOpen .slides-nav,
.modalIsOpen .slides-nav {
  opacity: 0;
  pointer-events: none;
}

.slides-nav__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-white, #fff);
}

.slides-nav__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Labels appear on hover only — a permanently visible one for the active
   dot would sit on top of the copy on the narrower screens. */
.slides-nav:hover .slides-nav__item[aria-current="true"] .slides-nav__label,
.slides-nav__item:hover .slides-nav__label,
.slides-nav__item:focus-visible .slides-nav__label {
  opacity: 1;
  transform: translateX(0);
}

.slides-nav__bullet {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.slides-nav__item:hover .slides-nav__bullet {
  background: rgba(255, 255, 255, .6);
}

.slides-nav__item[aria-current="true"] .slides-nav__bullet {
  background: var(--color-accent-primary, #3ab8fb);
  box-shadow: 0 0 0 4px rgba(58, 184, 251, .2);
  transform: scale(1.15);
}

@media (max-width: 1023px) {
  .slides-nav {
    right: 10px;
    gap: 14px;
  }

  .slides-nav__label {
    display: none;
  }

  .slides-nav__bullet {
    width: 8px;
    height: 8px;
  }
}

/* --- "Scroll" hint on the first slide ------------------------------- */

.slides-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .4s ease;
}

.slides-hint[data-hidden="true"],
.isLoading .slides-hint,
.burgerMenuIsOpen .slides-hint,
.modalIsOpen .slides-hint {
  opacity: 0;
}

.slides-hint__mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  position: relative;
}

.slides-hint__mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--color-accent-primary, #3ab8fb);
  animation: slides-hint-wheel 1.8s ease-in-out infinite;
}

@keyframes slides-hint-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 1023px) {
  .slides-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .slides-hint__mouse::after {
    animation: none;
  }
}

/* --- Below the slider breakpoint ------------------------------------
   The rail and the hint drive a slider that isn't running down here.
   Last in the file on purpose: both carry a `display` of their own
   further up, and these rules have to outrank it on source order. */
@media (max-width: 1199px) {
  .slides-nav,
  .slides-hint {
    display: none;
  }
}