.tt-mobile-hero {
  display: none;
}

.tt-mobile-intro {
  display: none;
}

@media (max-width: 1199.98px) {
  .tt-mobile-hero {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(480px, calc(100svh - var(--tt-mobile-header-height, 64px)), 520px);
    min-height: 480px;
    overflow: hidden;
    box-sizing: border-box;
    background: #3b3b3b;
    color: #dcdcdc;
    isolation: isolate;
  }

  .tt-mobile-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(59, 59, 59, .38) 0, rgba(59, 59, 59, 0) 48%),
      linear-gradient(0deg, rgba(59, 59, 59, .52) 0, rgba(59, 59, 59, 0) 42%);
  }

  .tt-mobile-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(220, 220, 220, .045) calc(33.333% - .5px), rgba(220, 220, 220, .045) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(90deg, transparent calc(33.333% + 7.5px), rgba(220, 220, 220, .045) calc(33.333% + 7.5px), rgba(220, 220, 220, .045) calc(33.333% + 8.5px), transparent calc(33.333% + 8.5px)),
      linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(220, 220, 220, .045) calc(66.666% - .5px), rgba(220, 220, 220, .045) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(90deg, transparent calc(66.666% + 7.5px), rgba(220, 220, 220, .045) calc(66.666% + 7.5px), rgba(220, 220, 220, .045) calc(66.666% + 8.5px), transparent calc(66.666% + 8.5px));
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 34%,
      transparent 34%,
      transparent 80%,
      #000 80%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 34%,
      transparent 34%,
      transparent 80%,
      #000 80%,
      #000 100%
    );
  }

  .tt-mobile-hero__field {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .82;
    pointer-events: none;
  }

  .tt-mobile-hero__title {
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 20px;
    margin: 0;
    color: #dcdcdc;
    font-family: "Space Mono", monospace;
    font-size: clamp(35px, 11vw, 56px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.055em;
    text-transform: uppercase;
  }

  .tt-mobile-hero__title-line {
    display: block;
    white-space: nowrap;
  }

  .tt-mobile-hero__ndt {
    display: block;
    margin-left: -.22em;
  }

  .tt-mobile-hero__bracket {
    display: inline-block;
  }

  .tt-mobile-hero__services {
    display: inline-block;
    margin-left: -.3em;
  }

  .tt-mobile-hero__benefits {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 20px;
    left: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tt-mobile-hero__benefits li {
    display: block;
    min-height: 0;
    color: #dcdcdc;
    font-family: "DotGothic16", sans-serif;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: lowercase;
  }

  .tt-mobile-intro {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 48px 20px 64px;
    box-sizing: border-box;
    background: #3b3b3b;
    color: rgba(220, 220, 220, .88);
    text-align: left;
    isolation: isolate;
  }

  .tt-mobile-intro::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .6;
    background:
      linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(220, 220, 220, .075) calc(33.333% - .5px), rgba(220, 220, 220, .075) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(90deg, transparent calc(33.333% + 7.5px), rgba(220, 220, 220, .075) calc(33.333% + 7.5px), rgba(220, 220, 220, .075) calc(33.333% + 8.5px), transparent calc(33.333% + 8.5px)),
      linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(220, 220, 220, .075) calc(66.666% - .5px), rgba(220, 220, 220, .075) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(90deg, transparent calc(66.666% + 7.5px), rgba(220, 220, 220, .075) calc(66.666% + 7.5px), rgba(220, 220, 220, .075) calc(66.666% + 8.5px), transparent calc(66.666% + 8.5px));
  }

  .tt-mobile-intro > * {
    position: relative;
    z-index: 1;
  }

  .tt-mobile-intro h2 {
    max-width: 430px;
    margin: 0 0 18px;
    font: 800 16px/1.18 "Manrope", sans-serif;
  }

  .tt-mobile-intro p {
    max-width: 430px;
    margin: 0 0 14px;
    color: rgba(220, 220, 220, .86);
    font: 400 14px/1.24 "Manrope", sans-serif;
  }

  .tt-mobile-intro p:last-child {
    margin-bottom: 0;
  }

  /* Keep the original canvas alive as the visual source, without letting
     the fixed desktop hero occupy space in the mobile document flow. */
  html body .tt-stage .tt-stage__inner #tt-hero.tt-hero {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

}

@media (min-width: 600px) and (max-width: 1199.98px) {
  .tt-mobile-intro {
    padding-right: clamp(28px, 5vw, 60px);
    padding-left: 20px;
  }
}

/* Keep the scan field clear of the two-line title throughout the full
   responsive layout. The desktop hero takes over at 1200px. */
@media (max-width: 1199.98px) {
  .tt-mobile-hero__field {
    transform: translateY(30px);
  }
}

@media (max-width: 359px) {
  .tt-mobile-hero__title {
    font-size: 35px;
  }
}