/* AECA Blocs patch layer
----------------------------------------------------------------------------------------------------

WHY THIS FILE EXISTS. style.css is a Blocs build artefact: on every export Blocs rewrites it as an
eight-line theme header plus one enormous minified line. Until 2026-09-08 this theme also carried
451 lines of hand-written responsive repairs appended to that file, and a dozen hand-edited rules
spliced INTO the minified line. Both were invisible to Blocs, so replacing style.css from an export
deleted them silently, with no error and nothing to diff against.

They now live here instead. style.css is once again a pure build artefact and can be overwritten
from any future export without reading it first.

LOAD ORDER IS NOT NEGOTIABLE. Enqueued after style.css and before css/aeca-custom.css in
functions/enqueue-styles.php. These rules beat Blocs on source order alone -- almost none of them
carries a specificity boost -- and they in turn lose to aeca-custom.css, which is exactly the
relationship they had while they were the tail of style.css.

Section 1 is what a Blocs export drops. Sections 2 onward are the responsive layer, carried over
unchanged.

---------------------------------------------------------------------------------------------------- */

/* ====================================================================================================
   1. RULES A BLOCS EXPORT NO LONGER SHIPS
   ----------------------------------------------------------------------------------------------------
   Each of these was in the old minified blob and is absent from the 2026-09-08 export, because the
   class was deleted from the Blocs project or the rule was hand-typed into the file. The theme's
   markup still uses every one of them, so without this block the elements simply lose the styling.

   .scroll-container is the partner marquee. Blocs writes .blocs-horizontal-scroll-area as a
   drag-scroll strip; these rules turn it into the silent, unscrollbarred track the animation in
   aeca-custom.css runs on. See the marquee note there before touching them.

   .bg-new-construction-3 had its url() rewritten from img/ to ../img/, because this file sits in
   css/ and style.css sits at the theme root -- a relative background path does not survive the move.
   ==================================================================================================== */

img.mg-sm,img.mg-md,img.mg-lg{margin-top: 0;}
img.mg-sm{margin-bottom:10px;}
img.mg-md{margin-bottom:30px;}
img.mg-lg{margin-bottom:50px;}
.icon-lg{font-size:60px!important;}
.link-sidebar-style{width:75%;font-family:"Outfit-Medium"!important;font-size:18px!important;}
.bg-new-construction-3{background-image:url("../img/new-construction-3.webp");}
.btn {transition: all 0.5s ease-in-out;}
.const-service-box {transition: all 0.5s ease-in-out;}
.transition {transition: all 0.28s ease-in-out;}
.scroll-container {  display: flex !important;  flex-wrap: nowrap !important;  align-items: center !important;  overflow-x: scroll !important;  scroll-behavior: auto !important;  background: transparent !important;  padding: 40px 0 !important; width: 100% !important;  -ms-overflow-style: none !important;  scrollbar-width: none !important;}
.scroll-container::-webkit-scrollbar {  display: none !important;}
.scroll-container > div {  flex: 0 0 auto !important;  display: flex !important;  align-items: center !important;  justify-content: center !important;  background: transparent !important;  border: none !important;  box-shadow: none !important;  padding: 0 !important;  margin-right: clamp(50px, 8vw, 100px) !important; }
.scroll-container img {  height: clamp(120px, 15vw, 180px) !important; width: auto !important;  max-width: none !important;  max-height: none !important;  object-fit: contain !important;  display: block !important;  transform: scale(1.4) !important; mix-blend-mode: multiply !important;}
.scroll-container p, .scroll-container h4, .scroll-container span {  display: none !important;}


/* ====================================================================================================
   1b. TWO BOOTSTRAP GRID CLASSES BLOCS STYLED BY MISTAKE (2026-09-08 export)
   ----------------------------------------------------------------------------------------------------
   The export writes these two rules against bare Bootstrap column classes:

       .col-md-6 { margin-bottom: 20px }
       .col-md-7 { border-width: 1px 1px 1px 1px; box-shadow: 0 0 3px #000000; padding: 10px }

   Neither is a design decision -- they are what Blocs writes when the sidebar is used on a column
   that has no class of its own, and the rule it invents is the column class, so it lands on every
   column of that width on the site. col-md-6 appears 21 times across this theme, col-md-7 once,
   on the footer's Explore column, where the box-shadow drew a visible rectangle around the
   whole column.

   Reset here rather than deleted from style.css, because style.css is a build artefact again and
   the next export would bring them straight back. The real fix is in the Blocs project -- give the
   column its own class before styling it -- and until that happens this block absorbs them.
   ==================================================================================================== */

