/* "The approach" as a scroll story (Direction E, chosen by Sam 2026-09-26 in the content-studio pilot).
   A pinned full-bleed reel of real photography. Drives both scroll stories on the homepage. */
.approach-e, .o-reel {
  --e-dim: #7d8fa2;        /* inactive large text on navy, 5.2:1 */
  --e-top: 83px;           /* the sticky site header */
  --e-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.approach-e {
  margin-top: 78px;
  padding-top: 75px;
  border-top: 1px solid #aeb8be;
}
.approach-e .approach-intro { max-width: 760px; }

/* Full bleed: break out of .shell to the page edges. */
.platform:has(.approach-e) { container-type: inline-size; padding-bottom: 0; }
.e-reel {
  margin: 72px calc(50% - 50cqi) 0;
  background: var(--navy);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.e-index { grid-column: 1; grid-row: 1; padding: 64px 48px 14vh var(--gutter); }
.e-index > h3 { font: 500 20px/1.25 var(--display); }
.e-index ol { list-style: none; margin: 0; padding: 0; }
.e-step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.e-step-in { border-top: 1px solid var(--line); padding-top: 20px; transition: border-color 400ms var(--e-ease); }
.e-step :is(h3, h4) {
  font: 500 13px/1.3 var(--display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #39d98a;          /* logo green (brand palette, 2026-09-29) */
  margin-bottom: 16px;
}
.e-step-in > p:not(.e-sub) {
  font: 500 clamp(28px, 2.7vw, 42px)/1.16 var(--display);
  letter-spacing: -0.022em;
  max-width: 13em;
  text-wrap: balance;
  transition: color 400ms var(--e-ease);
}
.e-step .e-sub { font: 400 17px/1.6 var(--body); color: var(--muted); max-width: 30em; margin-top: 18px; transition: color 400ms var(--e-ease); }
.e-live .e-step:not(.is-active) :is(h3, h4, p) { color: var(--e-dim); }
.e-live .e-step.is-active .e-step-in { border-top-color: #39d98a; }

.e-media {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: var(--e-top);
  height: calc(100vh - var(--e-top));
  height: calc(100svh - var(--e-top));
  overflow: hidden;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* one box-sized cell, so tall photos crop instead of overflowing */
  background: var(--navy);
}
.e-layer { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0; }
.e-layer.is-on { opacity: 1; }
.e-live .e-layer { transform: scale(1.05); transition: opacity 400ms var(--e-ease), transform 1200ms var(--e-ease); }
.e-live .e-layer.is-on { transform: scale(1); }
img.e-layer { object-fit: cover; }                /* deliberate backdrop crops */
.e-layer[data-layer="collect"] { object-position: 56% 58%; }    /* the engineer and her laptop */
.e-layer[data-layer="detect"] { object-position: 40% 38%; }     /* the lit warning column */
.e-layer[data-layer="diagnose"] { object-position: 18% 50%; }   /* cable into the port, tablet, hand */
.e-layer[data-layer="predict"] { object-position: 55% 12%; }    /* gauge scale down to the tread */
.e-layer[data-layer="act"] { object-position: 52% 45%; }        /* technician under the car */
.field-image img[src*="outcomes-"] { object-position: 64% center; }   /* the three engineers */


/* Business outcomes (Sam, 2026-09-29): the same scroll story mirrored, photo left and modules right. The active module's
   detail unrolls in place: its space is always reserved, so revealing or hiding it never moves the page at any height. */
.o-reel { --e-dim: #93a6b8; margin: 56px 0 0; background: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }   /* 5:1 on the section blue */
.o-reel .e-media { grid-column: 1; }
.o-reel .e-index { grid-column: 2; padding: 8px var(--gutter) 12vh 56px; }
.o-step { min-height: 88vh; }
.o-step .e-step-in > .o-head { font-size: clamp(26px, 2.3vw, 36px); max-width: 15em; }
.o-more { clip-path: inset(0); transition: clip-path 600ms var(--e-ease), opacity 400ms var(--e-ease); }
.e-live .o-step:not(.is-active) .o-more { clip-path: inset(0 0 100% 0); opacity: 0; }
.o-more p { font: 400 17px/1.6 var(--body); color: #c5d8e6; max-width: 34em; margin-top: 18px; }
.o-more ul { list-style: disc; margin: 14px 0 0; padding-left: 19px; color: #bdd1de; font-size: 16px; line-height: 1.55; max-width: 34em; }
.o-more li { margin-block: 7px; }
.o-reel .outcome-scope { margin-top: 0; max-width: 34em; }
.o-link { margin-top: 20px; }
.o-link a { color: #39d98a; font-weight: 500; text-underline-offset: 3px; }
.e-layer[data-layer="safety"] { object-position: 50% 60%; }     /* the lane ahead and the glowing instruments */
.e-layer[data-layer="warranty"] { object-position: 45% 55%; }   /* car body between the robots */
.e-layer[data-layer="recalls"] { object-position: 62% 50%; }    /* the covered cars on the carrier */
.e-layer[data-layer="supplier"] { object-position: 55% 65%; }   /* scanner over the module label */
.e-layer[data-layer="service"] { object-position: 45% 45%; }    /* technician's face and hands */
.e-layer[data-layer="owner"] { object-position: 38% 50%; }      /* the phone and its app */
.e-layer[data-layer="trust"] { object-position: 50% 50%; }      /* the harness across the engine bay */

@media (prefers-reduced-motion: reduce) {
  .e-live .e-layer, .e-live .e-layer.is-on { transition: none; transform: none !important; }
  .o-more { transition: none; }
}

@media (max-width: 850px) {
  .approach-e, .o-reel { --e-top: 74px; }
  .approach-e { margin-top: 55px; padding-top: 51px; }
  .o-reel { margin-top: 36px; }
  .o-reel .e-index { padding: 32px var(--gutter) 10svh; }
  .o-step { min-height: auto; padding-block: 9svh; }
  .e-live .o-step:not(.is-active) .o-more { clip-path: inset(0); opacity: 1; }   /* phones read every module in full */
  .o-step .e-step-in > .o-head { font-size: 24px; }
  .e-reel { display: block; margin-top: 48px; }
  .e-media { position: sticky; z-index: 2; height: 44svh; }
  .e-index { padding: 40px var(--gutter) 20svh; }
  .e-step { min-height: 46svh; }
  .e-step-in > p:not(.e-sub) { font-size: 26px; }
}
@media (max-width: 600px) {
  .approach-e, .o-reel { --e-top: 72px; }
  .approach-e { margin-top: 45px; padding-top: 38px; }
}