/* Page styles for /contact/, extracted from contact.html (all selectors start with .pg-contact) */
.pg-contact .phero .hx{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.pg-contact .phero .scene{position:relative;width:100%;max-width:440px;justify-self:end}
.pg-contact .phero .scene svg{display:block;width:100%;height:auto;overflow:visible}
.pg-contact .phero .btns{display:flex;flex-wrap:wrap;gap:12px}
.pg-contact .phero .live{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--mono);color:#9fe3c9;margin-top:18px}
.pg-contact .phero .live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(18,145,107,.6);animation:pgblink 1.8s ease-out infinite}
.pg-contact .phero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.pg-contact .ph{display:inline-block;border:1.5px dashed var(--amber);background:#fff7e0;color:#6b4e00;border-radius:8px;padding:1px 8px;font-size:.92em}
.pg-contact .phero .ph{background:rgba(245,165,36,.12);color:#ffd58a}
@keyframes pgblink{0%{box-shadow:0 0 0 0 rgba(18,145,107,.7)}100%{box-shadow:0 0 0 10px rgba(18,145,107,0)}}
@media (max-width:860px){.pg-contact .phero .hx{grid-template-columns:1fr;gap:24px}.pg-contact .phero .scene{justify-self:start;max-width:340px}}

/* chat loop (7.2s), seamless: the reply fades out while the next question fades in (400 ms overlap), the typing
   dots bounce the whole time they show and fade out as the reply fades in, and one connector always hands over to
   the next.  Keyframe 0% sits in a still moment (reply alone), so 0% and 100% are identical; the -1.8s delay makes
   the first frame the question arriving.  The resting state (reduced motion) is question plus reply, no typing indicator. */
.pg-contact .ch-b1{transform-origin:40px 110px;transform-box:view-box}
.pg-contact .ch-b2{transform-origin:370px 230px;transform-box:view-box}
.pg-contact .ch-typ{transform-origin:328px 268px;transform-box:view-box;opacity:0}
.pg-contact .ch-c1,.pg-contact .ch-c2{opacity:0}
.pg-contact .ch-on{animation:chon 1.8s ease-in-out infinite}@keyframes chon{50%{opacity:.35}}
.pg-contact .scene.pz *{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
 .pg-contact .scene svg{animation:chscene .5s ease-out both}
 .pg-contact .ch-b1{animation:chq 7.2s -1.8s infinite}
 .pg-contact .ch-typ{animation:chtyp 7.2s -1.8s infinite}
 .pg-contact .ch-b2{animation:chrep 7.2s -1.8s infinite}
 .pg-contact .ch-c1{animation:chc1 7.2s -1.8s ease-in-out infinite}
 .pg-contact .ch-c2{animation:chc2 7.2s -1.8s ease-in-out infinite}
 .pg-contact .ch-c3{animation:chc3 7.2s -1.8s ease-in-out infinite}
 .pg-contact .ch-typ circle{animation:chdot .9s ease-in-out infinite}.pg-contact .ch-typ .t2{animation-delay:.15s}.pg-contact .ch-typ .t3{animation-delay:.3s}
}
@keyframes chscene{from{opacity:0}to{opacity:1}}
@keyframes chq{0%,19.44%{transform:translateY(0) scale(.9);opacity:0;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}27.78%,87.5%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:ease-in-out}95.83%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(.9);opacity:0}}
@keyframes chrep{0%,11.11%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:ease-in-out}25%{transform:translateY(-8px) scale(.98);opacity:0}55.56%{transform:translateY(0) scale(.88);opacity:0;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}62.5%,100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes chtyp{0%,31.94%{transform:scale(.8);opacity:0;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}37.5%,55.56%{transform:scale(1);opacity:1;animation-timing-function:ease-in-out}61.81%,100%{transform:scale(.8);opacity:0}}
@keyframes chc1{0%,20.83%{opacity:0}26.39%,34.72%{opacity:1}40.28%,100%{opacity:0}}
@keyframes chc2{0%,34.72%{opacity:0}40.28%,56.25%{opacity:1}61.81%,100%{opacity:0}}
@keyframes chc3{0%,13.89%{opacity:1}23.61%,56.25%{opacity:0}61.81%,100%{opacity:1}}
@keyframes chdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.pg-contact .paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start}
.pg-contact .lc{display:grid;gap:24px}
.pg-contact .card{position:relative;overflow:hidden;border-radius:22px;padding:28px}
.pg-contact .card .tag{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pg-contact .card h2{font-size:clamp(24px,2.6vw,30px);margin:10px 0 8px}
.pg-contact .card p.d{margin:0 0 18px;font-size:16.5px}
.pg-contact .bk{background:radial-gradient(120% 90% at 0% 0%,#1f3448 0%,rgba(31,52,72,0) 55%),var(--g-dark);color:#dfe6ee}
.pg-contact .bk::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);background-size:20px 20px}
.pg-contact .bk>*{position:relative}
.pg-contact .bk .tag{color:var(--blue-hi)}.pg-contact .bk h2{color:#fff}.pg-contact .bk p.d{color:#a9b4c0}
.pg-contact .bk .tag i,.pg-contact .fc .tag i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pgblink 1.8s ease-out infinite}
.pg-contact .steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;position:relative}
.pg-contact .steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--blue-hi),var(--ok));opacity:.5}
.pg-contact .steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.pg-contact .steps b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--g-dark2);border:2px solid var(--blue-hi);font:800 14px var(--mono);color:#fff;animation:cstep 4.8s ease-in-out infinite}
.pg-contact .steps li:nth-child(2) b{animation-delay:1.2s}.pg-contact .steps li:nth-child(3) b{animation-delay:2.4s}.pg-contact .steps li:nth-child(4) b{animation-delay:3.6s}
@keyframes cstep{0%,20%,100%{box-shadow:0 0 0 0 rgba(63,169,245,0);background:var(--g-dark2)}8%{box-shadow:0 0 0 7px rgba(63,169,245,.25);background:#026399}}
.pg-contact .steps strong{display:block;color:#fff;font:800 16px var(--display)}
.pg-contact .steps span{display:block;font-size:14px;color:#a9b4c0}
.pg-contact .bk .pbtn{width:100%}
.pg-contact .call{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.pg-contact .call:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(4,36,58,.45)}
.pg-contact .call .ico{position:relative;width:64px;height:64px;border-radius:50%;background:#e6f1f8;display:grid;place-items:center}
.pg-contact .call .ico::before,.pg-contact .call .ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue-hi);animation:cring 2.4s ease-out infinite}
.pg-contact .call .ico::after{animation-delay:1.2s}
@keyframes cring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.pg-contact .call svg{width:30px;height:30px;animation:cwob 2.4s ease-in-out infinite}
@keyframes cwob{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}72%{transform:rotate(12deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(4deg)}}
.pg-contact .call .tag{color:var(--blue)}
.pg-contact .call .num{display:block;font:800 clamp(26px,3vw,32px) var(--display);color:var(--blue-ink);letter-spacing:-.01em;margin:4px 0 2px}
.pg-contact .call .s{font-size:14.5px;color:var(--sub)}
.pg-contact .fc{background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(4,36,58,.35)}
.pg-contact .fc .tag{color:var(--blue)}
.pg-contact .fc p.d{color:var(--sub)}
.pg-contact .prog{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.pg-contact .prog .tr{flex:1;height:6px;border-radius:3px;background:#e7ebef;overflow:hidden}
.pg-contact .prog .tr b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-hi),var(--ok));border-radius:3px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.pg-contact .prog span{font:700 12px var(--mono);color:var(--sub);white-space:nowrap}
.pg-contact .fld{margin-bottom:14px}
.pg-contact .fld label,.pg-contact legend{display:block;font-size:14.5px;font-weight:700;margin-bottom:6px;padding:0}
.pg-contact .opt{font-weight:500;color:var(--sub);font-size:13px}
.pg-contact .iw{position:relative}
.pg-contact input,.pg-contact textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#f7f9fb;border:1.5px solid #cfd6de;border-radius:12px;padding:12px 42px 12px 14px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.pg-contact textarea{min-height:110px;resize:vertical;line-height:1.5}
.pg-contact input:focus,.pg-contact textarea:focus{border-color:var(--blue-hi);background:#fff;box-shadow:0 0 0 4px rgba(63,169,245,.2)}
.pg-contact [aria-invalid="true"]{border-color:var(--alert)!important;box-shadow:0 0 0 4px rgba(255,107,74,.14)!important;background:#fff8f6!important}
.pg-contact .iw .okm{position:absolute;right:12px;top:13px;width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pg-contact .iw .okm svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg-contact .iw.good .okm{transform:scale(1)}
.pg-contact .err{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease,opacity .3s;opacity:0}
.pg-contact .err>span{overflow:hidden;display:flex;gap:6px;align-items:center;font-size:13.5px;font-weight:600;color:#c2410c}
.pg-contact .err svg{width:15px;height:15px;flex:none;color:var(--alert);margin-top:6px}
.pg-contact .err>span>em{font-style:normal;margin-top:6px}
.pg-contact .err.show{grid-template-rows:1fr;opacity:1}
.pg-contact .hint{font-size:13.5px;color:var(--blue);margin-top:6px;min-height:0}
.pg-contact .cnt{font:600 12px var(--mono);color:var(--sub);text-align:right;margin-top:4px}
.pg-contact .shake{animation:cshake .42s ease}
@keyframes cshake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.pg-contact fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
.pg-contact .chips{display:flex;flex-wrap:wrap;gap:8px;border-radius:12px}
.pg-contact .cm{font:inherit;font-size:14.5px;font-weight:700;color:#29344f;background:#f7f9fb;border:1.5px solid #cfd6de;border-radius:12px;padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .25s,border-color .25s,color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.pg-contact .cm svg.i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pg-contact .cm[aria-pressed="true"]{background:#e6f1f8;border-color:var(--blue);color:var(--blue-ink);transform:translateY(-2px)}
.pg-contact .cm.pop{animation:cpop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes cpop{40%{transform:scale(1.1)}}
.pg-contact .chips.bad .cm{border-color:var(--alert)}
.pg-contact .phw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.pg-contact .phw>div{overflow:hidden}
.pg-contact .phw.open{grid-template-rows:1fr}
.pg-contact .phw .fld{padding-top:4px}
.pg-contact .send{width:100%;margin-top:6px;font:800 16px var(--display);border:0;border-radius:12px;padding:14px 18px;cursor:pointer;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .25s,transform .2s}
.pg-contact .send:active{transform:scale(.98)}
.pg-contact .send .sp{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;display:none;animation:cspin .7s linear infinite}
.pg-contact .send.busy .sp{display:inline-block}
@keyframes cspin{to{transform:rotate(360deg)}}
.pg-contact .alert{font-size:14px;font-weight:700;color:#c2410c;margin:10px 0 0;min-height:1px}
.pg-contact .demo{font-size:12.5px;color:var(--sub);margin-top:10px}
.pg-contact .ok{text-align:center;padding:10px 0 4px}
.pg-contact .ok[hidden]{display:none}
.pg-contact .ok .sh{width:110px;height:110px;margin:0 auto 12px}
.pg-contact .ok .sh svg{width:110px;height:110px;overflow:visible}
.pg-contact .ok .c1{fill:rgba(18,145,107,.12);stroke:var(--ok);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0}
.pg-contact .ok .c2{fill:none;stroke:var(--ok);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pg-contact .ok.play .c1{animation:cdraw .7s ease-out both}
.pg-contact .ok.play .c2{animation:cdraw .5s ease-out .55s both}
.pg-contact .ok.play .sh{animation:cpopin .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cpopin{from{transform:scale(.5)}to{transform:scale(1)}}
.pg-contact .ok h3{font-size:26px;outline:none;margin-bottom:6px}
.pg-contact .ok p{color:var(--sub);margin:0 auto 14px;max-width:30em}
.pg-contact .ok ul{list-style:none;padding:0;margin:0 auto 18px;max-width:340px;text-align:left;display:grid;gap:6px}
.pg-contact .ok li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;border-bottom:1px dashed var(--line);padding:6px 0}
.pg-contact .ok li span{color:var(--sub)}
.pg-contact .ok .acts{display:flex;flex-direction:column;gap:10px;align-items:center}
.pg-contact .ok .again{font:700 14px var(--body);color:var(--blue);background:none;border:0;cursor:pointer;padding:8px 10px;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.pg-contact .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.pg-contact .paths{grid-template-columns:1fr}.pg-contact .card{padding:22px}}