/* ============================================================================
   our_approach  —  Client: IE  —  token prefix: --ie-
   Tokens: /WS/modules/tokens.css (loaded via require_css on module.html line 1)

   NO :root declarations here. Every shared value is read as
   var(--ie-token, <SVG-measured fallback>) so the module still renders at PNG
   parity if the token file is ever missing.

   All geometry is measured from module__our_approach.svg (1920x1139, 1:1 with
   the ground-truth PNG) and our_approach_mobile.png (390x1064). Every
   declaration carries its coordinate arithmetic.

   Module-local custom properties are "--our_approach-" prefixed.
   ========================================================================= */

.our_approach {
  /* Module-local: no shared token exists for these. */
  --our_approach-parallax-range: 60px;   /* travel each way for the photo layer; the media box is oversized by 2x this so an edge can never surface */
  --our_approach-glass-blur: 10px;       /* foreignObject backdrop-filter:blur(10px) — Figma data-figma-bg-blur-radius="20" halves on export */

  position: relative;
  isolation: isolate;                    /* contains the overlay's mix-blend-mode so it multiplies with the photo + section colour only, never the page behind */
  box-sizing: border-box;

  /* Section padding — editable via styles.section_padding, measured fallbacks.
     Never inline padding: inline styles beat the mobile min() clamps below. */
  padding-top: var(--our_approach-pad-top, 144px);        /* 144px — panel top y144 minus canvas y0 */
  padding-bottom: var(--our_approach-pad-bottom, 144px);  /* 144px — canvas 1139 minus panel bottom y995 */
}

.our_approach *,
.our_approach *::before,
.our_approach *::after { box-sizing: inherit; }

/* --- Background stack ------------------------------------------------------
   Reproduces the SVG's two full-bleed rects: the photo pattern fill, then
   paint0_linear at fill-opacity .9 with mix-blend-mode:multiply.             */

.our_approach__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;                      /* clips the oversized parallax media box */
  pointer-events: none;
}

.our_approach__bg-media {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--our_approach-parallax-range));
  height: calc(100% + (2 * var(--our_approach-parallax-range)));
  background-position: center center;     /* pattern0 y-offset -0.0619 x 1139 = -70.5px, and 1280-1139-70.5 = 70.5px cropped off the bottom: an exactly centred cover crop */
  background-size: cover;                 /* image0 natural 1920x1280 scaled to fill 1920 wide */
  background-repeat: no-repeat;
  will-change: transform;
}

.our_approach__bg-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.9;                           /* rect fill-opacity="0.9" */
  mix-blend-mode: multiply;               /* style="mix-blend-mode:multiply" */
}

/* --- Layout ---------------------------------------------------------------- */

.our_approach__inner {
  position: relative;                     /* lifts the content above .our_approach__bg */
  /* 192px gutter at 1920 = panel left edge x192 = 10vw; capped so the panel
     stays 192px off the left edge on ultrawide rather than drifting inward. */
  padding-left: min(192px, 10vw);
  padding-right: min(192px, 10vw);
}

