/* Services hero: keep the approved typography and bring the brand art into view. */
.services-hero{
  min-height:max(840px,100svh);
  padding-top:calc(var(--header) + 48px);
  padding-bottom:64px;
  background:
    radial-gradient(ellipse 42% 48% at 76% 43%,#fffdf9 0%,#fbf9f2 48%,transparent 100%),
    #f9f7f1;
}
.services-hero .inner-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
  align-items:center;
  gap:clamp(12px,2vw,40px);
}
.services-hero .inner-hero-copy{max-width:900px}
.services-hero .inner-title{font-size:clamp(92px,11.25vw,208px);line-height:.81;max-width:7.8ch}
.services-hero .inner-hero-copy .inner-lead{font-size:clamp(22px,2.15vw,35px);line-height:1.2;letter-spacing:-.035em;max-width:690px;margin:30px 0 29px}
.services-hero .inner-hero-art{
  width:100%;height:clamp(470px,42vw,660px);min-height:0;
  position:relative;isolation:isolate;perspective:900px;
  background:radial-gradient(ellipse 53% 45% at 50% 51%,#fffefa 0%,#fffefa99 40%,transparent 100%);
}
.services-hero .inner-hero-art:before,.services-hero .inner-hero-art:after{
  content:"";position:absolute;pointer-events:none;border:1px solid #bfc5a52e;border-radius:50%;z-index:0;
}
.services-hero .inner-hero-art:before{
  inset:14% 7%;transform:rotate(-26deg) rotateX(32deg);
  animation:services-orbit-a 30s linear infinite;
}
.services-hero .inner-hero-art:after{
  inset:26% -2%;border-color:#deb7c526;transform:rotate(31deg) rotateX(48deg);
  animation:services-orbit-b 38s linear infinite reverse;
}
.services-hero .inner-hero-e{
  position:relative;z-index:2;width:min(79%,520px);max-width:none;
  filter:drop-shadow(0 28px 24px #c9788730) drop-shadow(0 10px 40px #e6e2a831);
  animation-duration:12s;
}
.services-hero .service-cloud{position:absolute;inset:0;z-index:3;overflow:visible;pointer-events:none}
.services-hero .service-cloud span{
  left:var(--x);top:var(--y);padding:12px 17px;white-space:nowrap;
  font-size:clamp(11px,.77vw,14px);line-height:1.1;
  border-color:#d2d5caac;box-shadow:0 13px 30px #746e5924,0 2px 6px #746e590b;
  transform:rotate(var(--r));animation:services-chip-float var(--d) ease-in-out infinite alternate;
  animation-delay:calc(var(--d) * -.4);
}
.services-hero .service-cloud span:nth-child(3n){border-color:var(--pink)}
@keyframes services-orbit-a{to{transform:rotate(334deg) rotateX(32deg)}}
@keyframes services-orbit-b{to{transform:rotate(391deg) rotateX(48deg)}}
@keyframes services-chip-float{to{transform:translate3d(10px,-13px,0) rotate(calc(var(--r) + 3deg))}}
@media(max-width:1100px){
  .services-hero .inner-wrap{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr)}
  .services-hero .inner-title{font-size:clamp(90px,11.5vw,150px)}
  .services-hero .inner-hero-art{height:clamp(390px,47vw,520px)}
}
@media(max-width:900px){
  .services-hero{padding-top:calc(var(--header) + 55px)}
  .services-hero .inner-wrap{grid-template-columns:1fr;gap:24px}
  .services-hero .inner-title{font-size:clamp(94px,14vw,155px)}
  .services-hero .inner-hero-art{width:min(100%,680px);height:clamp(420px,67vw,590px);margin:0 auto}
}
@media(max-width:600px){
  .services-hero{min-height:0;padding:calc(var(--header) + 24px) 18px 72px}
  .services-hero .inner-wrap{display:block}
  .services-hero .inner-hero-copy{overflow:visible}
  .services-hero .inner-title{font-size:clamp(68px,15vw,95px);line-height:.87}
  .services-hero .inner-hero-copy .inner-lead{font-size:21px;line-height:1.26;margin:26px 0 22px;max-width:420px}
  .services-hero .inner-hero-art{height:min(100vw,420px);min-height:330px;margin-top:35px}
  .services-hero .inner-hero-e{width:76%}
  .services-hero .service-cloud span{font-size:10px;padding:9px 10px}
  .services-hero .service-cloud span:nth-child(4),
  .services-hero .service-cloud span:nth-child(6),
  .services-hero .service-cloud span:nth-child(7),
  .services-hero .service-cloud span:nth-child(8){display:none}
  .services-hero .service-cloud span:nth-child(1){left:1%;top:36%}
  .services-hero .service-cloud span:nth-child(2){left:53%;top:12%}
  .services-hero .service-cloud span:nth-child(3){left:50%;top:77%}
  .services-hero .service-cloud span:nth-child(5){display:block;left:9%;top:5%}
}
@media(prefers-reduced-motion:reduce){
  .services-hero .inner-hero-art:before,.services-hero .inner-hero-art:after,
  .services-hero .inner-hero-e,.services-hero .service-cloud span{animation:none!important}
}