/* Aurora backgrounds for the service heroes (adapted from two 21st.dev aurora components).
   Dark hero: slow drifting purple light with a few faint stars. Light hero: pale lilac aurora streaks from the top right.
   Pure CSS, slow, held still for reduced motion. */
main .adh-inner,main .bsh2-inner{position:relative;z-index:1}
main .aur{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* dark: the same aurora streaks as the light hero, on deep purple (lilac light through dark bands) */
main .aur--dark{background:radial-gradient(80% 70% at 50% 0%,#24104a 0%,#140a29 55%,#0b0616 100%)}
main .aur--dark i{position:absolute;inset:-10px -10px 12% 12%;opacity:.5;filter:blur(10px);will-change:transform;
  --w:repeating-linear-gradient(100deg,#0b0616 0%,#0b0616 7%,transparent 10%,transparent 12%,#0b0616 16%);
  --a:repeating-linear-gradient(100deg,#7c3aed 10%,#c4b5fd 15%,#8b5cf6 20%,#e9d5ff 25%,#6d28d9 30%);
  background-image:var(--w),var(--a);background-size:300%,200%;background-position:50% 50%,50% 50%;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 8%,transparent 62%);mask-image:radial-gradient(ellipse at 100% 0%,#000 8%,transparent 62%)}
main .aur--dark i::after{content:"";position:absolute;inset:0;background-image:var(--w),var(--a);background-size:200%,100%;mix-blend-mode:lighten;opacity:.85;animation:aur-light 60s linear infinite}
main .aur--dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,transparent,#0b0616)}

/* light: lilac aurora streaks masked into the top right, drifting sideways over 60s */
main .aur--light{background:#fff}
.aur--light i{position:absolute;inset:-10px -10px 15% 15%;opacity:.36;filter:blur(10px) invert(1);will-change:transform;
  --w:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  --a:repeating-linear-gradient(100deg,#7c3aed 10%,#c4b5fd 15%,#8b5cf6 20%,#ddd6fe 25%,#6d28d9 30%);
  background-image:var(--w),var(--a);background-size:300%,200%;background-position:50% 50%,50% 50%;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 8%,transparent 58%);mask-image:radial-gradient(ellipse at 100% 0%,#000 8%,transparent 58%)}
.aur--light i::after{content:"";position:absolute;inset:0;background-image:var(--w),var(--a);background-size:200%,100%;mix-blend-mode:difference;animation:aur-light 60s linear infinite}
main .aur--light::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,#fff)}
@keyframes aur-light{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}

/* homepage: the light streaks laid over the existing lavender hero, no fill of its own */
.aur--home{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aur--home.aur--light{background:none}
.aur--home.aur--light::after{display:none}
.aur--home.aur--light i{opacity:.3}

/* Google mark next to the rating */
main .adh-rating svg,main .bsh2-rating svg{width:18px;height:18px;flex:none;margin:0 2px 0 -4px;vertical-align:middle}
main .adh-rating svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}

/* only animate while the hero is on screen (assets/hero-aurora.js toggles .aur-paused) */
.aur-paused i::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.aur i::after{animation:none!important}}

/* homepage hero fills the screen on first load */
.apc-hero--centered{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.apc-hero--centered>.apc-hero-grid{width:100%}