/* ==========================================================================
   Strategy page only - hero and "Strategy services" illustrations, placed and
   masked exactly as in the Framer design (strategic-advisory page).
   Sizes/offsets are the Framer values at a 1280px viewport.
   ========================================================================== */

/* ---- Hero: 582x370 image, cover-fit, faded in along a 112deg gradient, anchored to the frame's right edge ---- */
body.strategy-page .strategic-hero-layout {
  position: static !important;          /* so the visual positions against the hero frame, not the inner layout */
}

body.strategy-page .strategic-hero-visual {
  position: absolute !important;
  top: 260px !important;               /* Framer: 260px from the hero top */
  right: clamp(40px, 7vw, 130px) !important;   /* slid inward, away from the frame corner */
  bottom: auto !important;
  width: 582px !important;
  height: 370px !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.strategy-page .strategic-hero-img {
  display: block !important;
  width: 582px !important;
  max-width: none !important;
  height: 370px !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  /* exact Framer fade */
  -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%);
}

/* ---- Remove the frosted white panel (#ffffff91 + blur(8px)) that sits over the hero image on this page:
   it was washing out and blurring the image's left half. Framer has no such panel. ---- */
body.strategy-page .strategic-hero-content {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- The two hero cards stop where the image's visible area begins (as in Framer), so they never sit
   on top of the image's strong part. Image box left = layout right + 80px - offset - 582px; the cards may run
   ~200px into it (the faded left edge). ---- */
@media (min-width: 1025px) {
  body.strategy-page .strategic-hero-content {
    max-width: none !important;
  }

  body.strategy-page .strategic-hero-content .strategic-boxes {
    max-width: calc(100% - 250px - clamp(40px, 7vw, 130px)) !important;
  }
}

/* ---- Strategy services: same 913x1319 box, fades and stacking as the first setup, but anchored to the sticky
   heading block (so it comes along with it). Its left edge sits on the section frame's left border
   (--svc-left is set by a small script because the column is centred); the bridge starts just under the paragraph. ---- */
body.strategy-page .strategic-service-wrap {
  overflow-x: clip;
}

/* The bridge stays inside this section: whatever would spill past the section's bottom border (when the sticky
   heading reaches the end) is cut off, so it never overlaps the CLOSING section. `clip` (unlike `hidden`)
   keeps position: sticky working. */
body.strategy-page .strategic-service-section {
  overflow-y: clip !important;         /* beats the page stylesheet's `overflow: visible !important` */
}

body.strategy-page .strategic-sticky-col > .strategy-services-visual {
  position: absolute !important;
  left: var(--svc-left, -314px) !important;
  top: -329px !important;
  width: 913px !important;
  max-width: 913px !important;
  height: 1319px !important;
  z-index: 1 !important;               /* above the cards, below the heading text */
  pointer-events: none !important;
  -webkit-mask-image:
    linear-gradient(81deg, rgb(0, 0, 0) 16.3793%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(84deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72.4138%);
  -webkit-mask-composite: xor, source-over;
  mask-image:
    linear-gradient(81deg, rgb(0, 0, 0) 16.3793%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(84deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72.4138%);
  mask-composite: exclude, add;
}

body.strategy-page .strategic-sticky-col > .eyebrow,
body.strategy-page .strategic-sticky-col > h2,
body.strategy-page .strategic-sticky-col > p {
  position: relative;
  z-index: 2;
}

.strategy-services-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

/* ---- Tablet / mobile: simple in-flow images (the absolute Framer geometry is desktop-only) ---- */
@media (max-width: 1024px) {
  body.strategy-page .strategic-hero-visual {
    position: static !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 20px 0 0 !important;
    overflow: visible !important;
  }

  body.strategy-page .strategic-hero-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1536 / 1024;
  }

  body.strategy-page .strategic-sticky-col {
    position: relative !important;
    top: auto !important;
  }

  body.strategy-page .strategic-sticky-col > .strategy-services-visual {
    left: -24px !important;
    top: 170px !important;
    width: min(100vw, 620px) !important;
    max-width: 620px !important;
    height: 360px !important;
  }


}