/* Shared mobile CTA and final stack for service pages. */

@media (max-width: 820px) {
  .fws-start-project__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }

  .fws-start-project__grid > .fws-start-project__field--span-4 {
    grid-column: auto !important;
  }

  .fws-start-project__main,
  .fws-start-project__main-col {
    display: contents !important;
  }

  .fws-start-project__site-url-field,
  .fws-start-project__privacy-bottom-dock {
    grid-column: 1 / -1 !important;
  }

  .fws-start-project__field--message textarea,
  .fws-start-project__field--message textarea::placeholder {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fws-start-project__field--message.is-active textarea,
  .fws-start-project__field--message:focus-within textarea {
    white-space: pre-wrap !important;
    overflow: auto !important;
    text-overflow: clip !important;
  }

  .fws-start-project button,
  .fws-start-project label,
  .fws-start-project input,
  .fws-start-project textarea,
  .fws-start-project [role="button"],
  .fws-start-project [role="option"] {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  .fws-start-project button:focus,
  .fws-start-project button:active,
  .fws-start-project label:focus,
  .fws-start-project label:active,
  .fws-start-project [role="button"]:focus,
  .fws-start-project [role="button"]:active,
  .fws-start-project [role="option"]:focus,
  .fws-start-project [role="option"]:active,
  .fws-start-project button:focus-visible,
  .fws-start-project label:focus-visible,
  .fws-start-project [role="button"]:focus-visible,
  .fws-start-project [role="option"]:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .fws-pv-stack5__title {
    opacity: var(--fws-mobile-stack-title-opacity, 0) !important;
    filter: blur(var(--fws-mobile-stack-title-blur, 22px)) !important;
    transform: translate3d(0, var(--fws-mobile-stack-title-y, 48px), 0) !important;
    transition: opacity .08s linear, filter .08s linear, transform .08s linear !important;
    will-change: opacity, filter, transform !important;
  }
}

@media (max-width: 760px) {
  .fws-start-project__site-check-title,
  .fws-start-project__select-btn {
    font-size: clamp(15px, 1.08vw, 17px) !important;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .fws-pv-stack5 {
    --fws-mobile-stack-pin-top: 188px;
    overflow: clip !important;
  }

  .fws-pv-stack5__scene {
    height: var(--fws-scene-h, 4200px) !important;
    min-height: var(--fws-scene-h, 4200px) !important;
    overflow: visible !important;
  }

  .fws-pv-stack5__pin,
  .fws-pv-stack5__pin.is-pinned {
    width: 100% !important;
    height: calc(100svh - var(--fws-mobile-stack-pin-top)) !important;
    overflow: hidden !important;
  }

  .fws-pv-stack5__pin {
    position: relative !important;
    inset: auto !important;
  }

  .fws-pv-stack5__pin.is-pinned {
    position: fixed !important;
    inset: var(--fws-mobile-stack-pin-top) auto auto 0 !important;
  }

  .fws-pv-stack5__pin.is-after {
    position: absolute !important;
    inset: auto 0 auto 0 !important;
    top: var(--fws-after-top, 0px) !important;
    width: 100% !important;
    height: var(--fws-after-h) !important;
    overflow: visible !important;
  }

  .fws-pv-stack5__pin-inner {
    width: calc(100% - 36px) !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .fws-pv-stack5__head {
    position: absolute !important;
    top: var(--fws-head-top) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .fws-pv-stack5__panel {
    position: absolute !important;
    top: var(--fws-panel-top) !important;
    min-height: var(--fws-panel-h) !important;
    transform: translate3d(0, var(--panel-y), 0) !important;
    overflow: hidden !important;
    border-top: 1px solid var(--fws-line) !important;
  }

  .fws-pv-stack5__panel-inner {
    min-height: var(--fws-panel-h) !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 0 28px !important;
    opacity: var(--text-opacity) !important;
    transform: translate3d(0, var(--text-shift), 0) !important;
    filter: blur(var(--text-blur)) !important;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .fws-pv-stack5__title {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .fws-start-project {
    padding: 52px 14px 44px !important;
  }

  .fws-start-project__head {
    margin-bottom: 26px !important;
  }

  .fws-start-project__title {
    font-size: clamp(31.5px, 8vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    white-space: normal !important;
  }

  .fws-start-project__title-muted {
    display: block !important;
  }

  .fws-start-project__subtitle {
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    letter-spacing: -0.04em !important;
  }

  .fws-start-project__grid {
    gap: 13px 8px !important;
  }

  .fws-start-project__field label:not(.fws-start-project__privacy):not(.fws-start-project__site-check),
  .fws-start-project__site-check-title {
    margin-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1.16 !important;
  }

  .fws-start-project__field input,
  .fws-start-project__field textarea,
  .fws-start-project__select-btn {
    font-size: 13.6px !important;
    line-height: 1.2 !important;
  }

  .fws-start-project__field input,
  .fws-start-project__select-btn,
  .fws-start-project__site-check {
    height: 48px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fws-start-project__select-btn {
    gap: 8px !important;
  }

  .fws-start-project__select-btn span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .fws-start-project__select-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .fws-start-project__field textarea {
    min-height: 48px !important;
    height: 48px !important;
    padding: 14px 12px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fws-start-project__field textarea::placeholder,
  .fws-start-project__field input::placeholder {
    font-size: 13.6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fws-start-project__field--message {
    min-height: 70px !important;
  }

  .fws-start-project__field--message textarea {
    top: 22px !important;
  }

  .fws-start-project__field--message.is-active textarea,
  .fws-start-project__field--message:focus-within textarea {
    min-height: 148px !important;
    height: 148px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    white-space: pre-wrap !important;
    overflow: auto !important;
    text-overflow: clip !important;
  }

  .fws-start-project__site-check {
    gap: 9px !important;
  }

  .fws-start-project__site-check input {
    width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
  }

  .fws-start-project__site-check span {
    font-size: 13.6px !important;
  }

  .fws-start-project__privacy {
    gap: 8px !important;
    font-size: 11.2px !important;
  }

  .fws-start-project__privacy input {
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
  }

  .fws-start-project__actions {
    margin-top: 28px !important;
    gap: 12px !important;
  }

  .fws-start-project__submit,
  .fws-start-project__submit--primary,
  .fws-start-project__submit--ghost {
    height: 46px !important;
    font-size: 14.5px !important;
  }
}

@media (max-height: 740px) and (max-width: 480px) {
  .fws-start-project {
    padding-top: 52px !important;
    padding-bottom: 44px !important;
  }
}