.interactive-grid{align-items:start}
.service-instruction{font-size:14px;color:var(--muted);margin:20px 0 -16px}
.interactive-service{--icon-main:#2855cd;--icon-main-light:#5c9dfa;--icon-accent:#56bee8;--icon-accent-light:#b7f8ff;--icon-halo:#eaf3ff;--icon-tint:#d6eaff;--icon-outline:#81a6eb;padding:0!important;border-radius:16px;overflow:hidden;transition:border-color .24s,box-shadow .24s,transform .24s;background:linear-gradient(145deg,var(--icon-halo),white 47%)}
.tone-violet{--icon-main:#6a39c7;--icon-main-light:#a48cf4;--icon-accent:#5397f0;--icon-accent-light:#c4e7ff;--icon-halo:#f3edff;--icon-tint:#e6dcff;--icon-outline:#af94ed}
.tone-teal{--icon-main:#0c829e;--icon-main-light:#48c6d7;--icon-accent:#5786e8;--icon-accent-light:#c8e4ff;--icon-halo:#e9f9fa;--icon-tint:#cef2f3;--icon-outline:#6dbfc9}
.tone-rose{--icon-main:#9750ce;--icon-main-light:#de8de0;--icon-accent:#dd7b9f;--icon-accent-light:#ffe0df;--icon-halo:#fff0f7;--icon-tint:#f8dfef;--icon-outline:#d49ac8}
.interactive-service:has(summary:hover),.interactive-service:has(summary:focus-visible),.interactive-service:has(details[open]){border-color:var(--icon-outline);box-shadow:0 15px 36px #263a7012;transform:translateY(-3px)}
.service-disclosure summary{display:block;list-style:none;cursor:pointer;padding:26px 28px 22px;outline-offset:-5px;border-radius:15px;position:relative}
.service-disclosure summary::-webkit-details-marker{display:none}
.service-disclosure summary::marker{content:''}
.service-disclosure summary:focus-visible{outline:3px solid #355ac5}
.service-icon-stage{height:139px;display:flex;align-items:center;justify-content:flex-start;position:relative;isolation:isolate;margin-bottom:17px}
.icon-tile{position:absolute;width:116px;height:112px;left:0;top:12px;z-index:-1;transform:rotate(-9deg);border-radius:28px 38px 25px 32px;background:linear-gradient(140deg,#ffffffad,var(--icon-tint));border:1px solid #ffffff;box-shadow:inset 0 0 25px #fff8,0 12px 20px #44678b0a;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-radius .5s}
.service-illustration{display:block;width:112px;height:112px;margin-left:10px;filter:drop-shadow(4px 9px 5px #33456e1c);transform:rotate(-6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.service-icon-stage .ribbon-icon{transform:scale(.78) rotate(-9deg);transform-origin:left center;margin-left:11px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.icon-accent{transform-origin:60px 60px;transition:transform .5s}
.icon-spark{position:absolute;border-radius:50%;background:var(--icon-accent-light);border:1px solid #ffffffb0;transition:transform .5s,opacity .5s}
.spark-one{width:17px;height:17px;left:130px;top:28px}
.spark-two{width:8px;height:8px;left:143px;top:100px;background:var(--icon-main-light);opacity:.45}
.interactive-service summary:hover .service-illustration,.interactive-service summary:focus-visible .service-illustration,.service-disclosure[open] .service-illustration{transform:translateY(-5px) rotate(3deg) scale(1.06);filter:drop-shadow(5px 13px 7px #33456e28)}
.interactive-service summary:hover .ribbon-icon,.interactive-service summary:focus-visible .ribbon-icon,.service-disclosure[open] .ribbon-icon{transform:translateY(-5px) scale(.84) rotate(3deg)}
.interactive-service summary:hover .icon-tile,.service-disclosure[open] .icon-tile{transform:rotate(4deg) scale(1.04);border-radius:38px 26px 38px 25px}
.interactive-service summary:hover .icon-accent,.service-disclosure[open] .icon-accent{transform:translateY(-3px)}
.interactive-service summary:hover .spark-one,.service-disclosure[open] .spark-one{transform:translate(4px,-8px) scale(1.15)}
.interactive-service summary:hover .spark-two,.service-disclosure[open] .spark-two{transform:translate(6px,4px);opacity:.8}
.interactive-service h3{margin:0 0 14px!important;font-size:23px;line-height:1.25;letter-spacing:-.025em;min-height:58px}
.service-description{display:block;font-size:14px;color:var(--muted);line-height:1.7;min-height:96px}
.service-toggle{display:flex;justify-content:space-between;align-items:center;color:var(--icon-main);font-size:12px;font-weight:600;margin-top:21px;padding-top:15px;border-top:1px solid #dce3ee}
.toggle-symbol{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:400;background:var(--icon-halo);transition:transform .25s}
.when-open{display:none}
.service-disclosure[open] .when-closed{display:none}
.service-disclosure[open] .when-open{display:inline}
.service-disclosure[open] .toggle-symbol{transform:rotate(45deg)}
.service-expanded{padding:0 28px 26px}
.service-expanded p{font-size:13px;line-height:1.75;padding:19px 0;border-top:1px solid var(--line)}
.service-enquiry{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--icon-main);background:var(--icon-halo);border:1px solid var(--icon-tint);border-radius:7px;padding:12px 14px;font-size:12px;font-weight:600;transition:background .2s}
.service-enquiry:hover{background:var(--icon-tint)}
.service-enquiry:focus-visible{outline:3px solid #355ac5;outline-offset:3px}
@media(max-width:1100px){.service-disclosure summary{padding:23px 22px 20px}.service-expanded{padding:0 22px 23px}.interactive-service h3{font-size:21px}.service-description{min-height:120px}}
@media(max-width:850px){.service-description{min-height:96px}}
@media(max-width:650px){.service-icon-stage{height:125px;margin-bottom:13px}.service-illustration{width:105px;height:105px}.icon-tile{width:108px;height:106px}.interactive-service h3{font-size:23px;min-height:0}.service-description{min-height:0}.service-disclosure summary{padding:25px}.service-expanded{padding:0 25px 25px}.service-toggle{margin-top:21px}.interactive-service:has(summary:hover),.interactive-service:has(details[open]){transform:none}}
@media(prefers-reduced-motion:reduce){.interactive-service,.interactive-service *{transition:none!important;animation:none!important}.interactive-service:has(summary:hover),.interactive-service:has(details[open]){transform:none}.interactive-service summary:hover .service-illustration,.interactive-service summary:focus-visible .service-illustration,.service-disclosure[open] .service-illustration{transform:rotate(-6deg)}.interactive-service summary:hover .ribbon-icon,.service-disclosure[open] .ribbon-icon{transform:scale(.78) rotate(-9deg)}}