.our_approach__panel {
  position: relative;
  width: 100%;
  max-width: 780px;                       /* 772px glass (x192->x964) + 8px accent bar (x964->x972) */
  padding: 48px;                          /* 48px — text x240 minus panel x192; 964 minus rule right x916; eyebrow line-box top 192.75 minus panel y144 = 48.75 */

  background-color: var(--ie-color-glass, rgba(255, 255, 255, 0.1));  /* Column path fill="white" fill-opacity="0.1" */
  -webkit-backdrop-filter: blur(var(--our_approach-glass-blur));
  backdrop-filter: blur(var(--our_approach-glass-blur));

  border-radius: var(--ie-radius-lg, 32px) 0 0 var(--ie-radius-lg, 32px);  /* 32px — arc 192,176 -> 224,144; right edge drawn square against the accent bar */
  border-right: 8px solid var(--ie-color-accent, #278894);                 /* 8px #278894 — outside-masked path x956->x972 renders only beyond the panel edge x964 */
}

/* Legibility floor where backdrop-filter is unsupported: the 10%-white fill
   alone is not enough to guarantee 4.5:1 for white body copy over a photo. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .our_approach__panel { background-color: rgba(17, 17, 17, 0.62); }
}

/* --- Masthead -------------------------------------------------------------- */

.our_approach .our_approach__eyebrow {
  margin: 0;
  font-family: var(--ie-font-body, "New Rubrik", "Rubik", sans-serif) !important;
  font-size: var(--ie-fontsize-eyebrow, 13px) !important;                 /* 13px */
  font-weight: var(--ie-fontweight-eyebrow, 700) !important;              /* bold */
  line-height: 1.2;                                                       /* single line in Figma; Rubik metric default ~1.19, snapped. Drives the 48px panel padding-top arithmetic */
  letter-spacing: 0.12em !important;                                      /* letter-spacing="0.12em" */
  text-transform: uppercase !important;
  color: var(--ie-color-surface, #FFFFFF) !important;                     /* fill="white" — design constant, no editor field, so !important is correct */
}

.our_approach .our_approach__heading {
  /* 24px — h3 line-box top 233.16 minus eyebrow line-box bottom 208.35 = 24.81 */
  margin: 24px 0 0;
  max-width: 378px;                                                       /* widest line "workplace change" x240->x578 = 338px, + 40px per Container Measure Fidelity. Forces the Figma break after "to" without a <br> */
  font-family: var(--ie-font-heading, "New Rubrik", "Rubik", sans-serif) !important;
  font-size: var(--ie-fontsize-h2, 40px) !important;                      /* 40px — token holds this value; see Step 5 note on an --ie-fontsize-h3 alias */
  font-weight: var(--ie-fontweight-heading, 400) !important;              /* no font-weight attr on h3-Text = Rubik Regular */
  line-height: var(--ie-lineheight-heading, 1.2);                         /* 48px — baselines y271.06 -> y319.06; 48/40 = 1.2 */
  letter-spacing: 0.003em !important;
  color: var(--ie-color-surface, #FFFFFF) !important;
  text-wrap: var(--ie-textwrap-heading, balance);                         /* re-declared scoped: a theme h3 rule can beat the page-wide rule in tokens.css */
}

.our_approach__masthead:first-child > .our_approach__eyebrow:first-child { margin-top: 0; }
.our_approach__masthead > .our_approach__heading:first-child { margin-top: 0; }

/* --- Process list ---------------------------------------------------------- */

.our_approach .our_approach__list {
  /* 32px — row 1 box top y361 minus h3 line-box bottom y329.16 = 31.84 */
  margin: 32px 0 0;
  padding: 0;
  list-style: none;                       /* theme reset */
}

.our_approach .our_approach__item {
  display: grid;
  /* 48px label gutter — description x288 minus label x240. (heading-Text sits at
     x289: 1px of Figma glyph-bearing rounding, resolved to the 48px measurement.) */
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: baseline;                  /* label and title share baseline y380.53 */
  row-gap: 16px;                          /* 16px — description line-box top 402.07 minus title line-box bottom 385.58 = 16.49 */
  margin: 0;
  padding: 0;
}

.our_approach .our_approach__item:not(:last-child) {
  padding-bottom: 32px;                   /* 32px — rule y477 minus description line-box bottom y446.07 = 30.93 */
  margin-bottom: 32px;                    /* 32px — next row box top y510 minus rule bottom y478 */
  border-bottom: 1px solid var(--ie-color-divider-glass, #ECEDEA);  /* 1px #ECEDEA — inside-masked path y477->y478, x240->x916. approach_4 carries no rule, hence :not(:last-child) */
}

/* Last row keeps its 32px bottom padding: 995 (panel bottom) minus 915.07
   (row 4 description line-box bottom) = 79.93 = 32px row padding + 48px panel
   padding, which is what makes the panel's 48px inset symmetric. */
.our_approach .our_approach__item:last-child { padding-bottom: 32px; }

.our_approach .our_approach__label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--ie-font-heading, "New Rubrik", "Rubik", sans-serif) !important;
  font-size: var(--ie-fontsize-lead, 20px) !important;                    /* 20px — token already holds this value; reused rather than duplicated */
  font-weight: var(--ie-fontweight-eyebrow, 700) !important;              /* font-weight="bold" */
  line-height: 1.2;                                                      /* matches the title so the shared baseline y380.53 holds */
  letter-spacing: 0.003em !important;
  /* colour is NOT locked here — it is driven by styles.approach_label_color
     (inline on the element), so !important would make the field inert.
     Root-scope + the inline style carry it past theme rules instead. */
  color: var(--ie-color-primary, #35A99A);                               /* #35A99A fallback only; the field supplies the live value */
}

.our_approach .our_approach__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--ie-font-heading, "New Rubrik", "Rubik", sans-serif) !important;
  font-size: var(--ie-fontsize-lead, 20px) !important;                    /* 20px */
  font-weight: var(--ie-fontweight-eyebrow, 700) !important;              /* font-weight="bold" */
  line-height: 1.2;
  letter-spacing: 0.003em !important;
  color: var(--ie-color-surface, #FFFFFF) !important;
}

.our_approach .our_approach__desc {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--ie-font-body, "New Rubrik", "Rubik", sans-serif) !important;
  font-size: var(--ie-fontsize-body, 17px);                               /* 17px */
  font-weight: var(--ie-fontweight-body-regular, 400);                    /* description-Text carries no font-weight attr = Rubik Regular */
  line-height: 22px;                                                      /* 22px — baselines y418.976 -> y440.976. Module-local: baseline-derived line-heights are not tokenised, and this is deliberately tighter than --ie-lineheight-body (1.68) */
  letter-spacing: 0.003em;
  color: var(--ie-color-surface, #FFFFFF) !important;                      /* design constant on the wrapper; inner nodes inherit so editor-applied inline colours still win */
  text-wrap-style: var(--ie-textwrap-body, pretty);
}

/* Rich text: force only font-family per the theme-isolation policy, so a theme
   face cannot leak in while the editor keeps control of weight and colour. */
.our_approach .our_approach__desc p,
.our_approach .our_approach__desc li,
.our_approach .our_approach__desc a,
.our_approach .our_approach__desc span,
.our_approach .our_approach__desc strong,
.our_approach .our_approach__desc em {
  font-family: inherit !important;
  color: inherit;
}

.our_approach .our_approach__desc > :first-child { margin-top: 0; }
.our_approach .our_approach__desc > :last-child { margin-bottom: 0; }
.our_approach .our_approach__desc p { margin: 0; }
.our_approach .our_approach__desc p + p { margin-top: 22px; }              /* PROPOSED: one line-height. The comp has a single paragraph per row, so there is no measured multi-paragraph gap */

.our_approach .our_approach__desc ul,
.our_approach .our_approach__desc ol { margin: 22px 0; padding-left: 22px; }

.our_approach .our_approach__desc a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Screen-reader-only "Step " prefix so "01 Assess" is announced with its role
   in the sequence. No visual footprint. */
.our_approach__sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TABLET  768–1023px
   No tablet comp supplied. PROPOSED: keep every desktop type size and the
   panel's left-only radius + accent bar, and let the panel fill the container
   as the photo margin runs out. Section padding clamped so the desktop 144px
   rhythm does not dominate a shorter viewport.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .our_approach {
    padding-top: min(var(--our_approach-pad-top, 144px), 96px);
    padding-bottom: min(var(--our_approach-pad-bottom, 144px), 96px);
  }

  .our_approach__inner {
    padding-left: 48px;
    padding-right: 48px;
  }

  .our_approach__panel { max-width: none; }
}

/* ==========================================================================
   MOBILE  ≤767px  —  measured from our_approach_mobile.png (390x1064)
   ========================================================================== */

@media (max-width: 767px) {
  .our_approach {
    padding-top: min(var(--our_approach-pad-top, 144px), 48px);      /* 48px — panel top y48 */
    padding-bottom: min(var(--our_approach-pad-bottom, 144px), 48px); /* 48px — canvas 1064 minus panel bottom y1016 */
  }

  .our_approach__inner {
    padding-left: 20px;                   /* 20px — panel left edge x20 */
    padding-right: 20px;                  /* 20px — 390 minus panel right edge x370 */
  }

  .our_approach__panel {
    max-width: none;                      /* 350px at 390 viewport = x20->x370 */
    padding: 24px 16px;                   /* top 24px — heading line-box top 71.95 minus panel y48 = 23.95. inline 16px — label origin x36 minus panel x20 */
    border-radius: var(--ie-radius-lg, 32px);  /* all four corners: circle fit through (25,62),(28,58),(23,66) gives r = 30.7–31.4 */
    border-right: 0;                      /* no #278894 pixels anywhere in the mobile comp */
  }

  /* Panel padding-bottom is 24px, not 48px: 1016 minus (row 4 description
     line-box bottom 960.97 + the row's 32px padding) = 23.03.

     The eyebrow carries no mobile override: the comp shows the toggle in its
     OFF state, so there is no measured mobile eyebrow to match. It keeps its
     desktop type for editors who switch it on. */

  .our_approach .our_approach__heading {
    font-size: 36px;                      /* cap-height 26.63 vs desktop 29.53 at 40px = 36.07 */
    line-height: 1.2;                     /* 43px — ink tops y80 -> y123; 43/36 = 1.194 */
    max-width: none;                      /* the 318px content box already forces the break after "to" */
  }

  .our_approach .our_approach__desc {
    font-size: 18px;                      /* cap-height 13.75 / 0.7624 cap ratio = 18.03 */
    line-height: 23px;                    /* ink tops y236 -> y259 -> y282 -> y305 */
  }

  .our_approach .our_approach__desc p + p { margin-top: 23px; }
  .our_approach .our_approach__desc ul,
  .our_approach .our_approach__desc ol { margin: 23px 0; padding-left: 23px; }

  /* Label gutter and vertical rhythm are unchanged from desktop, and the comp
     confirms it: label origin x36 -> content origin x84 = 48px; title-to-
     description 231.6 minus 215.5 = 16px; description-to-rule 354 minus 323.6
     = 30.4; rule-to-next-title 387.55 minus 355 = 32.55. */
}

/* Very narrow phones: the 48px label gutter is a large slice of a 320px screen. */
@media (max-width: 359px) {
  .our_approach .our_approach__item { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ==========================================================================
   DESKTOP  ≥1024px — explicit block; the base rules above are the measured
   1920px design, so this only pins the section padding to its unclamped value.
   ========================================================================== */

@media (min-width: 1024px) {
  .our_approach {
    padding-top: var(--our_approach-pad-top, 144px);
    padding-bottom: var(--our_approach-pad-bottom, 144px);
  }
}

/* ==========================================================================
   REDUCED MOTION — the parallax is the module's only motion. module.js also
   bails out before binding any listener; this is the belt-and-braces pass in
   case the preference changes after load.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .our_approach__bg-media {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}