/* A complete nine-second choreography: scatter, assemble, orbit, assemble.
   All four original SVGs share their unchanged artboard and colors. */
.hp-hero__art { display: block; width: 100%; max-width: 440px; aspect-ratio: 1; isolation: isolate; --pointer-x: 0px; --pointer-y: 0px; }
.hp-hero__art::before { content: ''; position: absolute; inset: 5%; border-radius: 50%; background: var(--brand-violet-50); z-index: -1; }
.hp-hero__piece { position: absolute; inset: 0; width: 100%; aspect-ratio: 1; background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: none; transform: none; pointer-events: none; }
.hp-hero__piece img { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; max-width: none; object-fit: contain; filter: none; animation: none; }
.hp-hero__piece--curl { z-index: 2; --scatter-x: -12%; --scatter-y: 10%; --scatter-angle: -22deg; --orbit-x: -10%; --orbit-y: -8%; --orbit-angle: 18deg; }
.hp-hero__piece--ring { z-index: 3; --scatter-x: 10%; --scatter-y: -8%; --scatter-angle: 18deg; --orbit-x: 12%; --orbit-y: 6%; --orbit-angle: -20deg; }
.hp-hero__piece--hook { z-index: 4; --scatter-x: -9%; --scatter-y: 10%; --scatter-angle: 24deg; --orbit-x: 8%; --orbit-y: 8%; --orbit-angle: -16deg; }
.hp-hero__piece--dash { z-index: 1; --scatter-x: 14%; --scatter-y: 6%; --scatter-angle: -18deg; --orbit-x: 8%; --orbit-y: -14%; --orbit-angle: 32deg; }
.motion-enabled .hp-hero__piece { animation: brand-choreography 9s cubic-bezier(.65, 0, .35, 1) infinite; transition: none; }
.motion-enabled .hp-hero__piece img { animation: none; }
.motion-enabled .hp-hero__art { translate: var(--pointer-x) var(--pointer-y); transition: translate 350ms ease-out; }
@keyframes brand-choreography {
 0%, 8%, 100% { transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-angle)); }
 28%, 42% { transform: translate(0, 0) rotate(0deg); }
 62%, 74% { transform: translate(var(--orbit-x), var(--orbit-y)) rotate(var(--orbit-angle)); }
 88%, 92% { transform: translate(0, 0) rotate(0deg); }
}
.motion-enabled .motion-reveal { opacity: 0; translate: 0 28px; transition: opacity 650ms cubic-bezier(.16, 1, .3, 1), translate 750ms cubic-bezier(.16, 1, .3, 1); transition-delay: var(--motion-delay, 0ms); }
.motion-enabled .motion-reveal.in-view { opacity: 1; translate: 0 0; }
.motion-enabled .hp-work-card, .motion-enabled .hp-journal-card, .motion-enabled .hp-service, .motion-enabled .svc-tile, .motion-enabled .pf-card { transition: transform 450ms cubic-bezier(.16, 1, .3, 1), box-shadow 450ms ease; }
.motion-enabled .hp-work-card__art .brand-card-art, .motion-enabled .hp-service__symbol .brand-card-art, .motion-enabled .svc-tile > .brand-card-art { transition: transform 650ms cubic-bezier(.16, 1, .3, 1); }
.motion-enabled .hp-work-card:focus-within .brand-card-art, .motion-enabled .hp-service:focus-within .brand-card-art, .motion-enabled .svc-tile:focus-visible > .brand-card-art { transform: translateY(-6px); }
@media (hover: hover) and (pointer: fine) {
 .motion-enabled .hp-service:hover, .motion-enabled .svc-tile:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #0a0a0f12; }
 .motion-enabled .hp-work-card:hover .brand-card-art, .motion-enabled .hp-service:hover .brand-card-art, .motion-enabled .svc-tile:hover > .brand-card-art { transform: translateY(-6px); }
}
@keyframes brand-piece-float {
 0%, 100% { transform: translate(0, 0) rotate(0deg); }
 50% { transform: translate(var(--float-x), var(--float-y)) rotate(var(--float-angle)); }
}
.hp-motion-control { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0 24px; padding: 8px 12px; border: 1px solid var(--ink-300); border-radius: var(--r-pill); background: transparent; color: var(--ink-700); font-size: 12px; }
.hp-motion-control:hover { background: white; }
.hp-motion-control:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 3px; }
@media (max-width: 600px) {
 .hp-hero__art { max-width: 250px; margin-block: 24px; }
 .hp-hero__piece { border-radius: 0; }
 .hp-motion-control { margin-left: 0; }
}
body:not(.motion-enabled) .hp-hero__piece, body:not(.motion-enabled) .hp-hero__piece img, body:not(.motion-enabled) .motion-reveal { animation: none !important; transition: none !important; transform: none !important; translate: none !important; rotate: none !important; opacity: 1 !important; }
body:not(.motion-enabled) .brand-card-art { transform: none !important; transition: none !important; }
.fx-no-motion .hp-hero__piece, .fx-no-motion .hp-hero__piece img, .fx-no-motion .motion-reveal { animation: none !important; transition: none !important; transform: none !important; translate: none !important; opacity: 1 !important; }
/* Transparent vector symbols now move independently from their card backgrounds. */
.motion-enabled .brand-card-art { animation: card-symbol-float 5s ease-in-out infinite; animation-play-state: paused; }
.motion-enabled .brand-card-art.motion-visible { animation-play-state: running; }
.hp-work-card:nth-child(2n) .brand-card-art, .hp-service:nth-child(2n) .brand-card-art { animation-duration: 6s; animation-delay: -2s; }
.hp-work-card:nth-child(3n) .brand-card-art, .hp-service:nth-child(3n) .brand-card-art { animation-delay: -3s; }
@keyframes card-symbol-float { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -10px; } }
body:not(.motion-enabled) .brand-card-art { animation: none !important; translate: none !important; }
@media (max-width: 600px) { .hp-motion-control { display: flex; width: max-content; margin: 18px 0 0; } }
/* The fast draw sequence takes precedence over the earlier orbit loop. */
.hp-hero__piece .sq--trace { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; max-width: none; overflow: visible; }
.motion-enabled .hp-hero__piece { animation: none; transform: none; }
/* Home CTA: yellow first at its existing lower-left anchor, then magenta at top-right. */
.gbg-cta--trace-pair { min-height: 620px !important; }
.gbg-cta__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gbg-cta__yellow { position: absolute; left: 14%; bottom: -6%; width: clamp(280px, 32vw, 450px); transform: rotate(8deg); }
.gbg-cta__magenta { position: absolute; right: 3%; top: -12%; width: clamp(240px, 29vw, 400px); transform: rotate(8deg); }
.gbg-cta__yellow .sq--trace, .gbg-cta__magenta .sq--trace { width: 100%; display: block; }
.gbg-cta__magenta .sq--trace { translate: calc(40px * (1 - var(--trace-entry, 0))) calc(-48px * (1 - var(--trace-entry, 0))); }
.gbg-cta--trace-pair .gbg-cta__inner { max-width: 620px; margin-left: 13%; padding: 72px 24px; }
.gbg-cta--trace-pair .gbg-cta__title { font-size: clamp(2.5rem, 5vw, 4.8rem); }
@media (max-width: 960px) {
 .gbg-cta__yellow { left: 3%; width: 270px; bottom: -10%; }
 .gbg-cta__magenta { right: -3%; width: 245px; top: -12%; }
 .gbg-cta--trace-pair .gbg-cta__inner { margin-left: 0; max-width: 540px; }
}
@media (max-width: 600px) {
 .gbg-cta--trace-pair { min-height: 650px !important; }
 .gbg-cta__yellow { left: -9%; width: 220px; bottom: -5%; }
 .gbg-cta__magenta { right: -10%; top: -7%; width: 185px; }
 .gbg-cta--trace-pair .gbg-cta__inner { padding: 100px 8px 140px; }
 .gbg-cta--trace-pair .gbg-cta__subtitle { font-size: 17px; }
}
body:not(.motion-enabled) .gbg-cta__magenta .sq--trace { translate: none; }
/* Full-size artwork kept inside the CTA, with room reserved for the message. */
.gbg-cta--trace-pair { min-height: 820px !important; }
.gbg-cta__yellow { left: 1.5%; bottom: 32px; width: min(32vw, 520px); transform: none; }
.gbg-cta__magenta { right: 1.5%; top: 72px; width: min(30vw, 480px); transform: none; }
.gbg-cta--trace-pair .gbg-cta__inner { max-width: min(36vw, 520px); margin-left: 0; padding: 48px 24px; }
.gbg-cta--trace-pair .gbg-cta__title { font-size: clamp(2.5rem, 4.2vw, 4.5rem); }
@media (max-width: 960px) {
 .gbg-cta--trace-pair { min-height: 1100px !important; align-items: flex-start; }
 .gbg-cta--trace-pair .gbg-cta__inner { max-width: 640px; padding: 32px 24px; }
 .gbg-cta__yellow { left: 3%; bottom: 32px; width: 46%; }
 .gbg-cta__magenta { right: 3%; top: auto; bottom: 96px; width: 42%; }
 .gbg-cta__magenta .sq--trace { translate: calc(12px * (1 - var(--trace-entry, 0))) calc(-32px * (1 - var(--trace-entry, 0))); }
}
@media (max-width: 600px) {
 .gbg-cta--trace-pair { min-height: 1100px !important; }
 .gbg-cta--trace-pair .gbg-cta__inner { max-width: 100%; padding: 32px 8px 0; }
 .gbg-cta__yellow { left: 4%; bottom: 30px; width: 66%; }
 .gbg-cta__magenta { right: 4%; bottom: auto; top: 530px; width: 60%; }
 .gbg-cta__magenta .sq--trace { translate: calc(8px * (1 - var(--trace-entry, 0))) calc(-24px * (1 - var(--trace-entry, 0))); }
}
@media (min-width: 961px) { .gbg-cta__magenta { right: max(1.5%, 48px); } }
/* Mobile CTA: the drawing sits behind the message instead of below it. */
@media (max-width: 600px) {
 .gbg-cta--trace-pair { min-height: 660px !important; padding: 48px 20px; align-items: center; isolation: isolate; }
 .gbg-cta--trace-pair .gbg-cta__art { z-index: 0; }
 .gbg-cta__yellow { left: 4%; bottom: 28px; width: 86%; }
 .gbg-cta__magenta { right: 5%; top: 30px; bottom: auto; width: 78%; }
 .gbg-cta--trace-pair .gbg-cta__inner { z-index: 1; max-width: 100%; padding: 28px 12px; gap: 22px; background: rgb(102 0 255 / 84%); border-radius: 20px; }
 .gbg-cta--trace-pair .gbg-cta__title { font-size: clamp(2rem, 9vw, 2.75rem); }
 .gbg-cta--trace-pair .gbg-cta__subtitle { font-size: 17px; opacity: 1 !important; }
 .gbg-cta--trace-pair .gbg-cta__actions { width: 100%; gap: 12px; }
 .gbg-cta--trace-pair .gbg-cta__btn { width: 100%; justify-content: center; padding: 16px 18px; }
 .gbg-cta__magenta .sq--trace { translate: calc(4px * (1 - var(--trace-entry, 0))) calc(-16px * (1 - var(--trace-entry, 0))); }
}
@media (max-width: 600px) {
 .gbg-cta--trace-pair .gbg-cta__inner { background: transparent; isolation: isolate; }
 .gbg-cta--trace-pair .gbg-cta__inner::before { content: ''; position: absolute; inset: -24px -20px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, rgb(102 0 255 / 84%) 12%, rgb(102 0 255 / 84%) 88%, transparent); }
}
/* Keep the two drawings separate while exposing more of their original colors. */
@media (max-width: 600px) {
 .gbg-cta--trace-pair { min-height: 740px !important; }
 .gbg-cta__yellow { left: 4%; bottom: 24px; width: min(76%, 320px); }
 .gbg-cta__magenta { right: 5%; top: 24px; bottom: auto; width: min(64%, 270px); }
 .gbg-cta--trace-pair .gbg-cta__inner::before { background: linear-gradient(to bottom, transparent, rgb(102 0 255 / 72%) 12%, rgb(102 0 255 / 72%) 88%, transparent); }
}