/* Page styles for /about/, extracted from about.html (all selectors start with .pg-about) */
.pg-about .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-about .acts{display:flex;flex-wrap:wrap;gap:12px}
.pg-about .ph{border:2px dashed var(--amber);background:#fff7e0;color:#6b4e00;border-radius:12px;padding:10px 12px;font-size:14px}
.pg-about .ph b{display:block;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8a6200;margin-bottom:2px}
/* hero */
.pg-about .phero .pw{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
.pg-about .hsc{width:100%;height:auto;display:block;max-width:520px;justify-self:center}
.pg-about .hsc text{font-family:var(--body)}
.pg-about .hsc .orbit{transform-box:view-box;transform-origin:260px 200px;animation:paspin 40s linear infinite}
.pg-about .hsc .orbit2{animation-duration:26s;animation-direction:reverse}
.pg-about .hsc .flow{stroke-dasharray:2 9;animation:paflow 1.3s linear infinite}
.pg-about .hsc .sat{transform-box:fill-box;transform-origin:center;animation:pabob 5s ease-in-out infinite}
.pg-about .hsc .ok{transform-box:fill-box;transform-origin:center;animation:paok 7.5s ease infinite;opacity:0}
.pg-about .hsc .hub{transform-box:fill-box;transform-origin:center;animation:pabreathe 4s ease-in-out infinite}
.pg-about .hsc .cur{animation:pablink 1s steps(1) infinite}
.pg-about .hsc .blk{animation:pablink2 1.6s ease-in-out infinite}
@keyframes paspin{to{transform:rotate(360deg)}}
@keyframes paflow{to{stroke-dashoffset:-11}}
@keyframes pabob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes paok{0%,8%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.2)}15%,40%{opacity:1;transform:scale(1)}48%,100%{opacity:0;transform:scale(1)}}
@keyframes pabreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes pablink{50%{opacity:0}}
@keyframes pablink2{0%,100%{opacity:1}50%{opacity:.25}}
/* timeline */
.pg-about .tlw{position:relative;margin-top:28px;--cyc:7.5s}
.pg-about .tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pg-about .tlw .rail{position:absolute;left:10%;right:10%;top:31px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue-hi),var(--blue));opacity:.35}
.pg-about .tlw .runner{position:absolute;top:26px;left:10%;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--blue-hi);box-shadow:0 0 12px 2px rgba(63,169,245,.7);animation:parunH var(--cyc) linear infinite;margin-left:-6px}
@keyframes parunH{from{left:10%}to{left:90%}}
.pg-about .tl li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.pg-about .tl-node{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;cursor:pointer;padding:0;animation:paping var(--cyc) ease-out infinite;animation-delay:var(--pd)}
.pg-about .tl-node svg{width:30px;height:30px}
.pg-about .tl-node .st{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:padraw var(--cyc) ease infinite;animation-delay:var(--pd)}
.pg-about .tl-node[aria-pressed="true"]{border-color:var(--blue);background:#e6f1f8}
.pg-about .tl li.now .tl-node{background:var(--blue);border-color:var(--blue)}
.pg-about .tl li.now .tl-node .st{stroke:#fff}
@keyframes paping{0%{box-shadow:0 0 0 0 rgba(63,169,245,.7);transform:scale(1.08)}12%{box-shadow:0 0 0 16px rgba(63,169,245,0);transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(63,169,245,0)}}
@keyframes padraw{0%{stroke-dashoffset:1}14%,100%{stroke-dashoffset:0}}
.pg-about .tl .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;width:100%;display:grid;gap:8px;text-align:left;transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s}
.pg-about .tl li.lit .card{transform:translateY(-6px);border-color:var(--blue-hi);box-shadow:0 16px 30px -20px rgba(2,99,153,.6)}
.pg-about .tl .yr{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pg-about .tl h3{font-size:17px;margin:0}
.pg-about .tl p{margin:0;font-size:15px;color:var(--sub)}
/* values flip cards */
.pg-about .vg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-about .flip{font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer;perspective:1000px;border-radius:18px;display:block;width:100%}
.pg-about .flip .in{display:grid;transition:transform .7s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d;min-height:250px}
.pg-about .flip[aria-pressed="true"] .in{transform:rotateY(180deg)}
.pg-about .flip .fc{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px}
.pg-about .flip .fr{background:var(--card);border:1px solid var(--line)}
.pg-about .flip .bk{background:var(--g-dark);color:#fff;transform:rotateY(180deg);border:1px solid var(--g-dark)}
.pg-about .flip h3{font-size:22px;margin:0}
.pg-about .flip p{margin:0;color:var(--sub);font-size:15px}
.pg-about .flip .bk p{color:#c9d4e5;font-size:16px}
.pg-about .flip .bk h3{color:var(--blue-hi);font-size:18px}
.pg-about .flip .hint{margin-top:auto;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:6px}
.pg-about .flip .bk .hint{color:var(--blue-hi)}
.pg-about .flip .hint svg{width:14px;height:14px;animation:paspin 3s linear infinite}
.pg-about .vi{width:52px;height:52px;border-radius:14px;background:#e6f1f8;display:grid;place-items:center}
.pg-about .vi svg{width:30px;height:30px;overflow:visible}
.pg-about .vi .st{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-about .vi .re{stroke-dasharray:1;animation:paredraw 3.2s ease-in-out infinite}
@keyframes paredraw{0%,12%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.pg-about .vi .bob{transform-box:fill-box;transform-origin:center;animation:pabob 2.6s ease-in-out infinite}
.pg-about .vi .blk{animation:pablink2 1.6s ease-in-out infinite}
.pg-about .vg .flip:nth-child(1) .in{animation:papeek 9s ease-in-out 2s infinite}
.pg-about .vg .flip[aria-pressed="true"]:nth-child(1) .in{animation:none}
@keyframes papeek{0%,90%,100%{transform:none}94%{transform:rotateY(-14deg)}}
/* how we work strip */
.pg-about .hww{position:relative}
.pg-about .hw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-about .hww::before{content:"";position:absolute;z-index:0;left:12%;right:12%;top:37px;border-top:3px dotted #9fcff5}
.pg-about .hww .fl{position:absolute;z-index:2;left:12%;top:32px;width:12px;height:12px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 10px 2px rgba(63,169,245,.6);animation:pahw 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pahw{from{left:12%}to{left:88%}}
.pg-about .hw li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:left;transition:transform .3s}
.pg-about .hw li:hover{transform:translateY(-4px)}
.pg-about .hw .n{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:700 14px var(--mono);margin-bottom:12px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg)}
.pg-about .hw h3{font-size:18px;margin:0 0 6px}
.pg-about .hw p{margin:0;color:var(--sub);font-size:15px}
.pg-about .hwcta{margin-top:20px}
/* testimonials */
.pg-about .tg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pg-about .tq{margin:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),border-color .4s,box-shadow .4s}
.pg-about .tq.lit{transform:translateY(-6px);border-color:var(--blue-hi);box-shadow:0 20px 36px -24px rgba(2,99,153,.7)}
.pg-about .tq svg.qm{width:34px;height:26px}
.pg-about .tq .qm path{fill:none;stroke:var(--blue-hi);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.pg-about .tq.lit .qm path{animation:paqdraw .9s ease both}
@keyframes paqdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pg-about .tq blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.pg-about .tq figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font:700 16px var(--display)}
.pg-about .tq .mono{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-hi));color:#fff;display:grid;place-items:center;font:800 16px var(--display)}
.pg-about .tq figcaption small{display:block;font:500 13px var(--body);color:var(--sub)}
/* bio */
.pg-about .bio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;border:2px dashed var(--amber);background:#fff7e0;border-radius:20px;padding:26px;color:#6b4e00}
.pg-about .bio h2{color:#6b4e00;margin:0 0 8px}
.pg-about .bio p{margin:0 0 8px}
.pg-about .bio ul{margin:0;padding-left:20px}
.pg-about .bio .badge{width:88px;height:88px;border-radius:22px;background:#ffeebf;display:grid;place-items:center}
.pg-about .bio .badge svg{width:48px;height:48px}
.pg-about .bio .badge .pen{transform-box:fill-box;transform-origin:bottom left;animation:papen 2.4s ease-in-out infinite}
@keyframes papen{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg) translateX(3px)}}
@media (max-width:980px){
 .pg-about .phero .pw{grid-template-columns:minmax(0,1fr)}
 .pg-about .vg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-about .hw{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-about .hww::before,.pg-about .hww .fl{display:none}
}
@media (max-width:760px){
 .pg-about .tl{grid-template-columns:minmax(0,1fr);gap:14px}
 .pg-about .tlw .rail{left:31px;right:auto;top:32px;bottom:32px;width:3px;height:auto;background:linear-gradient(var(--blue-hi),var(--blue))}
 .pg-about .tlw .runner{left:32px;top:32px;margin:-6px 0 0 -6px;animation-name:parunV}
 @keyframes parunV{from{top:32px}to{top:calc(100% - 32px)}}
 .pg-about .tl li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
 .pg-about .tl-node{flex:none}
 .pg-about .tl li.lit .card{transform:translateX(4px)}
 .pg-about .tg{grid-template-columns:minmax(0,1fr)}
 .pg-about .bio{grid-template-columns:minmax(0,1fr);padding:20px}
}
@media (max-width:560px){
 .pg-about .vg,.pg-about .hw{grid-template-columns:minmax(0,1fr)}
 .pg-about .flip .in{min-height:210px}
 .pg-about .pcta .acts .pbtn{width:100%}
}
@media (prefers-reduced-motion:reduce){.pg-about .hsc .ok{opacity:1}.pg-about .tlw .runner,.pg-about .hww .fl{display:none}}