/* Final visual-system pass: readable navigation, subtitles and WCAG-safe labels. */
.desktop-nav a {
  color: #4f666d;
  font-family: var(--font-geist-mono), monospace;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.section-index { color: #315b65; }
.section-index.light { color: #9edfeb; }
.eyebrow.dark { color: #075668; }

.case-columns > div > span,
.case-context > span,
.case-impact > span {
  color: #075668;
  font-family: var(--font-geist-sans);
  font-size: var(--type-subtitle);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.case-columns > div + div > span { color: #b8edf5; }
.arch-node small { color: #8bbdc6; font-size: 1rem; font-weight: 700; line-height: 1; }
.sector-grid span { color: #315b65; font-size: 1rem; font-weight: 700; }

/* Decorative markers are icons or dots, never ordinal numbers. */
.assessment-areas article > span,
.assessment-process article > span,
.deliverables li > span,
.capability-grid article > span,
.card-head > span:first-child,
.services-page-grid > a > span { font-size: 0; }

/* Use a drawn arrow for calls to action: consistent across Apple and Android. */
.button > span[aria-hidden="true"],
.header-cta > span[aria-hidden="true"] {
  display: inline-block;
  flex: 0 0 .85rem;
  font-size: 0;
  height: .85rem;
  margin-left: .25rem;
  position: relative;
  width: .85rem;
}

.button > span[aria-hidden="true"]::before,
.header-cta > span[aria-hidden="true"]::before {
  background: currentColor;
  content: "";
  height: 1px;
  position: absolute;
  right: .02rem;
  top: .1rem;
  transform: rotate(-45deg);
  transform-origin: right center;
  width: .78rem;
}

.button > span[aria-hidden="true"]::after,
.header-cta > span[aria-hidden="true"]::after {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
  height: .4rem;
  position: absolute;
  right: .02rem;
  top: 0;
  width: .4rem;
}

/* All informational cards retain a complete, consistent contour on mobile. */
@media (max-width: 760px) {
  .assessment-areas,
  .reasons-grid {
    gap: 14px !important;
  }

  .assessment-areas article,
  .reasons-grid article {
    border: 1px solid var(--line) !important;
  }

  .case-columns li {
    padding: 14px 0 14px 28px !important;
    position: relative !important;
  }

  .case-columns li::before {
    left: 0 !important;
    margin-right: 0 !important;
    position: absolute !important;
    top: 14px !important;
  }

  /* The architecture is a centred, fully visible diagram rather than a cropped background. */
  .architecture {
    margin: 48px auto 36px !important;
    max-width: 390px !important;
    transform: none !important;
    transform-origin: center top !important;
    width: 100% !important;
  }

  /* The arrowhead now lands precisely at the end of each vertical flow. */
  .flow {
    align-items: center !important;
    display: flex !important;
    height: 72px !important;
    justify-content: center !important;
    position: relative !important;
  }

  .flow i {
    height: 100% !important;
    margin: 0 !important;
    width: 1px !important;
  }

  .flow i::after {
    bottom: -1px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
  }

  .flow span {
    left: calc(50% + 18px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  .mobile-menu nav {
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
  }
}

/* Mobile landscape must use the mobile layout without cropping the hero diagram. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    padding-top: 42px;
  }

  .architecture {
    margin-bottom: 24px;
    margin-top: 34px;
    max-width: 440px;
  }

  .hero-proof {
    margin-bottom: 18px;
  }

  /* On iOS a menu nested in the header does not reliably receive touch scrolling. */
  .mobile-menu nav {
    -webkit-overflow-scrolling: touch;
    bottom: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    right: 0;
    top: 72px;
    touch-action: pan-y;
  }

  .mobile-menu nav a {
    display: block;
    flex: 0 0 auto;
    padding: 15px 0;
  }
}

@media (max-width: 760px) {
  .section-index { font-size: .8125rem; }
  .case-columns > div > span,
  .case-context > span,
  .case-impact > span { font-size: 1.125rem; }
  .arch-node small { font-size: .875rem; }
}