/* Reference-led three-panel deck. Semantic normal-flow articles are the baseline. */
.approach.approach-scroll{
  --story-gutter:clamp(28px,5.6vw,100px);
  --approach-stage-height:clamp(420px,min(calc(100svh - 150px),calc(33.33vw + 48px)),660px);
  --approach-step:clamp(360px,58svh,600px);
  padding:88px 0 74px;
  background:var(--paper);
}
.approach-scroll .approach-intro{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:end;
  gap:22px 70px;
  width:min(calc(100% - 2*var(--story-gutter)),1160px);
  margin:0 auto 52px;
}
.approach-scroll .approach-intro>.eyebrow{grid-column:1/-1;color:var(--clay,#9c4d32)}
.approach-scroll .approach-intro h2{font-size:clamp(42px,4.2vw,62px);line-height:1.06;max-width:650px}
.approach-scroll .approach-intro h2 em{font-weight:400}
.approach-scroll .approach-intro>p:not(.eyebrow){max-width:440px;color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 5px}
.approach-scroll .approach-track{position:relative;width:min(calc(100% - 2*var(--story-gutter)),1800px);margin-inline:auto}
.approach-scroll .approach-stage{position:relative}
.approach-scroll .approach-scene{position:relative;display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.6fr);gap:55px;align-items:center;margin:0 0 64px}
.approach-scroll .approach-scene:nth-child(2){grid-template-columns:minmax(0,1.6fr) minmax(220px,.65fr)}
.approach-scroll .approach-scene:nth-child(2) .approach-caption{grid-column:2;grid-row:1}
.approach-scroll .approach-scene:nth-child(2) .approach-card{grid-column:1;grid-row:1}
.approach-scroll .approach-caption{position:relative;min-width:0}
.approach-scroll .approach-caption .step-number{font-size:11px;letter-spacing:.13em;color:var(--clay,#9c4d32);margin-bottom:16px}
.approach-scroll .approach-caption h3{font-size:clamp(27px,2.45vw,37px);line-height:1.1;margin:0 0 18px;color:var(--ink)}
.approach-scroll .approach-caption>p{font-size:15px;line-height:1.75;color:var(--muted);text-wrap:pretty}
.approach-scroll .approach-card{position:relative;isolation:isolate;margin:0;min-width:0;aspect-ratio:1.45;border-radius:36px;overflow:hidden;background:var(--soft,#e7e8e2)}
.approach-scroll .approach-card>picture,.approach-scroll .approach-card>picture>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.approach-scroll .approach-quote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72%,430px);padding:29px 32px 31px;border-radius:20px;background:#faf8f2;color:#142e50;text-align:left;box-shadow:0 6px 25px #142e5009}
.approach-scroll .approach-quote .quote-label{display:block;margin-bottom:17px;font:500 10px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#6b625a}
.approach-scroll .approach-quote p{font:400 clamp(28px,2.65vw,39px)/1.12 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.approach-scroll .approach-more{width:min(calc(100% - 2*var(--story-gutter)),1160px);margin:36px auto 0;display:flex;justify-content:center}
@media(min-width:1001px) and (min-height:620px){
  html.approach-story-ready .approach-scroll .approach-track{height:calc(var(--approach-stage-height) + var(--approach-step)*2.4)}
  html.approach-story-ready .approach-scroll .approach-stage{position:sticky;top:clamp(90px,12svh,120px);height:var(--approach-stage-height);overflow:clip;isolation:isolate}
  html.approach-story-ready .approach-scroll .approach-scene,html.approach-story-ready .approach-scroll .approach-scene:nth-child(2){position:absolute;inset:0;display:block;grid-template-columns:none;margin:0;pointer-events:none}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(1){z-index:3}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(2){z-index:2}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(3){z-index:1}
  html.approach-story-ready .approach-scroll .approach-card{position:absolute;left:21%;top:0;width:58%;height:calc(100% - 48px);aspect-ratio:auto;border-radius:clamp(28px,3.3vw,52px);transform:translate3d(0,var(--story-y,0px),0) scale(var(--story-scale,1));transform-origin:center bottom}
  html.approach-story-ready .approach-scroll .approach-caption{position:absolute;left:0;top:50%;width:calc(20% - 18px);transform:translate3d(0,calc(-50% + var(--caption-y,0px)),0);opacity:var(--caption-opacity,1)}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(2) .approach-caption{left:auto;right:0}
  html.approach-story-ready .approach-scroll .approach-caption h3{font-size:clamp(25px,2.1vw,34px)}
  html.approach-story-ready .approach-scroll .approach-caption>p{font-size:14px;line-height:1.7}
  html.approach-story-ready .approach-scroll .approach-more{margin-top:38px}
}
@media(max-width:1000px){
  .approach.approach-scroll{--story-gutter:clamp(28px,6vw,60px);padding-block:68px}
  .approach-scroll .approach-intro{gap:24px 32px;margin-bottom:40px}
  .approach-scroll .approach-intro h2{font-size:44px}
  .approach-scroll .approach-intro>p:not(.eyebrow){font-size:15px}
  .approach-scroll .approach-scene,.approach-scroll .approach-scene:nth-child(2){grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .approach-scroll .approach-scene:nth-child(2) .approach-caption,.approach-scroll .approach-scene:nth-child(2) .approach-card{grid-column:auto;grid-row:auto}
  .approach-scroll .approach-caption{max-width:560px}
  .approach-scroll .approach-caption h3{font-size:32px;margin-bottom:14px}
  .approach-scroll .approach-card{aspect-ratio:1.6;border-radius:28px}
  .approach-scroll .approach-quote{width:min(70%,390px);padding:26px 28px;border-radius:18px}
  .approach-scroll .approach-quote p{font-size:34px}
}
@media(max-width:600px){
  .approach-scroll .approach-intro{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  .approach-scroll .approach-intro h2{font-size:clamp(36px,8.8vw,44px)}
  .approach-scroll .approach-intro>p:not(.eyebrow){max-width:34rem;margin:0}
  .approach-scroll .approach-caption h3{font-size:31px}
  .approach-scroll .approach-caption>p{font-size:15px;line-height:1.7}
  .approach-scroll .approach-card{aspect-ratio:1.08;border-radius:24px}
  .approach-scroll .approach-quote{width:78%;padding:24px;border-radius:17px}
  .approach-scroll .approach-quote .quote-label{font-size:9px;margin-bottom:12px}
  .approach-scroll .approach-quote p{font-size:clamp(26px,7vw,32px)}
  .approach-scroll .approach-more{margin-top:6px;justify-content:flex-start}
}
@media(max-width:360px){.approach.approach-scroll{--story-gutter:24px}.approach-scroll .approach-caption h3{font-size:29px}.approach-scroll .approach-quote{padding:20px}}
/* A narrow deck keeps the complete caption beneath the photographs. The controller
   measures the longest caption and enables this only when both areas fit the viewport. */
@media(min-width:280px) and (max-width:1000px) and (min-height:480px){
  html.approach-story-ready .approach-scroll{--approach-step:clamp(300px,58svh,500px)}
  html.approach-story-ready .approach-scroll .approach-track{height:calc(var(--story-mobile-stage-height,420px) + var(--approach-step)*2.4)}
  html.approach-story-ready .approach-scroll .approach-stage{position:sticky;top:clamp(76px,10svh,92px);height:var(--story-mobile-stage-height,420px);max-height:calc(100svh - clamp(76px,10svh,92px) - 16px);overflow:clip;isolation:isolate}
  html.approach-story-ready .approach-scroll .approach-scene,html.approach-story-ready .approach-scroll .approach-scene:nth-child(2){position:absolute;inset:0;display:block;grid-template-columns:none;margin:0;pointer-events:none}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(1){z-index:3}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(2){z-index:2}
  html.approach-story-ready .approach-scroll .approach-scene:nth-child(3){z-index:1}
  html.approach-story-ready .approach-scroll .approach-card{position:absolute;left:0;top:0;width:100%;height:var(--story-mobile-card-height,200px);aspect-ratio:auto;border-radius:24px;transform:translate3d(0,var(--story-y,0px),0) scale(var(--story-scale,1));transform-origin:center bottom}
  html.approach-story-ready .approach-scroll .approach-caption,html.approach-story-ready .approach-scroll .approach-scene:nth-child(2) .approach-caption{position:absolute;left:50%;right:auto;top:var(--story-mobile-caption-top,264px);width:100%;max-width:600px;transform:translate3d(-50%,var(--caption-y,0px),0);opacity:var(--caption-opacity,1)}
  html.approach-story-ready .approach-scroll .approach-caption .step-number{font-size:10px;line-height:1.5;margin-bottom:10px}
  html.approach-story-ready .approach-scroll .approach-caption h3{font-size:clamp(25px,5.5vw,31px);line-height:1.1;margin-bottom:10px}
  html.approach-story-ready .approach-scroll .approach-caption>p{font-size:14px;line-height:1.6}
}
@media print{.approach.approach-scroll{padding-block:30px}.approach-scroll .approach-track{height:auto!important}.approach-scroll .approach-stage{position:static!important;height:auto!important;overflow:visible!important}.approach-scroll .approach-scene{position:relative!important;display:grid!important;grid-template-columns:1fr!important;margin-bottom:24px!important}.approach-scroll .approach-caption{position:static!important;width:auto!important;transform:none!important;opacity:1!important}.approach-scroll .approach-card{position:relative!important;left:auto!important;width:100%!important;height:260px!important;transform:none!important}}