/* =========================================================
   Sonke Design v22 — mobile navigation, pacing and readability
   ========================================================= */

/* First visit: three quick words, a clearly visible logo and a short exit. */
.js .home-page .site-loader {
  transition: opacity .25s ease, visibility .25s step-end;
}

.home-page.loader-play .site-loader__words > span:nth-of-type(1) {
  animation: loader-word-v22 .45s cubic-bezier(.2,.72,.2,1) .02s both;
}

.home-page.loader-play .site-loader__words > span:nth-of-type(2) {
  animation: loader-word-v22 .45s cubic-bezier(.2,.72,.2,1) .30s both;
}

.home-page.loader-play .site-loader__words > span:nth-of-type(3) {
  animation: loader-word-v22 .45s cubic-bezier(.2,.72,.2,1) .58s both;
}

.home-page.loader-play .site-loader__brand {
  animation: loader-brand-v22 .62s cubic-bezier(.16,1,.3,1) .82s both;
}

@keyframes loader-word-v22 {
  0% { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); }
  24%, 62% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.015); filter: blur(4px); }
}

@keyframes loader-brand-v22 {
  0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); }
  35%, 100% { opacity: 1; transform: none; filter: blur(0); }
}

/* Faster reveals prevent large blank areas during quick scrolling and anchors. */
.js [data-reveal],
.js .hero-reveal {
  transition-duration: .5s;
}

.js .reveal-mask > * {
  transition-duration: .52s;
}

/* Small editorial labels remain refined, but are readable for older clients. */
.eyebrow,
.section-label,
.kicker,
.small-label,
.nav .lang-switch,
.field label,
.case-v11-fact small,
.case-v11-kicker,
.case-v11-subnav a,
.case-v11-next__copy small,
.case-v11-more,
.ux-route-card > span {
  font-size: 11px;
}

.case-v11-tags span {
  font-size: 10.5px;
}

.case-v11-card figcaption,
.system-shot figcaption {
  font-size: 11.5px;
  line-height: 1.5;
}

/* Compact, non-scrolling section navigation for narrow screens. */
.mobile-section-nav {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mobile-section-select {
  width: 100%;
  min-height: 48px;
  padding: 0 48px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 20px) 21px / 6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 14px) 21px / 6px 6px no-repeat,
    rgba(248,245,240,.97);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  appearance: none;
}

/* Homepage: keep the five service areas, but give them a tighter editorial pace. */
.home-page .services-section {
  padding-block: clamp(72px, 7vw, 116px);
}

.home-page .service-row {
  min-height: 340px;
  padding-block: clamp(36px, 4.5vw, 60px);
}

.home-page .service-row__copy h3 {
  font-size: clamp(42px, 4vw, 64px);
}

/* Gallery toggles remain visible and easy to tap. */
.case-v11-card[hidden] {
  display: none;
}

.case-v11-more {
  min-height: 46px;
  padding: 14px 20px;
}

@media (max-width: 720px) {
  .page-subnav,
  .case-v11-subnav,
  .project-v9-subnav,
  .project-v7-subnav {
    display: none;
  }

  .mobile-section-nav {
    position: sticky;
    top: 64px;
    z-index: 25;
    display: block;
    width: 100%;
    padding-block: 10px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: rgba(248,245,240,.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .filter-bar {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-bar .filter {
    flex: 1 1 calc(50% - 8px);
    min-height: 42px;
  }

  .case-v11-hero__eyebrow,
  .case-v11-hero__scope {
    font-size: 11px;
    line-height: 1.55;
  }

  .home-page .services-section {
    padding-block: 68px;
  }

  .home-page .service-row {
    padding-block: 42px;
  }

  .home-page .service-row__copy h3 {
    font-size: clamp(38px, 11vw, 54px);
  }

  /* Bring the enquiry form into view sooner without removing contact details. */
  .contact-layout {
    gap: 28px;
    padding-top: 36px;
    padding-bottom: 72px;
  }

  .contact-copy h1 {
    margin: 16px 0 16px;
    font-size: clamp(43px, 12vw, 56px);
    line-height: .9;
  }

  .contact-copy > p {
    font-size: 16px;
    line-height: 1.55;
  }

  .contact-details {
    margin-top: 22px;
    gap: 10px;
  }

  .contact-form {
    padding-top: 4px;
  }

  .field label {
    letter-spacing: .14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page.loader-play .site-loader__words > span,
  .home-page.loader-play .site-loader__brand {
    animation: none;
  }
}