/* Interactive homepage service navigation, with restrained motion. */
#start .dgv-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;min-height:610px}
#start .dgv-hero-copy{text-align:left;max-width:760px}
#start .dgv-hero h1{font-size:clamp(2.2rem,3.7vw,3.8rem)}
#start .dgv-hero .cta-row{justify-content:flex-start}
.service-orbit-scene{position:relative;z-index:2;height:460px;min-width:0}
.orbit-centre{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:130px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 33% 26%,#466d90,#172a40 40%,#0b111a 75%);border:1px solid #8fb7f64a;box-shadow:0 0 55px #8fb7f61c;color:#d4dde8;letter-spacing:.15em;font-weight:700}
.orbit-rings{position:absolute;inset:45px 0 60px;pointer-events:none}
.orbit-rings i{position:absolute;inset:24% 2%;border:1px solid #8fb7f62b;border-radius:50%;transform:rotate(-27deg)}
.orbit-rings i:nth-child(2){transform:rotate(35deg);border-color:#6ed5c72b}
.orbit-rings i:nth-child(3){transform:rotate(85deg);border-color:#f2bd682b}
.service-orb{position:absolute;background:none;border:0;padding:12px;display:grid;justify-items:center;gap:10px;color:var(--ink);font:600 .82rem/1.4 var(--sans);cursor:pointer;max-width:190px;z-index:2;animation:service-float 9s ease-in-out infinite}
.service-orb-0{left:1%;top:9%}.service-orb-1{right:0;top:28%;animation-delay:-3s}.service-orb-2{left:16%;bottom:12%;animation-delay:-6s}
.orb-sphere{width:48px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,var(--orb-colour) 20%,color-mix(in srgb,var(--orb-colour),#101722 58%) 80%);box-shadow:0 0 26px color-mix(in srgb,var(--orb-colour) 35%,transparent);transition:box-shadow .2s}
.orb-label{background:#192330e8;border:1px solid color-mix(in srgb,var(--orb-colour) 40%,transparent);border-radius:12px;padding:8px 12px}
.service-orb:hover .orb-label,.service-orb[aria-pressed=true] .orb-label{color:var(--orb-colour);border-color:var(--orb-colour)}
.service-orbit-scene:hover .service-orb,.service-orbit-scene:focus-within .service-orb{animation-play-state:paused}
.service-orb:hover .orb-sphere{box-shadow:0 0 38px color-mix(in srgb,var(--orb-colour) 60%,transparent)}
.orbit-caption{position:absolute;bottom:0;width:100%;text-align:center;color:var(--muted);font-size:.82rem}
#dgv-service-options{scroll-margin-top:155px}
.service-selectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.service-selectors button,.service-card-controls button{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);border-radius:999px;padding:12px 18px;font:600 .9rem var(--sans);cursor:pointer;min-height:46px}
.service-selectors button[aria-pressed=true]{border-color:var(--orb-colour);color:var(--orb-colour);background:color-mix(in srgb,var(--orb-colour) 12%,var(--bg))}
#start .service-card-stage{display:block;max-width:850px;margin:0;padding-bottom:0;perspective:none}
.service-card-stage>.g-in[hidden]{display:none!important}
.service-card-stage .g-card{transform:none;box-shadow:0 16px 40px #0002;border-color:var(--acc)}
.service-card-stage .g-card::after,.service-card-stage .g-cta::before{content:none}
.service-card-stage .g-body{padding:32px 32px 8px;gap:18px}
.service-card-stage .g-foot{padding:22px 32px 32px}
.service-card-stage .inc a{position:relative;z-index:2;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;color:var(--ink-2);text-decoration:none;font-size:.88rem}
.service-card-stage .inc a:hover{color:var(--acc);border-color:var(--acc)}
.service-card-controls{display:flex;align-items:center;gap:16px;max-width:850px;justify-content:center;margin:22px 0 60px}
.service-card-controls span{font-size:.85rem;color:var(--muted);text-align:center}
@keyframes service-float{50%{transform:translate(9px,-15px)}}
@media(max-width:900px){#start .dgv-hero{grid-template-columns:1fr;gap:12px;padding-bottom:24px}#start .dgv-hero-copy{max-width:none}.service-orbit-scene{height:310px;width:min(100%,460px);margin:auto}.orbit-centre{width:100px}.orb-sphere{width:38px}.service-orb{font-size:.75rem}.service-orb-2{bottom:8%}.orbit-caption{display:none}}
@media(max-width:560px){.service-orb .orb-label{display:none}.service-orbit-scene{height:190px}.service-orb-0{left:12%;top:5%}.service-orb-1{right:10%;top:22%}.service-orb-2{left:30%;bottom:0}.orbit-rings{inset:0}.orbit-centre{width:82px}.service-selectors{display:grid;grid-template-columns:1fr}.service-card-stage .g-body{padding:24px 22px 8px}.service-card-stage .g-foot{padding:18px 22px 24px}}
@media(prefers-reduced-motion:reduce){.service-orb{animation:none}.orb-sphere{transition:none}}
/* WebGL enhancement; existing CSS scene remains the no-WebGL fallback. */
.service-3d-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.has-3d .orbit-rings,.has-3d .orbit-centre,.has-3d .orb-sphere{display:none}
.has-3d .service-orb{animation:none;bottom:auto;right:auto;transform:translate(-50%,14px);padding:10px 6px;max-width:180px;white-space:normal}
.has-3d .orb-label{background:#101722cc;backdrop-filter:blur(8px);font-size:.76rem;box-shadow:0 4px 18px #0003}
.has-3d .orbit-caption{bottom:8px}
@media(max-width:560px){.service-orbit-scene{height:250px}.has-3d .service-orb{width:54px;height:54px;transform:translate(-50%,-50%)}.has-3d .orb-label{display:none}}
/* Wide orbital stage behind the hero copy. */
#start .dgv-hero{display:block;min-height:670px;padding:70px 0;overflow:hidden}
#start .dgv-hero-copy{width:58%;position:relative;z-index:3;pointer-events:none}
#start .dgv-hero-copy a{pointer-events:auto}
#start .dgv-hero-copy h1,#start .dgv-hero-copy p{ text-shadow:0 2px 18px #101722,0 0 35px #101722}
#start .service-orbit-scene{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:2;pointer-events:none}
.service-orbit-scene .service-orb{pointer-events:auto}
.has-3d .orbit-caption{bottom:24px;left:65%;width:32%}
/* Three service cards occupy a perspective stage like a character selector. */
#start .service-card-stage{position:relative;display:block;max-width:1120px;width:100%;height:530px;margin:20px auto 0;perspective:1500px;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;--drag:0deg}
.service-card-stage:active{cursor:grabbing}
#start .service-card-stage>.g-in{position:absolute;left:50%;top:20px;width:min(560px,52%);height:480px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .6s,filter .6s;transform:translateX(-50%) rotateY(var(--drag));z-index:3;opacity:1}
#start .service-card-stage>.g-in[data-slot="-1"]{transform:translateX(-118%) translateZ(-190px) rotateY(38deg) rotateY(var(--drag));z-index:1;opacity:.62;filter:saturate(.6)}
#start .service-card-stage>.g-in[data-slot="1"]{transform:translateX(18%) translateZ(-190px) rotateY(-38deg) rotateY(var(--drag));z-index:1;opacity:.62;filter:saturate(.6)}
#start .service-card-stage .g-card{height:100%;background:linear-gradient(155deg,color-mix(in srgb,var(--acc) 14%,#192330),#101722 80%);box-shadow:0 26px 55px #0007,inset 0 1px 0 #ffffff12;overflow:hidden}
#start .service-card-stage .g-body{padding:20px 28px 8px;gap:14px}
#start .service-card-stage .g-body h3{font-size:1.55rem}
#start .service-card-stage .g-foot{padding:16px 28px 28px;margin-top:auto}
.service-avatar{height:86px;flex-shrink:0;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--acc) 15%,transparent),transparent 68%);color:var(--acc)}
.service-avatar span{display:grid;place-items:center;width:60px;height:60px;border:1px solid var(--acc);border-radius:50%;font-size:1.4rem;font-weight:700;box-shadow:0 0 25px color-mix(in srgb,var(--acc) 20%,transparent)}
.card-pick{position:absolute;inset:0;border:0;background:transparent;border-radius:28px;cursor:pointer;z-index:5}
.card-pick[hidden]{display:none}
.has-3d .service-orb::after{content:"";position:absolute;left:0;right:0;top:-44px;height:44px}
.card-pick:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.service-card-hint{text-align:center;color:var(--muted);font-size:.83rem;margin-top:12px}
.service-card-controls{max-width:none;margin:12px 0 65px}
@media(max-width:900px){#start .dgv-hero-copy{width:68%}#start .dgv-hero h1{font-size:clamp(2rem,4.6vw,3rem)}#start .service-card-stage>.g-in{width:64%}.has-3d .orb-label{font-size:.7rem;max-width:135px}}
@media(max-width:560px){#start .dgv-hero{min-height:770px;padding-top:40px}#start .dgv-hero-copy{width:100%}#start .service-orbit-scene{top:440px;height:300px}.has-3d .orbit-caption{display:none}#start .service-card-stage{height:570px;perspective:1000px}#start .service-card-stage>.g-in{width:88%;height:535px}#start .service-card-stage>.g-in[data-slot="-1"]{transform:translateX(-106%) translateZ(-220px) rotateY(42deg)}#start .service-card-stage>.g-in[data-slot="1"]{transform:translateX(6%) translateZ(-220px) rotateY(-42deg)}#start .service-card-stage .g-body{padding:16px 20px 8px}#start .service-card-stage .g-foot{padding:12px 20px 24px}.service-card-stage .inc a{padding:8px 11px;font-size:.8rem}.service-card-stage .g-cta{font-size:.8rem;white-space:normal}.service-card-hint{font-size:.76rem}}
@media(prefers-reduced-motion:reduce){#start .service-card-stage>.g-in{transition:none}}