/* The base layout is a complete, readable sourcing sequence without JavaScript.
   Scroll enhancement changes only the presentation, never the page's scrolling. */
.trade-journey{
  --tj-ink:var(--mr-ink,#f5f1e7);
  --tj-muted:var(--mr-muted,#d2dccd);
  --tj-accent:var(--mr-gold,#e2cfa7);
  --tj-edge:rgba(235,241,220,.23);
  --tj-gap:18px;
  position:relative;
  width:100%;
  padding:clamp(40px,5vw,72px) clamp(20px,5vw,88px) clamp(36px,4vw,60px);
  color:var(--tj-ink);
  background:linear-gradient(130deg,#324e3e,#2a4336 56%,#304b3d);
  border-block:1px solid var(--tj-edge);
  box-sizing:border-box;
}
.trade-journey *{box-sizing:border-box}
.trade-journey .tj-viewport{position:absolute;left:0;top:0;width:0;height:100vh;height:100svh;padding-bottom:env(safe-area-inset-bottom,0px);visibility:hidden;pointer-events:none}
.trade-journey .tj-intro,.trade-journey .tj-track,.trade-journey .tj-outro{width:100%;max-width:1440px;margin-inline:auto;min-width:0}
.trade-journey .tj-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.65fr);gap:12px 7vw;align-items:end;padding-bottom:clamp(26px,3.5vw,44px)}
#siteWrapper .trade-journey .tj-intro .tj-eyebrow{grid-column:1/-1;margin:0 0 12px;font:500 .68rem/1.6 Arial,Helvetica,sans-serif!important;letter-spacing:.17em;text-transform:uppercase;color:var(--tj-accent)!important}
#siteWrapper .trade-journey .tj-intro h2{margin:0;font:400 clamp(2.15rem,4.8vw,4.5rem)/1.07 Georgia,'Times New Roman',serif!important;letter-spacing:-.045em!important;color:var(--tj-ink)!important;text-wrap:balance}
#siteWrapper .trade-journey .tj-intro h2 em{font-weight:400;color:var(--tj-accent)}
#siteWrapper .trade-journey .tj-intro .tj-intro-note{max-width:34ch;margin:0 0 4px;font:400 1rem/1.65 Arial,Helvetica,sans-serif!important;color:var(--tj-muted)!important}
.trade-journey .tj-media,.trade-journey .tj-nav{display:none}
.trade-journey .tj-chapter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,5vw,80px);align-items:center;margin:0;padding:36px 0;min-width:0;border-top:1px solid var(--tj-edge)}
.trade-journey .tj-chapter:first-child{border-top:0;padding-top:0}
.trade-journey .tj-copy{min-width:0;overflow-wrap:break-word}
#siteWrapper .trade-journey .tj-copy .tj-label{font:500 .72rem/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:.15em;text-transform:uppercase;color:var(--tj-accent)!important;margin:0 0 20px;max-width:none}
#siteWrapper .trade-journey .tj-copy h3{font:400 clamp(1.85rem,3.2vw,3.45rem)/1.1 Georgia,'Times New Roman',serif!important;letter-spacing:-.035em!important;color:var(--tj-ink)!important;margin:0 0 23px;max-width:15ch;text-wrap:balance}
#siteWrapper .trade-journey .tj-copy p:not(.tj-label){font:400 1rem/1.7 Arial,Helvetica,sans-serif!important;color:var(--tj-muted)!important;margin:0;max-width:37ch}
.trade-journey .tj-inline-image,.trade-journey .tj-media{border:7px solid rgba(236,243,222,.16);border-radius:30px 14px 30px 14px;background:#3b5745;box-shadow:0 16px 40px rgba(9,26,17,.13),inset 0 1px 0 rgba(255,255,236,.18)}
.trade-journey .tj-inline-image{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#siteWrapper .trade-journey .tj-inline-image{height:auto;aspect-ratio:4/3;object-fit:cover}
.trade-journey .tj-outro{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between;padding-top:32px;margin-top:30px;border-top:1px solid var(--tj-edge)}
#siteWrapper .trade-journey .tj-outro p{font:400 .82rem/1.65 Arial,Helvetica,sans-serif!important;color:var(--tj-muted)!important;margin:0;max-width:52ch}
.trade-journey .tj-outro a{display:inline-flex;align-items:center;gap:26px;padding:12px 0;min-height:44px;color:var(--tj-accent);border-bottom:1px solid rgba(226,207,167,.5);text-decoration:none;font:500 .85rem/1.6 Arial,Helvetica,sans-serif}
.trade-journey :is(a,button):focus-visible{outline:2px solid #f2deab;outline-offset:4px}

/* One pinned photo and one changing text region on desktop AND mobile.
   Opacity-hidden chapters remain in reading order for assistive technology. */
.trade-journey.is-pinned .tj-track{height:var(--tj-track-height)}
.trade-journey.is-pinned .tj-stage{position:sticky;top:max(var(--tj-top,12px),env(safe-area-inset-top,0px));height:var(--tj-stage-height);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,80px);row-gap:var(--tj-gap);align-items:center;min-width:0}
.trade-journey.is-pinned .tj-media{grid-column:1;grid-row:1/-1;position:relative;display:block;isolation:isolate;overflow:hidden;width:100%;height:100%;min-height:0}
.trade-journey.is-pinned .tj-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(var(--tj-zoom,1.025));transition:opacity 280ms ease,transform 380ms ease-out;pointer-events:none;filter:none}
.trade-journey.is-pinned .tj-image.is-current{opacity:1}
.trade-journey .tj-media-edge{position:absolute;inset:0;border:1px solid rgba(255,255,238,.16);border-radius:inherit;z-index:2;pointer-events:none}
.trade-journey .tj-progress{position:absolute;left:20px;right:20px;bottom:17px;height:2px;background:rgba(245,241,231,.32);z-index:3;overflow:hidden;border-radius:4px;pointer-events:none}
.trade-journey .tj-progress span{display:block;width:100%;height:100%;background:#f1dfb5;transform:scaleX(var(--tj-progress,0));transform-origin:left}
.trade-journey.is-pinned .tj-chapters{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-width:0;min-height:0}
.trade-journey.is-pinned .tj-chapter{grid-area:1/1;display:block;border:0;padding:0;margin:0;opacity:0;pointer-events:none;transition:opacity 220ms ease}
.trade-journey.is-pinned .tj-chapter.is-current{opacity:1;pointer-events:auto}
.trade-journey.is-pinned .tj-inline-image{display:none}
.trade-journey.is-pinned .tj-nav{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;padding-top:15px;border-top:1px solid var(--tj-edge);align-self:end}
.trade-journey .tj-nav button{min-width:0;min-height:44px;padding:8px 5px;border:1px solid transparent;border-radius:12px 5px;background:rgba(242,242,226,.045);color:var(--tj-muted);font:500 .74rem/1.35 Arial,Helvetica,sans-serif;cursor:pointer;touch-action:manipulation;transition:background .18s,color .18s,border-color .18s}
.trade-journey .tj-nav button:hover{background:rgba(242,242,226,.11);color:var(--tj-ink)}
.trade-journey .tj-nav button[aria-current="step"]{background:#e2cfa7;color:#243b31;border-color:#e2cfa7}

@media(max-width:760px){
  .trade-journey{--tj-gap:14px;padding-inline:16px;padding-top:38px}
  .trade-journey .tj-intro{display:block;padding-bottom:26px}
  #siteWrapper .trade-journey .tj-intro h2{font-size:clamp(2rem,8.5vw,3.25rem)!important}
  #siteWrapper .trade-journey .tj-intro .tj-intro-note{margin-top:14px;max-width:38ch;font-size:.9rem!important}
  .trade-journey .tj-chapter{display:block;padding:30px 0 38px}
  .trade-journey .tj-inline-image{margin-bottom:25px;border-width:5px;border-radius:24px 12px 24px 12px}
  #siteWrapper .trade-journey .tj-copy .tj-label{font-size:.62rem!important;letter-spacing:.14em;margin-bottom:7px}
  #siteWrapper .trade-journey .tj-copy h3{font-size:clamp(1.65rem,6.5vw,2.2rem)!important;line-height:1.1!important;margin-bottom:8px;max-width:22ch}
  #siteWrapper .trade-journey .tj-copy p:not(.tj-label){font-size:.9rem!important;line-height:1.5!important;max-width:45ch}
  .trade-journey.is-pinned .tj-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--tj-media-height) minmax(0,1fr) auto;gap:var(--tj-gap);align-items:start}
  .trade-journey.is-pinned .tj-media{grid-column:1;grid-row:1;height:var(--tj-media-height);border-width:5px;border-radius:26px 12px 26px 12px}
  .trade-journey.is-pinned .tj-chapters{grid-column:1;grid-row:2;align-self:start;padding-inline:3px}
  .trade-journey.is-pinned .tj-nav{grid-column:1;grid-row:3;padding-top:0;border-top:0;gap:5px}
  .trade-journey .tj-nav button{font-size:.72rem;min-height:44px;padding:7px 4px}
  .trade-journey .tj-progress{left:15px;right:15px;bottom:13px}
  .trade-journey .tj-outro{margin-top:20px;padding-top:25px}
}
@media(prefers-reduced-motion:reduce){
  .trade-journey :is(.tj-image,.tj-chapter,.tj-nav button){transition:none!important;transform:none!important}
}