/* ============================================================
   AC hero full-bleed background layer positioning.
   .ac-hero__tri is a wrapper <div> that stretches to the full hero
   section; the ShaderGradient <video> inside it fills the wrapper.

   Why a wrapper: on mobile the hero uses height:auto + min-height, so a
   percentage height on the <video> (a replaced element) collapses to its
   intrinsic size instead of filling. A plain <div> with inset:0 stretches
   regardless of the parent's height, giving the video a definite box to
   fill. Reversible: delete this file + its enqueue.
   ============================================================ */
.ac-hero__tri {
  position: absolute;
  /* inset:0 with height:auto lets the div STRETCH top-to-bottom to the full
     hero, even when the hero uses height:auto+min-height (mobile). Do NOT add
     height:100% here — that would over-constrain (top+bottom+height), the
     browser drops `bottom`, and % height collapses against the auto-height
     hero, shrinking the layer back to a strip. */
  inset: 0;
  /* The hero is a WP constrained-layout group (contentSize:1100px), which
     caps direct children's width. Override so the layer spans the full hero. */
  max-width: none !important;
  margin: 0 !important;
  z-index: 0;            /* behind .ac-hero__center-content (z-index:2) */
  pointer-events: none;  /* interaction handled on the .ac-hero section */
  overflow: hidden;
}

/* The video fills the wrapper on every viewport, cover-cropped, in its
   ORIGINAL orientation (the gradient's baked-in drift as exported —
   no rotation, no mirror).
   !important is required to beat the global responsive-media rule in
   ac-mobile-fixes.css (`video { height:auto !important }`), which would
   otherwise force the video to its intrinsic aspect ratio on mobile and
   shrink it to a strip. ID + !important outranks that element-level rule. */
#ac-hero-gradient-video {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  /* The source footage carries a generated-video watermark in its bottom-right
     corner. Scaling up from the top-left pushes that corner past the wrapper's
     overflow:hidden so the logo never renders. */
  transform: scale(1.18);
  transform-origin: top left;
}

/* Dark scrim over the video so the hero copy stays readable on bright
   footage. Paints after (above) the <video> inside the same wrapper. */
.ac-hero__tri::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 24, 0.7);
}

/* Reduced-motion: hide the animated video; the hero's own dark background
   (var(--ac-bg) + grid) stands in as a static backdrop. */
@media (prefers-reduced-motion: reduce) {
  #ac-hero-gradient-video { display: none !important; }
}

/* Trust-logo carousel over the video background.
   The carousel's edge fades (::before/::after) paint solid var(--ac-bg),
   which blended into the old solid hero but now shows as dark patches on the
   gradient video. Replace them with a mask that fades the logos themselves to
   transparent — background-independent, so it works over the video. Scoped to
   the homepage hero (.ac-hero) so other pages' carousels are unaffected. */
.ac-hero .ac-trust-carousel::before,
.ac-hero .ac-trust-carousel::after {
  display: none !important;
}
.ac-hero .ac-trust-carousel {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* Pin the "Proudly working with the best" carousel near the BOTTOM of the hero,
   centred across the FULL hero width with breathing room above the hero's
   bottom edge. It's a direct child of .ac-hero (position:relative, full-width),
   so absolute left:0/right:0 auto-centres it — independent of the copy column's
   left indent. Its own text-align:center + track margin:auto centre the label
   and logos on the viewport. */
.ac-hero > .ac-trust-carousel {
  position: absolute !important;
  /* The hero is a WP constrained-layout group, which auto-caps every child at
     max-width:1100px + margin:auto — kill the cap (max-width:none) so the
     insets below rule. Absolute children ignore the hero's padding, so the
     9rem side gutters must be restated as left/right offsets here (matching
     the hero's padding: 9rem / 3rem ≤960 / 1.25rem ≤600) — with left/right:0
     the carousel bled edge-to-edge across the full screen. */
  left: 9rem !important;
  right: 9rem !important;
  bottom: 2.5rem !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
@media (max-width: 960px) {
  .ac-hero > .ac-trust-carousel {
    left: 3rem !important;
    right: 3rem !important;
  }
}
@media (max-width: 600px) {
  .ac-hero > .ac-trust-carousel {
    left: 1.25rem !important;
    right: 1.25rem !important;
  }
}

/* Nudge the hero copy down a little so it doesn't crowd the fixed nav pill and
   sits clear of the bottom-pinned carousel. */
.ac-hero__center-content {
  margin-top: 2rem;
}

/* ≤768px the carousel returns to normal flow (stacked under the copy) so it
   can't overlap content on short viewports; the copy nudge is also dropped. */
@media (max-width: 768px) {
  .ac-hero > .ac-trust-carousel {
    position: relative !important;
    /* In relative flow a left offset would SHIFT the carousel sideways — the
       gutter insets above only apply while it's absolutely positioned; in-flow
       it already sits inside the hero's padding. */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 3.5rem !important;
  }
  .ac-hero__center-content {
    margin-top: 0;
  }
}