/* Ambient illustration motion. Content and controls never follow scroll. */
.hero-art .art-heading{align-items:center;top:16px;z-index:6;min-height:32px}
.hero-art .art-seal{top:64px}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:111px;min-height:32px;padding:6px 10px;background:#f6f5f0d9;border:1px solid #c8cdbc;border-radius:20px;color:#56624a;font:500 10px/1.5 var(--font);letter-spacing:0;white-space:nowrap}
.motion-toggle:hover{background:#fff;border-color:#929f82}
.motion-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.motion-toggle:disabled{opacity:.75;cursor:default}
.motion-toggle svg{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.motion-play-icon{display:none}
.motion-toggle[aria-pressed=true] .motion-pause-icon{display:none}
.motion-toggle[aria-pressed=true] .motion-play-icon{display:block}

@media(prefers-reduced-motion:no-preference){
  html[data-rala-motion] .hero-art::before,html[data-rala-motion] .hero-art::after{content:'';position:absolute;z-index:-1;width:280px;height:280px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#c8d3ae80,transparent 70%)}
  html[data-rala-motion] .hero-art::before{left:-100px;top:70px;animation:rala-halo 18s ease-in-out -4s infinite}
  html[data-rala-motion] .hero-art::after{right:-100px;bottom:-90px;background:radial-gradient(circle,#e8c9aa66,transparent 70%);animation:rala-halo 22s ease-in-out -12s infinite reverse}
  html[data-rala-motion] .art-grid{inset:-38px;animation:rala-grid-drift 28s ease-in-out infinite}
  html[data-rala-motion] .note-strategy{animation:rala-strategy-float 8s ease-in-out -2s infinite}
  html[data-rala-motion] .art-sheet{animation:rala-sheet-float 10s ease-in-out -5s infinite}
  html[data-rala-motion] .note-connect{animation:rala-connect-float 9s ease-in-out -4s infinite}
  html[data-rala-motion] .art-seal{animation:rala-seal-float 7s ease-in-out -1s infinite}
  html[data-rala-motion] .art-seal b{animation:rala-turn 30s linear infinite}
  html[data-rala-motion] .window-orbit{animation:rala-orbit 12s ease-in-out -3s infinite}
  html[data-rala-motion] .connect-dots i{animation:rala-dot-wave 3.6s ease-in-out infinite}
  html[data-rala-motion] .connect-dots i:nth-child(2){animation-delay:-3.3s}
  html[data-rala-motion] .connect-dots i:nth-child(3){animation-delay:-3s}
  html[data-rala-motion] .connect-dots i:nth-child(4){animation-delay:-2.7s}
  html[data-rala-motion] .connect-dots i:nth-child(5){animation-delay:-2.4s}
  html[data-rala-motion] .mini-asterisk,html[data-rala-motion] .service-strip b{display:inline-block;animation:rala-turn 40s linear infinite}
  html[data-rala-motion] .service-strip b:nth-of-type(2){animation-direction:reverse}
  html[data-rala-motion] .journal-page{animation:rala-journal-float 9s ease-in-out -3s infinite}
  html[data-rala-motion] .preview-tag{animation:rala-tag-float 7s ease-in-out -1s infinite}
  html[data-rala-motion] .design-window{animation:rala-design-float 10s ease-in-out -6s infinite}
  html[data-rala-motion] .design-star{display:inline-block;animation:rala-turn 32s linear infinite reverse}
  html[data-rala-motion] .editorial-sheet{animation:rala-editorial-float 11s ease-in-out -4s infinite}
  html[data-rala-motion] .editorial-tag{animation:rala-design-float 8s ease-in-out -5s infinite}
  html[data-rala-motion] .contact-star{animation:rala-turn 60s linear infinite}

  html[data-rala-motion=paused] :is(.art-grid,.note-strategy,.art-sheet,.note-connect,.art-seal,.art-seal b,.window-orbit,.connect-dots i,.mini-asterisk,.service-strip b,.journal-page,.preview-tag,.design-window,.design-star,.editorial-sheet,.editorial-tag,.contact-star),
  html[data-rala-motion=paused] .hero-art::before,html[data-rala-motion=paused] .hero-art::after{animation-play-state:paused}
}

@keyframes rala-strategy-float{0%,100%{transform:translate3d(0,0,0) rotate(-9deg)}50%{transform:translate3d(4px,-10px,0) rotate(-6.5deg)}}
@keyframes rala-sheet-float{0%,100%{transform:translate3d(0,0,0) rotate(9deg)}50%{transform:translate3d(-4px,9px,0) rotate(6.5deg)}}
@keyframes rala-connect-float{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(6px,-7px,0) rotate(-3.5deg)}}
@keyframes rala-seal-float{0%,100%{transform:translate3d(0,0,0) rotate(13deg)}50%{transform:translate3d(-3px,6px,0) rotate(8deg)}}
@keyframes rala-grid-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(15px,12px,0)}}
@keyframes rala-halo{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(32px,-24px,0) scale(1.15)}}
@keyframes rala-orbit{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8px,8px,0) scale(.91)}}
@keyframes rala-dot-wave{0%,35%,100%{transform:translateY(0);opacity:.55}17%{transform:translateY(-4px);opacity:1}}
@keyframes rala-turn{to{transform:rotate(360deg)}}
@keyframes rala-journal-float{0%,100%{transform:translateY(2px) rotate(-4deg)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes rala-tag-float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes rala-design-float{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@keyframes rala-editorial-float{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(-1deg)}}

@media(max-width:600px){
  .hero-art .art-heading{left:18px;right:18px;top:12px;font-size:8px}
  .hero-art .art-seal{top:58px}
  .motion-toggle{min-width:103px;min-height:32px;padding:6px 9px;font-size:9px}
  /* Smaller excursions keep the compact composition inside its frame. */
  @keyframes rala-strategy-float{0%,100%{transform:translate3d(0,0,0) rotate(-9deg)}50%{transform:translate3d(2px,-6px,0) rotate(-7.5deg)}}
  @keyframes rala-sheet-float{0%,100%{transform:translate3d(0,0,0) rotate(9deg)}50%{transform:translate3d(-2px,5px,0) rotate(7.5deg)}}
  @keyframes rala-connect-float{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(3px,-4px,0) rotate(-4.5deg)}}
}