/* Homepage expertise: the approved Working examples concept. */
#work .arial-areas{text-align:left;border-bottom:1px solid var(--line)}
#work .arial-area{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(40px,5vw,64px);padding:48px 0;border-top:1px solid var(--line);align-items:center;position:relative}
#work .arial-copy{min-width:0}
#work .arial-category{font-size:11px;letter-spacing:1.2px;line-height:1.65;color:var(--muted);margin:0}
#work .arial-copy h3{font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.04em;margin:18px 0 23px}
#work .arial-copy>p:not(.arial-category){font-size:15px;line-height:1.85;color:var(--muted);margin:0;max-width:420px}

/* Each row hands attention from its rule to the copy, then the existing SVG sequence. */
#work .arial-area[data-flow] .arial-copy>*{transition:opacity .44s cubic-bezier(.22,1,.36,1),transform .44s cubic-bezier(.22,1,.36,1)}
#work .arial-area[data-flow] .arial-copy h3{transition-delay:75ms}
#work .arial-area[data-flow] .arial-copy>p:last-child{transition-delay:140ms}
#work .arial-area[data-flow=ready] .arial-copy>*{opacity:0;transform:translateY(12px)}
#work .arial-area[data-flow=entered] .arial-copy>*{opacity:1;transform:none}
#work .arial-area[data-flow=entered]::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--fg);transform-origin:left;pointer-events:none;animation:expertise-rule .55s ease-out both}
@keyframes expertise-rule{0%{opacity:0;transform:scaleX(0)}55%{opacity:.65}100%{opacity:0;transform:scaleX(1)}}

/* Static by default. Only the finite, visibility-triggered sequence arms layers. */
#work .arial-example{margin:0;min-width:0}
#work .expertise-illustration{display:block;width:100%;height:auto;overflow:visible;color:var(--fg)}
#work .expertise-illustration path,#work .expertise-illustration rect,#work .expertise-illustration circle,#work .expertise-illustration ellipse{vector-effect:non-scaling-stroke}
#work .expertise-outline,#work .expertise-review-outline{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:.24}
#work .expertise-review-outline{stroke-opacity:.52}
#work .expertise-connections{fill:none;stroke:currentColor;stroke-width:1.2;stroke-opacity:.48}
#work .expertise-symbols{fill:none;stroke:currentColor;stroke-width:1.3;stroke-opacity:.78;stroke-linecap:round;stroke-linejoin:round}
#work .expertise-nodes{fill:currentColor;fill-opacity:.85;stroke:none}
#work .expertise-node-muted{fill-opacity:.52}
#work .expertise-packets{fill:currentColor;fill-opacity:.45;stroke:none}
#work .expertise-grid{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:.075}
#work .expertise-records{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-opacity:.43}
#work .expertise-binary{font:10px/1 Arial,Helvetica,sans-serif;fill:currentColor;fill-opacity:.55;letter-spacing:2px}
#work .expertise-axis{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:.28}
#work .expertise-range{fill:currentColor;fill-opacity:.035;stroke:none}
#work .expertise-scenario-upper{fill:none;stroke:currentColor;stroke-width:1.2;stroke-opacity:.7;stroke-dasharray:4 5}
#work .expertise-scenario-lower{fill:none;stroke:currentColor;stroke-width:1.2;stroke-opacity:.35;stroke-dasharray:2 5}
#work .expertise-scenario-base{fill:none;stroke:currentColor;stroke-width:1.6;stroke-opacity:.9}
#work .expertise-controls{fill:var(--bg);stroke:currentColor;stroke-width:1;stroke-opacity:.45}
#work .expertise-output-bars{fill:none;stroke:currentColor;stroke-width:2;stroke-opacity:.78;stroke-linecap:round}
#work .expertise-return{fill:none;stroke:currentColor;stroke-width:1.1;stroke-opacity:.38;stroke-dasharray:2 5;stroke-linecap:round}
#work .expertise-exception-marker{fill:var(--bg);stroke:currentColor;stroke-width:1.1;stroke-opacity:.65}
#work .expertise-illustration[data-motion="ready"] .expertise-motion-layer,
#work .expertise-illustration[data-motion="playing"] .expertise-motion-layer{opacity:0}
@media(prefers-reduced-motion:reduce){
 #work .arial-area[data-flow=ready] .arial-copy>*{opacity:1;transform:none}
 #work .arial-area[data-flow=entered]::before{display:none}
 #work .expertise-illustration .expertise-motion-layer{opacity:1!important;transform:none!important}
 #work .expertise-motion-packet{display:none}
}
@media(max-width:800px){
 #work .arial-area{grid-template-columns:1fr;gap:28px;padding:32px 0 36px}
 #work .arial-copy h3{font-size:32px;margin:17px 0 21px}
 #work .arial-copy h3 br{display:none}
 #work .arial-copy>p:not(.arial-category){max-width:none;font-size:13px}
 #work .expertise-illustration{max-width:560px;margin:0 auto}
}