@media (max-width: 1199.98px) {
  #tt-request-block.tt-request-block {
    --tt-request-gutter: 20px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--tt-request-bg, #3b3b3b) !important;
    color: var(--cold, #dcdcdc) !important;
    isolation: isolate !important;
  }

  #tt-request-block .tt-request-stage {
    position: relative !important;
    z-index: 1 !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 42px var(--tt-request-gutter) 56px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #tt-request-block .tt-request-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent calc(33.333% - .5px), var(--tt-request-mobile-line) calc(33.333% - .5px), var(--tt-request-mobile-line) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(90deg, transparent calc(33.333% + 7.5px), var(--tt-request-mobile-line) calc(33.333% + 7.5px), var(--tt-request-mobile-line) calc(33.333% + 8.5px), transparent calc(33.333% + 8.5px)),
      linear-gradient(90deg, transparent calc(66.666% - .5px), var(--tt-request-mobile-line) calc(66.666% - .5px), var(--tt-request-mobile-line) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(90deg, transparent calc(66.666% + 7.5px), var(--tt-request-mobile-line) calc(66.666% + 7.5px), var(--tt-request-mobile-line) calc(66.666% + 8.5px), transparent calc(66.666% + 8.5px));
  }

  /* Service pages use the light request theme. Keep its paired vertical
     grid above the solid stage background and below all form content. */
  #tt-request-block.tt-request-block--light .tt-request-stage::before {
    z-index: 2 !important;
    background:
      linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(48, 48, 48, .08) calc(33.333% - .5px), rgba(48, 48, 48, .08) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(90deg, transparent calc(33.333% + 7.5px), rgba(48, 48, 48, .08) calc(33.333% + 7.5px), rgba(48, 48, 48, .08) calc(33.333% + 8.5px), transparent calc(33.333% + 8.5px)),
      linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(48, 48, 48, .08) calc(66.666% - .5px), rgba(48, 48, 48, .08) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(90deg, transparent calc(66.666% + 7.5px), rgba(48, 48, 48, .08) calc(66.666% + 7.5px), rgba(48, 48, 48, .08) calc(66.666% + 8.5px), transparent calc(66.666% + 8.5px)) !important;
  }

  #tt-request-block .tt-request-stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--tt-request-mobile-rule) !important;
    pointer-events: none;
  }

  #tt-request-block .tt-request-grid-lines {
    display: none !important;
  }

  #tt-request-block .tt-request-title {
    position: relative !important;
    z-index: 4 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    margin: 0 auto !important;
    color: var(--cold, #dcdcdc) !important;
    font-family: "Space Mono", monospace !important;
    font-size: clamp(35px, 11vw, 56px) !important;
    font-weight: 700 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  #tt-request-block .tt-request-title span,
  #tt-request-block .tt-request-word--service,
  #tt-request-block .tt-request-word--request {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  #tt-request-block .tt-request-word--request {
    margin-top: 2px !important;
  }

  #tt-request-block .tt-request-diagram {
    position: relative !important;
    z-index: 2 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    height: clamp(160px, 47vw, 330px) !important;
    margin: -34px auto 22px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #tt-request-block .tt-request-diagram::before {
    content: "";
    position: absolute !important;
    z-index: 0 !important;
    inset: -1px 3.5% 15px !important;
    border: 1px dashed var(--tt-request-mobile-dash) !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 260ms ease-out 120ms;
  }

  #tt-request-block .tt-request-diagram img {
    position: absolute !important;
    z-index: 1 !important;
    left: -3% !important;
    top: 10px !important;
    display: block !important;
    width: 106% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(0, 12px, 0);
    transition:
      clip-path 720ms cubic-bezier(.77, 0, .175, 1) 120ms,
      transform 520ms cubic-bezier(.23, 1, .32, 1) 120ms,
      opacity 160ms ease-out 120ms;
  }

  #tt-request-block .tt-request-diagram-meta {
    position: absolute !important;
    z-index: 3 !important;
    right: 4% !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    color: var(--cold, #dcdcdc) !important;
    font-family: "DotGothic16", sans-serif !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
    line-height: 1.28 !important;
    letter-spacing: .02em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      transform 360ms cubic-bezier(.23, 1, .32, 1) 620ms,
      opacity 260ms ease-out 620ms;
  }

  #tt-request-block .tt-request-diagram-meta > div:not(:last-child) {
    display: none !important;
  }

  #tt-request-block .tt-request-diagram-meta > div:last-child,
  #tt-request-block .tt-request-diagram-meta span {
    display: block !important;
    white-space: nowrap !important;
  }

  #tt-request-block.is-mobile-visible .tt-request-diagram::before,
  #tt-request-block.is-mobile-visible .tt-request-diagram img,
  #tt-request-block.is-mobile-visible .tt-request-diagram-meta {
    opacity: 1;
  }

  #tt-request-block.is-mobile-visible .tt-request-diagram img {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }

  #tt-request-block.is-mobile-visible .tt-request-diagram-meta {
    transform: translate3d(0, 0, 0);
  }

  #tt-request-block .tt-request-intro {
    position: relative !important;
    z-index: 4 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    color: var(--cold, #dcdcdc) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  #tt-request-block .tt-request-ui {
    position: relative !important;
    z-index: 4 !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #tt-request-block .tt-f {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
  }

  #tt-request-block .tt-f-label {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--cold, #dcdcdc) !important;
    font-family: "Space Mono", monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #tt-request-block .tt-f-control {
    width: 100% !important;
  }

  /* Validation copy must participate in the document flow on responsive
     layouts. Some messages wrap to two or more lines; absolutely positioning
     them in the fixed field gap lets the next control paint on top of them. */
  #tt-request-block .tt-f-err {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 7px 0 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* The generated country picker previously shrank to 88px on phones,
     leaving the dropdown arrow over the final digit of codes such as +370. */
  #tt-request-block .tt-phone-country-wrap {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
  }

  #tt-request-block .tt-phone-country {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    padding: 0 28px 0 12px !important;
  }

  #tt-request-block .tt-request-ui input,
  #tt-request-block .tt-request-ui textarea {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--field-fill, rgba(220, 220, 220, .08)) !important;
    box-sizing: border-box !important;
    color: var(--cold, #dcdcdc) !important;
    -webkit-text-fill-color: var(--cold, #dcdcdc) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  #tt-request-block .tt-request-ui textarea {
    height: 124px !important;
    padding-top: 13px !important;
  }

  #tt-request-block .tt-request-submit {
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    font-size: 16px !important;
  }

  #tt-request-block .tt-request-submit:active {
    transform: scale(.98);
  }

  #tt-request-block .tt-request-privacy {
    margin-top: 12px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  #tt-request-block .tt-request-state {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* Keep the request-step diagram static; do not animate its fill/reveal. */