.col-md-6 { margin-bottom: 0; }
.col-md-7 { border-width: 0; box-shadow: none; padding: 0 calc(var(--bs-gutter-x) * 0.5); }


/* ====================================================================================================
   1c. .div-home-industries -- A CANVAS HOOK THAT GREW A REAL BOX (2026-09-08 export)
   ----------------------------------------------------------------------------------------------------
   parts/industry-summary.php puts `div-home-industries aeca-ind-card` on the six industry cards. The
   first class is a Blocs-canvas hook, deliberately: it is there so a card looks the same on the Blocs
   canvas as it does here, and every property the live site actually draws is set on .aeca-ind-card in
   aeca-custom.css. The note above that rule spells the arrangement out.

   The 2026-09-08 export gives the hook a body of its own:

       min-height: 300px (400px under 767px), grey ground, 10px padding, a black 3px shadow,
       a 5px/20px radius and a 10px margin on all four sides

   aeca-custom.css loads after this file, so the ground, padding, radius and shadow are all overruled
   where it matters. Two are not, because nothing downstream sets them: min-height and margin. On the
   home band the cards sit three across and a floor height is what the Blocs design wants; on the
   Industries hub the same card is full width with a paragraph in it, and 300px left roughly 90px of
   empty white under every one of the six.

   Cleared here for the hub only. The home band keeps whatever height its own row gives it, which is
   what it had before this export.
   ==================================================================================================== */

.aeca-ind-card.div-home-industries {
	min-height: 0;
	margin: 0;
}


/* ====================================================================================================
   2. RESPONSIVE LAYER -- carried over from the tail of style.css, unchanged.
   ==================================================================================================== */

/* Every max-width breakpoint below ends in .98px, matching Bootstrap's own
   convention. Whole-number bounds leave a dead band: at 125% Windows scaling a
   1199px window reports a media width of 1199.18, which satisfies neither
   `max-width:1199px` nor `min-width:1200px`, so the whole patch layer switched
   off and the raw Blocs layout showed through (the nav bar reverted to a 99px
   stretched logo). The .98 bound closes that gap at every breakpoint. */

/* Mobile-only layout repairs. Desktop retains the original Blocs design. */
@media (max-width: 991.98px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .page-container { overflow-x: hidden; }
  #hero-carousel .row > .col { position: relative; }
  #hero-carousel .hero-video { width: 100%; height: auto; margin: 0; }
  #hero-carousel .hero-video video { object-fit: cover; }
  .div-home-hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; padding: 32px; }
  .card-hero-carousel-style { width: min(100%, 560px); height: auto; margin: 0; }
  .const-shortcuts { margin-top: 0; }
}

@media (max-width: 767.98px) {
  .div-home-hero { align-items: flex-end; padding: 16px; }
  .card-hero-carousel-style { width: 100%; margin: 0; }
  .const-service-box-1, .const-service-box-2, .const-service-box-3, .const-service-box-4 { width: 100%; height: auto; min-height: 180px; }
  .const-project-bg-2, .const-project-home-bg-2, .const-project-home-bg-3, .const-project-home-bg-4 { width: 100%; margin-inline: 0; }
  .const-industries-div-1, .const-industries-div-2, .const-industries-div-3, .const-industries-div-4 { width: 100%; max-width: 100%; }
  .blocs-grid-container { grid-template-columns: minmax(0, 1fr); }
}

/* Responsive refinement — intentionally limited to tablet and smaller. */
@media (max-width: 991.98px) {
  img, video, iframe { max-width: 100%; }
  .const-project-bg-2, .const-project-home-bg-2, .const-project-home-bg-3, .const-project-home-bg-4 { width: 100%; margin-left: 0; margin-right: 0; }
  .const-industries-div-1, .const-industries-div-2, .const-industries-div-3, .const-industries-div-4 { width: 100%; max-width: 100%; }
  [class*="const-"][class*="-div-"] { max-width: 100%; }
  .const-project-quantum-card, .const-project-dji-card { max-width: 100%; }
  .column-about-begin, .column-about-begin-paragraph, .column-about-second, .column-about-second-paragraph { max-width: 100%; margin-left: 0; margin-right: 0; }
}

