/* Animated line illustrations for 01/02/03 cards (Crew, Bespoke). */
.card-ill{position:relative;height:150px;margin:-4px 0 26px;display:grid;place-items:center;border:1px solid rgba(185,161,106,.18);background:radial-gradient(90% 120% at 50% 0%,#1a2321 0%,#131819 70%);overflow:hidden}
.card-ill svg{width:100%;max-width:300px;height:100%;overflow:visible}
.card-ill *{vector-effect:non-scaling-stroke}
.ci-line{fill:none;stroke:#5c6567;stroke-width:1.3}
.ci-gold{fill:none;stroke:#d9bd80;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ci-dash{fill:none;stroke:#5c6567;stroke-width:1.3;stroke-dasharray:3 5}
.ci-fill{fill:#d9bd80}.ci-mint{fill:#76c4a0}.ci-dim{fill:#2a3437}
.ci-txt{font:500 9px 'Hanken Grotesk',sans-serif;letter-spacing:.14em;fill:#8e9a9d;text-transform:uppercase}
/* Crew 01: direct route */
.ci-route{stroke-dasharray:240;stroke-dashoffset:240;animation:ciDraw 4.5s ease-in-out infinite}
@keyframes ciDraw{0%,8%{stroke-dashoffset:240}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ci-walker{offset-path:path('M50 108 C 110 108, 120 40, 180 40 S 250 60, 252 44');animation:ciWalk 4.5s ease-in-out infinite}
@keyframes ciWalk{0%,8%{offset-distance:0%;opacity:0}12%{opacity:1}45%{offset-distance:100%}85%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
.ci-pin-end{animation:ciPop 4.5s ease-in-out infinite;transform-origin:252px 44px}
@keyframes ciPop{0%,42%{transform:scale(1)}50%{transform:scale(1.25)}58%,100%{transform:scale(1)}}
/* Crew 02: one accepts */
.ci-req{animation:ciReq 4s ease-in-out infinite}
@keyframes ciReq{0%,10%{transform:translate(0,0);opacity:0}20%{opacity:1}45%,80%{transform:translate(-62px,0);opacity:1}95%,100%{transform:translate(-62px,0);opacity:0}}
.ci-acc{animation:ciAcc 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ciAcc{0%,44%{opacity:0;transform:scale(.4)}54%,82%{opacity:1;transform:scale(1)}95%,100%{opacity:0}}
.ci-ring{animation:ciRing 4s ease-in-out infinite}
@keyframes ciRing{0%,44%{stroke:#5c6567}54%,82%{stroke:#76c4a0}95%,100%{stroke:#5c6567}}
.ci-other{animation:ciDim 4s ease-in-out infinite}
@keyframes ciDim{0%,44%{opacity:1}54%,82%{opacity:.35}95%,100%{opacity:1}}
/* Crew 03: shift timeline and escalation */
.ci-now{animation:ciNow 5s linear infinite}
@keyframes ciNow{from{transform:translateX(0)}to{transform:translateX(200px)}}
.ci-esc{animation:ciEsc 5s ease-in-out infinite}
@keyframes ciEsc{0%,30%{transform:translate(0,0);fill:#d9bd80}45%{fill:#e0a24f}60%,85%{transform:translate(0,30px);fill:#76c4a0}100%{transform:translate(0,30px);opacity:0}}
/* Bespoke 01: sketch drawing itself */
.ci-sketch{stroke-dasharray:420;stroke-dashoffset:420;animation:ciSketch 5s ease-in-out infinite}
.ci-sketch.s2{animation-delay:.35s}
@keyframes ciSketch{0%,6%{stroke-dashoffset:420}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ci-pencil{offset-path:path('M108 52 H192 Q206 52 206 66 V98 Q206 112 192 112 H108 Q94 112 94 98 V66 Q94 52 108 52');animation:ciPencil 5s ease-in-out infinite}
@keyframes ciPencil{0%,6%{offset-distance:0%;opacity:0}10%{opacity:1}55%{offset-distance:100%;opacity:1}62%,100%{offset-distance:100%;opacity:0}}
/* Bespoke 02: form morph and materials */
.ci-morph{animation:ciMorph 6s ease-in-out infinite}
@keyframes ciMorph{0%,20%{d:path('M120 50 H180 Q200 50 200 70 V100 Q200 120 180 120 H120 Q100 120 100 100 V70 Q100 50 120 50 Z')}35%,55%{d:path('M150 48 H150 Q202 48 202 85 V85 Q202 122 150 122 H150 Q98 122 98 85 V85 Q98 48 150 48 Z')}70%,90%{d:path('M130 54 H170 Q206 54 206 80 V90 Q206 116 170 116 H130 Q94 116 94 90 V80 Q94 54 130 54 Z')}100%{d:path('M120 50 H180 Q200 50 200 70 V100 Q200 120 180 120 H120 Q100 120 100 100 V70 Q100 50 120 50 Z')}}
.ci-sw{animation:ciSw 6s ease-in-out infinite;opacity:.35}
.ci-sw.w2{animation-delay:2s}.ci-sw.w3{animation-delay:4s}
@keyframes ciSw{0%,30%{opacity:1}36%,100%{opacity:.35}}
/* Bespoke 03: the whole system */
.ci-flow{stroke-dasharray:3 5;animation:ciFlow 1.4s linear infinite}
@keyframes ciFlow{to{stroke-dashoffset:-16}}
.ci-core-p{transform-box:fill-box;transform-origin:center;animation:ciPulse 2.6s ease-out infinite}
@keyframes ciPulse{from{transform:scale(1);opacity:.8}to{transform:scale(2);opacity:0}}
@media(max-width:760px){.benefit-cards .card-ill{grid-column:1/-1;grid-row:1;margin:0 0 18px}.benefit-cards article:has(.card-ill) .benefit-number{grid-row:2/4}.benefit-cards article:has(.card-ill) h2{grid-row:2}.benefit-cards article:has(.card-ill) p{grid-row:3}}
@media(prefers-reduced-motion:reduce){.card-ill *{animation:none!important}.ci-route,.ci-sketch{stroke-dashoffset:0}}