/* ==========================================================================
   Implementation page only - the two Framer illustrations, placed and masked as in the Framer design
   (framer.app/implementation-optimisation). Loaded only by implementation.php; scoped to body.implementation-page.
   ========================================================================== */

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

body.implementation-page .strategic-hero-visual {
  position: absolute !important;
  top: 135px !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.implementation-page .strategic-hero-img {
  display: block !important;
  width: 617px !important;
  max-width: none !important;
  height: 585px !important;
  object-fit: contain !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 page stylesheet puts a frosted white panel (#ffffff91 + blur) over the hero text block; it would wash out and
   blur the image wherever the two overlap. Framer has no such panel. */
body.implementation-page .strategic-hero-content {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The hero card stops where the image's strong part begins (it may run ~142px into the faded edge).
   Image left = layout right + 80px - offset - 617px. */
@media (min-width: 1025px) {
  body.implementation-page .strategic-hero-content {
    max-width: none !important;
  }

  body.implementation-page .strategic-hero-content .strategic-philosophy-box {
    max-width: calc(100% - 395px - clamp(40px, 7vw, 130px)) !important;
  }
}

/* ---- Implementation services: the winding-road illustration sits directly under the "IMPLEMENTATION SERVICES"
   heading block, in the left column (the full width of that column, no bleed to the frame edge). The red centre
   line is NOT part of the picture any more: it is the SVG overlay below, which draws itself top-to-bottom as the
   page scrolls (js/scroll-line.js; line styles in css/scroll-line.css). ---- */
/* As in Framer, the heading block stays at the top of the section (it does not stick), so the tall illustration
   below it is never covered by the heading while you scroll. */
@media (min-width: 1025px) {
  body.implementation-page .strategic-sticky-col {
    position: relative !important;
    top: auto !important;
  }
}

body.implementation-page .strategic-sticky-col > .impl-services-visual {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 28px 0 0 !important;
  pointer-events: none !important;
  /* The original Framer fade (183deg, transparent at 11% -> opaque at 75% of its 1650px box, with the 1050px picture
     centred in it) expressed on the picture itself: ~11% opacity at the top rising to full opacity at 89% of the
     height, so the lower part of the road is solid and the top dissolves into the page. */
  -webkit-mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0.113) 0%, rgb(0, 0, 0) 89%);
  mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0.113) 0%, rgb(0, 0, 0) 89%);
}

/* Desktop: a much larger illustration. It starts 60px left of the heading edge (still inside the frame) and runs
   to 8px before the cards column (cards start 80px after the column): width = column + 132px. Width and height
   grow together (the picture is 2:3). */
@media (min-width: 1025px) {
  body.implementation-page .strategic-sticky-col > .impl-services-visual {
    width: calc(100% + 132px) !important;
    max-width: none !important;
    margin-left: -60px !important;
  }
}

.impl-services-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
}

.impl-services-stage > img,
.impl-services-stage > .impl-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.impl-services-stage > img {
  display: block;
  object-fit: contain;
}

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

  body.implementation-page .strategic-hero-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1374 / 1145;
  }

}