@media (max-width: 767.98px) {
  .const-service-box-1, .const-service-box-2, .const-service-box-3, .const-service-box-4 { margin-bottom: 28px; }
  .const-project-card { width: 100%; }
  .const-project-button { padding-left: 20px; padding-right: 20px; }
  .h3-card-heading-style { font-size: clamp(28px, 9vw, 42px); line-height: 1; text-align: center; }
  .p-hero-carousel-style { font-size: 14px; line-height: 1.45; text-align: center; }
  .const-button-hero { width: 100%; font-size: 14px; }
  .blocs-horizontal-scroll-control { display: none; }
}

@media (max-width: 575.98px) {
  .div-home-hero { padding: 12px; }
  .card-hero-carousel-style { padding: 18px 16px; }
  .const-project-card { min-height: 0; }
  .footer-certs { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* Hero overlay card: tablet and phone only. */
@media (max-width: 991.98px) {
  #hero-carousel .div-home-hero { box-sizing: border-box; }
  #hero-carousel .card-hero-carousel-style { box-sizing: border-box; width: min(560px, calc(100vw - 64px)); max-width: 100%; margin: 0; overflow: hidden; }
  #hero-carousel .card-hero-carousel-style .card-header,
  #hero-carousel .card-hero-carousel-style .card-body,
  #hero-carousel .card-hero-carousel-style .card-footer { padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px); }
}

@media (max-width: 767.98px) {
  #hero-carousel .card-hero-carousel-style { width: calc(100vw - 32px); max-width: none; }
  #hero-carousel .card-hero-carousel-style .card-header { padding-top: 22px; padding-bottom: 6px; }
  #hero-carousel .card-hero-carousel-style .card-body { padding-top: 10px; padding-bottom: 10px; }
  #hero-carousel .card-hero-carousel-style .card-footer { padding-top: 8px; padding-bottom: 22px; }
}

@media (max-width: 575.98px) {
  #hero-carousel .card-hero-carousel-style { width: calc(100vw - 24px); }
  #hero-carousel .card-hero-carousel-style .card-header,
  #hero-carousel .card-hero-carousel-style .card-body,
  #hero-carousel .card-hero-carousel-style .card-footer { padding-left: 16px; padding-right: 16px; }
}

/* Compact header and contained hero overlay. */
@media (max-width: 991.98px) {
  #sidebar { z-index: 1100; width: 100%; padding: 0; background-color: var(--swatch-var-2006); }
  #sidebar .container { width: 100%; max-width: none; padding: 0; }
  #sidebar .const-navigation-bar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; min-height: 70px; height: 70px; margin: 0; }
  #sidebar .const-navigation-bar > :first-child { grid-column: 1; width: auto; max-width: none; padding: 0; }
  #sidebar .const-navigation-bar > .d-flex { grid-column: 3; width: auto; max-width: none; margin: 0 !important; padding: 0; display: flex !important; }
  #sidebar .const-logo, #sidebar .const-sidebar-icon { width: 70px; height: 70px; min-height: 70px; margin: 0; }
  #sidebar .const-sidebar-icon { background-color: var(--swatch-var-2006); }
}

@media (max-width: 767.98px) {
  #hero-carousel .hero-video { min-height: 560px; }
  #hero-carousel .hero-video video { height: 100%; }
  #hero-carousel .div-home-hero { z-index: 1; }
}

@media (max-width: 575.98px) {
  #sidebar .const-navigation-bar { grid-template-columns: 58px minmax(0, 1fr) 58px; min-height: 58px; height: 58px; }
  #sidebar .const-logo, #sidebar .const-sidebar-icon { width: 58px; height: 58px; min-height: 58px; }
  #sidebar .const-logo { background-size: 42px 42px; }
  #hero-carousel .hero-video { min-height: 540px; }
}

/* Tablet breakpoint: collapse navigation before it wraps and centre the hero card. */
@media (max-width: 1199.98px) {
  /* position is left to js/all.js (.sticky-nav.sticky -> position:fixed); an
     #id `position` rule here would out-specify it and break the sticky bar. */
  #sidebar { z-index: 1100; width: 100%; padding: 0; background-color: var(--swatch-var-2006); }
  #sidebar .container { width: 100%; max-width: none; padding: 0; }
  #sidebar .d-lg-block { display: none !important; }
  #sidebar .const-navigation-bar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; min-height: 70px; height: 70px; margin: 0; }
  #sidebar .const-navigation-bar > :first-child { grid-column: 1; width: auto; max-width: none; padding: 0; }
  #sidebar .const-navigation-bar > .d-flex { grid-column: 3; width: auto; max-width: none; margin: 0 !important; padding: 0; display: flex !important; }
  #sidebar .const-logo, #sidebar .const-sidebar-icon { width: 70px; height: 70px; min-height: 70px; margin: 0; }
  #sidebar .const-sidebar-icon { background-color: var(--swatch-var-2006); }

  #hero-carousel .row > .col { position: relative; }
  #hero-carousel .hero-video { width: 100%; height: auto; margin: 0; }
  #hero-carousel .hero-video video { object-fit: cover; }
  #hero-carousel .div-home-hero { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; padding: 32px; }
  #hero-carousel .card-hero-carousel-style { box-sizing: border-box; width: min(560px, calc(100vw - 64px)); max-width: 100%; height: auto; margin: 0; overflow: hidden; }
  #hero-carousel .card-hero-carousel-style .card-header,
  #hero-carousel .card-hero-carousel-style .card-body,
  #hero-carousel .card-hero-carousel-style .card-footer { padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px); }
  .const-shortcuts-column { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 575.98px) {
  #sidebar .const-navigation-bar { grid-template-columns: 58px minmax(0, 1fr) 58px; min-height: 58px; height: 58px; }
  #sidebar .const-logo, #sidebar .const-sidebar-icon { width: 58px; height: 58px; min-height: 58px; }
  .const-shortcuts-column { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   Large-screen + card-consistency pass
   Everything below is scoped so it cannot disturb the <=1199px rules above.
   ========================================================================== */

/* 1. Centre content on large monitors.
   .container{max-width:100%!important} earlier in this file overrides the
   intended .container{max-width:1200px}, so containers run edge-to-edge on
   every screen. Re-assert the cap at >=1200px. */
@media (min-width: 1200px) {
  .bloc > .container {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* #sidebar and #hero-carousel are the only two `full-width-bloc`s in the
     theme; both are meant to run edge-to-edge, so exempt them from the cap. */
  #hero-carousel > .container,
  #sidebar > .container {
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 2. Header stacking.
   The nav bar is the first bloc in the page, so anything that overlaps it
   paints on top by default. Give it its own stacking level and keep the hero
   below it.
   Do not set `position` here: js/all.js switches the bar to position:fixed via
   .sticky-nav.sticky on scroll, and an #id rule would out-specify that and
   leave the bar behind while the script still pads .page-container. */
#sidebar { z-index: 1100; }
#hero-carousel { position: relative; z-index: 0; }

/* 2b. Nav bar layout from 1200px up.
   The bar itself is full-bleed, but the Bootstrap grid inside it (col-lg-1 /
   col-lg-8 / offset-lg-2 col-lg-1) was being boxed into the 1200px content
   column, stranding the logo ~380px in from the left edge on a 1920 screen and
   the menu icon the same distance from the right. Below 1200px the same three
   elements are already flush to both edges; this makes >=1200px agree. */
@media (min-width: 1200px) {
  #sidebar .const-navigation-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
  }
  /* logo, hard left. Needs an explicit width: the anchor carries .w-100, which
     collapses to nothing against a shrink-to-fit column. 80px squares it off
     against the 80px menu icon, mirroring the 70px pair used below 1200px. */
  #sidebar .const-navigation-bar > :first-child {
    flex: 0 0 80px;
    width: 80px;
    max-width: none;
    margin: 0 !important;
    padding: 0;
  }
  #sidebar .const-logo { width: 80px; height: 80px; }
  /* link list, takes up the slack and stays right-aligned via its own .ms-auto */
  #sidebar .const-navigation-bar > .d-lg-block {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 12px 0 0;
  }
  /* menu icon, hard right */
  #sidebar .const-navigation-bar > .d-flex {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
  }
}

/* 3. Hero — one overlay model for every width.
   Replaces the per-breakpoint negative-margin hack (margin-top:-700px /
   width:55% / margin-left:250px …). The video is a full-bleed backdrop of a
   viewport-proportional height; the blue panel is a centred overlay that stays
   a panel instead of growing with the viewport. */
#hero-carousel .row > .col { position: relative; }

#hero-carousel .hero-video {
  width: 100%;
  height: clamp(560px, 74vh, 900px);
  /* No negative top margin. It used to pull the video up over the sticky
     header, leaving ~30px of the 80px bar visible on desktop. */
  margin: 0;
}
#hero-carousel .hero-video::before { display: none; }
#hero-carousel .hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero-carousel .div-home-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 24px;
}

#hero-carousel .card-hero-carousel-style {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 48px));
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
#hero-carousel .card-hero-carousel-style .card-header,
#hero-carousel .card-hero-carousel-style .card-body,
#hero-carousel .card-hero-carousel-style .card-footer {
  padding-left: clamp(18px, 4vw, 32px);
  padding-right: clamp(18px, 4vw, 32px);
}

