/* our-story.html - page styles that followed the mobile layer in the original (generated). Loaded after responsive.css. */
/* #ill-css */
  /* motion inside the illustrations (all CSS, stops for reduced motion) */
  @keyframes eebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .ill .bob{animation:eebob 3.4s ease-in-out infinite}
  .ill .b2{animation-delay:-.9s}.ill .b3{animation-delay:-1.8s}.ill .b4{animation-delay:-2.6s}
  @keyframes eepin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
  .ill .pin{animation:eepin 2.4s ease-in-out infinite}
  .ill .pin.p2{animation-delay:-.6s}.ill .pin.p3{animation-delay:-1.2s}.ill .pin.p4{animation-delay:-1.8s}.ill .pin.p5{animation-delay:-.3s}.ill .pin.p6{animation-delay:-.9s}.ill .pin.p7{animation-delay:-1.5s}.ill .pin.p8{animation-delay:-2.1s}.ill .pin.p9{animation-delay:-.45s}
  @keyframes eehop{0%,62%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-12px) rotate(-5deg)}84%{transform:translateY(0) rotate(2deg)}}
  .ill .hop{transform-box:fill-box;transform-origin:50% 100%;animation:eehop 3.6s ease-in-out infinite}
  .ill .hop.h2{animation-delay:-1.8s}
  @keyframes eeswing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  .ill .swing{transform-box:fill-box;transform-origin:50% 0%;animation:eeswing 3s ease-in-out infinite}
  @keyframes eeding{0%,70%,100%{opacity:0;transform:scale(.7)}76%,92%{opacity:1;transform:scale(1)}}
  .ill .ding{transform-box:fill-box;transform-origin:0% 100%;animation:eeding 3.2s ease-out infinite}
  .ill .ding.d2{animation-delay:-1.1s}.ill .ding.d3{animation-delay:-2.2s}
  @keyframes eespin{to{transform:rotate(360deg)}}
  .ill .spin{transform-origin:160px 104px;animation:eespin 26s linear infinite}
  .ill .spin .tr{transform-box:fill-box;transform-origin:50% 50%;animation:eespin 26s linear infinite reverse}
  @keyframes eewave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}85%{transform:rotate(-10deg)}}
  .ill .wave{transform-box:fill-box;transform-origin:0% 92%;animation:eewave 2.8s ease-in-out infinite}
  @keyframes eesway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .ill .sway{transform-box:fill-box;transform-origin:50% 0%;animation:eesway 3.6s ease-in-out infinite}
  .ill .sway.s2{animation-delay:-1.2s}.ill .sway.s3{animation-delay:-2.4s}
  @keyframes eeflick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15,.9) rotate(4deg)}}
  .ill .flick{transform-box:fill-box;transform-origin:50% 100%;animation:eeflick 1.1s ease-in-out infinite}
  @keyframes eeroll{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  .ill .roll{animation:eeroll 4s ease-in-out infinite}
  @keyframes eepop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.12)}80%{transform:scale(.96)}}
  .ill .pop{transform-box:fill-box;transform-origin:50% 50%;animation:eepop 3.6s ease-in-out infinite}
  @keyframes eetwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
  .ill .tw{transform-box:fill-box;transform-origin:50% 50%;animation:eetwinkle 2.2s ease-in-out infinite}
  .ill .tw.t2{animation-delay:-.7s}.ill .tw.t3{animation-delay:-1.4s}
  @keyframes eerise{0%{opacity:0;transform:translateY(10px)}30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
  .ill .rain{animation:eerise 4s ease-in-out infinite}
  @keyframes eedrive{0%{transform:translateX(-140px)}45%,60%{transform:translateX(0)}100%{transform:translateX(150px)}}
  .ill .drive{animation:eedrive 9s ease-in-out infinite}
  @keyframes eebusdrive{0%{transform:translateX(-200px)}100%{transform:translateX(200px)}}
  .ill .busdrive{animation:eebusdrive 12s linear infinite}
  @keyframes eegrow{to{stroke-dashoffset:0}}
  .ill .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:eegrow 2.4s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes eenotif{0%,8%{opacity:0;transform:translateY(10px) scale(.92)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
  .ill .notif{transform-box:fill-box;transform-origin:50% 50%;animation:eenotif 6s ease-in-out infinite}
  @keyframes eebell{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(5deg)}}
  .ill .bell{transform-box:fill-box;transform-origin:50% 0%;animation:eebell 4s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ill *{animation:none !important}}

  /* 17 Sep 2026: illustrated story - founder quote + the two split images */
  .storyq{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center;max-width:1080px;margin:0 auto 56px}
  .storyq .art{border-radius:24px;overflow:hidden;aspect-ratio:320/230;box-shadow:0 24px 60px -30px rgba(24,21,18,.3)}
  .storyq .art svg{display:block;width:100%;height:100%}
  .splitimg .art{border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 60px -30px rgba(24,21,18,.4)}
  .splitimg .art svg{display:block;width:100%;height:100%}
  @media(max-width:980px){.storyq{grid-template-columns:1fr;gap:28px}.storyq .art{order:-1;max-width:420px;margin:0 auto}}