/* Three-service symbol system: frame / workflow / architecture */
.nt-symbol,
.site-header .nav a:nth-child(-n+3)::before,
.concept-b .scene--service .scene__num::before,
.service .service-hero--new .eyebrow::after,
.service .section-head::before,
.service .contact::after {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--nt-symbol) center / contain no-repeat;
  mask: var(--nt-symbol) center / contain no-repeat;
}

.nt-symbol--web,
.site-header .nav a:nth-child(1)::before,
.concept-b .scene--web .scene__num::before,
.service--web .service-hero--new .eyebrow::after,
.service--web .section-head::before,
.service--web .contact::after { --nt-symbol: url('./symbols/web.svg'); }

.nt-symbol--tools,
.site-header .nav a:nth-child(2)::before,
.concept-b .scene--tools .scene__num::before,
.service--tools .service-hero--new .eyebrow::after,
.service--tools .section-head::before,
.service--tools .contact::after { --nt-symbol: url('./symbols/tools.svg'); }

.nt-symbol--system,
.site-header .nav a:nth-child(3)::before,
.concept-b .scene--system .scene__num::before,
.service--system .service-hero--new .eyebrow::after,
.service--system .section-head::before,
.service--system .contact::after { --nt-symbol: url('./symbols/system.svg'); }

/* Full-screen navigation */
.site-header .nav a:nth-child(-n+3)::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: clamp(18px, 3vw, 52px);
  top: 50%;
  width: clamp(54px, 7vw, 108px);
  color: #fff;
  opacity: .68;
  transform: translateY(-50%) rotate(-4deg);
  transition: opacity .4s, transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.site-header .nav a:nth-child(1)::before { color: #4b86ff; }
.site-header .nav a:nth-child(2)::before { color: #31cb82; }
.site-header .nav a:nth-child(3)::before { color: #ff8243; }
.site-header .nav a:nth-child(-n+3):hover::before,
.site-header .nav a:nth-child(-n+3)[aria-current="page"]::before {
  opacity: 1;
  transform: translateY(-50%) rotate(0) scale(1.12);
}

/* Top portal scene labels */
.concept-b .scene--service .scene__num {
  display: flex;
  align-items: center;
  gap: 13px;
}
.concept-b .scene--service .scene__num::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  color: var(--accent);
}

/* Dedicated service pages */
.service .service-hero--new .eyebrow::after {
  content: "";
  width: 23px;
  margin-left: 4px;
  color: var(--accent);
}
.service .section-head { position: relative; }
.service .section-head::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  top: -.15em;
  width: clamp(56px, 7vw, 108px);
  color: var(--accent);
  opacity: .11;
  pointer-events: none;
}
.service .section-head > * { position: relative; z-index: 1; }
.service .contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(24px, 8vw, 150px);
  bottom: clamp(30px, 7vh, 80px);
  width: clamp(150px, 27vw, 430px);
  color: #fff;
  opacity: .13;
  transform: rotate(-6deg);
  pointer-events: none;
}

@media (max-width: 800px) {
  .site-header .nav a:nth-child(-n+3)::before {
    right: 14px;
    width: 54px;
    opacity: .78;
  }
  .concept-b .scene--service .scene__num::before { width: 19px; }
  .service .section-head::before { top: 0; width: 54px; }
  .service .contact::after { right: -22px; bottom: 54px; width: 190px; }
}