/* The shortcut cards are pulled up 100px over the bottom of the video from
   992px up, so bias the panel above them rather than over them. */
@media (min-width: 992px) {
  #hero-carousel .div-home-hero { padding-bottom: 140px; }
}

/* 4. Phones: keep the blue panel a panel. At these widths the heading was
   rendering at up to 42px/1.0 in a near-full-width card, which grew taller
   than the video and blanketed the hero. */
@media (max-width: 767.98px) {
  #hero-carousel .hero-video { height: clamp(540px, 82vh, 680px); min-height: 0; }
  #hero-carousel .div-home-hero { align-items: center; padding: 20px; }
  #hero-carousel .card-hero-carousel-style { width: min(420px, calc(100vw - 40px)); }
  #hero-carousel .card-hero-carousel-style .card-header { padding: 22px 18px 4px; }
  #hero-carousel .card-hero-carousel-style .card-body { padding: 8px 18px; }
  #hero-carousel .card-hero-carousel-style .card-footer { padding: 4px 18px 22px; }
  .h3-card-heading-style { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.12; text-align: center; }
  .p-hero-carousel-style { font-size: 13px; line-height: 1.5; text-align: center; }
  .const-button-hero { width: 100%; font-size: 13px; }
}

@media (max-width: 575.98px) {
  #hero-carousel .hero-video { height: clamp(500px, 80vh, 620px); }
  #hero-carousel .card-hero-carousel-style { width: min(360px, calc(100vw - 32px)); }
  #hero-carousel .card-hero-carousel-style .card-header,
  #hero-carousel .card-hero-carousel-style .card-body,
  #hero-carousel .card-hero-carousel-style .card-footer { padding-left: 16px; padding-right: 16px; }
  .h3-card-heading-style { font-size: clamp(20px, 5.8vw, 26px); }
  .p-hero-carousel-style { font-size: 12px; }
}

