/* ============================================================
   OnTrac — Contact Us hero backdrop

   The hero carried no art at all while every other hero on the site
   has some, and at 1440px it ran ~300px of empty wash around ~95px
   of content, so the title read as marooned.

   FIRST ATTEMPT, and why it is gone: it reused bg--04
   (images/Mask group1.svg) as a background-image offset 45-100px
   down. That asset wraps its blobs in <mask> with a rect at y=0, so
   the artwork is cut off square at the top of its own viewBox. The
   theme gets away with it because it always positions the asset at
   `top`, where that cut lines up with the section edge. Offsetting
   it put the cut 45px inside the hero and drew a hard horizontal
   seam across the page.

   NOW: the same idea — soft violet / peach / pink / blue blobs in the
   house palette — drawn as CSS radial gradients instead. They fade to
   zero alpha in every direction, so there is no edge that can seam,
   nothing to offset, no extra request, and it scales with the
   viewport instead of being pinned to a 1440x547 bitmap.

   Alpha is baked into the colour stops rather than set with opacity,
   so each blob can carry its own weight. Kept light: the form is the
   job of this page.
   ============================================================ */

section.contactus {
  position: relative;
  /* NO overflow:hidden here. .cnct (the form card) is position:absolute
     with top:200px and runs 867px past the section's bottom edge, so
     clipping the section hides the message box and the submit button
     entirely. Nothing needs clipping anyway — a background never
     paints outside its own element's box. */
}

section.contactus::before {
  content: "";
  position: absolute;
  inset: 0;
  /* rgba(...,0) rather than `transparent`: some engines interpolate
     the keyword through transparent BLACK and leave a grey halo */
  background-image:
    radial-gradient(60% 95% at 16% 14%, rgba(117,  52, 255, 0.16) 0%, rgba(117,  52, 255, 0) 70%),
    radial-gradient(52% 85% at 50%  6%, rgba(255, 176, 102, 0.20) 0%, rgba(255, 176, 102, 0) 70%),
    radial-gradient(50% 90% at 86% 16%, rgba(242,  73, 200, 0.15) 0%, rgba(242,  73, 200, 0) 70%),
    radial-gradient(42% 70% at 64% 40%, rgba( 11,  99, 229, 0.09) 0%, rgba( 11,  99, 229, 0) 70%);
  pointer-events: none;
}

/* heading, sub-head and form card sit above the backdrop */
section.contactus > .container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Tighter hero on desktop

   responsive.css:175 sets padding-top: 180px !important inside
   (min-width: 1200px) — the only place it is declared, and every
   smaller breakpoint was already on 120px. Scoped to the same media
   query so nothing below 1200px moves.

   .contactus-footer is deliberately NOT touched. Its margin-top:450px
   is measured from the section's bottom edge, and the card overhangs
   that edge by a fixed 392px whatever the padding above, so the 58px
   gap below the card self-corrects. Reducing that margin by 60px to
   "match" measured -2px, i.e. the card overlapping the footer.
   ------------------------------------------------------------ */

@media (min-width: 1200px) {
  section.contactus {
    padding-top: 120px !important;
  }
}

/* ------------------------------------------------------------
   Phones: stop the form card overlapping the footer

   responsive.css absolutely positions .cnct at top:200px in the
   breakpoints below 480px, takes it out of flow, reserves
   `padding-bottom: 300px` on the section for it, and then pushes the
   footer clear with a hand-tuned `margin-top` of 780-840px. Those
   numbers no longer match the card's real height, so the card lands
   on top of the footer — measured 315px of overlap at 360 wide, 247px
   at 390, 159px at 414, with the Submit button sitting inside the
   footer at all three.

   Between 480 and 991px responsive.css leaves .cnct static and the
   layout is correct, so this just extends that arrangement down: let
   the card sit in flow, let the section grow around it, and drop both
   magic numbers. 100px of bottom padding matches what 768 already
   uses.
   ------------------------------------------------------------ */

@media (max-width: 991px) {
  section.contactus .cnct {
    position: static;
  }

  section.contactus {
    padding-bottom: 100px !important;
  }

  .contactus-footer {
    margin-top: 0 !important;
  }
}