/* Round 5.2: global mobile spacing refinement.
   Intent: keep the existing visual design, but add safe phone gutters and stop sections from touching viewport edges. */

@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --pcd-mobile-gutter: clamp(18px, 5.2vw, 26px);
    --pcd-mobile-gutter-tight: clamp(14px, 4.4vw, 22px);
    --pcd-mobile-section-y: clamp(58px, 13vw, 84px);
  }

  /* Global section safe gutters. This does not redesign sections; it only adds phone-safe breathing room. */
  html body section,
  html body header,
  html body footer,
  html body main > div,
  html body .video-showcase,
  html body #ffrs-video-showcase,
  html body #products,
  html body #domains,
  html body #tech,
  html body #capabilities,
  html body #cta,
  html body #mission,
  html body #reqs,
  html body #scenarios,
  html body #comp,
  html body #danger,
  html body #engineered,
  html body .media-main,
  html body .media-section,
  html body .story-section,
  html body .technology-section,
  html body .contact-page,
  html body .privacy-main {
    padding-left: var(--pcd-mobile-gutter) !important;
    padding-right: var(--pcd-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Inner wrappers should fill the safe area, not reset back to the physical viewport edge. */
  html body .container,
  html body .video-wrap,
  html body .ffrs-video-wrap,
  html body .media-shell,
  html body .media-head,
  html body .media-video-grid,
  html body .media-article-grid,
  html body .story-wrap,
  html body .story-hero-inner,
  html body .technology-page,
  html body .tech-page,
  html body .tech-wrap,
  html body .tech-ecosystem,
  html body .tech-foundation,
  html body .contact-shell,
  html body .contact-layout,
  html body .reqs-inner,
  html body .scen-inner,
  html body .comp-inner,
  html body .eng-inner,
  html body .cta-content,
  html body .foot-grid,
  html body .foot-bottom,
  html body .privacy-wrap,
  html body .privacy-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .video-showcase {
    padding-top: var(--pcd-mobile-section-y) !important;
    padding-bottom: var(--pcd-mobile-section-y) !important;
  }

  html body .video-wrap,
  html body .ffrs-video-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 7vw, 36px) !important;
  }

  html body .video-copy,
  html body .ffrs-video-copy,
  html body .media-video-copy,
  html body .section-head,
  html body .scen-head,
  html body .reqs-header,
  html body .contact-intro {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .video-copy h2,
  html body .ffrs-video-copy h2,
  html body .section-title,
  html body .s-h,
  html body .story-heading,
  html body .media-head h2,
  html body #cta h2 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body .video-copy p,
  html body .ffrs-video-copy p,
  html body .section-desc,
  html body .media-head p,
  html body .contact-copy,
  html body .tech-page-copy,
  html body .story-text {
    max-width: 100% !important;
  }

  html body .video-frame,
  html body .ffrs-video-frame,
  html body .media-video-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .video-frame::after,
  html body .ffrs-video-frame::after {
    transform: translate(8px, 8px) !important;
  }

  html body .video-aspect,
  html body .ffrs-video-aspect,
  html body .media-video-aspect,
  html body .video-embed {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    position: relative !important;
  }

  html body iframe,
  html body video,
  html body embed,
  html body object {
    max-width: 100% !important;
  }

  /* Cards and grids keep the same design, but respect the same mobile gutters. */
  html body .products-grid,
  html body .product-grid,
  html body .portfolio-grid,
  html body .domain-grid,
  html body .cap-grid,
  html body .story-grid,
  html body .story-cards,
  html body .contact-info-grid,
  html body .reqs-grid,
  html body .scen-grid,
  html body .spec-grid-full,
  html body .media-video-grid,
  html body .media-article-grid,
  html body .branch-grid,
  html body .ecosystem-grid,
  html body .ecosystem-branches {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .product-card,
  html body .domain-card,
  html body .cap,
  html body .cap-card,
  html body .mission-card,
  html body .story-card,
  html body .contact-info-card,
  html body .contact-form-panel,
  html body .req-c,
  html body .scen-c,
  html body .pillar,
  html body .comp,
  html body .ecosystem-card,
  html body .branch-card,
  html body .media-video-card,
  html body .media-article-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make absolute/background label text harmless on small screens. */
  html body .video-showcase::before,
  html body #ffrs-video-showcase::before,
  html body .media-hero::before,
  html body .story-hero::before,
  html body .technology-hero::before {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  body {
    --pcd-mobile-gutter: clamp(20px, 5.8vw, 28px);
    --pcd-mobile-gutter-tight: clamp(16px, 4.8vw, 22px);
  }

  html body .hero-content,
  html body .deminer-hero-content,
  html body .story-hero-inner,
  html body .technology-hero-inner,
  html body .contact-intro,
  html body .media-hero-inner,
  html body .offensive-coming-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body #hero,
  html body .hero,
  html body .story-hero,
  html body .technology-hero,
  html body .media-hero,
  html body .contact-page,
  html body .offensive-coming-soon,
  html body .deminer-clean-hero,
  html body .vanquisher-clean-hero {
    padding-left: var(--pcd-mobile-gutter) !important;
    padding-right: var(--pcd-mobile-gutter) !important;
  }

  html body .video-frame,
  html body .ffrs-video-frame,
  html body .media-video-frame {
    padding: 10px !important;
  }

  html body .video-placeholder-btn,
  html body .btn,
  html body .nav-btn,
  html body .deminer-btn,
  html body .contact-submit,
  html body .media-cta a {
    max-width: 100% !important;
  }

  /* Tables can scroll internally, while the page itself stays fixed to viewport width. */
  html body .comparison-wrap,
  html body .compare-wrap,
  html body .analysis-table-wrap,
  html body .table-wrap,
  html body .table-shell,
  html body .spec-table,
  html body .specs-table,
  html body .data-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 430px) {
  body {
    --pcd-mobile-gutter: 20px;
  }

  html body section,
  html body header,
  html body footer,
  html body .video-showcase,
  html body #ffrs-video-showcase,
  html body #products,
  html body #domains,
  html body #tech,
  html body #capabilities,
  html body #cta,
  html body #mission,
  html body #reqs,
  html body #scenarios,
  html body #comp,
  html body #danger,
  html body #engineered,
  html body .media-main,
  html body .media-section,
  html body .story-section,
  html body .technology-section,
  html body .contact-page,
  html body .privacy-main {
    padding-left: var(--pcd-mobile-gutter) !important;
    padding-right: var(--pcd-mobile-gutter) !important;
  }

  html body .video-copy h2,
  html body .ffrs-video-copy h2,
  html body .section-title,
  html body .s-h,
  html body .story-heading,
  html body .media-head h2,
  html body #cta h2 {
    letter-spacing: -0.9px !important;
  }

  html body .video-showcase::before {
    right: -28vw !important;
  }
}


/* Round 5.3: homepage mobile hero refinement.
   Keep desktop untouched; on phone hide the three eyebrow lines and reposition the hero photo lower so the machines remain visible beneath the headline. */
@media (max-width: 760px) {
  html body #hero {
    min-height: 860px !important;
    height: auto !important;
    align-items: flex-start !important;
    background-position: 66% bottom !important;
    padding-top: 0 !important;
    padding-bottom: 34px !important;
  }

  html body #hero .hero-photo {
    object-position: 66% bottom !important;
    object-fit: cover !important;
    transform: none !important;
  }

  html body #hero .hero-shadow {
    background:
      radial-gradient(ellipse at 62% 72%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.20) 64%, rgba(0,0,0,.62) 100%),
      linear-gradient(180deg, rgba(5,5,5,.84) 0%, rgba(5,5,5,.54) 24%, rgba(5,5,5,.24) 44%, rgba(5,5,5,.14) 64%, rgba(5,5,5,.52) 100%),
      linear-gradient(90deg, rgba(5,5,5,.68) 0%, rgba(5,5,5,.24) 42%, rgba(5,5,5,.12) 100%) !important;
  }

  html body #hero .eyebrow {
    display: none !important;
  }

  html body #hero .hero-content {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 !important;
    padding: 112px 0 0 0 !important;
    position: relative !important;
    z-index: 4 !important;
  }

  html body #hero .hero-title {
    font-size: clamp(52px, 15.5vw, 68px) !important;
    line-height: 0.90 !important;
    letter-spacing: -2px !important;
    margin-bottom: 14px !important;
  }

  html body #hero .hero-sub {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 3px !important;
    margin-bottom: 18px !important;
    max-width: 300px !important;
  }

  html body #hero .hero-copy {
    max-width: 310px !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
    margin-bottom: 24px !important;
  }

  html body #hero .hero-actions {
    gap: 12px !important;
    align-items: stretch !important;
  }

  html body #hero .hero-actions .btn,
  html body #hero .hero-actions .btn.ghost {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  html body #hero {
    min-height: 820px !important;
    background-position: 64% bottom !important;
  }

  html body #hero .hero-photo {
    object-position: 64% bottom !important;
  }

  html body #hero .hero-content {
    max-width: 100% !important;
    padding-top: 104px !important;
  }

  html body #hero .hero-title {
    font-size: clamp(46px, 14.5vw, 60px) !important;
  }

  html body #hero .hero-copy {
    max-width: 295px !important;
    font-size: 13px !important;
    line-height: 1.66 !important;
  }
}

/* Round 5.34: reduce excessive vertical whitespace in homepage Operational Environments section on mobile. */
@media (max-width: 760px) {
  body.home-page-body #domains {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home-page-body #domains > .container.domain-layout {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    gap: 18px !important;
  }

  body.home-page-body #domains .section-eye {
    margin-bottom: 18px !important;
  }

  body.home-page-body #domains .section-title {
    margin-bottom: 18px !important;
  }

  body.home-page-body #domains .section-desc {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  body.home-page-body #domains .domain-grid.pcd-domain-collapsible {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body.home-page-body #domains > .container.domain-layout {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body.home-page-body #domains .section-eye {
    margin-bottom: 14px !important;
  }

  body.home-page-body #domains .section-title {
    margin-bottom: 14px !important;
  }

  body.home-page-body #domains .section-desc {
    margin-bottom: 20px !important;
  }
}