/* Shared future-road art direction for Rólunk, Szolgáltatások, Projektek and Kapcsolat. */
:root{--future-art:url('assets/goodworker-future-ribbon.webp')}

.about-body .directions{
  background-image:
    linear-gradient(180deg,rgba(2,10,22,.5),rgba(2,12,27,.9) 28%,#02101df2 72%,#02101d),
    var(--future-art);
  background-size:auto,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
}
.about-body .direction-heading{
  background:linear-gradient(120deg,rgba(3,16,26,.82),rgba(2,21,41,.65));
  backdrop-filter:blur(3px);
}
.about-body .method{
  background-image:
    linear-gradient(105deg,#03101af5 0%,rgba(2,22,41,.78) 48%,#021426ed 100%),
    var(--future-art);
  background-size:auto,cover;
  background-position:center,center 64%;
  background-repeat:no-repeat;
}
.about-body .method-steps li{background:linear-gradient(120deg,rgba(3,17,30,.92),rgba(5,24,46,.82));backdrop-filter:blur(12px)}
.about-body .contact{
  background-image:
    linear-gradient(90deg,#020b19f5 0%,rgba(3,15,34,.78) 46%,rgba(2,10,24,.35) 78%,rgba(2,9,20,.55) 100%),
    var(--future-art);
  background-position:center,center;
  background-size:auto,cover;
  background-repeat:no-repeat;
}
.about-body .story-dialog{
  background-image:
    linear-gradient(135deg,rgba(3,14,31,.97),rgba(6,27,52,.9)),
    var(--future-art);
  background-position:center,center;
  background-size:auto,cover;
}

.studio-body .services-opening{
  position:relative;
  isolation:isolate;
  min-height:min(570px,62svh);
  display:flex;
  align-items:flex-end;
  padding-bottom:64px;
  background-image:
    linear-gradient(90deg,#020a18ed 0%,rgba(3,15,34,.7) 49%,rgba(2,9,21,.2) 83%),
    linear-gradient(0deg,#040b1c 0%,transparent 35%),
    var(--future-art);
  background-size:auto,auto,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
.studio-body .services-opening .container{width:90%;text-shadow:0 3px 24px #000}
.studio-body .services-opening p:not(.small-label){color:#d4e2f6;max-width:660px}
.studio-body #services{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(180deg,#040b1cf0,rgba(4,11,28,.82) 14%,rgba(3,13,31,.9) 86%,#040b1c),
    var(--future-art);
  background-size:auto,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
  background-attachment:scroll,fixed;
}
.studio-body .service-scene{background:linear-gradient(110deg,rgba(4,11,28,.4),rgba(5,18,39,.18))}
.studio-body .service-art{background:linear-gradient(150deg,rgba(19,37,64,.92),rgba(5,12,24,.94));backdrop-filter:blur(14px)}
.studio-body .studio-method{
  background-image:
    linear-gradient(110deg,rgba(4,12,28,.96),rgba(7,25,52,.82)),
    var(--future-art);
  background-size:auto,cover;
  background-position:center,center 66%;
}
.studio-body .studio-contact{
  position:relative;
  overflow:hidden;
  background-image:
    radial-gradient(ellipse at 50% 105%,rgba(31,91,193,.55),transparent 60%),
    linear-gradient(180deg,#030b1aed,rgba(3,13,31,.72)),
    var(--future-art);
  background-size:auto,auto,cover;
  background-position:center,center,center 58%;
  background-repeat:no-repeat;
}
.studio-body .studio-contact .container{position:relative;text-shadow:0 3px 24px #000}

@media (max-width:700px){
  .about-body .directions,.about-body .method,.about-body .contact,
  .studio-body .services-opening,.studio-body #services,.studio-body .studio-method,.studio-body .studio-contact{
    background-attachment:scroll;
  }
  .about-body .contact{background-position:center,66% center;background-size:auto,auto 100%}
  .studio-body .services-opening{min-height:520px;padding:54px 0 42px;background-position:center,center,67% center}
  .studio-body .services-opening .container{width:100%}
  .studio-body #services{background-position:center,68% top}
  .studio-body .studio-contact{background-position:center,center,70% center}
}

@media (prefers-reduced-transparency:reduce){
  .about-body .direction-heading,.about-body .method-steps li,.studio-body .service-art{backdrop-filter:none}
}