/* ==========================================================================
   mobile-fixes.css  —  Responsive overrides for AcqCentric
   Loaded AFTER acqcentric.webflow.css so these rules win by source order.
   Goal: eliminate horizontal overflow and collapse desktop multi-column /
   fixed-width layouts to a single readable column on tablet & phone.
   Nothing here affects screens > 991px.
   ========================================================================== */

/* ---- Global safety net: never allow sideways scroll / zoom-out --------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Media should never exceed its container */
img,
video,
iframe,
svg {
  max-width: 100%;
}

/* Long single words (headings, codes, URLs) wrap instead of pushing width */
h1, h2, h3, h4, p, a, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   <= 991px  —  tablet portrait & all phones (nav is already a hamburger here)
   ========================================================================== */
@media screen and (max-width: 991px) {

  /* ---- Capability page: hero (heading + video card side-by-side) -------- */
  .div-block-592 { width: 90vw; }
  .div-block-593 {
    flex-direction: column;
    align-items: flex-start;
  }
  .div-block-594 {            /* 450 x 500 fixed video card */
    width: 100%;
    max-width: 100%;
    height: 300px;             /* MUST be a fixed height: the inner .w-background-video
                                  is height:100%, so an auto height collapses it to 0
                                  and only the grey card background shows. */
    min-height: 0;
    margin-top: 24px;
  }
  /* Make the background video fill the (now full-width) card */
  .div-block-594 .w-background-video,
  .div-block-594 .background-video-18 {
    height: 100%;
    min-height: 0;
  }

  /* Giant faded watermark heading (was 75px) — keep it small enough that the
     longest word ("INFRASTRUCTURE") fits on one line and never breaks mid-word. */
  .heading-135 {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 30px;
  }

  /* Hero / section headings (was 55px) */
  .heading-136,
  .heading-137 {
    font-size: 32px;
    line-height: 40px;
  }

  /* ---- Capability page: "intro" row (two stacked images + text) -------- */
  .div-block-598 {
    flex-direction: column;
    align-items: stretch;
    width: 90vw;
  }
  .div-block-599 {           /* held two 48% images at a fixed 550px */
    width: 100%;
    margin-bottom: 32px;      /* clear gap so the text below isn't clipped by the images */
  }
  .div-block-600,
  .div-block-601 {
    height: 220px;
    margin-top: 0;            /* remove the desktop 75px offset so both images align */
    /* Webflow attaches a scroll-linked parallax (inline translateY that grows
       as you scroll) to these two images. On mobile it slides the left image
       down into the text below. !important overrides the JS-set inline style. */
    transform: none !important;
    will-change: auto !important;
  }
  .div-block-602 {           /* text column */
    flex: none;
    width: 100%;
    padding: 0;
  }

  /* ---- Capability page: "capabilities list" (image · list · image) ----- */
  .div-block-605 {
    flex-direction: column;
    align-items: stretch;
  }
  .div-block-606,
  .div-block-607 {           /* decorative side images: hide on mobile */
    display: none;
  }
  .div-block-608 {           /* the actual list */
    width: 100%;
  }
  .heading-138 { width: 100%; }
  .div-block-610 { margin-top: 36px; }

  /* ---- Contact / form pages: 3 white cards across ---------------------- */
  .section-55 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .link-block-62 {
    width: 100%;
    height: auto;
    min-height: 160px;
  }

  /* ---- Careers: 4-across values row ("Mission Driven" etc.) ------------ */
  .div-block-666 {
    flex-wrap: wrap;
    justify-content: center;
    width: 90vw;
    gap: 24px 16px;
    margin-top: 48px;
  }
  .heading-146 { font-size: 30px; line-height: 36px; }

  /* ---- Markets & Domains: side image + text column row ----------------- */
  .div-block-670 {
    flex-direction: column;
    width: 90vw;
  }
  .div-block-669 {            /* 500 x 700 fixed side image */
    width: 100%;
    height: 280px;
    margin-right: 0;
    margin-bottom: 20px;
  }

  /* ---- Markets & Domains: row of icon tiles (SEA / LAND / AIR …) -------
     Parent .div-block-674 is a nowrap flex row — let it wrap. */
  .div-block-674 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding-top: 40px;
  }
  .div-block-672 {
    width: 46%;
    margin-bottom: 16px;
  }
  .div-block-673 {
    width: 120px;
    height: 120px;
  }
  .div-block-673 img { width: 100%; height: auto; }

  /* ---- our-contracts: NAICS code table rows --------------------------- */
  .div-block-638 { width: auto; }      /* let description column flex/wrap */
  .text-block-416 { word-break: break-word; }
}

/* ==========================================================================
   <= 767px  —  phones: tighten type a little further
   ========================================================================== */
@media screen and (max-width: 767px) {

  .heading-136,
  .heading-137 {
    font-size: 28px;
    line-height: 35px;
  }

  /* Markets icon tiles: one per row reads better on a narrow phone */
  .div-block-672 { width: 100%; }

  /* ---- All large display headings (55px–75px on desktop) --------------
     Sized down so no single word is wider than a phone screen — this is
     what prevents the ugly mid-word breaks the safety net would cause. */
  .heading-7,
  .heading-9,
  .heading-104.kwhbefwebfw,
  .heading-105,
  .heading-110,
  .heading-113,
  .heading-117,
  .heading-118,
  .heading-120,
  .heading-120.wlknflkewnf,
  .heading-121,
  .heading-122,
  .heading-124,
  .heading-125,
  .heading-127,
  .heading-133,
  .heading-136,
  .heading-137,
  .heading-139,
  .heading-143,
  .heading-145,
  .heading-147,
  .heading-150,
  .heading-152,
  .heading-155 {
    font-size: 30px;
    line-height: 38px;
  }
}

/* ==========================================================================
   <= 479px  —  small phones: trim the biggest headings a touch more
   ========================================================================== */
@media screen and (max-width: 479px) {

  .heading-7,
  .heading-9,
  .heading-104.kwhbefwebfw,
  .heading-105,
  .heading-110,
  .heading-113,
  .heading-117,
  .heading-118,
  .heading-120,
  .heading-120.wlknflkewnf,
  .heading-121,
  .heading-122,
  .heading-124,
  .heading-125,
  .heading-127,
  .heading-133,
  .heading-136,
  .heading-137,
  .heading-139,
  .heading-143,
  .heading-145,
  .heading-147,
  .heading-150,
  .heading-152,
  .heading-155 {
    font-size: 26px;
    line-height: 33px;
  }
}

/* ==========================================================================
   <= 479px  —  small phones
   ========================================================================== */
@media screen and (max-width: 479px) {

  .heading-135 { font-size: 26px; }

  .div-block-600,
  .div-block-601 { height: 180px; }
}