.trades-story{display:grid;grid-template-columns:55% 45%;background:#fff;color:#f76200;overflow:hidden}.trades-collage{padding:42px 5% 36px;position:relative;background:#fff}.trades-collage-label{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:13px;letter-spacing:1px}.trades-collage-label span{font-size:8px;letter-spacing:1px}.trades-portraits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 16px;align-items:start;padding:54px 0 36px}.trades-collage-foot{display:block;font-size:11px;letter-spacing:2px;margin-top:10px}.trades-story-copy{padding:70px 11% 64px 12%;align-self:center}.trades-kicker{font-size:11px;letter-spacing:2px;margin:0 0 30px}.trades-story-copy h2{color:#171815;font-size:clamp(30px,3.1vw,52px);line-height:1.45;letter-spacing:-1px;margin:0 0 30px;font-weight:700}.trades-story-copy>p:not(.trades-kicker){font-size:14px;line-height:2.1;margin:0 0 23px;color:#666}.trades-story-copy .trades-signoff{font-weight:700;letter-spacing:1px;padding-top:12px}@media(min-width:1600px){.trades-story-copy>p:not(.trades-kicker){font-size:17px}.trades-story-copy h2{font-size:55px}}@media(max-width:1000px){.trades-story-copy{padding:45px 8%}.desktop-break{display:none}.trades-collage{padding-inline:6%}.trades-collage-label{display:block}.trades-collage-label span{display:block;margin-top:9px}.trades-portraits{gap:20px 10px}}@media(max-width:760px){.trades-story{grid-template-columns:1fr}.trades-collage{padding:30px 6%}.trades-collage-label{display:flex}.trades-collage-label span{font-size:6px;margin:0}.trades-portraits{padding-top:24px;gap:18px 12px}.trades-story-copy{padding:42px 7% 46px}.trades-story-copy h2{font-size:36px}.trades-story-copy>p:not(.trades-kicker){font-size:14px}.trades-kicker{margin-bottom:24px}}

/* Each profession has an identifiable silhouette with a photograph clipped inside. */
.trades-collage{align-self:center;padding:46px 6% 40px}
.trade-shape{min-width:0;margin:0;position:relative}
.trade-shape-art{display:block;width:100%;height:auto;overflow:visible}
.trade-shape figcaption{text-align:center;font-size:12px;color:#c34e05;margin-top:16px;line-height:1.8}

.trade-shape-chef .trade-shape-art{transform:rotate(-9deg)}
.trade-shape-coffee{padding-top:35px}
.trade-shape-coffee .trade-shape-art{transform:rotate(13deg);width:91%;margin-inline:auto}
.trade-shape-farmer .trade-shape-art{transform:rotate(5deg)}
.trade-shape-doctor{margin-top:-12px}
.trade-shape-doctor .trade-shape-art{transform:rotate(-7deg)}
.trade-shape-florist{padding-top:35px}
.trade-shape-florist .trade-shape-art{transform:rotate(8deg)}
.trade-shape-architect .trade-shape-art{transform:rotate(-5deg);width:90%;margin-inline:auto}
@media(min-width:1600px){.trades-portraits{gap:54px 24px;padding-block:64px 44px}}
@media(min-width:761px) and (max-width:1100px){.trades-story{grid-template-columns:1fr}.trades-collage{width:100%;max-width:900px;margin-inline:auto;padding:48px 7% 32px}.trades-story-copy{padding:40px 8% 64px;max-width:850px}.trades-portraits{gap:36px 30px}}
@media(max-width:760px){.trades-portraits{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;padding:32px 0 24px}.trades-collage{padding:32px 7%}.trade-shape figcaption{font-size:11px;margin-top:10px}.trade-shape-coffee{padding-top:24px}.trade-shape-doctor{margin-top:0;padding-top:20px}.trade-shape-florist{padding-top:0}.trade-shape-architect{padding-top:20px}}

@media(min-width:1101px){.trades-story{grid-template-columns:45% 55%}.trades-story-copy{grid-column:1;grid-row:1}.trades-collage{grid-column:2;grid-row:1}}

.trades-collage.trades-void-art{padding:32px 20px;align-self:center;width:100%;max-width:none;overflow:hidden}
.trades-void-art>img{display:block;width:100%;max-width:100%;height:auto;margin-inline:0;object-fit:contain}

/* Bring the enlarged podium closer to the introduction. */
@media(min-width:1101px){.trades-story{grid-template-columns:34% 66%}.trades-story-copy{padding-right:0}.trades-void-art>img{width:100%;margin-inline:0}}

.trades-story-copy h2 .trades-title-accent{color:#f76200}

/* A subtle vertical parallax response to page scrolling. */
@media(prefers-reduced-motion:no-preference){
 .trades-void-art>img{transform:translate3d(0,var(--art-float-y,0px),0);transition:transform .15s ease-out}
}

/* Full transparent scene; figures animate independently on the podium. */
.trades-void-art .trades-scene{position:relative;width:100%;transform:translate3d(0,var(--art-float-y,0px),0);transition:transform .15s ease-out}
.trades-scene>img{display:block;width:100%;height:auto;max-width:100%}
.trades-person-sprite{display:block;background-repeat:no-repeat;background-size:600% 100%;pointer-events:none}
.trades-walker{position:absolute;width:4.1%;height:13.5%;left:35.3%;top:66%;transform:translate(-50%,-89%);animation:trades-stair-route 13s linear infinite;pointer-events:none}
.trades-walker>.trades-person-sprite{width:100%;height:100%;background-image:url('/assets/trades-animated-walk.png');animation:trades-walk-frames 1.2s step-end infinite}
.trades-stretcher{position:absolute;width:4.25%;height:14%;left:51.2%;top:36.8%;transform:translate(-50%,-95%);background-image:url('/assets/trades-animated-stretch.png');animation:trades-stretch-frames 14s step-end infinite}
@keyframes trades-stair-route{0%{left:35.3%;top:66%;opacity:0}6%{opacity:1}82%{left:40%;top:51%;opacity:1}92%{left:40%;top:51%;opacity:0}100%{left:40%;top:51%;opacity:0}}
@keyframes trades-walk-frames{0%{background-position:0% 0}16.667%{background-position:20% 0}33.333%{background-position:40% 0}50%{background-position:60% 0}66.667%{background-position:80% 0}83.333%{background-position:100% 0}}
@keyframes trades-stretch-frames{0%,30%{background-position:0% 0}35%{background-position:20% 0}40%{background-position:40% 0}45%{background-position:60% 0}53%{background-position:80% 0}63%{background-position:100% 0}73%{background-position:60% 0}79%{background-position:40% 0}85%{background-position:20% 0}91%,100%{background-position:0% 0}}
.trades-scene:not(.is-active) .trades-walker,.trades-scene:not(.is-active) .trades-person-sprite{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.trades-void-art .trades-scene{transform:none;transition:none}.trades-walker,.trades-person-sprite{animation:none!important}.trades-walker{left:38%;top:58%;opacity:1}}

/* Extended podium dissolves into the white page before its lower edge. */
.trades-scene>img{mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%)}
.trades-atlas-person{position:absolute;pointer-events:none;transform-origin:50% 100%;animation:trades-person-idle var(--person-duration) ease-in-out var(--person-delay) infinite}
.trades-atlas-person svg{display:block;overflow:hidden}
@keyframes trades-person-idle{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2px) rotate(var(--person-lean))}72%{transform:translateY(-.5px) rotate(0)}}
.trades-letter-glow{position:absolute;inset:0;pointer-events:none;background:url('/assets/trades-clean-i-bg.png') center/100% 100% no-repeat;filter:saturate(.25) brightness(1.65);opacity:0;animation:trades-letter-breathe var(--letter-duration) ease-in-out var(--letter-delay) infinite}
@keyframes trades-letter-breathe{0%,100%{opacity:0}48%{opacity:.65}68%{opacity:.3}}
.trades-scene:not(.is-active) .trades-atlas-person,.trades-scene:not(.is-active) .trades-letter-glow{animation-play-state:paused}
.trades-stretcher{left:50.5%;top:35.6%}
@media(prefers-reduced-motion:reduce){.trades-atlas-person,.trades-letter-glow{animation:none!important}}