/* 5. Buttons below 992px.
   .const-button drops to font-size:8px in the <=991px and <=575px blocks, and
   .const-form-button to 12px/10px, so every call to action on the site (hero
   CTA, product/service enquiry buttons, the contact form's Send) rendered as
   unreadable ~3mm text on tablets and phones. */
@media (max-width: 991.98px) {
  .const-button { font-size: 15px; padding: 8px 18px; }
  .const-form-button { font-size: 15px; padding: 8px 18px; }
}
@media (max-width: 575.98px) {
  .const-button { font-size: 13px; padding: 8px 16px; }
  .const-form-button { font-size: 13px; padding: 8px 16px; }
}

/* 6. Equal-height "shortcuts" cards.
   These have no height rule, so the four cards ran ragged against differing
   paragraph lengths. Stretch each card to fill its column. */
.const-shortcuts-column { display: flex; }
.const-shortcut-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.const-shortcut-card > .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* push the "Read More" link to a common baseline across all four cards */
.const-shortcut-card > .card-body > .p-628-shortcuts-style,
.const-shortcut-card > .card-body > p.mg-clear:last-child { margin-top: auto; }

/* 7. Industries cards: identical width, centred in their column instead of
   left-aligned with dead space on wide screens.
   Scoped to >=992px so the existing <=767px / <=991px patches above (which
   set these to max-width:100%) continue to govern tablet and phone. */
