/* ===== animated page hero illustrations (xhero) ===== */
.xhero svg{display:block;width:100%;height:auto;border-radius:18px;border:1px solid #2a2220}
.xhero .xhero-svg.t{display:none}
@media (max-width:600px){.xhero .xhero-svg.w{display:none}.xhero .xhero-svg.t{display:block}}
.xhero .xpk{filter:drop-shadow(0 0 6px #D62E21)}
.xhero .xflow{animation:xhf 1.4s linear infinite}
.xhero .xf,.xhero .xtick,.xhero .xflag,.xhero .xok,.xhero .xg{opacity:0}
.xhero .xl{transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.xhero .xring{transform-box:fill-box;transform-origin:center;opacity:0}
.xhero .xok{transform-box:fill-box;transform-origin:center}
.xhero *{animation-play-state:paused!important}
.xhero.drawn *{animation-play-state:running!important}
.xhero .xf.f1{animation:xa 6s infinite;--a:18%}.xhero .xf.f2{animation:xa2 6s infinite}.xhero .xf.f3{animation:xa3 6s infinite}
.xhero .t1{animation:xa4 6s infinite}.xhero .t2{animation:xa5 6s infinite}.xhero .xtick.t3,.xhero .xflag.t3{animation:xfl 6s infinite}
.xhero .l1{animation:xb1 6s infinite}.xhero .l2{animation:xb2 6s infinite}.xhero .l3{animation:xb3 6s infinite}.xhero .l4{animation:xb4 6s infinite}.xhero .l5{animation:xb5 6s infinite}
.xhero .xspark{transform-box:fill-box;transform-origin:center;animation:xsp 2s ease-in-out infinite}
.xhero .xcore{animation:xcg 3s ease-in-out infinite}
.xhero .xok{animation:xok 6s infinite}.xhero .xring{animation:xring 6s ease-out infinite}
.xhero .xdoc{animation:xdoc 6s infinite}
.xhero .g1{animation:xa2 6s infinite}.xhero .g2{animation:xfl 6s infinite}.xhero .g3{animation:xg3 6s infinite}
@keyframes xhf{to{stroke-dashoffset:-24}}
@keyframes xa{0%,20%{opacity:0}24%,94%{opacity:1}100%{opacity:0}}
@keyframes xa2{0%,26%{opacity:0}30%,94%{opacity:1}100%{opacity:0}}
@keyframes xa3{0%,32%{opacity:0}36%,94%{opacity:1}100%{opacity:0}}
@keyframes xa4{0%,36%{opacity:0}40%,94%{opacity:1}100%{opacity:0}}
@keyframes xa5{0%,41%{opacity:0}45%,94%{opacity:1}100%{opacity:0}}
@keyframes xfl{0%,46%{opacity:0}48%{opacity:1}50%{opacity:.35}52%,94%{opacity:1}100%{opacity:0}}
@keyframes xb1{0%,56%{transform:scaleX(0)}59%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes xb2{0%,58%{transform:scaleX(0)}61%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes xb3{0%,60%{transform:scaleX(0)}63%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes xb4{0%,62%{transform:scaleX(0)}65%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes xb5{0%,64%{transform:scaleX(0)}67%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes xsp{50%{transform:scale(.7) rotate(45deg)}}
@keyframes xcg{50%{filter:drop-shadow(0 0 12px rgba(214,46,33,.5))}}
@keyframes xok{0%,74%{opacity:0;transform:scale(.5)}78%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes xring{0%,72%{opacity:0;transform:scale(1)}73%{opacity:.8}88%,100%{opacity:0;transform:scale(1.5)}}
@keyframes xdoc{0%,54%,100%{stroke:#3a2e2a}58%,94%{stroke:#D62E21}}
@keyframes xg3{0%,80%{opacity:0}84%,94%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.xhero *{animation:none!important}.xhero .xf,.xhero .xtick,.xhero .xflag,.xhero .xok,.xhero .xg{opacity:1}.xhero .xl{transform:none}.xhero .xpk{display:none}}
/* ===== blog card thumbnails (hover-only motion) ===== */
svg.bthumb{aspect-ratio:16/9;border:1px solid #2a2220;background:#0d0a09}
.bthumb .bpulse,.bthumb .bspark,.bthumb .bbar,.bthumb .brow{transform-box:fill-box}
.bthumb .bbar{transform-origin:left}
.bthumb .bpulse,.bthumb .bspark{transform-origin:center}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
a:hover .bthumb .bflow,.bthumb:hover .bflow,article:hover .bthumb .bflow,li:hover .bthumb .bflow{animation:bthf 1s linear infinite}
a:hover .bthumb .bpulse,article:hover .bthumb .bpulse,li:hover .bthumb .bpulse,.bthumb:hover .bpulse{animation:bthp 1.6s ease-in-out infinite}
a:hover .bthumb .bspark,article:hover .bthumb .bspark,li:hover .bthumb .bspark,.bthumb:hover .bspark{animation:bths 1.6s ease-in-out infinite}
a:hover .bthumb .bbar,article:hover .bthumb .bbar,li:hover .bthumb .bbar,.bthumb:hover .bbar{animation:bthb 1.2s ease-out}}
@keyframes bthf{to{stroke-dashoffset:-40}}
@keyframes bthp{50%{transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(214,46,33,.55))}}
@keyframes bths{50%{transform:scale(.7) rotate(45deg)}}
@keyframes bthb{from{transform:scaleX(0)}}
/* ===== blog post body (SEO rewrite) ===== */
.post .tldr{border-left:3px solid #D62E21;padding-left:16px}
.post .prose ul,.post .prose ol{color:#c4c4c4;font-size:18px;line-height:1.7;margin:10px 0 6px;padding-left:1.3em}
.post .prose li{margin:6px 0}.post .prose li::marker{color:#D62E21}
.post .prose strong{color:#fff}
.post .prose .faq{margin-top:6px}.post .prose .qa p{margin-top:10px}
.post .prose .pcta{margin-top:28px;color:#fff}
/* ===== hero frame fix (mission v1): one clipped wrapper, sane size, crisp vector ===== */
.pimg.xhero{max-width:900px;width:100%;box-sizing:border-box;border-radius:20px;overflow:hidden;border:1px solid #2a2220;background:#0d0a09;line-height:0;isolation:isolate}
.sec.light .pimg.xhero{max-width:860px;margin-left:auto;margin-right:auto;border-color:#2a2220;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.xhero svg{border:0!important;border-radius:0!important;max-width:100%;text-rendering:geometricPrecision;shape-rendering:geometricPrecision}
.xhero .xcore{animation-name:xcg2!important}
@keyframes xcg2{50%{stroke-width:3.5;stroke:#ff4a3a}}
.xhero .xpk{filter:none}
svg.bthumb{text-rendering:geometricPrecision}

/* mission text spacing */
.sub + figure.xhero{margin-top:clamp(28px,4vw,48px)}
/* ===== fictional team ===== */
.tcard.tm{border-style:solid;border-color:#e2ddd7;text-align:left;transition:transform .3s,box-shadow .3s}
.tcard.tm:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(30,26,25,.35)}
.tmav{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.tmav img{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 3px #fff,0 0 0 4px #e9c9c4}
.tmav .avtag{font:600 9.5px Head;letter-spacing:.06em;text-transform:uppercase;color:#6b5d59;background:#fff;border-radius:999px;padding:2px 7px;white-space:nowrap;box-shadow:0 2px 6px rgba(30,26,25,.1)}
.tcard.tm h3{margin:0 0 4px}
.tcard.tm .tmrole{color:var(--red,#D62E21);font-weight:600;margin:0 0 8px}
.tcard.tm .tmbio{margin:0;font-size:15px;line-height:1.55}
@media (max-width:960px) and (min-width:761px){.tcard.tm{padding:22px}}
/* ===== team carousel ===== */
.tcar{overflow:hidden;margin-top:30px;padding:6px 0 14px;--per:3;--gap:24px}
.tcar .team{display:flex;gap:var(--gap);margin:0;padding:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tcar .team>li{flex:0 0 calc((100% - (var(--per) - 1)*var(--gap))/var(--per));min-width:0;box-sizing:border-box}
@media (max-width:960px){.tcar{--per:2;--gap:18px}}
@media (max-width:600px){.tcar{--per:1}}
@media (prefers-reduced-motion:reduce){.tcar .team{transition:none;flex-wrap:wrap}.tcar .team>li[aria-hidden]{display:none}}
.tmav:not(:has(.avtag)){padding-bottom:24px}
/* ===== team carousel arrows ===== */
.tcwrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:30px}
.tcwrap .tcar{margin-top:0}
.tcnav{width:46px;height:46px;border-radius:50%;border:1px solid #e2ddd7;background:#fff;color:#1e1a19;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px -8px rgba(30,26,25,.35);transition:background .25s,color .25s,border-color .25s,transform .25s}
.tcnav:hover{background:var(--red,#D62E21);border-color:var(--red,#D62E21);color:#fff;transform:scale(1.06)}
.tcnav:focus-visible{outline:2px solid var(--red,#D62E21);outline-offset:3px}
.tcnav:active{transform:scale(.96)}
@media (max-width:600px){.tcwrap{grid-template-columns:1fr 1fr;gap:12px}.tcwrap .tcar{grid-column:1/-1;grid-row:1}.tcprev{grid-row:2;justify-self:end}.tcnext{grid-row:2;justify-self:start}.tcnav{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.tcnav{display:none}.tcwrap{grid-template-columns:1fr}}
/* ===== team LinkedIn ===== */
.tcard.tm{display:flex;flex-direction:column}
.tcard.tm .tmbio{flex:1}
.tmli{align-self:flex-start;margin-top:16px;width:34px;height:34px;border-radius:50%;border:1px solid #e2ddd7;background:#fff;color:#0a66c2;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s,transform .25s}
.tmli:hover{background:var(--red,#D62E21);border-color:var(--red,#D62E21);color:#fff;transform:translateY(-2px)}
.tmli:focus-visible{outline:2px solid var(--red,#D62E21);outline-offset:3px}
.tcard.tm .tmav{align-self:flex-start}
/* contact map card */
.cgrid:has(.mapcard){align-items:start}
.mapcard{justify-self:end;width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mapcard iframe{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);background:#e9e9e9}
.mapcard .link{font-size:.95rem;align-self:flex-start}
@media (max-width:760px){.mapcard{justify-self:stretch;max-width:none}.mapcard iframe{aspect-ratio:auto;height:220px}}
.office-grid{margin-top:14px}
.office-grid>.office-l>h2{margin-top:0}
@media (min-width:761px){.office-grid{grid-template-columns:max-content minmax(0,420px);column-gap:56px;justify-content:start}.office-grid .mapcard{justify-self:start}}