/* Fixed glass colors: deeper Ø/D and more transparent V/I. */
.trades-letter-glow{animation:none!important}
.trades-letter-glow.is-deep-orange{filter:saturate(1.45) brightness(.88);opacity:.82}
.trades-letter-glow.is-clear-orange{filter:saturate(.72) brightness(1.18);opacity:.6}

/* Complete body frames, matching the original walk/stretch sprites. */
.trades-frame-person{position:absolute;display:block;pointer-events:none;background-repeat:no-repeat;animation:trades-wholebody-frames var(--frame-duration) step-end var(--frame-delay) infinite}
@keyframes trades-wholebody-frames{0%{background-position-x:0%}16.667%{background-position-x:20%}33.333%{background-position-x:40%}50%{background-position-x:60%}66.667%{background-position-x:80%}83.333%{background-position-x:100%}}
.trades-scene:not(.is-active) .trades-frame-person{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.trades-frame-person{animation:none!important;background-position-x:0%}}

.trades-letter-glow.is-natural-glass{filter:none;opacity:0}
.trades-puppet svg{display:block;overflow:visible}
.trades-puppet-stretch{background:none;animation:none}
.trades-puppet-part{transform-box:view-box;animation:puppet-top-bob 1.4s ease-in-out infinite}
.trades-puppet-walk .puppet-left{animation-name:puppet-step-left}
.trades-puppet-walk .puppet-right{animation-name:puppet-step-right}
.trades-puppet-stretch .puppet-top{animation:puppet-side-stretch 6s ease-in-out infinite}
.trades-puppet-stretch .puppet-left{animation:puppet-weight-left 6s ease-in-out infinite}
.trades-puppet-stretch .puppet-right{animation:puppet-weight-right 6s ease-in-out infinite}
@keyframes puppet-top-bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
@keyframes puppet-step-left{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes puppet-step-right{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-12deg)}}
@keyframes puppet-side-stretch{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}70%{transform:rotate(12deg)}}
@keyframes puppet-weight-left{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
@keyframes puppet-weight-right{0%,100%{transform:rotate(0)}30%{transform:rotate(3deg)}70%{transform:rotate(-3deg)}}
.trades-scene:not(.is-active) .trades-puppet-part{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.trades-puppet-part{animation:none!important}}

/* Only the stair walker plays pose frames; all other people use CSS joints. */
.trades-css-person{position:absolute;display:block;pointer-events:none;transform-origin:50% 94%;animation:trades-css-shift var(--frame-duration) ease-in-out var(--frame-delay) infinite}
.trades-css-person .trades-puppet-part{animation-duration:var(--frame-duration);animation-delay:var(--frame-delay)}
.trades-css-person .puppet-top{animation-name:trades-css-turn}
.trades-css-person .puppet-left{animation-name:puppet-weight-left}
.trades-css-person .puppet-right{animation-name:puppet-weight-right}
.trades-css-person.is-stepping .puppet-left{animation-name:puppet-step-left}
.trades-css-person.is-stepping .puppet-right{animation-name:puppet-step-right}
@keyframes trades-css-turn{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes trades-css-shift{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}
.trades-scene:not(.is-active) .trades-css-person{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.trades-css-person{animation:none!important}}

/* Keep the blue-shirt figure's shoes planted on the podium surface. */
.trades-puppet-stretch .puppet-left{transform-origin:145px 680px!important;animation-name:puppet-planted-left}
.trades-puppet-stretch .puppet-right{transform-origin:207px 680px!important;animation-name:puppet-planted-right}
@keyframes puppet-planted-left{0%,100%{transform:rotate(0)}30%{transform:rotate(-1deg)}70%{transform:rotate(1deg)}}
@keyframes puppet-planted-right{0%,100%{transform:rotate(0)}30%{transform:rotate(1deg)}70%{transform:rotate(-1deg)}}

/* Retain the artwork scale, but halve its bottom fade from 17% to 8.5%. */
.trades-scene-viewport{width:100%;aspect-ratio:1610 / 894;overflow:hidden;margin-inline:auto}
.trades-scene>img{mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 91.5%)}
.trades-collage.trades-void-art{padding-bottom:16px}
@media(min-width:1101px){
 .trades-story{overflow:visible;align-items:start}
 .trades-collage.trades-void-art{position:sticky;top:96px;align-self:start;padding-top:16px}
 .trades-scene-viewport{max-width:calc((100svh - 132px) * 1610 / 894)}
 .trades-void-art .trades-scene{transform:none;transition:none}
 .trades-story-copy{align-self:start;padding-top:32px;padding-bottom:32px}
}

/* White breathing room above the about introduction. */
.trades-story{padding-top:166px}

/* Show the pinned artwork first; the copy enters from below on further scroll. */
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 .trades-story-copy{margin-top:calc(100svh - 96px)}
}

/* Space after the final about link before the following section. */
.trades-story-copy{padding-bottom:300px}

/* Move the complete artwork 25px closer to the lower edge. */
.trades-void-art .trades-scene-viewport{position:relative;top:25px}