@media (min-width: 992px) {
  .const-industries-div-1,
  .const-industries-div-2,
  .const-industries-div-3,
  .const-industries-div-4 {
    width: 100%;
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================================
   8. Cross-page responsive repairs
   Measured by auditing every page template at 1920 / 1440 / 1024 / 768 / 390px
   and recording where .page-container{overflow:hidden} was silently clipping
   content away. Every rule below answers one of those measurements: a hard
   pixel width, or a decorative negative margin, that had no room left at that
   breakpoint. Scoped as tightly as the measurement allows.
   ========================================================================== */

/* 8a. Page titles.
   .const-page-title is font-size:70px and the .h1-N-style classes beside it are
   4em, at every width. A single long word - "Environmental", "Infrastructure",
   "SmartDelta" - ran up to 175px past the hero on a phone. 23 templates. */
.const-page-title {
  font-size: clamp(30px, 5.6vw, 70px);
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* 8b. Decorative boxes.
   The const-*-div / const-*-div-N panels all carry a hard width (350px, 530px)
   and burst their grid cell from 1024px down. :where() keeps this at zero
   specificity so the deliberate caps above (industries, 530px) still win. */
:where(.bloc [class*="const-"][class*="-div"]) { max-width: 100%; }
.const-project-div { width: 100%; max-width: 530px; }

/* 8c. width:100% plus a left margin is by definition wider than the parent. */
.p-23-style,
.p-bloc-6-style { width: auto; }

/* 8c-ii. A heading whose longest word is wider than its column (col-sm-4 in the
   576-767px band on the Environment and Defense pages) pushed the row 9-12px
   past the container. Let the word break rather than the layout. */
h1, h2, h3, h4, h5 { overflow-wrap: break-word; }

/* 8d. Columns that bleed past their grid cell with negative margins.

   About page: the four columns are sized in raw pixels (700px image / 500px
   text) and kept on one line only by their negative margins - margin-left:-150
   and margin-right:-300 shrink the flex item's outer size back under the wrap
   threshold. That is why capping the width alone drops the paragraph onto its
   own row. It also means the image ran past the viewport by a fixed amount
   that grew as the screen narrowed: 90px cut off at 1440, 238px at 1200.
   Replacing the whole arrangement with a plain 50/50 split from 992px up keeps
   both columns on one line at every width and clips nothing. Below 992px the
   existing patch already stacks them. */
@media (min-width: 992px) {
  .column-about-begin,
  .column-about-begin-paragraph,
  .column-about-second,
  .column-about-second-paragraph {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 991.98px) {
  .column-about-util,
  .column-img-about-util,
  .column-about-management,
  .column-about-recalculate,
  .column-about-pavement {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  /* these two are right-aligned to sit against their bleed; without it, left */
  .column-about-recalculate,
  .column-about-pavement { text-align: left; }
  /* svg-icon-1/2/3 are 200px wide with 50-70px of margin either side, i.e.
     300-340px inside columns that are 246px at 768 and 329px at 360. */
  .svg-icon-1,
  .svg-icon-2,
  .svg-icon-3 {
    width: auto;
    max-width: 200px;
    margin-left: 0;
    margin-right: 0;
  }
}
/* A 20px left margin on a column that is already the full width of its row
   pushes the row that far past the container. Applies once the columns go
   full-width, i.e. below 992px. */
@media (max-width: 991.98px) {
  .column-challenges-defence-3,
  .column-solutions-agri-3,
  .column-solutions-defence-2 { margin-left: 0; }
}

/* 8e. The oversized watermark word behind the section headings on the 23
   service/product/industry pages. It is 140px in the base rule, 150-170px in
   the per-page overrides, plus margin-left:100px and 10px letter-spacing -
   wider than the container from 1400px down. Above that it already fits, so
   the desktop composition is left alone. */
@media (max-width: 1399.98px) {
  .const-bg-text {
    font-size: clamp(44px, 8.2vw, 110px);
    line-height: 1.2;
    letter-spacing: 0.06em;
    margin-left: 0;
    margin-bottom: -40px;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}