/* Offline experiment: a quiet, spatial contact signature. */
.particle-contact{margin:28px auto 0;max-width:460px;color:inherit}
.particle-trigger{display:flex;flex-direction:column;align-items:center;margin:auto;padding:0 20px 15px;border:0;border-radius:28px;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.particle-trigger:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.particle-scene{display:block;position:relative;width:250px;height:215px;max-width:65vw}
.particle-scene canvas{display:block;width:100%;height:100%;pointer-events:none}
.particle-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:75px;font-weight:200}
.particle-ready .particle-fallback{display:none}
.particle-label{font-size:14px;letter-spacing:.02em;font-weight:550}
.particle-label span{display:inline-block;margin-left:8px}
.particle-options{padding:18px 20px;margin:5px auto 18px;border:1px solid #ffffff65;border-radius:22px;background:#ffffff0a}
.particle-options[hidden]{display:none}
.particle-options p{font-size:15px;margin:0 0 12px;color:inherit}
.particle-options .actions{margin:0;gap:12px;display:flex;justify-content:center}
.particle-options a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #ffffff80;border-radius:24px;padding:9px 20px;color:inherit;font-size:14px}
.particle-options a:hover{background:#ffffff16}
.particle-trigger:hover .particle-label{text-decoration:underline;text-underline-offset:5px}
@media(max-width:599px){.particle-contact{margin-top:20px}.particle-scene{width:215px;height:190px}.particle-options{padding:18px 12px}}
@media print{.particle-contact{display:none}}

/* A single cloud travels from the hero to its contact destination. */
.particle-launch{height:190px;width:250px;max-width:70vw;margin:0 auto;flex-shrink:0}.hero-grid:has(.particle-launch){gap:8px}.particle-traveller{position:fixed;z-index:4;pointer-events:none;max-width:none!important;display:block}.particle-scene:has(+*){position:relative}@media(max-width:599px){.particle-launch{height:160px;width:205px}.hero-grid:has(.particle-launch){gap:0}}


.particle-jump{position:fixed;z-index:4;display:block;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}.particle-jump[hidden]{display:none}.particle-jump:focus-visible{outline:2px solid currentColor;outline-offset:3px}.particle-jump:hover{background:radial-gradient(ellipse,#9ba8ab0c,transparent 70%)}@media print{.particle-jump,.particle-traveller{display:none}}

/* Stable backing canvas; motion runs on the compositor. */
.particle-traveller{left:0;top:0;width:320px!important;height:280px!important;transform-origin:0 0;will-change:transform;contain:strict}.particle-jump{left:0;top:0;will-change:transform;touch-action:pan-y}
/* On compact phones the cloud is visible immediately, before the headline. */
@media(max-width:599px){.hero:has(.particle-launch){padding-top:12px}.hero-grid:has(.particle-launch){gap:4px}.particle-launch{order:-1;width:150px;height:110px;max-width:60vw}.hero:has(.particle-launch) .name{margin-bottom:14px}}

/* Offline palette concept: uniform scaling preserves a circular silhouette. */
.particle-traveller{height:320px!important}.topic-key{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--topic-color);margin-right:7px;vertical-align:middle;flex-shrink:0}.anchors span+span:before{display:none}.topic{border-top:3px solid var(--topic-color)}.topic .number:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--topic-color);margin-right:9px}
@media(max-width:599px){.particle-launch{width:180px;height:160px}.hero .anchors{gap:10px 16px}.hero .anchors span{display:inline-flex;align-items:center;font-size:11px}}

/* Stronger blue families, larger grouped cloud in the mobile concept. */
@media(max-width:599px){.particle-launch{width:210px;height:190px}.topic-key{width:9px;height:9px}.hero .anchors span{font-size:12px}.hero .anchors{gap:11px 16px}}

/* Contact destination: centered cloud with a separate label. */
.particle-scene{height:250px;margin-inline:auto}.particle-label{margin-top:12px}
@media(max-width:599px){.particle-scene{height:215px}}