
/* PAGE-SPECIFIC: About
   1) Hero: a timeline draws from 2015 to TODAY while a steel frame grows taller above it, bay by bay
      (assembles once, then holds).
   2) Our story (three columns) and Our plants cards (same cards as the Home page).
   3) How we work frame: Tekla model, 7-axis CNC, numbered piece and bolted frame drawn in sequence (12s loop).
   Base styles show the finished state, so the shared reduced-motion rule leaves complete drawings. */
.plants{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.plant{border:1px solid var(--line-light);background:var(--paper);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.plant h3{margin-bottom:var(--space-2)}
.pl-art{width:100%;height:auto;margin-bottom:var(--space-4)}
.pl-art path,.pl-art circle{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linejoin:round}
.pl-art .pl-spark{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.pl-art .pl-tag{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.plant-list{list-style:none;margin:0;padding:0;font-size:var(--fs-body-sm)}
.plant-list li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--line-light)}
.plant-list li::before{content:"";width:8px;height:8px;background:var(--black);flex:none}
@media (max-width:960px){.plants{grid-template-columns:1fr}}
.ab-hero{width:100%;height:auto;max-height:470px;margin-left:auto}
.ab-hero line,.ab-hero path{fill:none;stroke:var(--art-on-light);stroke-width:1.2;stroke-linecap:round}
.ab-hero .thin{stroke-width:.6}
.ab-hero .ab-tick{stroke:var(--ink-muted);stroke-width:.8}
.ab-hero .ab-plate{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.ab-hero .ab-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.ab-hero .ab-tag line{stroke:var(--black);stroke-width:.6}
.ab-hero text{font-family:var(--font-mono);font-size:8.4px;font-weight:600;letter-spacing:.06em;fill:var(--black)}
.ab-hero .ab-cap{font-size:7.4px;font-weight:500;fill:var(--ink-muted)}
.ab-line{stroke-dasharray:1;animation:ab-draw 1.4s var(--ease-draw) .1s both}
.ab-tick,.ab-cap{animation:hf-fade .3s linear var(--d) both}
.ab-col{transform-box:fill-box;transform-origin:50% 100%;animation:hf-rise .55s var(--ease-out) var(--d) both}
.ab-beam{animation:hf-slide .5s var(--ease-out) var(--d) both}
.ab-tag{transform-box:fill-box;transform-origin:center;animation:ab-stamp .45s var(--ease-out) var(--d) both}
@keyframes ab-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ab-stamp{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);border-top:1px solid var(--line-light);padding-top:var(--space-6)}
.story h3{margin:var(--space-3) 0 var(--space-4)}
.story p{color:var(--ink-muted)}
.story-note{margin-top:var(--space-7);color:var(--ink-muted)}
@media (max-width:960px){.story{grid-template-columns:1fr}}
.ab-pipe{width:100%;height:auto}
.ab-pipe .ap-box{fill:var(--black-raised);stroke:var(--line-dark-strong);stroke-width:1}
.ab-pipe path{fill:none;stroke:var(--art-on-dark);stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:1}
.ab-pipe .ap-arrow{stroke:var(--text-on-dark-muted);stroke-dasharray:none}
.ab-pipe text{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;fill:var(--off-white)}
.ab-pipe .art-label{font-weight:400;fill:var(--text-on-dark-muted)}
.ab-pipe .ap-spark{fill:var(--yellow);opacity:0;animation:ap-spark 12s linear infinite}
.ab-pipe .ap-tag{fill:var(--yellow);transform-box:fill-box;transform-origin:center;animation:ap-tag 12s var(--ease-out) infinite}
.ap-c.c0 path{animation:ap-d0 12s var(--ease-draw) infinite}.ap-arrow.a0{animation:ap-a0 12s linear infinite}.ap-c.c1 path{animation:ap-d1 12s var(--ease-draw) infinite}.ap-arrow.a1{animation:ap-a1 12s linear infinite}.ap-c.c2 path{animation:ap-d2 12s var(--ease-draw) infinite}.ap-arrow.a2{animation:ap-a2 12s linear infinite}.ap-c.c3 path{animation:ap-d3 12s var(--ease-draw) infinite}@keyframes ap-d0{0%,4%{stroke-dashoffset:1;opacity:1}16%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ap-a0{0%,16%{opacity:0}18%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ap-d1{0%,20%{stroke-dashoffset:1;opacity:1}32%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ap-a1{0%,32%{opacity:0}34%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ap-d2{0%,36%{stroke-dashoffset:1;opacity:1}48%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ap-a2{0%,48%{opacity:0}50%,92%{opacity:1}98%,100%{opacity:0}}@keyframes ap-d3{0%,52%{stroke-dashoffset:1;opacity:1}64%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes ap-spark{0%,22%{opacity:0}24%,34%{opacity:1}36%,100%{opacity:0}}@keyframes ap-tag{0%,46%{opacity:0;transform:scale(1.6)}50%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
