/* Services hero: a quiet title over the shared sky (css/medusa-cosmos.css), with a faint arc. */

/* Hero */
.medusa-services-hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; place-items: center; min-height: max(68rem, 92svh);
  padding: 15rem 3.2rem 10rem; text-align: center; color: #e0e5ef;
}
/* The barely visible rim of a distant world, over a faint violet glow. */
.medusa-services-hero__arc {
  position: absolute; z-index: -1; left: 50%; top: 16%;
  width: min(1500px, 120vw); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid #c9bdf21f; box-shadow: 0 -2px 24px #9d8cf014, inset 0 2px 30px #9d8cf00d;
  mask-image: radial-gradient(ellipse 60% 30% at 50% 0%, #000 30%, transparent 75%);
}
.medusa-services-hero__arc::before { content: ''; position: absolute; inset: 8% 22% 58%; border-radius: 50%; background: radial-gradient(ellipse, #7657f02e, #3d345814 50%, transparent 72%); filter: blur(30px); }
.medusa-services-hero__content { position: relative; max-width: 1400px; }
.medusa-services-hero h1 { margin: 0; font: 400 clamp(46px, 7vw, 132px)/.98 var(--_font-default); letter-spacing: -.055em; color: #e0e5ef; }
.medusa-services-hero h1 span { display: block; }
.medusa-services-hero h1 span:first-child { font-weight: 300; color: #c9d2e2; }
.medusa-services-hero h1 span:last-child { font-weight: 500; background: linear-gradient(180deg, #f4f5fa 30%, #b9acdf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.medusa-services-hero p { max-width: 640px; margin: clamp(28px, 3vw, 44px) auto 0; font: 300 clamp(15px, 1.2vw, 19px)/1.55 var(--_font-default); letter-spacing: -.01em; color: #afb9cc; }

@media (prefers-reduced-motion: no-preference) {
  .medusa-services-hero__arc { animation: medusa-arc-in 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .medusa-services-hero__content { animation: medusa-hero-in 1.4s .2s ease both; }
  @keyframes medusa-arc-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translateX(-50%); } }
  @keyframes medusa-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 767px) {
  .medusa-services-hero { padding: 13rem 2.2rem 8rem; min-height: 60rem; }
  .medusa-services-hero__arc { width: 170vw; top: 22%; }
}