/* Shared service-page template (Managed SOC format). Used by every page in /services. */
html body .svp2 .soc-split{--w:min(430px,100%);display:grid;grid-template-columns:minmax(0,1fr) var(--w);gap:clamp(28px,6vw,96px);align-items:center}
html body .svp2 .soc-split.soc-rev{grid-template-columns:var(--w) minmax(0,1fr)}
html body .svp2 .soc-split h2{max-width:20ch}
html body .svp2 .soc-split .svfig{margin:0;width:100%;position:relative;overflow:hidden;border-radius:20px;background:#050814;line-height:normal;box-shadow:0 26px 60px -30px rgba(54,215,255,.45)}
html body .svp2 .svfig img,html body .svp2 .svfig video{display:block;width:100%;height:auto}
html body .svp2 .svfig figcaption{padding:12px 18px;font-size:13px;line-height:1.5;color:var(--tx2);border-top:1px solid rgba(143,176,255,.18);background:#0a0e28}
html body .svp2 .svvid video{aspect-ratio:16/9;object-fit:cover;background:#000;pointer-events:none;user-select:none}
html body .svp2 .svvid{--w:min(520px,100%)}
html body .svp2 .soc-split:has(.svvid){--w:min(520px,100%)}
html body .svp2 .soc-one{columns:1;margin-top:8px}
/* animation: slide in from its own side, then slow drift + glow */
@keyframes socInR{from{opacity:0;transform:translateX(70px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes socInL{from{opacity:0;transform:translateX(-70px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes socDrift{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes socGlow{0%,100%{box-shadow:0 26px 60px -30px rgba(54,215,255,.35)}50%{box-shadow:0 30px 80px -26px rgba(91,124,255,.7)}}
html.sv-js body .svp2 .sv-band.sv-in .soc-split .soc-anim{animation:socInR 1.1s cubic-bezier(.2,.7,.2,1) both,socGlow 6s ease-in-out 1.2s infinite}
html.sv-js body .svp2 .sv-band.sv-in .soc-split.soc-rev .soc-anim{animation:socInL 1.1s cubic-bezier(.2,.7,.2,1) both,socGlow 6s ease-in-out 1.2s infinite}
html body .svp2 .soc-anim img{transform-origin:50% 50%;animation:socDrift 14s ease-in-out infinite alternate}
@media(max-width:860px){html body .svp2 .soc-split,html body .svp2 .soc-split.soc-rev,html body .svp2 .soc-split:has(.svvid){grid-template-columns:1fr}html body .svp2 .soc-split .svfig{max-width:440px}html body .svp2 .soc-split.soc-rev .svfig{order:2}}
@media(prefers-reduced-motion:reduce){html body .svp2 .soc-anim,html body .svp2 .soc-anim img{animation:none!important}}

html body .soccta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;width:100%;padding:clamp(30px,4vw,56px);border-radius:20px;border:1px solid rgba(125,155,220,.25);background:#101a4a}
html body .soccta h2{margin:0 0 10px;max-width:24ch;font:600 clamp(24px,2.8vw,38px)/1.2 Unbounded,sans-serif;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.sc-text{margin:0;max-width:50ch;font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:#b9c8ea}
html body .sc-btn{display:inline-block;padding:15px 32px;border-radius:99px;background:#5b7cff;color:#fff;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .25s}
html body .sc-btn:hover,html body .sc-btn:focus-visible{transform:translateY(-2px);background:#6f8cff;box-shadow:0 10px 28px -8px rgba(91,124,255,.8);outline:none}
html.soc-js .soccta{transition:opacity .7s ease,transform .7s ease}
html.soc-js .soccta:not(.in){opacity:0;transform:translateY(24px)}
@media(max-width:700px){html body .sc-btn{white-space:normal;text-align:center;width:100%}}
@media(prefers-reduced-motion:reduce){html.soc-js .soccta{opacity:1!important;transform:none!important;transition:none!important}}

/* Image / video slots: reserved space for media that has not been supplied yet */
html body .svp2 .svslot{display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(145deg,#0c1330,#070b1f);border:2px dashed rgba(125,155,220,.38);box-shadow:none}
html body .svp2 .svslot.svslot-video{aspect-ratio:16/9}
html body .svp2 .svslot-box{display:grid;gap:6px;justify-items:center;text-align:center;padding:24px;max-width:90%}
html body .svp2 .svslot-box span{font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#79dfff}
html body .svp2 .svslot-box b{font:600 clamp(15px,1.5vw,18px)/1.35 Inter,sans-serif;color:#f4f7ff}
html body .svp2 .svslot-box small{font-size:12.5px;line-height:1.5;color:#9db0d4;overflow-wrap:anywhere}
html body .svp2 .svsub{margin:28px 0 10px;font:600 13px/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9db0d4}
html body .svp2 .soc-split .sv-names{font-size:clamp(17px,1.5vw,21px);line-height:1.8}
html body .svp2 .soc-split .flow{margin-top:24px}
html body .svp2 .sv-flow-row{margin-top:36px}