/* ISS Technologies - services polish (loaded last on services pages) */
:root{--acc:#2f6bff;--acc2:#8fb0ff;--accbg:rgba(47,107,255,.16);--tx:#e3ebff;--tx2:#bccbea;--card:linear-gradient(160deg,rgba(26,42,115,.55),rgba(9,14,46,.78));--bd:rgba(140,170,255,.22)}
body[data-cat=ms]{--btn:#2f6bff;--btn2:#4f86ff;--btx:#fff;--acc:#2f6bff;--acc2:#8fb0ff;--accbg:rgba(47,107,255,.18)}
body[data-cat=vapt]{--btn:#f58a1f;--btn2:#ffb15c;--btx:#1a0e00;--acc:#ff9f43;--acc2:#ffc58a;--accbg:rgba(255,159,67,.15)}
body[data-cat=soc]{--btn:#0fb8da;--btn2:#4fdcf3;--btx:#021820;--acc:#22d3ee;--acc2:#8aeafa;--accbg:rgba(34,211,238,.14)}
body[data-cat=cloud]{--btn:#6b5bf2;--btn2:#8b7bff;--btx:#fff;--acc:#8b7bff;--acc2:#bdb3ff;--accbg:rgba(139,123,255,.17)}
body[data-cat=data]{--btn:#1fbf8a;--btn2:#4fe0b0;--btx:#02170f;--acc:#34d399;--acc2:#86efc4;--accbg:rgba(52,211,153,.14)}

/* ---------- hero ---------- */
html body .svh{position:relative;overflow:hidden;padding:clamp(48px,6vw,96px) 0 clamp(44px,5vw,72px);background:radial-gradient(55% 100% at 90% 0,color-mix(in srgb,var(--acc) 38%,transparent),transparent 62%),radial-gradient(40% 80% at 0 100%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),#070a1f}
html body .svh::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(140,170,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,255,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent 40%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);pointer-events:none}
html body .svh .container{position:relative;z-index:1}
html body .crumb{font-size:16px;color:#b3c3e6;margin-bottom:24px}
html body .crumb a{color:var(--acc2)}
html body .svh h1{font-size:clamp(34px,4.8vw,66px);max-width:18ch;margin-bottom:20px}
html body .svh p{font-size:clamp(17px,1.5vw,22px);line-height:1.7;max-width:60ch;color:#c5d6ff;margin-bottom:30px}
html body .svh .btn{font-size:16px;padding:14px 26px}
html body .btn.btn-primary{background:linear-gradient(100deg,var(--btn),var(--btn2))!important;color:var(--btx)!important;font-weight:600;box-shadow:0 14px 34px -14px var(--btn)}
html body .btn.btn-secondary{color:#fff;border-color:rgba(255,255,255,.35)}

/* ---------- layout ---------- */
html body .svp{background:#070a1f;color:var(--tx)}
html body .svb{grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
html body .svs{top:104px}
html body .svt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);font-weight:600;margin-bottom:14px}
html body .svs ul{border-left:1px solid var(--bd)}
html body .svs a{font-size:17px;line-height:1.35;padding:10px 0 10px 18px;color:#b3c3e6}
html body .svs a:hover{color:#fff}
html body .svs a.on{color:#fff;border-left-color:var(--acc);font-weight:500}
html body .svb>div{counter-reset:sv}

/* ---------- sections ---------- */
html body .svi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px clamp(24px,4vw,56px);padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--bd);align-items:start}
html body .svi:first-child{padding-top:0}
html body .svi h2{display:flex;align-items:center;gap:16px;margin:0 0 10px;font-size:clamp(24px,2.6vw,36px);line-height:1.2;color:#fff}
html body .svi h2::before{counter-increment:sv;content:counter(sv,decimal-leading-zero);flex:none;min-width:48px;height:48px;padding:0 6px;display:grid;place-items:center;border-radius:14px;background:var(--accbg);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc2);font:600 15px Unbounded,sans-serif;letter-spacing:0}
html body .svi p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.75;color:var(--tx2);max-width:none}
html body .svi.full p,html body .svi:not(:has(ul)):not(:has(.cards2))>p{grid-column:1/-1;max-width:78ch}
html body .svi ul{gap:12px}
html body .svi li{padding:15px 18px 15px 52px;border:1px solid var(--bd);border-radius:14px;background:rgba(20,34,96,.28);font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:#f1f5ff}
html body .svi li::before{left:19px;top:50%;margin-top:-8px;width:7px;height:13px;border-color:var(--acc2)}
html body .svi:not(:has(p))>ul{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
html body .svi:not(:has(p))>ul li{background:var(--card)}
@media(max-width:860px){html body .svb{grid-template-columns:1fr}html body .svi{grid-template-columns:1fr}html body .svs a{font-size:16px}}

/* ---------- capability cards ---------- */

html body .cards2{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(16px,1.6vw,24px)!important;align-items:stretch}
html body .cards2>.c2{grid-column:span 2!important;min-width:0}
html body .cards2:has(>.c2:last-child:nth-child(3n+1))>.c2:nth-last-child(-n+4){grid-column:span 3!important}
html body .cards2:has(>.c2:last-child:nth-child(3n+2))>.c2:nth-last-child(-n+2){grid-column:span 3!important}
html body .cards2:has(>.c2:nth-child(2):last-child)>.c2{grid-column:span 3!important}
html body .cards2:has(>.c2:only-child)>.c2{grid-column:1/-1!important}
@media(max-width:999px){
html body .cards2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .cards2>.c2:not(#_){grid-column:span 1!important}
html body .cards2>.c2:last-child:nth-child(odd):not(#_){grid-column:1/-1!important}
}
@media(max-width:640px){
html body .cards2{grid-template-columns:1fr!important}
html body .cards2>.c2:not(#_),html body .cards2>.c2:last-child:nth-child(odd):not(#_){grid-column:1/-1!important}
}

html body .cards2{margin-top:18px}
html body .c2{position:relative;gap:10px;padding:26px 26px 24px;border:1px solid var(--bd);border-top:3px solid var(--acc);border-radius:18px;background:var(--card);align-content:start}
html body .c2:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 22%,rgba(26,42,115,.5)),rgba(9,14,46,.8));box-shadow:0 22px 50px -26px var(--acc)}
html body .c2 b{font-size:clamp(18px,1.5vw,21px);line-height:1.3;font-weight:600;color:#fff}
html body .c2 span{font-size:clamp(15.5px,1.2vw,17px);line-height:1.65;color:var(--tx2)}

/* ---------- architecture flow ---------- */
html body .flow{counter-reset:fl;display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
html body .flow i{display:none}
html body .flow em{counter-increment:fl;flex:1 1 210px;display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--bd);border-radius:14px;background:var(--card);font-size:17px;line-height:1.3;color:#f1f5ff}
html body .flow em::before{content:counter(fl);flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--accbg);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc2);font:600 13px Unbounded,sans-serif}

/* ---------- methodology timeline ---------- */
html body .stp{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;position:relative}
html body .stp li{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--bd);border-left:3px solid var(--acc);border-radius:16px;background:var(--card);font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:#f1f5ff}
html body .stp span{display:grid;place-items:center;width:48px;height:48px;margin:0;border-radius:14px;background:var(--accbg);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc2);font-size:15px}

/* ---------- related services ---------- */
html body .svr{padding:clamp(34px,4vw,56px) 0}
html body .svr h2{font-size:clamp(22px,2.2vw,30px);margin-bottom:22px;font-weight:600}
html body .svr ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px}
html body .svr li{padding:0;border:0;background:none}
html body .svr a{height:100%;padding:22px 24px;border:1px solid var(--bd);border-top:3px solid var(--acc);border-radius:16px;background:var(--card);transition:transform .25s,box-shadow .25s}
html body .svr a:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px var(--acc)}
html body .svr a strong{font-size:20px;font-weight:600;margin-bottom:8px}
html body .svr a span{display:block;font-size:16px;line-height:1.6;color:var(--tx2)}
html body .svr a:hover strong{color:var(--acc2)}

/* ---------- CTA band ---------- */
html body .svcta{margin-top:clamp(20px,3vw,36px);padding:clamp(32px,4vw,56px);border-radius:24px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 34%,rgba(8,12,40,.9)),rgba(8,12,40,.85))}
html body .svcta h2{font-size:clamp(24px,2.8vw,38px);max-width:26ch;line-height:1.2}
html body .svcta .btn{font-size:17px;padding:15px 30px}

/* ---------- hub cards (cloud / cybersecurity / vapt) ---------- */

html body .hubgrid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(16px,1.6vw,24px)!important;align-items:stretch}
html body .hubgrid>.hubcard{grid-column:span 2!important;min-width:0}
html body .hubgrid:has(>.hubcard:last-child:nth-child(3n+1))>.hubcard:nth-last-child(-n+4){grid-column:span 3!important}
html body .hubgrid:has(>.hubcard:last-child:nth-child(3n+2))>.hubcard:nth-last-child(-n+2){grid-column:span 3!important}
html body .hubgrid:has(>.hubcard:nth-child(2):last-child)>.hubcard{grid-column:span 3!important}
html body .hubgrid:has(>.hubcard:only-child)>.hubcard{grid-column:1/-1!important}
@media(max-width:999px){
html body .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .hubgrid>.hubcard:not(#_){grid-column:span 1!important}
html body .hubgrid>.hubcard:last-child:nth-child(odd):not(#_){grid-column:1/-1!important}
}
@media(max-width:640px){
html body .hubgrid{grid-template-columns:1fr!important}
html body .hubgrid>.hubcard:not(#_),html body .hubgrid>.hubcard:last-child:nth-child(odd):not(#_){grid-column:1/-1!important}
}

html body .hubgrid{padding:clamp(36px,5vw,68px) 0 clamp(26px,3vw,44px)}
html body .hubcard{gap:14px;padding:clamp(26px,2.6vw,36px);border-top:3px solid var(--acc);border-radius:22px;background:var(--card)}
html body .hubcard:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent);box-shadow:0 26px 60px -28px var(--acc)}
html body .hubcard .num{width:52px;height:52px;border-radius:15px;font-size:15px;background:var(--accbg);color:var(--acc2);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
html body .hubcard h2{font-size:clamp(22px,2vw,28px);margin-top:8px;line-height:1.2}
html body .hubcard p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--tx2)}
html body .hubcard ul{gap:8px;font-size:16px;color:#cdd9f3;margin-top:6px}
html body .hubcard li::before{color:var(--acc2)}
html body .hubcard .open{font-size:16.5px;font-weight:600;color:var(--acc2);padding-top:18px}
html body .hubsec{padding:clamp(32px,4vw,56px) 0}
html body .hubsec h2{font-size:clamp(24px,2.6vw,36px);margin-bottom:12px}
html body .hubsec p{font-size:clamp(16px,1.3vw,19px);line-height:1.75;color:var(--tx2)}
html body .hubsec li,html body .hubsec ul{font-size:17px}

/* ---------- duplicate generic CTA ---------- */
html body main:has(.svcta)+.iss-cta{display:none}

/* ---------- technical content: steps, chips, image/video spaces ---------- */
html body .svi ol.svsteps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;gap:12px}
html body .svi ol.svsteps li{counter-increment:st;position:relative;padding:15px 18px 15px 58px;border:1px solid var(--bd);border-radius:14px;background:rgba(20,34,96,.28);font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:#f1f5ff}
html body .svi ol.svsteps li::before{content:counter(st);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accbg);color:var(--acc2);font-size:14px;font-weight:600}
html body .svi ul.svchips{display:flex;flex-wrap:wrap;gap:10px}
html body .svi ul.svchips li{padding:8px 16px;border-radius:99px;font-size:15px;color:var(--tx)}
html body .svi ul.svchips li::before{display:none}
html body .svph{margin:8px 0 12px}
html body .svph-box{display:grid;place-content:center;justify-items:center;gap:8px;min-height:220px;aspect-ratio:21/9;padding:24px;text-align:center;border:1.5px dashed color-mix(in srgb,var(--acc) 55%,transparent);border-radius:18px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px),rgba(10,16,48,.6)}
html body .svph-box span{padding:4px 12px;border-radius:99px;background:var(--accbg);color:var(--acc2);font-size:13px;font-weight:600}
html body .svph-box b{font-size:clamp(17px,1.5vw,21px);color:#fff;font-weight:500;max-width:36ch}
html body .svph-box small{font-size:13px;color:#8f9cc4}
html body .svi .svph{grid-column:1/-1}
html body .svi ol.svsteps{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
html body .svi ul.svchips{grid-column:1/-1}
@media(max-width:760px){html body .svi ol.svsteps{grid-template-columns:1fr}}
html body .hubsec .svi{display:block;padding-left:0;padding-right:0}
html body .hubsec .svph{margin:18px 0}
html body .hubsec .svi h2::before{display:none}

/* ================= service format v3: sticky section bar + alternating bands ================= */
html body .svp.svp2{padding:0;background:#070a1f}
html body .svp2{--band-a:#070a1f;--band-b:#121b4d;--band-acc:color-mix(in srgb,var(--acc) 40%,#050816)}
html body .svp2 .container{max-width:min(1680px,95vw);margin:0 auto;padding-left:var(--edge,clamp(18px,4vw,40px));padding-right:var(--edge,clamp(18px,4vw,40px))}
/* section bar */
html body .sv-sub{position:sticky;top:var(--hh,64px);z-index:4;background:#0a0e28;border-bottom:1px solid var(--bd);border-top:1px solid var(--bd)}
html body .sv-sub ul{display:flex;gap:clamp(18px,3vw,44px);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
html body .sv-sub a{display:block;padding:15px 0 13px;border-bottom:3px solid transparent;color:#b3c3e6;font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none;transition:color .2s,border-color .2s}
html body .sv-sub a:hover{color:#fff}
html body .sv-sub a.on{color:#fff;border-bottom-color:var(--acc)}
/* bands */
html body .sv-band{padding:clamp(48px,6.5vw,104px) 0;scroll-margin-top:calc(var(--hh,64px) + 52px)}
html body .svp2 .sv-a{background:var(--band-a)!important}
html body .svp2 .sv-b{background:var(--band-b)!important}
html body .svp2 .sv-acc-band{background:var(--band-acc)!important;color:#fff}
html body .sv-band h2{margin:0 0 clamp(22px,2.6vw,38px);max-width:22ch;font:600 clamp(28px,3.4vw,46px)/1.1 Unbounded,sans-serif;letter-spacing:-.035em;color:#fff;text-wrap:balance}
html body .sv-lead{margin:0;max-width:38ch;font-size:clamp(24px,2.6vw,36px);line-height:1.4;letter-spacing:-.015em;color:var(--tx)}
html body .sv-body{margin:0 0 1.2em;max-width:72ch;font-size:clamp(17.5px,1.4vw,20px);line-height:1.85;color:var(--tx2)}
/* two-column running text */
html body .sv-cols{columns:2;column-gap:clamp(36px,6vw,96px);margin:0;padding:0;list-style:none;max-width:1100px}
html body .sv-cols li{break-inside:avoid;position:relative;margin:0 0 1.15em;padding-left:28px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--tx)}
html body .sv-cols li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:2px;background:var(--acc2)}
/* accordion */
html body .sv-acc{max-width:1100px;border-top:1px solid var(--bd)}
html body .sv-acc details{border-bottom:1px solid var(--bd)}
html body .sv-acc summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 8px;cursor:pointer;list-style:none;font-size:clamp(17px,1.4vw,20px);font-weight:500;color:var(--acc2)}
html body .sv-acc summary::-webkit-details-marker{display:none}
html body .sv-acc summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--acc2);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
html body .sv-acc details[open] summary{background:rgba(140,170,255,.07)}
html body .sv-acc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
html body .sv-acc summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
html body .sv-acc details p{margin:0;padding:6px 8px 26px;max-width:80ch;font-size:clamp(17px,1.35vw,19px);line-height:1.8;color:var(--tx2)}
/* architecture flow as running text */
html body .svp2 .flow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:6px 0 clamp(24px,3vw,40px);max-width:1100px}
html body .svp2 .flow em{font:500 clamp(17px,1.5vw,21px) Inter,system-ui,sans-serif;font-style:normal;padding:0;border:0;background:none;color:#fff}
html body .svp2 .flow i{font-style:normal;color:var(--acc2)}
/* delivery steps as rings */
html body .sv-center h2,html body .sv-center .sv-body{margin-left:auto;margin-right:auto;text-align:center}
html body .sv-center h2{max-width:26ch}
html body .sv-rings{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,3.5vw,56px) clamp(22px,3vw,48px);margin:clamp(12px,2vw,24px) 0 0;padding:0;list-style:none;counter-reset:none}
html body .sv-rings li{flex:1 1 170px;max-width:240px;text-align:center}
html body .ring{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:0 auto 20px;border-radius:50%;background:conic-gradient(from 200deg,var(--acc) 0 64%,color-mix(in srgb,var(--acc) 20%,transparent) 64% 100%)}
html body .ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--band-b)}
html body .ring b{position:relative;font:600 30px Unbounded,sans-serif;letter-spacing:-.03em;color:#fff}
html body .sv-rings h3{margin:0 0 8px;font:600 15px Unbounded,sans-serif;letter-spacing:.02em;color:#fff}
html body .sv-rings p{margin:0;font-size:clamp(16px,1.2vw,17.5px);line-height:1.65;color:var(--tx2)}
/* tabs on accent band */
html body .sv-tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:6px clamp(20px,3vw,44px);margin:0 0 clamp(24px,3vw,40px);border-bottom:1px solid rgba(255,255,255,.28)}
html body .sv-tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 0;color:rgba(255,255,255,.72);font:500 clamp(16px,1.35vw,19px) Inter,system-ui,sans-serif;cursor:pointer;transition:color .2s,border-color .2s}
html body .sv-tabs [role=tab]:hover{color:#fff}
html body .sv-tabs [role=tab][aria-selected=true]{color:#fff;border-bottom-color:var(--acc2)}
html body .sv-tabs [role=tab]:focus-visible{outline:2px solid #fff;outline-offset:3px}
html body .sv-tabs [role=tabpanel][hidden]{display:none}
html body .sv-acc-band .sv-body{color:rgba(255,255,255,.85)}
html body .sv-acc-band .sv-cols li{color:#fff}
html body .sv-acc-band .sv-cols li::before{background:#fff}
html body .sv-names{margin:0;max-width:70ch;font-size:clamp(20px,1.9vw,26px);line-height:1.9;font-weight:500;color:#fff}
html body .sv-names .sl{color:var(--acc2);font-weight:400;white-space:pre}
/* media, related, CTA */
html body .svp2 .svph,html body .svp2 .svfig{margin:clamp(20px,3vw,36px) 0 0;max-width:none}
html body .svp2 .svfig img{max-width:100%;height:auto;display:block}
html body .sv-rel{padding:clamp(36px,4.5vw,64px) 0}
html body .sv-rel .svr{padding:0;border:0}
html body .sv-rel .svr a{height:auto;padding:16px 0 0;border:0;border-top:3px solid var(--acc);border-radius:0;background:none;box-shadow:none}
html body .sv-rel .svr a:hover{transform:none}
html body .sv-cta{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,72px);background:#070a1f;max-width:none}
html body .sv-cta .svcta{max-width:min(1680px,95vw);margin:0 auto}
@media(max-width:860px){html body .sv-cols{columns:1}html body .sv-lead{max-width:none}}
@media(prefers-reduced-motion:reduce){html body .sv-acc summary::after{transition:none}}
html body .svp2 .sv-tabs [role=tab]{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:0;border-left:0;border-right:0}

/* ================= service animation ================= */
@property --sweep{syntax:"<percentage>";inherits:true;initial-value:64%}
@keyframes svUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes svGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes svPop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes svSweep{from{--sweep:0%}to{--sweep:64%}}
@keyframes svSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes svFade{from{opacity:0}to{opacity:1}}
@keyframes svShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
html.sv-js .sv-sub{animation:svSlide .7s cubic-bezier(.2,.7,.2,1) .15s both}
/* hidden until the band scrolls in */
html.sv-js .sv-band:not(.sv-in) :is(h2,.sv-lead,.sv-body,.sv-cols li,.sv-acc details,.flow em,.flow i,.sv-rings li,.sv-tabs,.sv-names,.svph,.svfig,.svr li){opacity:0}
html.sv-js .sv-band.sv-in :is(h2,.sv-lead,.sv-body,.svph,.svfig,.sv-tabs,.sv-names){animation:svUp .8s cubic-bezier(.2,.7,.2,1) both}
html.sv-js .sv-band.sv-in .sv-lead{animation-delay:.12s;animation-duration:1s}
html.sv-js .sv-band.sv-in .sv-body{animation-delay:.14s}
html.sv-js .sv-band.sv-in :is(.sv-cols li,.sv-acc details,.svr li){animation:svSlide .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i,0)*.08s)}
html.sv-js .sv-band.sv-in .flow :is(em,i){animation:svSlide .5s ease both;animation-delay:calc(.15s + var(--i,0)*.07s)}
/* heading underline draws in */
html.sv-js .sv-band h2{position:relative;padding-bottom:18px}
html.sv-js .sv-band h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;background:var(--acc);transform-origin:left;transform:scaleX(0)}
html.sv-js .sv-band.sv-in h2::after{animation:svGrow .7s cubic-bezier(.2,.7,.2,1) .35s both}
html.sv-js .sv-center h2::after{left:50%;margin-left:-32px}
html.sv-js .sv-acc-band h2::after{background:#fff}
/* rings: pop in, then the arc sweeps round */
html.sv-js .sv-band.sv-in .sv-rings li{animation:svUp .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0)*.14s)}
html.sv-js .sv-band.sv-in .ring{animation:svPop .7s cubic-bezier(.2,.7,.2,1) both,svSweep 1.4s cubic-bezier(.3,.6,.2,1) both;animation-delay:calc(.15s + var(--i,0)*.14s),calc(.3s + var(--i,0)*.14s)}
html .ring{background:conic-gradient(from 200deg,var(--acc) 0 var(--sweep),color-mix(in srgb,var(--acc) 20%,transparent) var(--sweep) 100%)}
html body .sv-rings li:hover .ring{transform:scale(1.06)}
html body .ring{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* interaction */
html body .sv-cols li{transition:transform .25s ease,color .25s}
html body .sv-cols li::before{transition:width .25s ease}
html body .sv-cols li:hover::before{width:22px}
html body .sv-cols li:hover{transform:translateX(6px)}
html body .sv-acc details[open]>p{animation:svFade .45s ease both}
html body .sv-tabs [role=tabpanel]:not([hidden]){animation:svUp .5s cubic-bezier(.2,.7,.2,1) both}
html body .sv-sub a{position:relative}
html body .sv-rel .svr a{transition:border-color .25s,transform .25s}
html body .sv-rel .svr a:hover{transform:translateY(-4px)}
/* call-to-action: slow light sweep */
html body .sv-cta .svcta{background-size:200% 100%}
html body .sv-cta .svcta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);background-size:200% 100%;animation:svShimmer 6s linear infinite}
html body .sv-cta .svcta{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){
 html.sv-js .sv-band:not(.sv-in) :is(h2,.sv-lead,.sv-body,.sv-cols li,.sv-acc details,.flow em,.flow i,.sv-rings li,.sv-tabs,.sv-names,.svph,.svfig,.svr li){opacity:1}
 html.sv-js .sv-band h2::after{transform:none}
 html body .sv-cta .svcta::before{display:none}
}