/* ==========================================================================
   Technology page only - the two Framer illustrations, placed and masked as in the Framer design
   (framer.app/technology): the hero maze and the "Intelligence with discipline" maze-head.
   Loaded only by technology.php; everything is scoped to body.technology-page.
   ========================================================================== */

/* ---- Hero: 617x585 image, cover-fit, exact Framer fade (112deg), 92px below the hero top, slid in from the corner ---- */
body.technology-page .technology-hero-layout {
  position: static !important;          /* the visual positions against the hero frame, not the inner layout */
}

body.technology-page .technology-hero-visual {
  position: absolute !important;
  top: 92px !important;
  right: clamp(40px, 7vw, 130px) !important;
  bottom: auto !important;
  width: 617px !important;
  height: 585px !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.technology-page .technology-hero-img-wrap {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

body.technology-page .technology-hero-img {
  display: block !important;
  width: 617px !important;
  max-width: none !important;
  height: 585px !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  -webkit-mask-image: linear-gradient(112deg, rgba(0, 0, 0, 0) 23.2759%, rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(112deg, rgba(0, 0, 0, 0) 23.2759%, rgb(0, 0, 0) 100%);
}

/* The two hero cards stop where the image's strong part begins (they may run ~142px into its faded edge),
   so they never sit on top of the illustration. Image left = layout right + 80px - offset - 617px. */
@media (min-width: 1025px) {
  body.technology-page .technology-hero-left {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  body.technology-page .technology-hero-left .technology-boxes {
    max-width: calc(100% - 395px - clamp(40px, 7vw, 130px)) !important;
  }
}

/* ---- Principles: 441x345 maze-head, exact Framer fade (325deg), in the left column under the paragraph.
   That column is sticky, so the illustration travels with it. ---- */
body.technology-page .technology-trust-left > .technology-principles-visual {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 24px) !important;
  width: 441px !important;
  max-width: 100% !important;
  aspect-ratio: 1368 / 1150;
  height: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  /* Framer's 325deg fade, intersected with a soft fade on all four edges so the corners/edges of the picture
     lose opacity and no rectangle shows */
  -webkit-mask-image:
    linear-gradient(325deg, rgba(0, 0, 0, 0) 16.8103%, rgb(0, 0, 0) 63.3621%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in, source-in, source-over;
  mask-image:
    linear-gradient(325deg, rgba(0, 0, 0, 0) 16.8103%, rgb(0, 0, 0) 63.3621%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect, intersect, add;
}

/* Keep the illustration inside this section: anything that would spill past the section's bottom border
   (e.g. when the sticky column reaches the end) is cut off, so it never touches the CLOSING section.
   `clip` keeps position: sticky working; the page stylesheet forces `overflow: visible !important` here. */
body.technology-page .technology-trust-section {
  overflow-y: clip !important;
}

body.technology-page .technology-principles-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- Tablet / mobile: simple in-flow images ---- */
@media (max-width: 1024px) {
  body.technology-page .technology-hero-visual {
    position: static !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 20px 0 0 !important;
  }

  body.technology-page .technology-hero-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  body.technology-page .technology-trust-left > .technology-principles-visual {
    position: relative !important;
    top: auto !important;
    margin-top: 8px !important;
  }
}