@media (max-width: 1199.98px) {
  html body #tt-request-block.tt-request-block[id] .tt-request-diagram img,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-diagram img {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 359px) {
  #tt-request-block.tt-request-block {
    --tt-request-gutter: 16px;
  }

  #tt-request-block .tt-request-diagram {
    height: 160px !important;
  }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  #tt-request-block .tt-request-diagram::before,
  #tt-request-block .tt-request-diagram img,
  #tt-request-block .tt-request-diagram-meta {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 180ms ease !important;
  }

  #tt-request-block .tt-request-diagram img {
    clip-path: none !important;
  }
}

/* tokens.css deliberately uses a strong desktop recovery selector. Keep the
   mobile composition authoritative after that recovery layer. */

@media (max-width: 1199.98px) {
  /* Override the desktop fixed-height recovery rules so the footer follows
     the complete mobile form instead of covering its lower fields. */
  html body #tt-request-block.tt-request-block[id],
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-stage,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-title,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    margin: 0 auto !important;
    font-size: clamp(35px, 11vw, 56px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-title span,
  html body #tt-request-block.tt-request-block[id] .tt-request-word--service,
  html body #tt-request-block.tt-request-block[id] .tt-request-word--request,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-title span,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-word--service,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-word--request {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-diagram,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-diagram {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    height: clamp(160px, 47vw, 330px) !important;
    margin: -34px auto 22px !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-diagram::before,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-diagram::before {
    inset: -1px 3.5% 15px !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-diagram img,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-diagram img {
    left: -3% !important;
    top: 10px !important;
    width: 106% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-diagram-meta,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-diagram-meta {
    right: 4% !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-ui .tt-f,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-ui .tt-f {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin: 0 0 24px !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-ui,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-ui {
    position: relative !important;
    z-index: 4 !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 680px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  html body #tt-request-block.tt-request-block[id] .tt-request-ui .tt-f-label,
  html body:has(#tt-services-page-hero) #tt-request-block.tt-request-block[id] .tt-request-ui .tt-f-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: left !important;
  }
}