/* CyberX Lb — tech stack marquee (Simple Icons, inlined as fillable SVGs).
   Two rows drift in opposite directions and loop seamlessly: each track holds the
   same chips twice, so translating it -50% lands exactly on the duplicate. The
   spacing therefore lives on each chip's margin, not a flex gap — a gap would add
   one extra space between the two copies and make the loop jump.
   Icons sit muted and take their real brand colour on hover; brands whose official
   colour is black/near-black are emitted as white, since black is invisible here. */
.tech-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.tech-eyebrow {
  color: #8a8a8a;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.tech-title {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}

.tech-lede {
  color: #8a8a8a;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem 0 0;
}

/* Capped, not full-bleed: a seamless loop needs one copy of a track to be wider
   than its visible strip, and the shorter rows (10 chips) stop being wide enough
   past ~1900px. Capping the strip keeps every row filled at any viewport — and
   reads better on a large monitor than logos strung across the full width. */
.tech-marquee {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Static label, then the drifting strip. */
.tech-cat {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem;
}

.tech-cat-label {
  color: #6f6f6f;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: right;
  margin: 0;
  padding-right: 1.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* The mask lives on the strip, not the whole block — on the wrapper it would
   fade the category labels out too. */
.tech-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
}

/* The theme has a global `ul { flex-flow: column; gap: 1.11vw }` rule, so the row
   direction and the zero gap must both be stated outright: the gap would add one
   extra space between the two copies and make the -50% loop jump. */
.tech-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: tech-scroll 60s linear infinite;
}

.tech-row--reverse .tech-track {
  animation-direction: reverse;
}

/* Slightly different speeds per row, so the four strips don't march in lockstep. */
.tech-cat:nth-child(2) .tech-track {
  animation-duration: 68s;
}

.tech-cat:nth-child(3) .tech-track {
  animation-duration: 52s;
}

.tech-cat:nth-child(4) .tech-track {
  animation-duration: 62s;
}

@keyframes tech-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Let visitors stop the drift to read a logo. */
.tech-marquee:hover .tech-track {
  animation-play-state: paused;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: 3.5rem;
  white-space: nowrap;
}

.tech-icon {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  fill: #7d7d7d;
  transition: fill 0.3s ease;
}

.tech-name {
  color: #7d7d7d;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.tech-chip:hover .tech-icon {
  fill: var(--brand);
}

.tech-chip:hover .tech-name {
  color: #fff;
}

@media (max-width: 767px) {
  .tech-marquee {
    gap: 1.5rem;
  }

  /* No room for a side label — stack it above its strip. */
  .tech-cat {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .tech-cat-label {
    text-align: left;
    padding-right: 0;
    padding-left: 0.65rem;
    border-right: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    font-size: 0.68rem;
  }

  .tech-chip {
    gap: 0.5rem;
    margin-right: 2.25rem;
  }

  .tech-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .tech-name {
    font-size: 0.8rem;
  }

  .tech-track {
    animation-duration: 40s;
  }

  .tech-head {
    margin-bottom: 2.5rem;
  }

  .tech-lede {
    font-size: 0.9rem;
  }
}

/* No motion: drop the animation and let the chips wrap into a static block — the
   track is width:max-content, so it would otherwise overflow while frozen. The
   loop's duplicate chips are hidden here, or every logo would appear twice. */
@media (prefers-reduced-motion: reduce) {
  .tech-marquee {
    gap: 2rem;
  }

  .tech-cat {
    align-items: start;
  }

  .tech-cat-label {
    padding-top: 0.25rem;
  }

  .tech-row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tech-track {
    flex-wrap: wrap;
    width: auto;
    row-gap: 1rem;
    animation: none;
  }

  .tech-chip[aria-hidden="true"] {
    display: none;
  }

  .tech-icon,
  .tech-name {
    transition: none;
  }
}

/* CyberX Lb — works gallery images.
   The <img> tags carry width/height attributes (1200x~570) which, with no CSS
   height set, became their layout height inside the 16/9 overflow:hidden wrapper —
   object-fit:cover then zoomed hard into the image (badly cropped on mobile).
   These are full website screenshots, so the wrapper is matched to their real
   ~2.1 aspect ratio to show them uncropped, and the scroll-driven parallax
   transform is neutralized so the image can't leave a gap inside the wrapper. */
.works-image-wrapper {
  aspect-ratio: 1200 / 572;
  min-height: 0 !important;
  max-height: none !important;
}

.works-image-wrapper .parallax-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}

/* CyberX Lb — logo size & visibility */
.logo-link-wrapper.w-nav-brand,
.footer-logo-link-wrapper.w-nav-brand {
  max-width: none !important;
  width: auto !important;
}

.logo-link-wrapper .logo {
  display: block;
  height: 3.75rem;
  width: auto;
  max-width: 18rem;
  object-fit: contain;
}

.footer-logo-link-wrapper .footer-logo {
  display: block;
  height: 3.25rem;
  width: auto;
  max-width: 16rem;
  object-fit: contain;
}

@media (max-width: 991px) {
  .logo-link-wrapper .logo {
    height: 2.75rem;
    max-width: 14rem;
  }

  .footer-logo-link-wrapper .footer-logo {
    height: 2.5rem;
    max-width: 12rem;
  }
}

@media (max-width: 479px) {
  .logo-link-wrapper .logo {
    height: 2.35rem;
    max-width: 11rem;
  }
}